💄 update website design

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

src/components/Footer.astro

@@ -1,7 +1,19 @@
 ---
 const today = new Date();
 ---
+<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
 
-<footer class="flex justify-center py-5 mt-auto footerbg">
-	{today.getFullYear()} &copy; Sindre Kjelsrud.
-</footer>
+<footer class="flex justify-between py-5 mt-5 mt-auto footerbg">
+	<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
+	<div class="social">
+    <a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
+      <iconify-icon icon="ri:github-line" width="30" height="30" />
+    </a>
+    <a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
+				<iconify-icon icon="mdi:spotify" width="30" height="30" />
+		</a>
+  </div>
+</footer>

src/components/Header.astro

@@ -1,18 +1,30 @@
 ---
-import HeaderLink from './HeaderLink.astro';
 import ThemeIcon from './ThemeIcon.astro';
+
+const pathname = new URL(Astro.request.url).pathname;
+const pathSegments = pathname.slice(1).split('/').filter(segment => segment !== '');
+
+function buildHref(index) {
+    if (pathSegments.length === 0) return '/';
+    return ' /' + pathSegments.slice(0, index + 1).join('/');
+}
+
+const isLandingPage = pathSegments.length === 0;
 ---
 
 <header class="flex justify-between items-center py-5">
-	<div>
-		<a class="text-2xl font-semibold" href="/">
-			$ ~/sidski
-		</a>
-		<ThemeIcon />
-	</div>
-	<nav class="flex gap-2">
-		<HeaderLink href="/about">whoami</HeaderLink>
-		<HeaderLink href="/blog">blog</HeaderLink>
-		<HeaderLink href="/more">more</HeaderLink>
-	</nav>
-</header>
+  <div>
+    <a class="text-l font-semibold" href="/">~</a>
+    {isLandingPage ? <span> / </span> : ''}
+    {pathSegments.map((segment, index) => (
+      <>
+        <span> / </span>
+        <a class="text-l font-semibold italic" href={buildHref(index)}>
+          {segment}
+        </a>
+      </>
+    ))}
+  </div>
+  <ThemeIcon />
+</header>
+

src/components/HeaderLink.astro

@@ -16,9 +16,6 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 	a {
 		display: inline-block;
 		text-decoration: none;
-	}
-	a.active {
 		font-weight: bolder;
-		border-bottom: 2px solid;
 	}
 </style>

src/components/ThemeIcon.astro

@@ -12,12 +12,12 @@
       border: 0;
       background: none;
     }
-    .sun { fill: #815B5B; }
+    .sun { fill: #3B2C29; }
     .moon { fill: transparent; }
   
   
     :global(.dark) .sun { fill: transparent; }
-    :global(.dark) .moon { fill: #DDE6ED; }
+    :global(.dark) .moon { fill: #9AD3BB; }
   </style>
 
 <script is:inline>
@@ -48,4 +48,4 @@
     }
   
     document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
-  </script>
+  </script>