1 files changed, 59 insertions, 22 deletions
diff --git a/src/components/SocialNavbar.astro b/src/components/SocialNavbar.astro
index 1ad096f..eb29853 100644
--- a/src/components/SocialNavbar.astro
+++ b/src/components/SocialNavbar.astro
@@ -5,18 +5,36 @@ import "@fortawesome/fontawesome-free/css/all.min.css";
 <style>
     .dark-social-navbar-wrapper {
         display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
         margin-top: 5px;
-        justify-content: center;
     }
 
     .dark-social-navbar {
         display: flex;
         gap: 15px;
-        padding: 10px 20px;
+        padding: 6px 20px;
         border-radius: 8px;
     }
 
+    .contact-section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .contact-label {
+        font-size: 0.85rem;
+        font-weight: 500;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #ffffff80;
+    }
+
     .dark-social-icon {
+        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -44,6 +62,8 @@ import "@fortawesome/fontawesome-free/css/all.min.css";
         white-space: nowrap;
         opacity: 0;
         transition: opacity 0.3s ease;
+        pointer-events: none;
+        z-index: 10;
     }
     .dark-social-icon:hover::before {
         opacity: 1;
@@ -63,32 +83,49 @@ import "@fortawesome/fontawesome-free/css/all.min.css";
             title="GitHub"><i class="fab fa-github"></i></a
         >
         <a
-            href="https://twitter.com/pinapelz"
-            class="dark-social-icon"
-            title="Twitter/X"><i class="fab fa-x-twitter"></i></a
-        >
-        <a
-            href="https://discord.com/users/246787839570739211"
-            title="Discord"
-            class="dark-social-icon"><i class="fab fa-discord"></i></a
-        >
-        <a
-            href="mailto:yukais@pinapelz.com"
-            class="dark-social-icon"
-            title="Email"><i class="fa fa-envelope"></i></a
-        >
-        <a
             href="https://blog.pinapelz.com"
             class="dark-social-icon"
             title="Blog"><i class="fa fa-book"></i></a
         >
         <a
-            href="https://pinapelz.moe"
+            href="https://www.linkedin.com/in/yukais/"
             class="dark-social-icon"
-            title="pinapelz.moe"><i class="fa fa-globe"></i></a
-        >
-        <a href="/Yukai_Shan.asc" class="dark-social-icon" title="PGP"
-            ><i class="fa fa-key"></i></a
+            title="LinkedIn"><i class="fa-brands fa-linkedin"></i></a
         >
     </div>
+    <div class="contact-section">
+        <span class="contact-label">Contact</span>
+        <div class="dark-social-navbar">
+            <a
+                href="mailto:yukais@pinapelz.com"
+                class="dark-social-icon"
+                title="Email"><i class="fa fa-envelope"></i></a
+            >
+            <a
+                href="https://discord.com/users/246787839570739211"
+                title="Discord"
+                class="dark-social-icon"><i class="fab fa-discord"></i></a
+            >
+            <a
+                href="https://twitter.com/pinapelz"
+                class="dark-social-icon"
+                title="Twitter/X DM"><i class="fab fa-x-twitter"></i></a
+            >
+            <a
+                href="https://matrix.to/#/@pinapelz:chat.moekyun.me"
+                class="dark-social-icon"
+                title="Matrix"><i class="fa-brands fa-matrix"></i></a
+            >
+            <a
+                href="xmpp:pinapelz@xmpp.moekyun.me"
+                class="dark-social-icon"
+                title="XMPP"><i class="fa-brands fa-xmpp"></i></a
+            >
+            <a
+                href="/Yukai_Shan.asc"
+                class="dark-social-icon"
+                title="PGP"><i class="fa fa-key"></i></a
+            >
+        </div>
+    </div>
 </div>