From 2d8fa1d7bc234b613eb631f7b6178841f7c43acf Mon Sep 17 00:00:00 2001
From: Kai Moschcau <kai@kmoschcau.de>
Date: Sun, 1 Mar 2026 20:43:27 +0100
Subject: [PATCH] feat: add dark theme, matrix and FA link, fix inline SVG aria
 label

---
 src/components/external-link.astro | 16 +++++++++---
 src/components/inline-svg.astro    | 12 +++++++++
 src/pages/index.astro              | 41 +++++++++++++++++++++---------
 src/styles/global.css              | 14 ++++++++++
 4 files changed, 67 insertions(+), 16 deletions(-)
 create mode 100644 src/components/inline-svg.astro

diff --git a/src/components/external-link.astro b/src/components/external-link.astro
index 82f30d8..01105cf 100644
--- a/src/components/external-link.astro
+++ b/src/components/external-link.astro
@@ -1,12 +1,20 @@
 ---
-const { ariaLabel, cssClass, href } = Astro.props;
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {
+  cssClass: string;
+  href: string;
+  title: string;
+}
+
+const { cssClass, href, title } = Astro.props;
 ---
 
 <a
-  aria-label={ariaLabel}
   class:list={[
     cssClass,
-    "flex min-w-full items-center gap-4 rounded px-6 py-2 text-lg sm:px-24",
+    "flex min-w-full items-center justify-center gap-4 rounded px-6 py-2 text-lg sm:px-24",
   ]}
-  {href}><slot /></a
+  {href}
+  {title}><slot name="logo" /><slot /></a
 >
diff --git a/src/components/inline-svg.astro b/src/components/inline-svg.astro
new file mode 100644
index 0000000..6d22a1c
--- /dev/null
+++ b/src/components/inline-svg.astro
@@ -0,0 +1,12 @@
+---
+import type { SvgComponent } from "astro/types";
+
+interface Props {
+  SvgComponent: SvgComponent;
+  svgSize?: number;
+}
+
+const { SvgComponent, svgSize = 24 } = Astro.props;
+---
+
+<SvgComponent height={svgSize} width={svgSize} role="presentation" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cc330c7..b0df8fa 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import ExternalLink from "../components/external-link.astro";
+import InlineSvg from "../components/inline-svg.astro";
 import avatar from "../images/Icon Alec 150.png";
 import MastodonLogo from "../images/mastodon-logo-white.svg";
 import "../styles/global.css";
@@ -31,24 +32,40 @@ const svgSize = 24;
         />
         <hgroup>
           <h1>f1r3w4rr10r</h1>
-          <p class="text-zinc-600">aka Alec the zebra</p>
+          <p class="text-soft">aka Alec the zebra</p>
         </hgroup>
-        <p class="text-zinc-600">
-          A zebra from Germany – (Web-)dev by day, furry, gamer and game master
-          by night
-        </p>
-        <ul>
+        <section class="text-soft">
+          <p>A zebra from Germany</p>
+          <p>(Web-)dev by day – furry, gamer and game master by night</p>
+        </section>
+        <ul class="flex flex-col gap-2">
+          <li>
+            <ExternalLink
+              cssClass="link-matrix"
+              href="https://matrix.to/#/@f1r3w4rr10r:bark.lgbt"
+              title="My matrix account"
+            >
+              <span>@f1r3w4rr10r:bark.lgbt</span>
+            </ExternalLink>
+          </li>
           <li>
             <ExternalLink
-              ariaLabel="Link to Mastodon"
               cssClass="link-mastodon"
               href="https://bark.lgbt/@f1r3w4rr10r"
-              ><MastodonLogo
-                height={svgSize}
-                width={svgSize}
-                aria-label="Mastodon Logo"
-              /> @f1r3w4rr10r@bark.lgbt</ExternalLink
+              title="My Mastodon account"
             >
+              <InlineSvg SvgComponent={MastodonLogo} slot="logo" />
+              <span>@f1r3w4rr10r@bark.lgbt</span>
+            </ExternalLink>
+          </li>
+          <li>
+            <ExternalLink
+              cssClass="link-fur-affinity"
+              href="https://www.furaffinity.net/user/f1r3w4rr10r/"
+              title="My Fur Affinity account"
+            >
+              <span>f1r3w4rr10r</span>
+            </ExternalLink>
           </li>
         </ul>
       </article>
diff --git a/src/styles/global.css b/src/styles/global.css
index 0b4571c..fefa047 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -7,6 +7,10 @@
 }
 
 @layer base {
+  body {
+    @apply bg-neutral-50 text-black dark:bg-neutral-800 dark:text-white;
+  }
+
   h1 {
     @apply text-5xl font-bold;
   }
@@ -16,4 +20,14 @@
   .link-mastodon {
     @apply bg-mastodon-dark hover:bg-mastodon-dark-hover text-white;
   }
+
+  .link-matrix {
+    @apply bg-black text-white hover:bg-zinc-950;
+  }
+}
+
+@layer utilities {
+  .text-soft {
+    @apply text-zinc-600 dark:text-zinc-400;
+  }
 }