implemented project page with cards

1 files changed, 76 insertions, 37 deletions

diff --git a/src/components/SocialNavbar.astro b/src/components/SocialNavbar.astro
index ed020e4..95aa1a2 100644
--- a/src/components/SocialNavbar.astro
+++ b/src/components/SocialNavbar.astro
@@ -1,46 +1,85 @@
 ---
-import '@fortawesome/fontawesome-free/css/all.min.css';
+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 {
-        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="#" class="dark-social-icon"><i class="fab fa-github"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fab fa-twitter"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fa fa-book"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fab fa-discord"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fa fa-envelope"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fa fa-globe"></i></a>
-    </div>
-</div>
\ No newline at end of file
+  <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"><i class="fab fa-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
+    >
+  </div>
+</div>