add bluesky and fediverse to social navbar

3 files changed, 113 insertions, 75 deletions

diff --git a/public/Bluesky_Logo.svg b/public/Bluesky_Logo.svg
new file mode 100644
index 0000000..b60d51c
--- /dev/null
+++ b/public/Bluesky_Logo.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#1185fe"/>
+</svg>
\ No newline at end of file
diff --git a/public/fediverse.svg b/public/fediverse.svg
new file mode 100644
index 0000000..5f04313
--- /dev/null
+++ b/public/fediverse.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="196.52mm" height="196.52mm" viewBox="0 0 196.52 196.52">
+	<path fill="#a730b8" d="M47.9242 72.7966a18.2278 18.2278 0 0 1-7.7959 7.7597l42.7984 42.9653 10.3182-5.2291zm56.4524 56.6704-10.3182 5.2291 21.686 21.7708a18.2278 18.2278 0 0 1 7.7975-7.7608z"/>
+	<path fill="#5496be" d="M129.6645 102.0765l1.7865 11.4272 27.4149-13.8942a18.2278 18.2278 0 0 1-4.9719-9.8124zm-14.0658 7.1282-57.2891 29.0339a18.2278 18.2278 0 0 1 4.9728 9.8133l54.1027-27.4194z"/>
+	<path fill="#ce3d1a" d="M69.5312 91.6539l8.1618 8.1933 29.269-57.1387a18.2278 18.2278 0 0 1-9.787-5.0219zm-7.1897 14.0363-14.0022 27.3353a18.2278 18.2278 0 0 1 9.786 5.0214l12.3775-24.1639z"/>
+	<path fill="#d0188f" d="M39.8906 80.6763a18.2278 18.2278 0 0 1-10.8655 1.7198l8.1762 52.2981a18.2278 18.2278 0 0 1 10.8645-1.7198z"/>
+	<path fill="#5b36e9" d="M63.3259 148.3109a18.2278 18.2278 0 0 1-1.7322 10.8629l52.2893 8.3907a18.2278 18.2278 0 0 1 1.7322-10.8629z"/>
+	<path fill="#30b873" d="M134.9148 146.9182a18.2278 18.2278 0 0 1 9.788 5.0224l24.1345-47.117a18.2278 18.2278 0 0 1-9.7875-5.0229z"/>
+	<path fill="#ebe305" d="M126.1329 33.1603a18.2278 18.2278 0 0 1-7.7975 7.7608l37.3765 37.5207a18.2278 18.2278 0 0 1 7.7969-7.7608z"/>
+	<path fill="#f47601" d="M44.7704 51.6279a18.2278 18.2278 0 0 1 4.9723 9.8123l47.2478-23.9453a18.2278 18.2278 0 0 1-4.9718-9.8113z"/>
+	<path fill="#57c115" d="M118.2491 40.9645a18.2278 18.2278 0 0 1-10.8511 1.8123l4.1853 26.8 11.42 1.8324zm-4.2333 44.1927 9.8955 63.3631a18.2278 18.2278 0 0 1 10.88-1.6278l-9.355-59.9035z"/>
+	<path fill="#dbb210" d="M49.7763 61.6412a18.2278 18.2278 0 0 1-1.694 10.8686l26.8206 4.3077 5.2715-10.2945zm45.9677 7.382-5.272 10.2955 63.3713 10.1777a18.2278 18.2278 0 0 1 1.7606-10.8593z"/>
+	<path fill="#ffca00" d="M93.4385 23.8419a1 1 0 1 0 33.0924 1.8025 1 1 0 1 0-33.0924-1.8025"/>
+	<path fill="#64ff00" d="M155.314 85.957a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
+	<path fill="#00a3ff" d="M115.3466 163.9824a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
+	<path fill="#9500ff" d="M28.7698 150.0898a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
+	<path fill="#ff0000" d="M15.2298 63.4781a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/SocialNavbar.astro b/src/components/SocialNavbar.astro
index 3ad89a5..5fb9045 100644
--- a/src/components/SocialNavbar.astro
+++ b/src/components/SocialNavbar.astro
@@ -3,86 +3,103 @@ import "@fortawesome/fontawesome-free/css/all.min.css";
 ---
 
 <style>
-  .dark-social-navbar-wrapper {
-    display: flex;
-    margin-top: 5px;
-    justify-content: center;
-  }
+    .dark-social-navbar-wrapper {
+        display: flex;
+        margin-top: 5px;
+        justify-content: center;
+    }
 
-  .dark-social-navbar {
-    display: flex;
-    gap: 15px;
-    padding: 10px 20px;
-    border-radius: 8px;
-  }
+    .dark-social-navbar {
+        display: flex;
+        gap: 15px;
+        padding: 10px 20px;
+        border-radius: 8px;
+    }
 
-  .dark-social-icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: #3a3f4b;
-    color: #fff;
-    text-decoration: none;
-    transition:
-      background-color 0.3s ease,
-      transform 0.3s ease;
-  }
+    .dark-social-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #3a3f4b;
+        color: #fff;
+        text-decoration: none;
+        transition:
+            background-color 0.3s ease,
+            transform 0.3s ease;
+    }
 
-  .dark-social-icon:hover::before {
-  content: attr(title);
-  background-color: #333;
-  color: #fff;
-  padding: 4px 8px;
-  border-radius: 4px;
-  position: absolute;
-  bottom: 120%;
-  left: 50%;
-  transform: translateX(-50%);
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-  .dark-social-icon:hover::before {
-    opacity: 1;
-  }
+    .dark-social-icon:hover::before {
+        content: attr(title);
+        background-color: #333;
+        color: #fff;
+        padding: 4px 8px;
+        border-radius: 4px;
+        position: absolute;
+        bottom: 120%;
+        left: 50%;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    .dark-social-icon:hover::before {
+        opacity: 1;
+    }
 
-  .dark-social-icon:hover {
-    background-color: #4a4f5b;
-    transform: scale(1.1);
-  }
+    .dark-social-icon:hover {
+        background-color: #4a4f5b;
+        transform: scale(1.1);
+    }
 </style>
 
 <div class="dark-social-navbar-wrapper">
-  <div class="dark-social-navbar">
-    <a
-      href="https://github.com/pinapelz"
-      class="dark-social-icon"
-      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://blog.pinapelz.com" class="dark-social-icon" title="Blog"
-      ><i class="fa fa-book"></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://pinapelz.moe" 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
-      >
-  </div>
+    <div class="dark-social-navbar">
+        <a
+            href="https://github.com/pinapelz"
+            class="dark-social-icon"
+            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://bsky.app/profile/pinapelz.moekyun.me"
+            class="dark-social-icon"
+            title="Bluesky"><img src="Bluesky_Logo.svg" width="60%" /></a
+        >
+        <a
+            href="https://mk.arks.cafe/@pinapelz"
+            class="dark-social-icon"
+            title="Fediverse (Misskey)"
+            ><img src="fediverse.svg" width="75%" /></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"
+            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
+        >
+    </div>
 </div>