Does this work?

components/SocialLinks.tsx

@@ -4,10 +4,41 @@ import { SiBluesky, SiForgejo, SiRss } from "@preact-icons/si";
 export default function SocialLinks() {
   return (
     <div class="flex flex-row gap-4 text-3xl">
-      <LuMail class="hover:text-primary" />
-      <SiRss class="hover:text-primary" />
-      <SiForgejo class="hover:text-primary" />
-      <SiBluesky class="hover:text-primary" />
+      <a
+        href="mailto:me@atri.dad"
+        aria-label="Email me"
+        class="hover:text-primary transition-colors"
+      >
+        <LuMail />
+      </a>
+
+      <a
+        href="/feed"
+        aria-label="RSS Feed"
+        class="hover:text-primary transition-colors"
+      >
+        <SiRss />
+      </a>
+
+      <a
+        href="https://git.atri.dad/atridad"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Forgejo (Git)"
+        class="hover:text-primary transition-colors"
+      >
+        <SiForgejo />
+      </a>
+
+      <a
+        href="https://bsky.app/profile/atri.dad"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Bluesky Profile"
+        class="hover:text-primary transition-colors"
+      >
+        <SiBluesky />
+      </a>
     </div>
   );
 }