Merge branch 'main' of git.vanten-s.com:vanten-s/vanten-s.com

src/assets/fontAwesome/css/solid.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+.fas,
+.fa-solid {
+  font-weight: 900; }

src/assets/main.css

@@ -1,28 +1,102 @@
 :root {
-    --bg-color: #1e1e2e;
-    --text-color: #cdd6f4;
-    --link-color: #94e2d5;
+    --base: #1e1e2e;
+    --mantle: #181825;
+    --text: #cdd6f4;
+    --link: #94e2d5;
+    --surface: #313244;
+    --pink: #f5c2e7;
 }
 
 body {
     font-family: Hack, monospace;
-    background-color: var(--bg-color);
-    color: var(--text-color);
+    background-color: var(--mantle);
+    color: var(--text);
     padding: 5em;
     margin: 0;
 }
 
-a {
-    color: var(--link-color);
-    text-decoration: underline var(--bg-color) auto;
-    transition: all .5s;
-}
-
-a:hover {
-    text-decoration: underline var(--link-color) auto;
-}
-
 img {
     padding: 1em;
 }
 
+.navbar {
+    /* Positioning */
+    top: 0;
+    margin-top: 0;
+    right: 0;
+    position: fixed;
+
+    /* Size */
+    height: 100vh;
+    width: 5em;
+    padding: 0;
+
+    /* Markers */
+    list-style-type: none;
+
+    background-color: var(--surface);
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+}
+
+.navbar > li {
+    width: 4em;
+    height: 4em;
+    margin: 1em;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--mantle);
+    text-align: center;
+
+    border-radius: 100%;
+    outline: var(--pink) 0.2rem solid;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navbar > li:hover {
+    border-radius: 30%;
+    background-color: var(--link);
+    outline: var(--pink) 0 solid;
+}
+
+.navbar > li:hover > a {
+    color: var(--base);
+}
+
+.navbar > li > a > i {
+    font-size: 2.5em;
+}
+
+.navbar > li > a > .popup {
+    position: absolute;
+    right: 6em;
+    scale: 0;
+    background-color: var(--base);
+    color: var(--link);
+    padding: .5em;
+    white-space: nowrap;
+    font-weight: bold;
+    border-radius: 0.75rem;
+    outline: var(--pink) 0.2rem solid;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navbar > li:hover > a > .popup {
+    scale: 100%;
+}
+
+a {
+    color: var(--link);
+    text-decoration: underline var(--mantle) auto;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+a:hover {
+    text-decoration: underline var(--link) auto;
+}

src/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8"/>
     <title>Homepage</title>
     <link rel="stylesheet" href="assets/main.css">
+    <link rel="stylesheet" href="assets/fontAwesome/css/fontawesome.css">
+    <link rel="stylesheet" href="assets/fontAwesome/css/brands.css">
+    <link rel="stylesheet" href="assets/fontAwesome/css/solid.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
     <link rel="icon" href="/assets/favicon.png">
 </head>
@@ -11,12 +14,44 @@
     <h1>Vanten</h1>
     <p>Software dev, OSS enthusiast, server admin and 13 year old</p>
     <p>Maybe script kiddie idk</p>
-    <h3>Contact</h1>
-    <ul>
-        <li><a href="mailto:vanten-s@vanten-s.com"               >Mail</a>    </li>
-        <li><a rel="me" href="https://kolektiva.social/@vanten_s">Mastodon</a></li>
-        <li><a href="key.asc"                                    >PGP key</a> </li>
-        <li><a href="https://matrix.to/#/@vanten-s:matrix.org"   >Matrix</a>  </li>
+    
+    <ul class="navbar">
+    <li>
+        <a href="mailto:vanten-s@vanten-s.com">
+            <span class="popup">Mail</span>
+            <i class="fa-solid fa-envelope fa"></i>
+        </a>
+    </li>
+    <li>
+        <a rel="me" href="https://kolektiva.social/@vanten_s">
+            <span class="popup">Mastodon</span>
+            <i class="fa-brands fa-mastodon fa"></i>
+        </a>
+    </li>
+    <li>
+        <a href="key.asc">
+            <span class="popup">GPG Key</span>
+            <i class="fa-solid fa-key"></i>
+        </a>
+    </li>
+    <li>
+        <a href="https://matrix.to/#/@vanten-s:matrix.org">
+            <span class="popup">Matrix</span>
+            <i class="fa-solid fa-comment"></i>
+        </a>
+    </li>
+    <li>
+        <a href="https://forgejo.vanten-s.com/vanten-s">
+            <span class="popup">Forgejo</span>
+            <i class="fa-brands fa-git-alt"></i>
+        </a>
+    </li>
+    <li>
+        <a href="rss.xml">
+            <span class="popup">RSS Feed</span>
+            <i class="fa-solid fa-rss"></i>
+        </a>
+    </li>
     </ul>
     
     <h3>Weird computer thingys that I know</h3>