From 6db5b369892dab7ab7d444013e7167fea3590d29 Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tyler@lerkolabs.com>
Date: Tue, 26 May 2026 20:43:56 -0400
Subject: [PATCH] feat(design): external link colors, section dividers, nav
 scroll-spy

Dusty blue/violet link colors for external links (target="_blank") with
visited state. Both dark and light theme tokens. Mailto links included.

Section dividers via border-top on anchored sections. Scroll-margin-top
clears sticky nav on anchor jumps.

Nav scroll-spy highlights active section using IntersectionObserver +
scroll listener fallback for bottom-of-page edge case.
---
 src/components/Footer.astro      |  9 +++---
 src/components/Hero.astro        |  9 +++---
 src/components/Nav.astro         | 54 ++++++++++++++++++++++++++++++--
 src/components/ProjectCard.astro |  2 +-
 src/pages/index.astro            |  2 +-
 src/styles/globals.css           | 25 +++++++++++++++
 6 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 467dd955..9da927b2 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -10,7 +10,7 @@ const year = new Date().getFullYear();
         href="https://github.com/lerko96"
         target="_blank"
         rel="noopener noreferrer"
-        class="underline hover:text-[var(--color-text)]"
+        class="underline"
       >
         GitHub
       </a>
@@ -18,7 +18,7 @@ const year = new Date().getFullYear();
         href="https://gitea.lerkolabs.com/lerko"
         target="_blank"
         rel="noopener noreferrer"
-        class="underline hover:text-[var(--color-text)]"
+        class="underline"
       >
         Gitea
       </a>
@@ -26,13 +26,14 @@ const year = new Date().getFullYear();
         href="https://www.linkedin.com/in/tyler-koenig"
         target="_blank"
         rel="noopener noreferrer"
-        class="underline hover:text-[var(--color-text)]"
+        class="underline"
       >
         LinkedIn
       </a>
       <a
         href="mailto:tyler@lerkolabs.com"
-        class="underline hover:text-[var(--color-text)]"
+        target="_blank"
+        class="underline"
       >
         Email
       </a>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 6d057b4c..864e8029 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -15,7 +15,7 @@
       href="https://github.com/lerko96"
       target="_blank"
       rel="noopener noreferrer"
-      class="underline hover:text-[var(--color-text)]"
+      class="underline"
     >
       GitHub
     </a>
@@ -23,7 +23,7 @@
       href="https://gitea.lerkolabs.com/lerko"
       target="_blank"
       rel="noopener noreferrer"
-      class="underline hover:text-[var(--color-text)]"
+      class="underline"
     >
       Gitea
     </a>
@@ -31,13 +31,14 @@
       href="https://www.linkedin.com/in/tyler-koenig"
       target="_blank"
       rel="noopener noreferrer"
-      class="underline hover:text-[var(--color-text)]"
+      class="underline"
     >
       LinkedIn
     </a>
     <a
       href="mailto:tyler@lerkolabs.com"
-      class="underline hover:text-[var(--color-text)]"
+      target="_blank"
+      class="underline"
     >
       Email
     </a>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index ffd99de1..fb1eb5dd 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -3,9 +3,9 @@
     <a href="/" class="font-semibold">Tyler Koenig</a>
 
     <div class="flex items-center gap-2ch">
-      <a href="#projects" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
-      <a href="#journey" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
-      <a href="#homelab" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
+      <a href="#projects" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
+      <a href="#journey" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
+      <a href="#homelab" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
 
       <button
       data-theme-toggle
@@ -38,4 +38,52 @@
   });
 
   updateTheme();
+
+  const navLinks = document.querySelectorAll<HTMLAnchorElement>("[data-nav-link]");
+  const sections = Array.from(navLinks).map((link) => ({
+    link,
+    section: document.querySelector(link.hash) as HTMLElement,
+  }));
+
+  const atBottom = () =>
+    window.innerHeight + window.scrollY >= document.body.offsetHeight - 2;
+
+  const observer = new IntersectionObserver(
+    () => {
+      let active: HTMLAnchorElement | null = null;
+      if (atBottom()) {
+        active = sections[sections.length - 1].link;
+      } else {
+        for (const { link, section } of sections) {
+          if (section.getBoundingClientRect().top <= 80) active = link;
+        }
+      }
+      navLinks.forEach((l) => {
+        l.style.color = l === active ? "var(--color-text)" : "";
+      });
+    },
+    { rootMargin: "-56px 0px 0px 0px", threshold: 0 },
+  );
+
+  sections.forEach(({ section }) => observer.observe(section));
+
+  let ticking = false;
+  window.addEventListener("scroll", () => {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      let active: HTMLAnchorElement | null = null;
+      if (atBottom()) {
+        active = sections[sections.length - 1].link;
+      } else {
+        for (const { link, section } of sections) {
+          if (section.getBoundingClientRect().top <= 80) active = link;
+        }
+      }
+      navLinks.forEach((l) => {
+        l.style.color = l === active ? "var(--color-text)" : "";
+      });
+      ticking = false;
+    });
+  }, { passive: true });
 </script>
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 02bd0080..9bda1e67 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -15,7 +15,7 @@ const { project } = Astro.props;
         href={project.githubUrl}
         target="_blank"
         rel="noopener noreferrer"
-        class="font-semibold underline hover:text-[var(--color-text-label)]"
+        class="font-semibold underline"
       >
         {project.title}
       </a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 20d0739a..10246df4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -80,7 +80,7 @@ const glanceStats = [
         href="https://gitea.lerkolabs.com/lerko/homelab"
         target="_blank"
         rel="noopener noreferrer"
-        class="underline hover:text-[var(--color-text-label)]"
+        class="underline"
       >
         gitea.lerkolabs.com/lerko/homelab →
       </a>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a6790fba..7f7aaa43 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -12,6 +12,8 @@
   --color-text:           #D4D4D8;
   --color-text-label:     #9CA0AA;
   --color-text-dim:       #888D9B;
+  --color-link:           #8CAFC8;
+  --color-link-visited:   #9A94AB;
 
   /* Typography */
   --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -63,6 +65,8 @@ html {
   --color-text:           #2C2C2C;
   --color-text-label:     #6B6560;
   --color-text-dim:       #787068;
+  --color-link:           #4A6B8A;
+  --color-link-visited:   #6B6080;
 }
 
 /* Link underlines */
@@ -74,6 +78,16 @@ a {
 a:hover {
   text-decoration-color: currentColor;
 }
+a[target="_blank"] {
+  color: var(--color-link);
+}
+a[target="_blank"]:visited {
+  color: var(--color-link-visited);
+}
+a[target="_blank"]:hover {
+  color: var(--color-link);
+  text-decoration-color: currentColor;
+}
 
 /* Focus states */
 a:focus-visible {
@@ -94,6 +108,17 @@ button {
     outline-color 120ms linear;
 }
 
+/* Section anchors — clear sticky nav, visual rhythm */
+section[id] {
+  scroll-margin-top: 3.5rem;
+  padding-top: 2lh;
+  border-top: 1px solid var(--color-border);
+}
+section[id]:first-of-type {
+  border-top: none;
+  padding-top: 0;
+}
+
 @media print {
   html {
     font-family: var(--font-serif);
-- 
2.52.0