feat(content): add uptop, reorder projects, archive open-pact, fix VLAN count

Add uptop (uptime monitoring TUI) as featured project. Reorder nib
above homelab, update nib stack and URL. Move open-pact to archive.
Update portfolio description (Nginx → Caddy). Fix VLAN count 8 → 7.
Trim Hero bio.

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>

src/components/Hero.astro

@@ -1,3 +1,7 @@
+---
+import { services } from "@/data/services";
+---
+
 <section class="mb-3lh">
   <h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
   <p class="text-[var(--color-text-label)] mb-1lh">
@@ -5,9 +9,9 @@
   </p>
 
   <p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
-    Homelab runs 30+ services across segmented VLANs — pfSense, Authentik SSO,
+    Homelab runs {services.length} services across segmented VLANs — pfSense, Authentik SSO,
     full observability stack. Write software too: mobile apps, Go backends, open
-    protocols. Daily drivers, all of it.
+    protocols. 
   </p>
 
   <nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-label)]">
@@ -15,7 +19,7 @@
       href="https://github.com/lerko96"
       target="_blank"
       rel="noopener noreferrer"
-      class="underline hover:text-[var(--color-text)]"
+      class="underline"
     >
       GitHub
     </a>
@@ -23,7 +27,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 +35,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>

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="#projects" data-nav-link 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="#journey" data-nav-link 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="#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>

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>

src/data/projects.ts

@@ -13,6 +13,25 @@ export type Project = {
 
 export const projects: Project[] = [
   // --- Featured ---
+  {
+    slug: "uptop",
+    title: "uptop",
+    description: "Live uptime monitoring dashboard for your terminal. SSH-accessible. HTTP, ping, TCP, DNS, push checks with alerts, clustering, and Prometheus metrics.",
+    tags: ["Go", "Bubbletea", "Monitoring", "Uptime"],
+    githubUrl: "https://github.com/lerkolabs/uptop",
+    tier: "featured",
+    year: 2026,
+  },
+  {
+    slug: "nib",
+    title: "nib",
+    description:
+      "Capture-first personal journal built with Go + SQLite.  Currently developing in private when I have spare time.",
+    tags: ["Go", "JavaScript", "SQLite", "Stream-of-Thought"],
+    githubUrl: "https://gitea.lerkolabs.com/lerko/nib-v1",
+    tier: "featured",
+    year: 2026,
+  },
   {
     slug: "homelab",
     title: "homelab",
@@ -27,33 +46,22 @@ export const projects: Project[] = [
     slug: "portfolio",
     title: "portfolio",
     description:
-      "Astro static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+      "Astro static site, self-hosted in a DMZ LXC behind Caddy, deployed via Gitea Actions CI.",
-    tags: ["Astro", "Dockerfile", "Tailwind", "nginx", "Caddy"],
+    tags: ["Astro", "Typescript", "Dockerfile", "Caddy"],
     githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
     tier: "featured",
     year: 2021,
   },
-  {
+  // --- Archive ---
-    slug: "nib",
-    title: "nib",
-    description:
-      "Capture-first personal journal built with Go + React + SQLite.  Currently developing in private when I have spare time.",
-    tags: ["Go", "React", "SQLite", "Journal", "Stream-of-Thought"],
-    githubUrl: "https://github.com/lerko96/nib",
-    tier: "featured",
-    year: 2026,
-  },
   {
     slug: "open-pact",
     title: "open-pact",
-    description:
+    description: "Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation",
-      "Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation warrants, portable signed memory facts. No central registry.",
     tags: ["TypeScript", "Ed25519", "DID", "npm", "CC0"],
     githubUrl: "https://github.com/lerko96/open-pact",
-    tier: "featured",
+    tier: "archive",
     year: 2026,
   },
-  // --- Archive ---
   {
     slug: "helm",
     title: "helm",

src/pages/index.astro

@@ -12,7 +12,7 @@ import { services, categoryOrder, categoryLabels } from "@/data/services";
 const glanceStats = [
   { label: "Hypervisor", value: "Proxmox VE" },
   { label: "Firewall", value: "pfSense (Netgate 1100)" },
-  { label: "Network", value: "8 VLANs, default deny, managed switching" },
+  { label: "Network", value: "7 VLANs, default deny, managed switching" },
   { label: "Services", value: `${services.length} self-hosted across ${categoryOrder.length} categories` },
 ];
 ---
@@ -37,18 +37,15 @@ const glanceStats = [
   </section>
 
   <section id="homelab">
-    <div class="mb-4lh">
+    <Widget title="Homelab" as="div">
-      <h2 class="text-xl font-bold mb-half-lh">Homelab</h2>
+      <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl mb-2lh">
-      <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
         Personal infrastructure environment for learning, self-hosting, and
         operational practice. Running 24/7 on production-grade hardware with
         real network segmentation, SSO, monitoring, and IaC-style
         documentation.
       </p>
-    </div>
 
-    <Widget title="At a Glance"  as="div">
+      <dl class="flex flex-col mb-2lh">
-      <dl class="flex flex-col">
         {glanceStats.map(({ label, value }) => (
           <div class="flex gap-2ch py-qtr-lh">
             <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
@@ -56,10 +53,8 @@ const glanceStats = [
           </div>
         ))}
       </dl>
-    </Widget>
 
-    <Widget title="Services"  as="div">
+      <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh mb-2lh">
-      <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh">
         {categoryOrder.map((cat) => {
           const count = services.filter((s) => s.category === cat).length;
           return (
@@ -70,9 +65,7 @@ const glanceStats = [
           );
         })}
       </div>
-    </Widget>
 
-    <div class="mb-4lh">
       <p class="text-[var(--color-text-label)] mb-half-lh">
         Full documentation — network maps, ADRs, runbooks, and service configs.
       </p>
@@ -80,11 +73,11 @@ 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>
-    </div>
+    </Widget>
   </section>
 
   <Footer slot="footer" />

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);