feat(site): migrate from Next.js to Astro

Replace Next.js 16 + React 19 with Astro 5. Same visual design,
same deploy pipeline, zero client-side framework.

- All components rewritten as .astro files
- Dark mode via inline scripts (no React context)
- Timeline animation via IntersectionObserver script
- Nav active state computed at build time
- Self-hosted Source Code Pro woff2 fonts
- Drop Font Awesome (icons were never loaded)
- Drop unused headshot PNG (1MB, unreferenced)
- Fix pfSense hardware refs (Netgate 1100, not N100)
- Output: 212KB static HTML vs 2.6MB before
- JS shipped: ~700 bytes inline vs ~130KB React runtime

.gitignore

@@ -1,33 +1,17 @@
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
-# next.js
+# astro
-/.next/
 /out/
-
+/.astro/
-# production
-/build
-
-# testing
-/coverage
 
 # misc
 .DS_Store
 .env
-.env.local
+.env.*
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
 
 # docs
 /docs

README.md

@@ -4,7 +4,7 @@ Personal portfolio site. Live at [lerkolabs.com](https://lerkolabs.com) — self
 
 Source: [gitea.lerkolabs.com/lerko/portfolio](https://gitea.lerkolabs.com/lerko/portfolio)
 
-**Stack:** Next.js 16 · React 19 · TypeScript · Tailwind v4
+**Stack:** Astro 5 · TypeScript · Tailwind v4
 
 ---
 
@@ -18,8 +18,9 @@ Source: [gitea.lerkolabs.com/lerko/portfolio](https://gitea.lerkolabs.com/lerko/
 ## Commands
 
 ```bash
-npm run dev      # dev server at localhost:3000
+npm run dev      # dev server at localhost:4321
 npm run build    # static export into out/
+npm run preview  # preview production build
 ```
 
 ---
@@ -41,19 +42,22 @@ Push to `dev` triggers Gitea Actions (`.gitea/workflows/deploy.yml`):
 
 ```
 src/
-  app/
+  layouts/
-    layout.tsx          # root layout, fonts, ThemeProvider
+    Base.astro            # root layout, fonts, theme script, nav/footer
-    page.tsx            # home: hero, skills, project cards
+  pages/
-    homelab/page.tsx    # homelab page: VLANs, services, ADRs
+    index.astro           # home: hero, timeline
-    archive/page.tsx    # older projects grid
+    projects.astro        # featured + archive projects
-    globals.css         # full design system (Tailwind v4 CSS-first, all tokens here)
+    homelab.astro         # VLANs, services, ADRs
-  components/           # Nav, Footer, Hero, ThemeScript, etc.
+    archive.astro         # redirect to /projects/
-  context/
+  components/             # Nav, Footer, Hero, Timeline, Widget, ProjectCard, Skills
-    ThemeContext.tsx     # dark mode provider + useTheme hook
   data/
-    projects.ts         # all projects, featured + archive split
+    projects.ts           # all projects, featured + archive split
-    services.ts         # homelab services with categories
+    services.ts           # homelab services with categories
-public/                 # static assets copied into out/ on build
+    timeline.ts           # career/project timeline
+  styles/
+    globals.css           # full design system (Tailwind v4 CSS-first, all tokens here)
+public/
+  fonts/                  # self-hosted Source Code Pro woff2
 ```
 
 > Tailwind v4 is CSS-first — no `tailwind.config.ts`. All custom tokens live in `globals.css` under `@theme {}`.

astro.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  output: 'static',
+  trailingSlash: 'always',
+  outDir: 'out',
+  build: {
+    format: 'directory',
+  },
+});

eslint.config.mjs

@@ -1,18 +0,0 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-]);
-
-export default eslintConfig;

next.config.ts

@@ -1,11 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: "export",
-  trailingSlash: true,
-  images: {
-    unoptimized: true,
-  },
-};
-
-export default nextConfig;

package.json

@@ -4,27 +4,15 @@
   "private": true,
   "homepage": "https://www.lerko96.com",
   "scripts": {
-    "dev": "next dev",
+    "dev": "astro dev",
-    "build": "next build",
+    "build": "astro build",
-    "postbuild": "node -e \"require('fs').writeFileSync('out/.nojekyll', '')\"",
+    "preview": "astro preview"
-    "start": "next start",
-    "lint": "eslint",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -b master -d out -t"
   },
   "dependencies": {
-    "next": "16.2.2",
+    "astro": "^5"
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
   },
   "devDependencies": {
-    "gh-pages": "^6.0.0",
     "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/archive/page.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-
-export default function ArchiveRedirect() {
-  useEffect(() => {
-    window.location.replace("/projects/");
-  }, []);
-
-  return (
-    <>
-      <meta httpEquiv="refresh" content="0; url=/projects/" />
-      <p className="font-mono text-sm text-[var(--color-text)]">
-        This page moved.{" "}
-        <a
-          href="/projects/"
-          className="text-[var(--color-accent-green)] underline"
-        >
-          /projects/
-        </a>
-      </p>
-    </>
-  );
-}

src/app/homelab/page.tsx

@@ -1,288 +0,0 @@
-import type { Metadata } from "next";
-import Widget from "@/components/Widget";
-import { services, categoryOrder, categoryLabels } from "@/data/services";
-
-export const metadata: Metadata = {
-  title: "Homelab | Tyler Koenig",
-  description:
-    "Production-grade personal homelab: Proxmox, pfSense, 8 VLANs, WireGuard, Caddy, Authentik SSO, and 20+ self-hosted services.",
-};
-
-const glanceStats = [
-  { label: "Hypervisor", value: "Proxmox VE" },
-  { label: "Firewall", value: "pfSense (Intel N100)" },
-  { label: "Switching", value: "TP-Link Omada (managed)" },
-  { label: "ISP", value: "AT&T Fiber 1 Gbps" },
-  { 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: "Mini-PC for pfSense",
-    decision:
-      "Intel N100 mini-PC as the firewall host. ~6W idle, handles multi-Gbps routing, saturates the WAN link with WireGuard headroom to spare.",
-    why: "Right-sized for 1 Gbps fiber. A Raspberry Pi can't handle 1 Gbps plus VPN. A full rack server wastes power for this role and adds noise to a room I sit in.",
-  },
-  {
-    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.",
-  },
-];
-
-export default function HomelabPage() {
-  return (
-    <>
-      {/* Header */}
-      <div className="mb-4lh">
-        <p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
-          <span
-            className="text-[var(--color-accent-green)] select-none mr-1ch"
-            aria-hidden="true"
-          >
-            ❯
-          </span>
-          homelab
-        </p>
-        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
-          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>
-
-      {/* At a Glance */}
-      <Widget title="homelab/overview" badge={glanceStats.length} as="section">
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
-          {glanceStats.map(({ label, value }) => (
-            <div key={label} className="bg-[var(--color-surface)] px-2ch py-half-lh">
-              <p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
-                {label}
-              </p>
-              <p className="font-mono text-sm text-[var(--color-text)]">
-                {value}
-              </p>
-            </div>
-          ))}
-        </div>
-      </Widget>
-
-      {/* VLAN table */}
-      <Widget
-        title="homelab/network"
-        meta="8 network segments · default deny"
-        as="section"
-      >
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm border-collapse">
-            <thead>
-              <tr className="border-b border-[var(--color-border)]">
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
-                  Segment
-                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
-                  Name
-                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
-                  Purpose
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {vlans.map((v) => (
-                <tr
-                  key={v.id}
-                  className="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]"
-                >
-                  <td className="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
-                    {v.id}
-                  </td>
-                  <td className="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
-                    {v.name}
-                  </td>
-                  <td className="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
-                    {v.purpose}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </Widget>
-
-      {/* Services */}
-      <Widget title="homelab/services" badge={services.length} as="section">
-        <div className="flex flex-col gap-3ch">
-          {categoryOrder.map((cat) => {
-            const catServices = services.filter((s) => s.category === cat);
-            return (
-              <div key={cat}>
-                <p className="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
-                  {categoryLabels[cat]}
-                </p>
-                <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
-                  {catServices.map((svc) => (
-                    <div
-                      key={svc.name}
-                      className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-1ch px-2ch py-half-lh"
-                    >
-                      <i
-                        className={`${svc.icon} text-[var(--color-text-label)] text-xs mt-0.5 w-3.5 shrink-0`}
-                        aria-hidden="true"
-                      />
-                      <div>
-                        <p className="font-mono text-sm text-[var(--color-text)] mb-0.5">
-                          {svc.name}
-                        </p>
-                        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-                          {svc.description}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </Widget>
-
-      {/* ADRs */}
-      <Widget
-        title="homelab/ADRs"
-        meta="why things are configured the way they are"
-        badge={adrs.length}
-        as="section"
-      >
-        <div className="flex flex-col gap-px bg-[var(--color-border)]">
-          {adrs.map((adr) => (
-            <div
-              key={adr.title}
-              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh"
-            >
-              <p className="font-mono text-sm text-[var(--color-text)] mb-1lh">
-                {adr.title}
-              </p>
-              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
-                <span className="text-[var(--color-text-label)] opacity-100">
-                  decision:{" "}
-                </span>
-                {adr.decision}
-              </p>
-              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-                <span className="text-[var(--color-text-label)] opacity-100">
-                  why:{" "}
-                </span>
-                {adr.why}
-              </p>
-            </div>
-          ))}
-        </div>
-      </Widget>
-
-      {/* Gitea CTA */}
-      <section className="pt-qtr-lh">
-        <p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
-          homelab/docs
-        </p>
-        <p className="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
-          VLAN maps, runbooks, service registry, config exports, and setup
-          guides.
-        </p>
-        <a
-          href="https://gitea.lerkolabs.com/lerko/homelab"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-        >
-          ↗ gitea.lerkolabs.com/lerko/homelab
-        </a>
-      </section>
-    </>
-  );
-}

src/app/layout.tsx

@@ -1,49 +0,0 @@
-import type { Metadata } from "next";
-import { Source_Code_Pro } from "next/font/google";
-import "./globals.css";
-import ThemeScript from "@/components/ThemeScript";
-import Nav from "@/components/Nav";
-import Footer from "@/components/Footer";
-import { ThemeProvider } from "@/context/ThemeContext";
-
-const sourceCodePro = Source_Code_Pro({
-  subsets: ["latin"],
-  variable: "--font-mono",
-  display: "swap",
-});
-
-export const metadata: Metadata = {
-  title: "Tyler Koenig",
-  description:
-    "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <ThemeScript />
-      </head>
-      <body
-        className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
-      >
-        <ThemeProvider>
-          {/* Full-width sticky nav */}
-          <Nav />
-
-          {/* Centered content column — border-l/r makes centering always visible */}
-          <div className="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]">
-            <main className="px-4ch py-3lh">
-              {children}
-            </main>
-            <Footer />
-          </div>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}

src/app/page.tsx

@@ -1,18 +0,0 @@
-import type { Metadata } from "next";
-import Hero from "@/components/Hero";
-import Timeline from "@/components/Timeline";
-
-export const metadata: Metadata = {
-  title: "Tyler Koenig",
-  description:
-    "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
-};
-
-export default function Home() {
-  return (
-    <>
-      <Hero />
-      <Timeline />
-    </>
-  );
-}

src/app/projects/page.tsx

@@ -1,77 +0,0 @@
-import type { Metadata } from "next";
-import Widget from "@/components/Widget";
-import ProjectCard from "@/components/ProjectCard";
-import { featuredProjects, archiveProjects } from "@/data/projects";
-
-export const metadata: Metadata = {
-  title: "Projects | Tyler Koenig",
-  description:
-    "Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive.",
-};
-
-export default function ProjectsPage() {
-  return (
-    <>
-      <div className="mb-4lh">
-        <p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
-          <span className="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
-          projects
-        </p>
-        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
-          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 className="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
-          {featuredProjects.map((project) => (
-            <ProjectCard key={project.slug} project={project} />
-          ))}
-        </div>
-      </Widget>
-
-      <Widget title="projects/archive" badge={archiveProjects.length} as="section">
-        <div className="flex flex-col gap-px bg-[var(--color-border)]">
-          {archiveProjects.map((project) => (
-            <a
-              key={project.slug}
-              href={project.githubUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
-            >
-              <div className="flex flex-col gap-1ch flex-1 min-w-0">
-                <div className="flex items-center gap-1ch">
-                  {project.year && (
-                    <span className="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
-                      {project.year}
-                    </span>
-                  )}
-                  <span className="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
-                    {project.title}
-                  </span>
-                </div>
-                <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-                  {project.description}
-                </p>
-                <div className="flex flex-wrap gap-x-1ch gap-y-0.5">
-                  {project.tags.map((tag) => (
-                    <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              </div>
-              <span
-                className="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
-                aria-hidden="true"
-              >
-                ↗
-              </span>
-            </a>
-          ))}
-        </div>
-      </Widget>
-    </>
-  );
-}

src/components/Footer.astro

@@ -0,0 +1,47 @@
+---
+const year = new Date().getFullYear();
+---
+
+<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
+  <div class="px-4ch flex items-center justify-between">
+    <span class="font-mono text-sm text-[var(--color-text-dim)]">
+      &copy; {year} Tyler Koenig
+    </span>
+    <div class="flex items-center gap-2ch">
+      <a
+        href="https://github.com/lerko96"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="GitHub"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [github]
+      </a>
+      <a
+        href="https://gitea.lerkolabs.com/lerko"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Gitea"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [gitea]
+      </a>
+      <a
+        href="https://www.linkedin.com/in/tyler-koenig"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="LinkedIn"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [linkedin]
+      </a>
+      <a
+        href="mailto:tyler@lerkolabs.com"
+        aria-label="Email"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [email]
+      </a>
+    </div>
+  </div>
+</footer>

src/components/Footer.tsx

@@ -1,47 +0,0 @@
-export default function Footer() {
-  return (
-    <footer className="border-t border-[var(--color-border)] py-1lh mt-2lh">
-      <div className="px-4ch flex items-center justify-between">
-        <span className="font-mono text-sm text-[var(--color-text-dim)]">
-          &copy; {new Date().getFullYear()} Tyler Koenig
-        </span>
-        <div className="flex items-center gap-2ch">
-          <a
-            href="https://github.com/lerko96"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="GitHub"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [github]
-          </a>
-          <a
-            href="https://gitea.lerkolabs.com/lerko"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Gitea"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [gitea]
-          </a>
-          <a
-            href="https://www.linkedin.com/in/tyler-koenig"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="LinkedIn"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [linkedin]
-          </a>
-          <a
-            href="mailto:tyler@lerkolabs.com"
-            aria-label="Email"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [email]
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
-}

src/components/Hero.astro

@@ -0,0 +1,71 @@
+<section class="mb-16">
+  <div class="flex flex-col gap-1ch">
+    <div>
+      <p class="font-mono text-sm font-bold text-[var(--color-text)]">
+        <span
+          class="text-[var(--color-accent-green)] select-none mr-1ch"
+          aria-hidden="true"
+        >
+          ❯
+        </span>
+        tyler koenig
+      </p>
+      <p class="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
+        Security Operations · Self-Hosted Infrastructure
+      </p>
+    </div>
+
+    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
+      Homelab runs 30+
+      services across segmented VLANs — pfSense, Authentik SSO, full
+      observability stack. Write software too: mobile apps, Go backends,
+      open protocols. Daily drivers, all of it.{" "}
+      <span
+        class="animate-cursor text-[var(--color-accent-green)]"
+        aria-hidden="true"
+      >
+        █
+      </span>
+    </p>
+
+    <div class="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
+      <span class="font-mono text-sm text-[var(--color-accent-green)]">
+        ● available
+      </span>
+      <a
+        href="https://github.com/lerko96"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="GitHub"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [github]
+      </a>
+      <a
+        href="https://gitea.lerkolabs.com/lerko"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Gitea"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [gitea]
+      </a>
+      <a
+        href="https://www.linkedin.com/in/tyler-koenig"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="LinkedIn"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [linkedin]
+      </a>
+      <a
+        href="mailto:tyler@lerkolabs.com"
+        aria-label="Email"
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        [email]
+      </a>
+    </div>
+  </div>
+</section>

src/components/Hero.tsx

@@ -1,75 +0,0 @@
-export default function Hero() {
-  return (
-    <section className="mb-16">
-      <div className="flex flex-col gap-1ch">
-        <div>
-          <p className="font-mono text-sm font-bold text-[var(--color-text)]">
-            <span
-              className="text-[var(--color-accent-green)] select-none mr-1ch"
-              aria-hidden="true"
-            >
-              ❯
-            </span>
-            tyler koenig
-          </p>
-          <p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
-            Security Operations · Self-Hosted Infrastructure
-          </p>
-        </div>
-
-        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
-          Homelab runs 30+
-          services across segmented VLANs — pfSense, Authentik SSO, full
-          observability stack. Write software too: mobile apps, Go backends,
-          open protocols. Daily drivers, all of it.{" "}
-          <span
-            className="animate-cursor text-[var(--color-accent-green)]"
-            aria-hidden="true"
-          >
-            █
-          </span>
-        </p>
-
-        <div className="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
-          <span className="font-mono text-sm text-[var(--color-accent-green)]">
-            ● available
-          </span>
-          <a
-            href="https://github.com/lerko96"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="GitHub"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [github]
-          </a>
-          <a
-            href="https://gitea.lerkolabs.com/lerko"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Gitea"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [gitea]
-          </a>
-          <a
-            href="https://www.linkedin.com/in/tyler-koenig"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="LinkedIn"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [linkedin]
-          </a>
-          <a
-            href="mailto:tyler@lerkolabs.com"
-            aria-label="Email"
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            [email]
-          </a>
-        </div>
-      </div>
-    </section>
-  );
-}

src/components/Nav.astro

@@ -0,0 +1,73 @@
+---
+const pathname = Astro.url.pathname;
+
+const links = [
+  { href: "/", label: "tyler" },
+  { href: "/homelab/", label: "homelab" },
+  { href: "/projects/", label: "projects" },
+];
+---
+
+<header class="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
+  <nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
+    <a
+      href="/"
+      class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
+    >
+      ~/
+    </a>
+
+    <ul class="flex items-center gap-2ch">
+      {links.map(({ href, label }) => {
+        const active = pathname === href || pathname === href.replace(/\/$/, "");
+        return (
+          <li>
+            <a
+              href={href}
+              aria-current={active ? "page" : undefined}
+              class:list={[
+                "font-mono text-sm",
+                active
+                  ? "text-[var(--color-text)]"
+                  : "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
+              ]}
+            >
+              {label}
+            </a>
+          </li>
+        );
+      })}
+      <li>
+        <button
+          data-theme-toggle
+          aria-label="Switch to light mode"
+          class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
+        >
+          [light]
+        </button>
+      </li>
+    </ul>
+  </nav>
+</header>
+
+<script>
+  const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
+
+  function update() {
+    const isDark = document.documentElement.classList.contains("dark");
+    btn.textContent = isDark ? "[light]" : "[dark]";
+    btn.setAttribute(
+      "aria-label",
+      isDark ? "Switch to light mode" : "Switch to dark mode",
+    );
+  }
+
+  btn.addEventListener("click", () => {
+    const next = !document.documentElement.classList.contains("dark");
+    document.documentElement.classList.toggle("dark", next);
+    localStorage.setItem("lerko96-dark-mode", String(next));
+    update();
+  });
+
+  update();
+</script>

src/components/Nav.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useTheme } from "@/context/ThemeContext";
-
-const links = [
-  { href: "/", label: "tyler" },
-  { href: "/homelab/", label: "homelab" },
-  { href: "/projects/", label: "projects" },
-];
-
-export default function Nav() {
-  const pathname = usePathname();
-  const { isDark, toggle } = useTheme();
-  return (
-    <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
-      <nav className="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
-        <Link
-          href="/"
-          className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
-        >
-          ~/
-        </Link>
-
-        <ul className="flex items-center gap-2ch">
-          {links.map(({ href, label }) => {
-            const active =
-              pathname === href || pathname === href.replace(/\/$/, "");
-            return (
-              <li key={href}>
-                <Link
-                  href={href}
-                  aria-current={active ? "page" : undefined}
-                  className={`font-mono text-sm ${
-                    active
-                      ? "text-[var(--color-text)]"
-                      : "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-                  }`}
-                >
-                  {label}
-                </Link>
-              </li>
-            );
-          })}
-          <li>
-            <button
-              onClick={toggle}
-              aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
-            >
-              {isDark ? "[light]" : "[dark]"}
-            </button>
-          </li>
-        </ul>
-      </nav>
-    </header>
-  );
-}

src/components/ProjectCard.astro

@@ -0,0 +1,67 @@
+---
+import type { Project } from "@/data/projects";
+
+interface Props {
+  project: Project;
+}
+
+const { project } = Astro.props;
+---
+
+<article class="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
+  <div class="flex items-start justify-between gap-1ch">
+    <a
+      href={project.githubUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
+    >
+      {project.title}
+    </a>
+    <div class="flex items-center gap-1ch shrink-0">
+      {project.stats && (
+        <span class="font-mono text-sm text-[var(--color-text-dim)]">
+          {project.stats}
+        </span>
+      )}
+      {project.externalUrl && (
+        <a
+          href={project.externalUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={`View ${project.title} externally`}
+          class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+        >
+          ↗
+        </a>
+      )}
+      <a
+        href={project.githubUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={`View ${project.title} on GitHub`}
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        ↗
+      </a>
+    </div>
+  </div>
+
+  {project.statusBadge && (
+    <span class="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
+      {project.statusBadge}
+    </span>
+  )}
+
+  <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
+    {project.description}
+  </p>
+
+  <div class="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
+    {project.tags.map((tag) => (
+      <span class="font-mono text-sm text-[var(--color-text-dim)]">
+        {tag}
+      </span>
+    ))}
+  </div>
+</article>

src/components/ProjectCard.tsx

@@ -1,67 +0,0 @@
-import type { Project } from "@/data/projects";
-
-type Props = {
-  project: Project;
-};
-
-export default function ProjectCard({ project }: Props) {
-  return (
-    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
-      <div className="flex items-start justify-between gap-1ch">
-        <a
-          href={project.githubUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
-        >
-          {project.title}
-        </a>
-        <div className="flex items-center gap-1ch shrink-0">
-          {project.stats && (
-            <span className="font-mono text-sm text-[var(--color-text-dim)]">
-              {project.stats}
-            </span>
-          )}
-          {project.externalUrl && (
-            <a
-              href={project.externalUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`View ${project.title} externally`}
-              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-            >
-              ↗
-            </a>
-          )}
-          <a
-            href={project.githubUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={`View ${project.title} on GitHub`}
-            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-          >
-            ↗
-          </a>
-        </div>
-      </div>
-
-      {project.statusBadge && (
-        <span className="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
-          {project.statusBadge}
-        </span>
-      )}
-
-      <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
-        {project.description}
-      </p>
-
-      <div className="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
-        {project.tags.map((tag) => (
-          <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
-            {tag}
-          </span>
-        ))}
-      </div>
-    </article>
-  );
-}

src/components/Skills.astro

@@ -0,0 +1,43 @@
+---
+import Widget from "./Widget.astro";
+
+const skillGroups = [
+  {
+    label: "Infrastructure",
+    skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
+  },
+  {
+    label: "Desktop & Tools",
+    skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs"],
+  },
+  {
+    label: "Practices",
+    skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
+  },
+  {
+    label: "Languages",
+    skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
+  },
+  {
+    label: "Frontend",
+    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
+  },
+];
+
+const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
+---
+
+<Widget title="tyler/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">
+          {label}
+        </span>
+        <span class="font-mono text-sm text-[var(--color-text)]">
+          {skills.join(" · ")}
+        </span>
+      </div>
+    ))}
+  </div>
+</Widget>

src/components/Skills.tsx

@@ -1,48 +0,0 @@
-import Widget from "@/components/Widget";
-
-const skillGroups = [
-  {
-    label: "Infrastructure",
-    skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
-  },
-  {
-    label: "Desktop & Tools",
-    skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs", ],
-  },
-  {
-    label: "Practices",
-    skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
-  },
-  {
-    label: "Languages",
-    skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
-  },
-  {
-    label: "Frontend",
-    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
-  },
-];
-
-const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
-
-export default function Skills() {
-  return (
-    <Widget title="tyler/skills" badge={totalCount} as="section">
-      <div className="flex flex-col">
-        {skillGroups.map(({ label, skills }) => (
-          <div
-            key={label}
-            className="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh"
-          >
-            <span className="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
-              {label}
-            </span>
-            <span className="font-mono text-sm text-[var(--color-text)]">
-              {skills.join(" · ")}
-            </span>
-          </div>
-        ))}
-      </div>
-    </Widget>
-  );
-}

src/components/ThemeScript.tsx

@@ -1,12 +0,0 @@
-// Server component — renders a blocking inline script that sets the dark class
-// on <html> before React hydrates, preventing flash of wrong theme.
-export default function ThemeScript() {
-  const script = `
-    (function() {
-      var stored = localStorage.getItem('lerko96-dark-mode');
-      var dark = stored === null ? true : stored === 'true';
-      if (dark) document.documentElement.classList.add('dark');
-    })();
-  `;
-  return <script dangerouslySetInnerHTML={{ __html: script }} />;
-}

src/components/Timeline.astro

@@ -0,0 +1,88 @@
+---
+import Widget from "./Widget.astro";
+import { timeline, type TimelineType } from "@/data/timeline";
+
+const typeColor: Record<TimelineType, string> = {
+  career: "var(--color-timeline-career)",
+  education: "var(--color-timeline-education)",
+  cert: "var(--color-timeline-cert)",
+  project: "var(--color-timeline-project)",
+  homelab: "var(--color-timeline-homelab)",
+};
+
+const typeLabel: Record<TimelineType, string> = {
+  career: "career",
+  education: "education",
+  cert: "cert",
+  project: "project",
+  homelab: "homelab",
+};
+---
+
+<Widget title="tyler/journey">
+  <ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
+    {timeline.map((entry) => (
+      <li data-tl-entry class="pl-[3ch] pb-2lh last:pb-0 relative">
+        <span
+          class="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
+          style={`background-color: ${typeColor[entry.type]}`}
+          aria-hidden="true"
+        />
+
+        <div class="flex items-center gap-1ch mb-half-lh">
+          <span class="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
+          <span
+            class="font-mono text-sm px-1 border"
+            style={`color: ${typeColor[entry.type]}; border-color: ${typeColor[entry.type]}; opacity: 0.7;`}
+          >
+            {typeLabel[entry.type]}
+          </span>
+        </div>
+
+        <p class="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
+          {entry.title}
+        </p>
+
+        <p class="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
+          {entry.description}
+        </p>
+
+        {entry.tags && entry.tags.length > 0 && (
+          <div class="flex flex-wrap gap-x-1ch gap-y-half-lh">
+            {entry.tags.map((tag) => (
+              <span class="font-mono text-sm text-[var(--color-text-dim)]">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </li>
+    ))}
+  </ol>
+</Widget>
+
+<script>
+  if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    const entries = document.querySelectorAll<HTMLElement>("[data-tl-entry]");
+
+    const observer = new IntersectionObserver(
+      (observed) => {
+        observed.forEach((entry) => {
+          if (entry.isIntersecting) {
+            (entry.target as HTMLElement).style.opacity = "1";
+            (entry.target as HTMLElement).style.transform = "translateY(0)";
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.15 },
+    );
+
+    entries.forEach((el) => {
+      el.style.opacity = "0";
+      el.style.transform = "translateY(8px)";
+      el.style.transition = "opacity 240ms linear, transform 240ms linear";
+      observer.observe(el);
+    });
+  }
+</script>

src/components/Timeline.tsx

@@ -1,107 +0,0 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-import Widget from '@/components/Widget'
-import { timeline, type TimelineType } from '@/data/timeline'
-
-const typeColor: Record<TimelineType, string> = {
-  career:    'var(--color-timeline-career)',
-  education: 'var(--color-timeline-education)',
-  cert:      'var(--color-timeline-cert)',
-  project:   'var(--color-timeline-project)',
-  homelab:   'var(--color-timeline-homelab)',
-}
-
-const typeLabel: Record<TimelineType, string> = {
-  career:    'career',
-  education: 'education',
-  cert:      'cert',
-  project:   'project',
-  homelab:   'homelab',
-}
-
-export default function Timeline() {
-  const listRef = useRef<HTMLOListElement>(null)
-
-  useEffect(() => {
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
-
-    const entries = listRef.current?.querySelectorAll<HTMLLIElement>('[data-tl-entry]')
-    if (!entries) return
-
-    const observer = new IntersectionObserver(
-      (observed) => {
-        observed.forEach((entry) => {
-          if (entry.isIntersecting) {
-            ;(entry.target as HTMLElement).style.opacity = '1'
-            ;(entry.target as HTMLElement).style.transform = 'translateY(0)'
-            observer.unobserve(entry.target)
-          }
-        })
-      },
-      { threshold: 0.15 },
-    )
-
-    entries.forEach((el) => {
-      el.style.opacity = '0'
-      el.style.transform = 'translateY(8px)'
-      el.style.transition = 'opacity 240ms linear, transform 240ms linear'
-      observer.observe(el)
-    })
-
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <Widget title="tyler/journey">
-      <ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
-        {timeline.map((entry, i) => (
-          <li key={i} data-tl-entry className="pl-[3ch] pb-2lh last:pb-0 relative">
-            {/* Spine dot */}
-            <span
-              className="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
-              style={{ backgroundColor: typeColor[entry.type] }}
-              aria-hidden="true"
-            />
-
-            {/* Date + type badge */}
-            <div className="flex items-center gap-1ch mb-half-lh">
-              <span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
-              <span
-                className="font-mono text-sm px-1 border"
-                style={{
-                  color: typeColor[entry.type],
-                  borderColor: typeColor[entry.type],
-                  opacity: 0.7,
-                }}
-              >
-                {typeLabel[entry.type]}
-              </span>
-            </div>
-
-            {/* Title */}
-            <p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
-              {entry.title}
-            </p>
-
-            {/* Description */}
-            <p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
-              {entry.description}
-            </p>
-
-            {/* Tags */}
-            {entry.tags && entry.tags.length > 0 && (
-              <div className="flex flex-wrap gap-x-1ch gap-y-half-lh">
-                {entry.tags.map((tag) => (
-                  <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            )}
-          </li>
-        ))}
-      </ol>
-    </Widget>
-  )
-}

src/components/Widget.astro

@@ -0,0 +1,30 @@
+---
+interface Props {
+  title: string;
+  badge?: string | number;
+  meta?: string;
+  as?: "section" | "div" | "article";
+  class?: string;
+}
+
+const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
+const slashIdx = title.lastIndexOf("/");
+const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
+const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
+---
+
+<Tag class:list={["mb-4lh", className]}>
+  <div class="flex items-center gap-1ch mb-2lh">
+    {prefix && (
+      <span class="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
+    )}
+    <span class="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
+    {badge !== undefined && (
+      <span class="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
+    )}
+    {meta && (
+      <span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
+    )}
+  </div>
+  <slot />
+</Tag>

src/components/Widget.tsx

@@ -1,39 +0,0 @@
-type WidgetProps = {
-  title: string;
-  badge?: string | number;
-  meta?: string;
-  as?: "section" | "div" | "article";
-  className?: string;
-  children: React.ReactNode;
-};
-
-export default function Widget({
-  title,
-  badge,
-  meta,
-  as: Tag = "section",
-  className,
-  children,
-}: WidgetProps) {
-  const slashIdx = title.lastIndexOf("/");
-  const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
-  const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
-
-  return (
-    <Tag className={`mb-4lh ${className ?? ""}`}>
-      <div className="flex items-center gap-1ch mb-2lh">
-        {prefix && (
-          <span className="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
-        )}
-        <span className="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
-        {badge !== undefined && (
-          <span className="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
-        )}
-        {meta && (
-          <span className="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
-        )}
-      </div>
-      {children}
-    </Tag>
-  );
-}

src/context/ThemeContext.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { createContext, useContext, useEffect, useState } from "react";
-
-type ThemeContextType = {
-  isDark: boolean;
-  toggle: () => void;
-};
-
-const ThemeContext = createContext<ThemeContextType>({
-  isDark: true,
-  toggle: () => {},
-});
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [isDark, setIsDark] = useState(true);
-
-  useEffect(() => {
-    const stored = localStorage.getItem("lerko96-dark-mode");
-    const dark = stored === null ? true : stored === "true";
-    setIsDark(dark);
-    document.documentElement.classList.toggle("dark", dark);
-  }, []);
-
-  function toggle() {
-    const next = !isDark;
-    setIsDark(next);
-    localStorage.setItem("lerko96-dark-mode", String(next));
-    document.documentElement.classList.toggle("dark", next);
-  }
-
-  return (
-    <ThemeContext.Provider value={{ isDark, toggle }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  return useContext(ThemeContext);
-}

src/data/projects.ts

@@ -27,8 +27,8 @@ export const projects: Project[] = [
     slug: "portfolio",
     title: "portfolio",
     description:
-      "Next.js 16 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 Nginx, deployed via Gitea Actions CI.",
-    tags: ["Next.js", "Dockerfile", "Tailwind", "nginx", "Caddy"],
+    tags: ["Astro", "Dockerfile", "Tailwind", "nginx", "Caddy"],
     githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
     tier: "featured",
     year: 2021,

src/data/services.ts

@@ -2,56 +2,55 @@ export type Service = {
   name: string;
   description: string;
   category: "infrastructure" | "security" | "monitoring" | "productivity" | "media";
-  icon: string; // Font Awesome class
 };
 
 export const services: Service[] = [
   // Infrastructure
-  { name: "pfSense", description: "Firewall, DHCP, routing gateway on N100", category: "infrastructure", icon: "fas fa-shield-halved" },
+  { name: "pfSense", description: "Firewall, DHCP, routing gateway on Netgate 1100", category: "infrastructure" },
-  { name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure", icon: "fas fa-globe" },
+  { name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure" },
-  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure", icon: "fas fa-filter" },
+  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure" },
-  { name: "WireGuard", description: "VPN — full LAN access for remote clients", category: "infrastructure", icon: "fas fa-lock" },
+  { 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", icon: "fas fa-envelope" },
+  { 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", icon: "fas fa-shield" },
+  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure" },
-  { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure", icon: "fas fa-house" },
+  { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure" },
 
   // Security / Auth
-  { name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security", icon: "fas fa-id-badge" },
+  { name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security" },
-  { name: "Vaultwarden", description: "Self-hosted password manager, isolated in its own LXC", category: "security", icon: "fas fa-vault" },
+  { name: "Vaultwarden", description: "Self-hosted password manager, isolated in its own LXC", category: "security" },
 
   // Monitoring
-  { name: "Victoria Metrics", description: "Long-term metrics storage and querying", category: "monitoring", icon: "fas fa-chart-line" },
+  { name: "Victoria Metrics", description: "Long-term metrics storage and querying", category: "monitoring" },
-  { name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring", icon: "fas fa-chart-bar" },
+  { name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring" },
-  { name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring", icon: "fas fa-server" },
+  { name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring" },
-  { name: "ntfy", description: "Self-hosted push notifications", category: "monitoring", icon: "fas fa-bell" },
+  { name: "ntfy", description: "Self-hosted push notifications", category: "monitoring" },
 
   // Productivity
-  { name: "Gitea", description: "Personal Git server", category: "productivity", icon: "fas fa-code-branch" },
+  { name: "Gitea", description: "Personal Git server", category: "productivity" },
-  { name: "Outline", description: "Team wiki and knowledge base", category: "productivity", icon: "fas fa-book" },
+  { name: "Outline", description: "Team wiki and knowledge base", category: "productivity" },
-  { name: "Vikunja", description: "Task management", category: "productivity", icon: "fas fa-list-check" },
+  { name: "Vikunja", description: "Task management", category: "productivity" },
-  { name: "Actual Budget", description: "Personal budgeting", category: "productivity", icon: "fas fa-wallet" },
+  { name: "Actual Budget", description: "Personal budgeting", category: "productivity" },
-  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity", icon: "fas fa-coins" },
+  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity" },
-  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity", icon: "fas fa-bookmark" },
+  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity" },
-  { name: "FreshRSS", description: "RSS reader", category: "productivity", icon: "fas fa-rss" },
+  { name: "FreshRSS", description: "RSS reader", category: "productivity" },
-  { name: "Memos", description: "Quick notes and journal", category: "productivity", icon: "fas fa-note-sticky" },
+  { name: "Memos", description: "Quick notes and journal", category: "productivity" },
-  { name: "Traggo", description: "Time tracking", category: "productivity", icon: "fas fa-clock" },
+  { name: "Traggo", description: "Time tracking", category: "productivity" },
-  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity", icon: "fas fa-calendar" },
+  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity" },
-  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity", icon: "fas fa-table" },
+  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity" },
-  { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity", icon: "fas fa-gauge" },
+  { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity" },
-  { name: "Filebrowser", description: "Web-based file manager", category: "productivity", icon: "fas fa-folder-open" },
+  { name: "Filebrowser", description: "Web-based file manager", category: "productivity" },
 
   // Media
-  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media", icon: "fas fa-film" },
+  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media" },
-  { name: "Jellyfin", description: "Open-source media streaming", category: "media", icon: "fas fa-play" },
+  { name: "Jellyfin", description: "Open-source media streaming", category: "media" },
-  { name: "Sonarr", description: "Automated TV show management", category: "media", icon: "fas fa-tv" },
+  { name: "Sonarr", description: "Automated TV show management", category: "media" },
-  { name: "Radarr", description: "Automated movie management", category: "media", icon: "fas fa-video" },
+  { name: "Radarr", description: "Automated movie management", category: "media" },
-  { name: "Lidarr", description: "Automated music management", category: "media", icon: "fas fa-music" },
+  { name: "Lidarr", description: "Automated music management", category: "media" },
-  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media", icon: "fas fa-magnifying-glass" },
+  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
-  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media", icon: "fas fa-closed-captioning" },
+  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
-  { name: "nzbget", description: "Usenet downloader", category: "media", icon: "fas fa-download" },
+  { name: "nzbget", description: "Usenet downloader", category: "media" },
-  { name: "qBittorrent", description: "Torrent client with web UI", category: "media", icon: "fas fa-magnet" },
+  { name: "qBittorrent", description: "Torrent client with web UI", category: "media" },
-  { name: "Kavita", description: "Self-hosted manga and book reader", category: "media", icon: "fas fa-book-open" },
+  { name: "Kavita", description: "Self-hosted manga and book reader", category: "media" },
-  { name: "Openshelf", description: "Book library with auto-ingest", category: "media", icon: "fas fa-book-open" },
+  { name: "Openshelf", description: "Book library with auto-ingest", category: "media" },
 ];
 
 export const categoryOrder: Service["category"][] = [

src/data/timeline.ts

@@ -27,8 +27,8 @@ export const timeline: TimelineEntry[] = [
     title: "Portfolio Site v2",
     type: "project",
     description:
-      "Next.js 16 portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+      "Astro portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
-    tags: ["next.js", "tailwind", "self-hosted"],
+    tags: ["astro", "tailwind", "self-hosted"],
   },
   {
     date: "2026-04",
@@ -74,7 +74,7 @@ export const timeline: TimelineEntry[] = [
     title: "pfSense",
     type: "homelab",
     description:
-      "Netgate 1100 picked up on ebay to experience hands on networking configuration and troubleshooting.",
+      "Netgate 1100 (Marvell ARMADA 3720) picked up on eBay — hands-on networking configuration, VLANs, firewall rules, and troubleshooting.",
     tags: ["network", "firewall", "vlan", "dhcp"],
   },
   {

src/layouts/Base.astro

@@ -0,0 +1,69 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {
+  title = "Tyler Koenig",
+  description = "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <script is:inline>
+      (function () {
+        var stored = localStorage.getItem("lerko96-dark-mode");
+        var dark = stored === null ? true : stored === "true";
+        if (dark) document.documentElement.classList.add("dark");
+      })();
+    </script>
+  </head>
+  <body
+    class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
+  >
+    <slot name="nav" />
+    <div
+      class="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]"
+    >
+      <main class="px-4ch py-3lh">
+        <slot />
+      </main>
+      <slot name="footer" />
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  @import "../styles/globals.css";
+
+  @font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("/fonts/SourceCodePro-latin-ext.woff2") format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+      U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+      U+A720-A7FF;
+  }
+
+  @font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("/fonts/SourceCodePro-latin.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+</style>

src/pages/archive.astro

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url=/projects/" />
+    <link rel="canonical" href="/projects/" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <p>This page moved. <a href="/projects/">/projects/</a></p>
+  </body>
+</html>

src/pages/homelab.astro

@@ -0,0 +1,237 @@
+---
+import Base from "@/layouts/Base.astro";
+import Nav from "@/components/Nav.astro";
+import Footer from "@/components/Footer.astro";
+import Widget from "@/components/Widget.astro";
+import { services, categoryOrder, categoryLabels } from "@/data/services";
+
+const glanceStats = [
+  { label: "Hypervisor", value: "Proxmox VE" },
+  { label: "Firewall", value: "pfSense (Netgate 1100)" },
+  { label: "Switching", value: "TP-Link Omada (managed)" },
+  { label: "ISP", value: "AT&T Fiber 1 Gbps" },
+  { 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="mb-4lh">
+    <p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+      <span
+        class="text-[var(--color-accent-green)] select-none mr-1ch"
+        aria-hidden="true"
+      >
+        ❯
+      </span>
+      homelab
+    </p>
+    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
+      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-2ch py-half-lh">
+          <p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
+            {label}
+          </p>
+          <p class="font-mono text-sm text-[var(--color-text)]">
+            {value}
+          </p>
+        </div>
+      ))}
+    </div>
+  </Widget>
+
+  <Widget
+    title="homelab/network"
+    meta="8 network segments · default deny"
+    as="section"
+  >
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm border-collapse">
+        <thead>
+          <tr class="border-b border-[var(--color-border)]">
+            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
+              Segment
+            </th>
+            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
+              Name
+            </th>
+            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
+              Purpose
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {vlans.map((v) => (
+            <tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
+              <td class="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
+                {v.id}
+              </td>
+              <td class="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
+                {v.name}
+              </td>
+              <td class="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
+                {v.purpose}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </Widget>
+
+  <Widget title="homelab/services" badge={services.length} as="section">
+    <div class="flex flex-col gap-3ch">
+      {categoryOrder.map((cat) => {
+        const catServices = services.filter((s) => s.category === cat);
+        return (
+          <div>
+            <p class="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
+              {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)] flex items-start gap-1ch px-2ch py-half-lh">
+                  <div>
+                    <p class="font-mono text-sm text-[var(--color-text)] mb-0.5">
+                      {svc.name}
+                    </p>
+                    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                      {svc.description}
+                    </p>
+                  </div>
+                </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)]">
+      {adrs.map((adr) => (
+        <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh">
+          <p class="font-mono text-sm text-[var(--color-text)] mb-1lh">
+            {adr.title}
+          </p>
+          <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
+            <span class="text-[var(--color-text-label)] opacity-100">
+              decision:{" "}
+            </span>
+            {adr.decision}
+          </p>
+          <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+            <span class="text-[var(--color-text-label)] opacity-100">
+              why:{" "}
+            </span>
+            {adr.why}
+          </p>
+        </div>
+      ))}
+    </div>
+  </Widget>
+
+  <section class="pt-qtr-lh">
+    <p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
+      homelab/docs
+    </p>
+    <p class="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
+      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="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+    >
+      ↗ gitea.lerkolabs.com/lerko/homelab
+    </a>
+  </section>
+
+  <Footer slot="footer" />
+</Base>

src/pages/index.astro

@@ -0,0 +1,14 @@
+---
+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 Timeline from "@/components/Timeline.astro";
+---
+
+<Base>
+  <Nav slot="nav" />
+  <Hero />
+  <Timeline />
+  <Footer slot="footer" />
+</Base>

src/pages/projects.astro

@@ -0,0 +1,77 @@
+---
+import Base from "@/layouts/Base.astro";
+import Nav from "@/components/Nav.astro";
+import Footer from "@/components/Footer.astro";
+import Widget from "@/components/Widget.astro";
+import ProjectCard from "@/components/ProjectCard.astro";
+import { featuredProjects, archiveProjects } from "@/data/projects";
+---
+
+<Base
+  title="Projects | Tyler Koenig"
+  description="Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive."
+>
+  <Nav slot="nav" />
+
+  <div class="mb-4lh">
+    <p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+      <span class="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
+      projects
+    </p>
+    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
+      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-1ch">
+      {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)]">
+      {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-2ch px-2ch py-1lh group"
+        >
+          <div class="flex flex-col gap-1ch flex-1 min-w-0">
+            <div class="flex items-center gap-1ch">
+              {project.year && (
+                <span class="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
+                  {project.year}
+                </span>
+              )}
+              <span class="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
+                {project.title}
+              </span>
+            </div>
+            <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+              {project.description}
+            </p>
+            <div class="flex flex-wrap gap-x-1ch gap-y-0.5">
+              {project.tags.map((tag) => (
+                <span class="font-mono text-sm text-[var(--color-text-dim)]">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+          <span
+            class="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
+            aria-hidden="true"
+          >
+            ↗
+          </span>
+        </a>
+      ))}
+    </div>
+  </Widget>
+
+  <Footer slot="footer" />
+</Base>

tsconfig.json

@@ -1,34 +1,9 @@
 {
+  "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "target": "ES2017",
+    "baseUrl": ".",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
     "paths": {
       "@/*": ["./src/*"]
     }
-  },
+  }
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
 }