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.
fix(content): consolidate homelab spacing, dynamic service count in hero
2026-05-31 18:17:44 -04:00 · 2026-05-27 17:33:16 -04:00 · 2026-05-27 18:31:06 +00:00 · 2026-05-26 20:43:56 -04:00 · 2026-05-26 17:39:19 -04:00 · 2026-05-25 01:38:59 +00:00
18 changed files with 440 additions and 856 deletions
@@ -1,51 +0,0 @@
 ---
 const items = [
  {
    label: "studying",
    title: "comptia network+",
    meta: "ch. 7 · ipv6 addressing",
    progress: 0.62,
    progressText: "62%",
  },
  {
    label: "shipping",
    title: "portfolio site v2",
    meta: "astro 5 · gitea actions ci · dmz lxc",
  },
  {
    label: "maintaining",
    title: "32 services across 4 vlans",
    meta: "last alert 11d ago · backups green",
  },
 ];
 ---
 <section class="border-r border-[var(--color-border)]">
  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">active</span>
    <span class="text-[var(--color-text-label)] text-[11px]">updated 4m ago</span>
  </div>
  <div>
    {items.map((it, i) => (
      <div class:list={[
        "px-5 py-4",
        i < items.length - 1 && "border-b border-[var(--color-border)]",
      ]}>
        <div class="flex items-baseline justify-between gap-2.5">
          <span class="text-[var(--color-text-label)] text-[10px] tracking-[0.16em] uppercase">{it.label}</span>
          {it.progress != null && (
            <span class="text-[var(--color-text-fg)] text-[11px] tabular-nums">{it.progressText}</span>
          )}
        </div>
        <div class="text-[var(--color-text-heading)] text-[15px] mt-1">{it.title}</div>
        <div class="text-[var(--color-text)] text-xs mt-0.5">{it.meta}</div>
        {it.progress != null && (
          <div class="mt-2.5 h-[3px] bg-[var(--color-border-bright)]">
            <div class="h-full bg-[var(--color-accent)]" style={`width: ${it.progress * 100}%`} />
          </div>
        )}
      </div>
    ))}
  </div>
 </section>
@@ -2,38 +2,41 @@
 const year = new Date().getFullYear();
 ---
-<footer class="flex flex-col sm:flex-row justify-between items-center gap-2 px-6 py-3.5 border-t border-[var(--color-border)] bg-[var(--color-surface-raised)] text-[var(--color-text-label)] text-xs">
+<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
-  <span>&copy; {year} tyler koenig &middot; self-hosted in a dmz lxc</span>
+  <div class="px-4ch flex items-center justify-between text-[var(--color-text-dim)]">
-  <div class="flex items-center gap-5">
+    <span>&copy; {year} Tyler Koenig</span>
-    <a
+    <nav class="flex items-center gap-2ch">
-      href="https://github.com/lerko96"
+      <a
-      target="_blank"
+        href="https://github.com/lerko96"
-      rel="noopener noreferrer"
+        target="_blank"
-      class="hover:text-[var(--color-text-fg)]"
+        rel="noopener noreferrer"
-    >
+        class="underline"
-      github
+      >
-    </a>
+        GitHub
-    <a
+      </a>
-      href="https://gitea.lerkolabs.com/lerko"
+      <a
-      target="_blank"
+        href="https://gitea.lerkolabs.com/lerko"
-      rel="noopener noreferrer"
+        target="_blank"
-      class="hover:text-[var(--color-text-fg)]"
+        rel="noopener noreferrer"
-    >
+        class="underline"
-      gitea
+      >
-    </a>
+        Gitea
-    <a
+      </a>
-      href="https://www.linkedin.com/in/tyler-koenig"
+      <a
-      target="_blank"
+        href="https://www.linkedin.com/in/tyler-koenig"
-      rel="noopener noreferrer"
+        target="_blank"
-      class="hover:text-[var(--color-text-fg)]"
+        rel="noopener noreferrer"
-    >
+        class="underline"
-      linkedin
+      >
-    </a>
+        LinkedIn
-    <a
+      </a>
-      href="mailto:tyler@lerkolabs.com"
+      <a
-      class="hover:text-[var(--color-text-fg)]"
+        href="mailto:tyler@lerkolabs.com"
-    >
+        target="_blank"
-      email
+        class="underline"
-    </a>
+      >
        Email
      </a>
    </nav>
  </div>
 </footer>
@@ -1,62 +1,50 @@
 ---
-const identity = [
+import { services } from "@/data/services";
  ["role", "soc analyst i · fortress srm"],
  ["based", "cleveland, oh · est. 2021"],
  ["stack", "go · react · typescript · linux"],
  ["infra", "proxmox · pfsense · authentik · nginx"],
  ["observ", "victoriametrics · grafana · beszel · ntfy"],
  ["certs", "comptia a+ · network+ (in progress)"],
 ];
 const contact = [
  { key: "github", value: "lerko96", href: "https://github.com/lerko96", glyph: "↗" },
  { key: "gitea", value: "gitea.lerkolabs.com/lerko", href: "https://gitea.lerkolabs.com/lerko", glyph: "↗" },
  { key: "linkedin", value: "tyler-koenig", href: "https://www.linkedin.com/in/tyler-koenig", glyph: "↗" },
  { key: "email", value: "tyler@lerkolabs.com", href: "mailto:tyler@lerkolabs.com", glyph: "✉" },
 ];
 ---
-<section class="border-b border-[var(--color-border)]">
+<section class="mb-3lh">
-  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
+  <h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
-    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">identity</span>
+  <p class="text-[var(--color-text-label)] mb-1lh">
-    <span class="text-[var(--color-text-label)] text-[11px]">~/identity.toml</span>
+    Security Operations · Self-Hosted Infrastructure
-  </div>
+  </p>
-  <div class="px-6 py-6 grid grid-cols-1 md:grid-cols-[1.4fr_1fr] gap-9">
+  <p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
-    <div>
+    Homelab runs {services.length} services across segmented VLANs — pfSense, Authentik SSO,
-      <h1 class="text-[var(--color-text-heading)] text-[38px] leading-[1.05] tracking-tight font-semibold">
+    full observability stack. Write software too: mobile apps, Go backends, open
-        tyler koenig
+    protocols. 
-      </h1>
+  </p>
      <p class="text-[var(--color-text)] text-sm mt-2 leading-relaxed max-w-[540px]">
        security operations, self-hosted infrastructure, and the software that holds it together.
      </p>
-      <dl class="mt-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-[13px] tabular-nums">
+  <nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-label)]">
-        {identity.map(([k, v]) => (
+    <a
-          <Fragment>
+      href="https://github.com/lerko96"
-            <dt class="text-[var(--color-text-label)] tracking-wide">{k}</dt>
+      target="_blank"
-            <dd class="text-[var(--color-text-fg)]">{v}</dd>
+      rel="noopener noreferrer"
-          </Fragment>
+      class="underline"
-        ))}
+    >
-      </dl>
+      GitHub
-    </div>
+    </a>
-
+    <a
-    <aside>
+      href="https://gitea.lerkolabs.com/lerko"
-      <div class="text-[var(--color-text-label)] text-[11px] tracking-[0.12em] mb-2.5">CONTACT</div>
+      target="_blank"
-      <div class="grid gap-px">
+      rel="noopener noreferrer"
-        {contact.map(({ key, value, href, glyph }) => (
+      class="underline"
-          <a
+    >
-            href={href}
+      Gitea
-            target={href.startsWith("mailto") ? undefined : "_blank"}
+    </a>
-            rel={href.startsWith("mailto") ? undefined : "noopener noreferrer"}
+    <a
-            class="grid grid-cols-[90px_1fr_16px] gap-x-2.5 items-baseline py-[7px] border-b border-[var(--color-border)] text-[13px] no-underline hover:bg-[var(--color-surface)]"
+      href="https://www.linkedin.com/in/tyler-koenig"
-          >
+      target="_blank"
-            <span class="text-[var(--color-text-label)] tracking-wide">{key}</span>
+      rel="noopener noreferrer"
-            <span class="text-[var(--color-text-fg)] overflow-hidden text-ellipsis whitespace-nowrap">{value}</span>
+      class="underline"
-            <span class="text-[var(--color-accent)] text-right">{glyph}</span>
+    >
-          </a>
+      LinkedIn
-        ))}
+    </a>
-      </div>
+    <a
-    </aside>
+      href="mailto:tyler@lerkolabs.com"
-  </div>
+      target="_blank"
      class="underline"
    >
      Email
    </a>
  </nav>
 </section>
@@ -1,67 +0,0 @@
 ---
 const vlans = [
  {
    id: "vlan10",
    label: "management",
    services: [
      { name: "pfsense", kind: "firewall" },
      { name: "authentik", kind: "sso" },
      { name: "proxmox", kind: "hypervisor" },
      { name: "pbs", kind: "backup" },
    ],
  },
  {
    id: "vlan20",
    label: "public-facing",
    services: [
      { name: "gitea", kind: "scm/ci" },
      { name: "caddy", kind: "proxy" },
      { name: "lerkolabs.com", kind: "web" },
    ],
  },
  {
    id: "vlan30",
    label: "internal services",
    services: [
      { name: "victoriametrics", kind: "tsdb" },
      { name: "grafana", kind: "dashboards" },
      { name: "beszel", kind: "host-mon" },
      { name: "ntfy", kind: "alerts" },
      { name: "jellyfin", kind: "media" },
    ],
  },
 ];
 const totalSvc = vlans.reduce((n, v) => n + v.services.length, 0);
 ---
 <section>
  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">infrastructure</span>
    <span class="text-[var(--color-text-label)] text-[11px]">{totalSvc} up · 0 failed</span>
  </div>
  <div>
    {vlans.map((vlan, gi) => (
      <div class:list={[gi < vlans.length - 1 && "border-b border-[var(--color-border)]"]}>
        <div class="flex items-baseline gap-2.5 px-5 pt-2.5 pb-1 text-[var(--color-text-label)] text-[10px] tracking-[0.14em]">
          <span class="text-[var(--color-text-fg)]">{vlan.id}</span>
          <span>·</span>
          <span class="uppercase">{vlan.label}</span>
          <span class="ml-auto text-[var(--color-text-faint)]">{vlan.services.length} svc</span>
        </div>
        {vlan.services.map((s) => (
          <div class="grid grid-cols-[12px_1fr_110px_60px] gap-x-2.5 px-5 py-1.5 text-[13px] items-baseline tabular-nums">
            <span class="w-1.5 h-1.5 rounded-full bg-[var(--color-accent-green)] self-center" />
            <span class="text-[var(--color-text-fg)]">{s.name}</span>
            <span class="text-[var(--color-text-label)] text-[11px]">{s.kind}</span>
            <span class="text-[var(--color-text-label)] text-[11px] text-right">up</span>
          </div>
        ))}
        <div class="h-2" />
      </div>
    ))}
  </div>
 </section>
@@ -1,85 +1,89 @@
---
+<header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
-const pathname = Astro.url.pathname;
+  <nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
    <a href="/" class="font-semibold">Tyler Koenig</a>
-const links = [
+    <div class="flex items-center gap-2ch">
-  { href: "/", label: "tyler" },
+      <a href="#projects" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
-  { href: "/homelab/", label: "homelab" },
+      <a href="#journey" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
-  { href: "/projects/", label: "projects" },
+      <a href="#homelab" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
 ];
 ---
 <header class="sticky top-0 z-50 bg-[var(--color-surface-raised)] border-b border-[var(--color-border)]">
  <nav class="max-w-[960px] mx-auto px-6 h-11 flex items-center justify-between text-xs tabular-nums">
    <div class="flex items-center gap-4">
      <a href="/" class="text-[var(--color-text-fg)] tracking-wide hover:text-[var(--color-text-heading)]">
        lerkolabs
      </a>
      <span class="text-[var(--color-text-faint)]">/</span>
      <span class="text-[var(--color-text-label)]">tyler</span>
      <span class="text-[var(--color-text-faint)]">/</span>
      <span class="text-[var(--color-text-label)]">~</span>
    </div>
    <div class="flex items-center gap-5">
      <span class="hidden sm:inline-flex items-center gap-1.5">
        <span class="inline-block w-1.5 h-1.5 rounded-full bg-[var(--color-accent-green)] status-pip" />
        <span class="text-[var(--color-text-fg)]">available</span>
      </span>
      {links.map(({ href, label }) => {
        const active = pathname === href || pathname === href.replace(/\/$/, "");
        return (
          <a
            href={href}
            aria-current={active ? "page" : undefined}
            class:list={[
              active
                ? "text-[var(--color-text-fg)]"
                : "text-[var(--color-text-label)] hover:text-[var(--color-text-fg)]",
            ]}
          >
            {label}
          </a>
        );
      })}
      <button
-        data-theme-toggle
+      data-theme-toggle
-        aria-label="Switch to light mode"
+      aria-label="Switch to light mode"
-        class="text-[var(--color-text-fg)] hover:text-[var(--color-accent)] cursor-pointer"
+      class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
-      >
+    >
        light
      </button>
    </div>
  </nav>
 </header>
 <style>
  .status-pip {
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-green) 67%, transparent);
  }
  :root:not(.dark) .status-pip {
    box-shadow: none;
  }
 </style>
 <script>
-  const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
+  const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
-  function update() {
+  function updateTheme() {
    const isDark = document.documentElement.classList.contains("dark");
-    btn.textContent = isDark ? "light" : "dark";
+    themeBtn.textContent = isDark ? "light" : "dark";
-    btn.setAttribute(
+    themeBtn.setAttribute(
      "aria-label",
      isDark ? "Switch to light mode" : "Switch to dark mode",
    );
  }
-  btn.addEventListener("click", () => {
+  themeBtn.addEventListener("click", () => {
    const next = !document.documentElement.classList.contains("dark");
    document.documentElement.classList.toggle("dark", next);
    localStorage.setItem("lerko96-dark-mode", String(next));
-    update();
+    updateTheme();
  });
-  update();
+  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>
@@ -8,49 +8,28 @@ interface Props {
 const { project } = Astro.props;
 ---
-<article class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex flex-col gap-3 p-5">
+<article class="mb-2lh">
-  <div class="flex items-start justify-between gap-3">
+  <div class="flex items-baseline gap-1ch mb-half-lh">
-    <a
+    <h3>
      href={project.githubUrl}
      target="_blank"
      rel="noopener noreferrer"
      class="text-sm font-semibold text-[var(--color-text-fg)] hover:text-[var(--color-accent)]"
    >
      {project.title}
    </a>
    <div class="flex items-center gap-3 shrink-0">
      {project.stats && (
        <span class="text-xs text-[var(--color-text-label)]">
          {project.stats}
        </span>
      )}
      <a
        href={project.githubUrl}
        target="_blank"
        rel="noopener noreferrer"
-        aria-label={`View ${project.title} on GitHub`}
+        class="font-semibold underline"
        class="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
      >
-        ↗
+        {project.title}
      </a>
-    </div>
+    </h3>
    {project.statusBadge && (
      <span class="text-[var(--color-text-dim)]">({project.statusBadge})</span>
    )}
  </div>
-  {project.statusBadge && (
+  <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
    <span class="text-xs text-[var(--color-accent)] border border-[var(--color-accent)] px-2 py-0.5 w-fit opacity-80">
      {project.statusBadge}
    </span>
  )}
  <p class="text-sm text-[var(--color-text)] leading-relaxed flex-1">
    {project.description}
  </p>
-  <div class="flex flex-wrap gap-x-3 gap-y-1 mt-1">
+  <p class="text-[var(--color-text-dim)]">
-    {project.tags.map((tag) => (
+    {project.tags.join(" · ")}
-      <span class="text-xs text-[var(--color-text-label)]">
+  </p>
        {tag}
      </span>
    ))}
  </div>
 </article>
@@ -27,14 +27,14 @@ const skillGroups = [
 const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
 ---
-<Widget title="tyler/skills" badge={totalCount} as="section">
+<Widget title="Skills" badge={totalCount} as="section">
  <div class="flex flex-col">
    {skillGroups.map(({ label, skills }) => (
      <div class="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh">
-        <span class="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
+        <span class="text-[var(--color-text-dim)] w-28 shrink-0">
          {label}
        </span>
-        <span class="font-mono text-sm text-[var(--color-text)]">
+        <span>
          {skills.join(" · ")}
        </span>
      </div>
@@ -1,101 +1,38 @@
 ---
-import { timeline } from "@/data/timeline";
+import Widget from "./Widget.astro";
 import { timeline, type TimelineType } from "@/data/timeline";
-const branchColor: Record<string, string> = {
+const isDate = (d: string) => /^\d{4}/.test(d);
-  career: "var(--color-timeline-career)",
+
-  education: "var(--color-timeline-education)",
+const typeLabel: Record<TimelineType, string> = {
-  cert: "var(--color-timeline-cert)",
+  career: "career",
-  project: "var(--color-timeline-project)",
+  education: "education",
-  homelab: "var(--color-timeline-homelab)",
+  cert: "cert",
  project: "project",
  homelab: "homelab",
 };
 const hashes = [
  "a14c2e1", "8f9b3d2", "7a02b41", "4c1f0aa", "3e9d8c0",
  "2b6a51f", "9d4c12a", "6e0b8a3", "1c7a4ff", "d5b3e92",
  "5a8f1ee", "e2b71ac", "f0a39db", "0000000",
 ];
 ---
-<section class="border-t border-[var(--color-border)]">
+<Widget title="Journey">
-  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
+  <ol class="flex flex-col">
-    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">journey</span>
+    {timeline.map((entry) => (
-    <span class="text-[var(--color-text-label)] text-[11px]">{timeline.length} commits · 5 branches · git log --all</span>
+      <li class="grid grid-cols-[10ch_1fr] gap-2ch py-half-lh border-b border-[var(--color-border)] last:border-b-0">
-  </div>
+        <div class="text-[var(--color-text-dim)] pt-[0.1em]">
-
+          {isDate(entry.date)
-  <!-- Desktop: tabular grid -->
+            ? <time datetime={entry.date}>{entry.date}</time>
-  <div class="hidden md:grid grid-cols-[92px_86px_92px_1fr] text-[13px] tabular-nums">
+            : <span>{entry.date}</span>
-    {["date", "commit", "scope", "message"].map((h) => (
+          }
      <div class:list={[
        "text-[var(--color-text-label)] text-[10px] tracking-[0.16em] uppercase py-3 px-3 border-b border-[var(--color-border)]",
        h === "date" && "pl-6",
      ]}>
        {h}
      </div>
    ))}
    {timeline.map((entry, i) => {
      const color = branchColor[entry.type] || "var(--color-text-fg)";
      const hash = hashes[i] || "0000000";
      const last = i === timeline.length - 1;
      const borderClass = last ? "" : "border-b border-[var(--color-border)]";
      return (
        <Fragment>
          <div class:list={["py-3.5 px-3 pl-6", borderClass]}>
            <span class="text-[var(--color-text-fg)]">{entry.date}</span>
          </div>
          <div class:list={["py-3.5 px-3", borderClass]}>
            <span class="text-[var(--color-accent)]">{hash}</span>
          </div>
          <div class:list={["py-3.5 px-3", borderClass]}>
            <span class="text-[11px] border-b border-dotted pb-px" style={`color: ${color}; border-color: ${color}`}>
              {entry.type}
            </span>
          </div>
          <div class:list={["py-3.5 px-3 pr-6", borderClass]}>
            <span class="text-[var(--color-text-heading)]">{entry.title}</span>
            <div class="text-[var(--color-text)] text-xs mt-0.5 leading-relaxed">{entry.description}</div>
            {entry.tags && entry.tags.length > 0 && (
              <div class="mt-1.5 flex gap-3.5 flex-wrap text-[var(--color-text-label)] text-[10px]">
                {entry.tags.map((t) => (
                  <span>· {t}</span>
                ))}
              </div>
            )}
          </div>
        </Fragment>
      );
    })}
  </div>
  <!-- Mobile: stacked cards -->
  <div class="md:hidden">
    {timeline.map((entry, i) => {
      const color = branchColor[entry.type] || "var(--color-text-fg)";
      const hash = hashes[i] || "0000000";
      const last = i === timeline.length - 1;
      return (
        <div class:list={[
          "px-5 py-4",
          !last && "border-b border-[var(--color-border)]",
        ]}>
          <div class="flex items-center gap-3 mb-1.5 text-xs">
            <span class="text-[var(--color-text-fg)]">{entry.date}</span>
            <span class="text-[var(--color-accent)]">{hash}</span>
            <span class="border-b border-dotted pb-px text-[11px]" style={`color: ${color}; border-color: ${color}`}>
              {entry.type}
            </span>
          </div>
          <div class="text-[var(--color-text-heading)] text-sm">{entry.title}</div>
          <div class="text-[var(--color-text)] text-xs mt-0.5 leading-relaxed">{entry.description}</div>
          {entry.tags && entry.tags.length > 0 && (
            <div class="mt-1.5 flex gap-3 flex-wrap text-[var(--color-text-label)] text-[10px]">
              {entry.tags.map((t) => (
                <span>· {t}</span>
              ))}
            </div>
          )}
        </div>
-      );
+        <div>
-    })}
+          <h3 class="font-semibold">
-  </div>
+            {entry.title}
-</section>
+            <span class="font-normal text-[var(--color-text-dim)]"> · {typeLabel[entry.type]}</span>
          </h3>
          <p class="text-[var(--color-text-label)] leading-relaxed">
            {entry.description}
          </p>
        </div>
      </li>
    ))}
  </ol>
 </Widget>
@@ -10,13 +10,17 @@ interface Props {
 const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
 ---
-<Tag class:list={["mb-0", className]}>
+<Tag class:list={["mb-4lh", className]}>
-  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
+  <div class="mb-2lh">
-    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">{title}</span>
+    <h2 class="text-lg font-semibold">
-    <span class="text-[var(--color-text-label)] text-[11px]">
+      {title}
-      {badge !== undefined && <span>[{badge}]</span>}
+      {badge !== undefined && (
-      {meta && <span>{meta}</span>}
+        <span class="text-[var(--color-text-dim)] font-normal"> ({badge})</span>
-    </span>
+      )}
    </h2>
    {meta && (
      <p class="text-[var(--color-text-dim)]">{meta}</p>
    )}
  </div>
  <slot />
 </Tag>
@@ -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",
@@ -2,6 +2,7 @@ export type Service = {
  name: string;
  description: string;
  category: "infrastructure" | "security" | "monitoring" | "productivity" | "media";
  hidden?: boolean;
 };
 export const services: Service[] = [
@@ -11,7 +12,7 @@ export const services: Service[] = [
  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure" },
  { name: "WireGuard", description: "VPN — full LAN access for remote clients", category: "infrastructure" },
  { name: "mail relay", description: "Outbound SMTP relay for self-hosted service notifications", category: "infrastructure" },
-  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure" },
+  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure", hidden: true },
  { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure" },
  // Security / Auth
@@ -23,34 +24,36 @@ export const services: Service[] = [
  { name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring" },
  { name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring" },
  { name: "ntfy", description: "Self-hosted push notifications", category: "monitoring" },
  { name: "Uptime Kuma", description: "Self-hosted monitoring tool (GUI)", category: "monitoring" },
  // Productivity
  { name: "Gitea", description: "Personal Git server", category: "productivity" },
  { name: "Outline", description: "Team wiki and knowledge base", category: "productivity" },
  { name: "Vikunja", description: "Task management", category: "productivity" },
  { name: "Actual Budget", description: "Personal budgeting", category: "productivity" },
  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity" },
  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity" },
  { name: "FreshRSS", description: "RSS reader", category: "productivity" },
  { name: "Memos", description: "Quick notes and journal", category: "productivity" },
  { name: "Traggo", description: "Time tracking", category: "productivity" },
  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity" },
  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity" },
  { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity" },
-  { name: "Filebrowser", description: "Web-based file manager", category: "productivity" },
+  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity", hidden: true },
  { name: "FreshRSS", description: "RSS reader", category: "productivity", hidden: true },
  { name: "Memos", description: "Quick notes and journal", category: "productivity", hidden: true },
  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity", hidden: true },
  { name: "Vikunja", description: "Task management", category: "productivity", hidden: true },
  { name: "Traggo", description: "Time tracking", category: "productivity", hidden: true },
  { name: "Filebrowser", description: "Web-based file manager", category: "productivity", hidden: true },
  // Media
-  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media" },
+  { name: "Immich", description: "Open-source photo library", category: "media"}, 
  { name: "Jellyfin", description: "Open-source media streaming", category: "media" },
  { name: "Sonarr", description: "Automated TV show management", category: "media" },
  { name: "Radarr", description: "Automated movie management", category: "media" },
  { name: "Lidarr", description: "Automated music management", category: "media" },
  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
  { name: "nzbget", description: "Usenet downloader", category: "media" },
  { name: "qBittorrent", description: "Torrent client with web UI", category: "media" },
  { name: "Kavita", description: "Self-hosted manga and book reader", category: "media" },
-  { name: "Openshelf", description: "Book library with auto-ingest", category: "media" },
+  { name: "Jellyfin", description: "Open-source media streaming", category: "media" },
  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
  { name: "*Arr stack", description: "Automated media management for streaming", category: "media" },
  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
  { name: "Lidarr", description: "Automated music management", category: "media", hidden: true },
  { name: "Radarr", description: "Automated movie management", category: "media", hidden: true },
  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media", hidden: true },
  { name: "nzbget", description: "Usenet downloader", category: "media", hidden: true },
  { name: "qBittorrent", description: "Torrent client with web UI", category: "media", hidden: true },
  { name: "Openshelf", description: "Book library with auto-ingest", category: "media", hidden: true },
 ];
 export const categoryOrder: Service["category"][] = [
@@ -22,30 +22,6 @@ export const timeline: TimelineEntry[] = [
      "Studying for Network+ to formalize networking knowledge built through the homelab.",
    tags: ["networking", "certification"],
  },
  {
    date: "2026-04",
    title: "Portfolio Site v2",
    type: "project",
    description:
      "Astro portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
    tags: ["astro", "tailwind", "self-hosted"],
  },
  {
    date: "2026-04",
    title: "lerkolabs.com",
    type: "homelab",
    description:
      "Self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
    tags: ["LXC", "DMZ", "self-hosted"],
  },
  {
    date: "2026-03",
    title: "Helm",
    type: "project",
    description:
      "Full-stack task and project management tool built in Go + React.",
    tags: ["go", "react", "typescript"],
  },
  {
    date: "2025",
    title: "Proxmox Backup Server",
@@ -93,13 +69,6 @@ export const timeline: TimelineEntry[] = [
      "Promoted to Config Tech II. Led imaging workflows and expanded into scripting for endpoint provisioning.",
    tags: ["sysadmin", "scripting"],
  },
  {
    date: "2022-11",
    title: "PC Build",
    type: "homelab",
    description: "Sourced parts online and built a personal computer.",
    tags: ["amd", "windows 10", "configure", "desktop"],
  },
  {
    date: "2022-05",
    title: "Config Tech I — MCPc",
@@ -108,14 +77,6 @@ export const timeline: TimelineEntry[] = [
      "Hardware configuration, OS imaging, and deployment at scale for enterprise clients.",
    tags: ["sysadmin", "hardware"],
  },
  {
    date: "2021-10",
    title: "Portfolio Site v1",
    type: "project",
    description:
      "React portfolio deployed to www.lerko96.github.io using github pages.",
    tags: ["React", "CSS", "github pages"],
  },
  {
    date: "2021-01",
    title: "We Can Code IT — Java Bootcamp",
@@ -6,7 +6,7 @@ interface Props {
 const {
  title = "Tyler Koenig",
-  description = "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
+  description = "Security operations, self-hosted infrastructure, and software projects. Homelab, Go, TypeScript, and more.",
 } = Astro.props;
 ---
@@ -27,11 +27,11 @@ const {
    </script>
  </head>
  <body
-    class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
+    class="bg-[var(--color-bg)] text-[var(--color-text)] min-h-screen"
  >
    <slot name="nav" />
-    <div class="max-w-[960px] mx-auto">
+    <div class="max-w-[740px] mx-auto">
-      <main>
+      <main class="px-4ch py-3lh">
        <slot />
      </main>
      <slot name="footer" />
@@ -2,11 +2,11 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <meta http-equiv="refresh" content="0; url=/projects/" />
+    <meta http-equiv="refresh" content="0; url=/#projects" />
-    <link rel="canonical" href="/projects/" />
+    <link rel="canonical" href="/" />
    <title>Redirecting...</title>
  </head>
  <body>
-    <p>This page moved. <a href="/projects/">/projects/</a></p>
+    <p>This page moved. <a href="/#projects">/#projects</a></p>
  </body>
 </html>
@@ -1,226 +1,12 @@
---
+<!doctype html>
-import Base from "@/layouts/Base.astro";
+<html lang="en">
-import Nav from "@/components/Nav.astro";
+  <head>
-import Footer from "@/components/Footer.astro";
+    <meta charset="utf-8" />
-import Widget from "@/components/Widget.astro";
+    <meta http-equiv="refresh" content="0; url=/#homelab" />
-import { services, categoryOrder, categoryLabels } from "@/data/services";
+    <link rel="canonical" href="/" />
-
+    <title>Redirecting...</title>
-const glanceStats = [
+  </head>
-  { label: "Hypervisor", value: "Proxmox VE" },
+  <body>
-  { label: "Firewall", value: "pfSense (Netgate 1100)" },
+    <p>This page moved. <a href="/#homelab">/#homelab</a></p>
-  { label: "Switching", value: "TP-Link Omada (managed)" },
+  </body>
-  { label: "ISP", value: "AT&T Fiber 1 Gbps" },
+</html>
  { label: "VPN", value: "WireGuard (pfSense)" },
  { label: "Reverse Proxy", value: "Caddy + Cloudflare DNS-01" },
  { label: "Auth", value: "Authentik SSO" },
  { label: "DNS", value: "Pi-hole → Unbound → Cloudflare" },
  { label: "Containers", value: "9 LXC + 2 VMs" },
 ];
 const vlans = [
  { id: "MGMT", name: "MGMT", purpose: "Network equipment only" },
  { id: "LAN", name: "LAN", purpose: "Trusted personal devices" },
  { id: "Lab", name: "Homelab", purpose: "All self-hosted services" },
  { id: "Guest", name: "Guests", purpose: "Internet only, RFC1918 blocked" },
  { id: "IoT", name: "IoT", purpose: "Smart home, isolated" },
  { id: "WFH", name: "WFH", purpose: "Work devices, no personal access" },
  { id: "DMZ", name: "DMZ", purpose: "Public-facing, hard-blocked internally" },
  { id: "VPN", name: "VPN", purpose: "WireGuard clients, LAN-equivalent access" },
 ];
 const adrs = [
  {
    title: "ISP gateway: passthrough mode",
    decision:
      "ISP gateway stays in-line in passthrough mode, pfSense gets the public IP directly. Gateway WiFi disabled.",
    why: "Carrier locks 802.1X auth to their own gateway hardware, and bypassing it is brittle — breaks on firmware updates and only saves a millisecond or two. True bridge mode isn't supported. Passthrough is the cleanest option that keeps pfSense as the actual perimeter.",
  },
  {
    title: "Caddy over NGINX Proxy Manager",
    decision:
      "Caddy with DNS-01 challenge via Cloudflare API. All subdomains resolve to Caddy internally via Pi-hole. Caddy terminates TLS and proxies to backends.",
    why: "Single Caddyfile, automatic certs without ever needing to expose internal services to the internet for an HTTP-01 challenge. NPM has more UI overhead for the same outcome. Traefik is more complex for no benefit at this scale.",
  },
  {
    title: "WireGuard over OpenVPN",
    decision:
      "WireGuard on pfSense as the only remote-access path. Clients get the access tier documented in the access model — same as LAN, plus the admin surfaces that aren't reachable any other way.",
    why: "Faster, simpler config, better battery life on mobile. Throughput on the firewall hardware comfortably exceeds the WAN link. OpenVPN has no advantage here. Tailscale would add an external relay dependency for a problem WireGuard already solves.",
  },
  {
    title: "Pi-hole in Homelab VLAN, not MGMT",
    decision:
      "Pi-hole runs in the Homelab VLAN. Firewall allows port 53 inbound from VLANs that need local resolution. MGMT uses pfSense Unbound as its primary resolver instead.",
    why: "Putting Pi-hole in MGMT would mean opening MGMT to all the VLANs that need DNS — much bigger attack surface for the most sensitive tier. DNS traffic crossing into the Homelab VLAN is the lesser risk, and Homelab is already where service traffic terminates anyway.",
  },
  {
    title: "Netgate 1100 for pfSense",
    decision:
      "Netgate 1100 (Marvell ARMADA 3720, dual-core ARM) as the firewall appliance. ~6W idle, line-rate NAT at 1 Gbps, WireGuard at ~100–150 Mbps.",
    why: "Purpose-built for pfSense. Right-sized for 1 Gbps fiber — NAT saturates the link, WireGuard is fast enough for remote access. A full rack server wastes power for this role. Configs and version tracked in private repo.",
  },
  {
    title: "Shared Postgres + Redis in apps LXC",
    decision:
      "One Postgres instance hosting multiple databases. One Redis instance. A single init script provisions schemas on first run.",
    why: "Avoids ~15 separate DB containers. Big RAM savings. Productivity apps colocate in one LXC anyway, so a shared backing store there is the natural shape.",
  },
  {
    title: "Gitea CI/CD: self-hosted runner, internal pipeline, static deploy",
    decision:
      "Self-hosted Gitea Actions runner builds the portfolio on push, then deploys pre-built static files to the public-facing host. Build runs in an isolated container so the runner host stays clean. Public host serves static files only — no build toolchain on it.",
    why: "Keeps the whole pipeline internal. No external runners, no GitHub Actions. The build/serve split means the public-facing host has the smallest possible footprint — static file server, nothing more.",
  },
  {
    title: "Authentik over Authelia",
    decision: "Authentik as the SSO provider across all self-hosted services.",
    why: "Full OIDC provider + forward auth in one. Lets services like Outline, Gitea, and Vikunja use real SSO rather than just a login gate. Authelia is forward-auth only — no OIDC provider capability.",
  },
 ];
 ---
 <Base
  title="Homelab | Tyler Koenig"
  description="Production-grade personal homelab: Proxmox, pfSense, 8 VLANs, WireGuard, Caddy, Authentik SSO, and 20+ self-hosted services."
 >
  <Nav slot="nav" />
  <div class="px-6 py-6 border-b border-[var(--color-border)]">
    <h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">homelab</h1>
    <p class="text-[var(--color-text)] text-sm 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="homelab/overview" badge={glanceStats.length} as="section">
    <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
      {glanceStats.map(({ label, value }) => (
        <div class="bg-[var(--color-surface)] px-5 py-3">
          <p class="text-sm text-[var(--color-text-label)] mb-1">
            {label}
          </p>
          <p class="text-sm text-[var(--color-text-fg)]">
            {value}
          </p>
        </div>
      ))}
    </div>
  </Widget>
  <Widget
    title="homelab/network"
    meta="8 network segments · default deny"
    as="section"
  >
    <div class="overflow-x-auto px-5">
      <table class="w-full text-sm border-collapse">
        <thead>
          <tr class="border-b border-[var(--color-border)]">
            <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
              Segment
            </th>
            <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
              Name
            </th>
            <th class="text-[var(--color-text-label)] text-left py-2 text-[10px] tracking-[0.16em] uppercase">
              Purpose
            </th>
          </tr>
        </thead>
        <tbody>
          {vlans.map((v) => (
            <tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
              <td class="text-[var(--color-accent)] py-2.5 pr-8 text-sm">
                {v.id}
              </td>
              <td class="text-[var(--color-text-fg)] py-2.5 pr-8 text-sm">
                {v.name}
              </td>
              <td class="text-[var(--color-text)] py-2.5 text-sm">
                {v.purpose}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </Widget>
  <Widget title="homelab/services" badge={services.length} as="section">
    <div class="flex flex-col gap-6 px-5 py-4">
      {categoryOrder.map((cat) => {
        const catServices = services.filter((s) => s.category === cat);
        return (
          <div>
            <p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2 px-1">
              {categoryLabels[cat]}
            </p>
            <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
              {catServices.map((svc) => (
                <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-3">
                  <p class="text-sm text-[var(--color-text-fg)] mb-0.5">
                    {svc.name}
                  </p>
                  <p class="text-xs text-[var(--color-text)] leading-relaxed">
                    {svc.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  </Widget>
  <Widget
    title="homelab/ADRs"
    meta="why things are configured the way they are"
    badge={adrs.length}
    as="section"
  >
    <div class="flex flex-col gap-px bg-[var(--color-border)] mx-5 my-4">
      {adrs.map((adr) => (
        <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-4">
          <p class="text-sm text-[var(--color-text-fg)] mb-3">
            {adr.title}
          </p>
          <p class="text-sm text-[var(--color-text)] leading-relaxed mb-2">
            <span class="text-[var(--color-text-label)]">
              decision:{" "}
            </span>
            {adr.decision}
          </p>
          <p class="text-sm text-[var(--color-text)] leading-relaxed">
            <span class="text-[var(--color-text-label)]">
              why:{" "}
            </span>
            {adr.why}
          </p>
        </div>
      ))}
    </div>
  </Widget>
  <section class="px-5 py-6">
    <p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2">
      homelab/docs
    </p>
    <p class="text-sm text-[var(--color-text)] mb-3">
      VLAN maps, runbooks, service registry, config exports, and setup guides.
    </p>
    <a
      href="https://gitea.lerkolabs.com/lerko/homelab"
      target="_blank"
      rel="noopener noreferrer"
      class="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
    >
      <span class="text-[var(--color-accent)]">↗</span> gitea.lerkolabs.com/lerko/homelab
    </a>
  </section>
  <Footer slot="footer" />
 </Base>
@@ -3,18 +3,82 @@ import Base from "@/layouts/Base.astro";
 import Nav from "@/components/Nav.astro";
 import Footer from "@/components/Footer.astro";
 import Hero from "@/components/Hero.astro";
 import Active from "@/components/Active.astro";
 import HomeServices from "@/components/HomeServices.astro";
 import Timeline from "@/components/Timeline.astro";
 import Widget from "@/components/Widget.astro";
 import ProjectCard from "@/components/ProjectCard.astro";
 import { featuredProjects } from "@/data/projects";
 import { services, categoryOrder, categoryLabels } from "@/data/services";
 const glanceStats = [
  { label: "Hypervisor", value: "Proxmox VE" },
  { label: "Firewall", value: "pfSense (Netgate 1100)" },
  { label: "Network", value: "7 VLANs, default deny, managed switching" },
  { label: "Services", value: `${services.length} self-hosted across ${categoryOrder.length} categories` },
 ];
 ---
 <Base>
  <Nav slot="nav" />
  <Hero />
-  <div class="grid grid-cols-1 md:grid-cols-[1fr_1.2fr] border-b border-[var(--color-border)]">
+
-    <Active />
+  <section id="projects">
-    <HomeServices />
+    <Widget title="Projects"  as="div">
-  </div>
+      <div class="flex flex-col">
-  <Timeline />
+        {featuredProjects.map((project) => (
          <ProjectCard project={project} />
        ))}
      </div>
    </Widget>
  </section>
  <section id="journey">
    <Timeline />
  </section>
  <section id="homelab">
    <Widget title="Homelab" as="div">
      <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl mb-2lh">
        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>
      <dl class="flex flex-col mb-2lh">
        {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>
            <dd>{value}</dd>
          </div>
        ))}
      </dl>
      <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh mb-2lh">
        {categoryOrder.map((cat) => {
          const count = services.filter((s) => s.category === cat).length;
          return (
            <span>
              <span class="text-[var(--color-text-dim)]">{categoryLabels[cat]}</span>
              <span class="text-[var(--color-text-label)]"> ({count})</span>
            </span>
          );
        })}
      </div>
      <p class="text-[var(--color-text-label)] mb-half-lh">
        Full documentation — network maps, ADRs, runbooks, and service configs.
      </p>
      <a
        href="https://gitea.lerkolabs.com/lerko/homelab"
        target="_blank"
        rel="noopener noreferrer"
        class="underline"
      >
        gitea.lerkolabs.com/lerko/homelab →
      </a>
    </Widget>
  </section>
  <Footer slot="footer" />
 </Base>
@@ -1,74 +1,12 @@
---
+<!doctype html>
-import Base from "@/layouts/Base.astro";
+<html lang="en">
-import Nav from "@/components/Nav.astro";
+  <head>
-import Footer from "@/components/Footer.astro";
+    <meta charset="utf-8" />
-import Widget from "@/components/Widget.astro";
+    <meta http-equiv="refresh" content="0; url=/#projects" />
-import ProjectCard from "@/components/ProjectCard.astro";
+    <link rel="canonical" href="/" />
-import { featuredProjects, archiveProjects } from "@/data/projects";
+    <title>Redirecting...</title>
---
+  </head>
-
+  <body>
-<Base
+    <p>This page moved. <a href="/#projects">/#projects</a></p>
-  title="Projects | Tyler Koenig"
+  </body>
-  description="Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive."
+</html>
 >
  <Nav slot="nav" />
  <div class="px-6 py-6 border-b border-[var(--color-border)]">
    <h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">projects</h1>
    <p class="text-[var(--color-text)] text-sm leading-relaxed max-w-xl">
      Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
    </p>
  </div>
  <Widget title="projects/featured" badge={featuredProjects.length} as="section">
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-px bg-[var(--color-border)] m-5">
      {featuredProjects.map((project) => (
        <ProjectCard project={project} />
      ))}
    </div>
  </Widget>
  <Widget title="projects/archive" badge={archiveProjects.length} as="section">
    <div class="flex flex-col gap-px bg-[var(--color-border)] m-5">
      {archiveProjects.map((project) => (
        <a
          href={project.githubUrl}
          target="_blank"
          rel="noopener noreferrer"
          class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-5 px-5 py-4 group"
        >
          <div class="flex flex-col gap-2 flex-1 min-w-0">
            <div class="flex items-center gap-3">
              {project.year && (
                <span class="text-sm text-[var(--color-text-label)] shrink-0">
                  {project.year}
                </span>
              )}
              <span class="text-sm text-[var(--color-text-fg)] group-hover:text-[var(--color-accent)] truncate">
                {project.title}
              </span>
            </div>
            <p class="text-sm text-[var(--color-text)] leading-relaxed">
              {project.description}
            </p>
            <div class="flex flex-wrap gap-x-3 gap-y-0.5">
              {project.tags.map((tag) => (
                <span class="text-xs text-[var(--color-text-label)]">
                  {tag}
                </span>
              ))}
            </div>
          </div>
          <span
            class="text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-accent)] shrink-0 mt-0.5"
            aria-hidden="true"
          >
            ↗
          </span>
        </a>
      ))}
    </div>
  </Widget>
  <Footer slot="footer" />
 </Base>
@@ -3,33 +3,22 @@
@variant dark (&:where(.dark, .dark *));
@theme {
-  /* Console Dark (default) */
+  /* Slate (dark, default) */
-  --color-bg:             #0a0c0f;
+  --color-bg:             #1A1B1E;
-  --color-surface:        #0e1116;
+  --color-surface:        #22242A;
-  --color-surface-raised: #11151b;
+  --color-surface-raised: #2A2D34;
-  --color-border:         #1c2128;
+  --color-border:         #33363E;
-  --color-border-bright:  #2a3038;
+  --color-border-bright:  #3E4148;
-  --color-text:           #c1bdb3;
+  --color-text:           #D4D4D8;
-  --color-text-fg:        #e8e4d8;
+  --color-text-label:     #9CA0AA;
-  --color-text-heading:   #ffffff;
+  --color-text-dim:       #888D9B;
-  --color-text-label:     #6a675f;
+  --color-link:           #8CAFC8;
-  --color-text-dim:       #6a675f;
+  --color-link-visited:   #9A94AB;
  --color-text-faint:     #3a3830;
  --color-accent:         #d4a259;
  --color-accent-green:   #7b9e7b;
  --color-accent-red:     #c74028;
  /* Timeline branch colors — dark */
  --color-timeline-career:    #b390a8;
  --color-timeline-education: #999999;
  --color-timeline-cert:      #cba76c;
  --color-timeline-project:   #8ba8c0;
  --color-timeline-homelab:   #9ab494;
  /* Typography */
-  --font-mono: "Source Code Pro", ui-monospace, monospace;
+  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
-
+  --font-mono:  "Source Code Pro", ui-monospace, monospace;
  /* Breakpoints */
  --breakpoint-xs: 576px;
@@ -46,28 +35,18 @@
  --spacing-2lh:     2lh;
  --spacing-3lh:     3lh;
  --spacing-4lh:     4lh;
  /* Animations */
  --animate-fade-in: fadeIn 120ms linear forwards;
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
 }
 /* Base */
 html {
  scroll-behavior: smooth;
-  font-size: 15px;
+  font-size: 16px;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
-  font-family: var(--font-mono);
+  font-family: var(--font-sans);
  font-variant-ligatures: none;
 }
@layer base {
  * {
    box-sizing: border-box;
@@ -76,35 +55,83 @@ html {
  }
 }
-/* Console Light overrides */
+/* Bone (light) overrides */
 :root:not(.dark) {
-  --color-bg:             #f3f0e8;
+  --color-bg:             #FAF8F5;
-  --color-surface:        #faf6ec;
+  --color-surface:        #F3F0EB;
-  --color-surface-raised: #f6f2e7;
+  --color-surface-raised: #EBE8E3;
-  --color-border:         #d8d2c2;
+  --color-border:         #E0DCD5;
-  --color-border-bright:  #b8b2a2;
+  --color-border-bright:  #D4D0C8;
-  --color-text:           #3a3c40;
+  --color-text:           #2C2C2C;
-  --color-text-fg:        #1c1e22;
+  --color-text-label:     #6B6560;
-  --color-text-heading:   #000000;
+  --color-text-dim:       #787068;
-  --color-text-label:     #8a857a;
+  --color-link:           #4A6B8A;
-  --color-text-dim:       #8a857a;
+  --color-link-visited:   #6B6080;
  --color-text-faint:     #c0bba8;
  --color-accent:         #b1631c;
  --color-accent-green:   #3d7048;
  --color-accent-red:     #d21f07;
  --color-timeline-career:    #6e3d7a;
  --color-timeline-education: #595959;
  --color-timeline-cert:      #9c6620;
  --color-timeline-project:   #355d8a;
  --color-timeline-homelab:   #3d7048;
 }
-/* Default transitions — linear, fast */
+/* Link underlines */
 a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-bright);
 }
 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 {
  text-decoration-color: currentColor;
  outline: 2px solid var(--color-border-bright);
  outline-offset: 2px;
 }
 button:focus-visible {
  outline: 2px solid var(--color-border-bright);
  outline-offset: 2px;
 }
 /* Default transitions */
 a,
 button {
  transition: color 120ms linear, border-color 120ms linear,
-    background-color 120ms linear, opacity 120ms linear;
+    opacity 120ms linear, text-decoration-color 120ms linear,
    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);
    font-size: 11pt;
    line-height: 1.3;
    color: #000;
    background: #fff;
  }
  header, footer, button { display: none; }
  a { color: inherit; text-decoration: underline; }
  main { max-width: none; padding: 0; }
  section, div, li { margin-bottom: 0.25em; padding-bottom: 0; }
  h1, h2, h3 { margin-bottom: 0.15em; }
 }
@media (prefers-reduced-motion: reduce) {
Author	SHA1	Message	Date
lerko	da61cbba5d	feat(content): add uptop, reorder projects, archive open-pact, fix VLAN count Build and Deploy / deploy (push) Successful in 1m18s Details 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.	2026-05-31 18:17:44 -04:00
lerko	9037461d27	fix(content): consolidate homelab spacing, dynamic service count in hero Collapse homelab into single Widget to match Projects/Journey spacing. Hero service count now reads from services data instead of hardcoded 30+.	2026-05-27 17:33:16 -04:00
lerko	4a2ea3c32d	Merge pull request 'feat(design): external link colors, section dividers, nav scroll-spy' (#10 ) from feat/polish-reader-view into staging Reviewed-on: #10	2026-05-27 18:31:06 +00:00
lerko	6db5b36989	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.	2026-05-26 20:43:56 -04:00
lerko	38326cc7ec	refactor(content): slim homelab to highlight, trim redundant timeline entries Homelab: drop VLAN table, services list, and ADRs — full docs live in the homelab repo. Keep condensed at-a-glance stats, category counts, and Gitea link. Timeline: drop project entries (covered by Projects section), lerkolabs.com (duplicate of portfolio), and PC Build. 14 → 9 entries. Also: hide nav anchor links on mobile, drop Hero section anchors, update meta description, add print stylesheet.	2026-05-26 17:39:19 -04:00
lerko	aa5fdb579c	Merge pull request 'feat(design): single-page reader view' (#9 ) from feat/single-page into staging Reviewed-on: #9	2026-05-25 01:38:59 +00:00
lerko	ce27a23c4e	feat(design): nav anchor links, hidden services flag, drop badges Add projects/journey/homelab anchor links to sticky nav for in-page navigation. Add hidden flag to services data — hidden entries count toward total but don't render. Remove badge counts from all widgets.	2026-05-24 21:38:03 -04:00
lerko	141d66d7bb	feat(design): single-page consolidation, drop typeface picker Merge projects + homelab + timeline into one scrollable page. Remove typeface picker (sans/serif/mono), keep theme toggle. Nav simplified to name + toggle. Hero gains anchor links for in-page navigation (#projects, #journey, #homelab). Old pages become meta-refresh redirects. Timeline redesigned as two-column grid layout — date left, content right — cutting vertical space ~50%. Focus states added for keyboard nav. Tags dropped from timeline entries.	2026-05-24 19:36:19 -04:00
lerko	de74019e48	Merge pull request 'feat(design): reader view' (#8 ) from feat/reader-view into staging	2026-05-24 22:35:35 +00:00
lerko	32455bf7a7	feat(design): reader view — strip terminal chrome, add typography controls Replace monospace-terminal aesthetic with clean reader layout. System sans-serif default, typeface picker (sans/serif/mono) with per-face optical tuning. Warm color palettes (slate dark, bone light), crafted link underlines, WCAG AA contrast on all text tiers. Semantic HTML throughout: proper heading hierarchy, <time> elements, role=group, <dl>/<table>/<article> where appropriate. Net -140 lines.	2026-05-24 18:28:02 -04:00