feat(theme): implement console.dark + console.light design system

Replace macOS Classic theme with console-inspired palette. Amber accent, warm off-white text hierarchy, desaturated green status pips, VLAN-grouped home services, git-log tabular journey, identity key-value grid with contact links, active pane (studying/shipping/maintaining). Wider 960px container, pane headers, responsive mobile fallbacks.
feat(site): migrate from Next.js to Astro
2026-05-18 22:09:59 -04:00 · 2026-05-18 20:07:24 -04:00 · 2026-04-27 06:18:24 +00:00 · 2026-04-27 00:49:57 -04:00 · 2026-04-27 00:49:52 -04:00 · 2026-04-27 00:49:47 -04:00
49 changed files with 5295 additions and 6448 deletions
@@ -1,37 +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
 # claude code
 CLAUDE.md
 .claude/
 # docs
 /docs
@@ -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
    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 {}`.
@@ -0,0 +1,10 @@
 import { defineConfig } from 'astro/config';
 export default defineConfig({
  output: 'static',
  trailingSlash: 'always',
  outDir: 'out',
  build: {
    format: 'directory',
  },
 });
@@ -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;
@@ -1,11 +0,0 @@
 import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
 };
 export default nextConfig;
@@ -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"
  }
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,68 +0,0 @@
 import type { Metadata } from "next";
 import Widget from "@/components/Widget";
 import { archiveProjects } from "@/data/projects";
 export const metadata: Metadata = {
  title: "Archive | Tyler Koenig",
  description: "Earlier projects and experiments — browser extensions, canvas apps, and bootcamp work.",
 };
 export default function ArchivePage() {
  return (
    <>
      <div className="mb-16">
        <p className="font-mono text-base font-bold text-[var(--color-text)] mb-3">
          <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
          tyler/projects/archive
        </p>
        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
          Experiments, browser extensions, and bootcamp projects. Kept here for context — not
          representative of current work.
        </p>
      </div>
      <Widget title="tyler/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-6 px-4 py-4 group"
            >
              <div className="flex flex-col gap-2 flex-1 min-w-0">
                <div className="flex items-center gap-3">
                  {project.year && (
                    <span className="font-mono text-xs 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-3 gap-y-0.5">
                  {project.tags.map((tag) => (
                    <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
              <span
                className="font-mono text-xs text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
                aria-hidden="true"
              >
                ↗
              </span>
            </a>
          ))}
        </div>
      </Widget>
    </>
  );
 }
@@ -1,93 +0,0 @@
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
@theme {
  /* macOS Classic Dark (default) */
  --color-bg:             #131313;
  --color-surface:        #1e1d1e;
  --color-surface-raised: #272727;
  --color-border:         #3a3a3a;
  --color-border-bright:  #404040;
  --color-text:           #caccca;
  --color-text-label:     #9e9e9e;
  --color-text-dim:       #8f8f8f;
  --color-accent-green:   #62ba46;
  --color-accent-red:     #c74028;
  /* Timeline type colors — dark */
  --color-timeline-career:    #62ba46;
  --color-timeline-education: #c28b12;
  --color-timeline-cert:      #c75828;
  --color-timeline-project:   #c72855;
  --color-timeline-homelab:   #e1d797;
  /* Typography */
  --font-mono: "Source Code Pro", ui-monospace, monospace;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  /* Breakpoints */
  --breakpoint-xs: 576px;
  /* Animations */
  --animate-fade-in: fadeIn 120ms linear forwards;
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
 }
 /* Base */
 html {
  scroll-behavior: smooth;
  font-size: 14px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
 }
@keyframes blink { 50% { opacity: 0; } }
 .animate-cursor { animation: blink 1s step-start infinite; }
@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 }
 /* macOS Classic Light overrides */
 :root:not(.dark) {
  --color-bg:             #ffffff;
  --color-surface:        #f9f9f9;
  --color-surface-raised: #f7f7f7;
  --color-border:         #e0e0e0;
  --color-border-bright:  #d2d2d2;
  --color-text:           #000000;
  --color-text-label:     #505050;
  --color-text-dim:       #929292;
  --color-accent-green:   #036a07;
  --color-accent-red:     #d21f07;
  --color-timeline-career:    #036a07;
  --color-timeline-education: #0433ff;
  --color-timeline-cert:      #957931;
  --color-timeline-project:   #6f42c1;
  --color-timeline-homelab:   #0000a2;
 }
 /* Default transitions — linear, fast */
 a,
 button {
  transition: color 120ms linear, border-color 120ms linear,
    background-color 120ms linear, opacity 120ms linear;
 }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
 }
@@ -1,247 +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: "1000", name: "MGMT",    subnet: "10.0.0.0/24",   purpose: "Network equipment only" },
  { id: "1010", name: "LAN",     subnet: "10.1.0.0/24",   purpose: "Trusted personal devices" },
  { id: "1020", name: "Homelab", subnet: "10.2.0.0/24",   purpose: "All self-hosted services" },
  { id: "1030", name: "Guests",  subnet: "10.3.0.0/24",   purpose: "Internet only, RFC1918 blocked" },
  { id: "1040", name: "IoT",     subnet: "10.4.0.0/24",   purpose: "Smart home, isolated" },
  { id: "1050", name: "WFH",     subnet: "10.5.0.0/24",   purpose: "Work devices, no personal access" },
  { id: "DMZ",  name: "DMZ",     subnet: "10.99.0.0/24",  purpose: "Public-facing, hard-blocked internally" },
  { id: "VPN",  name: "VPN",     subnet: "10.200.0.0/24", purpose: "WireGuard clients = LAN access" },
 ];
 const adrs = [
  {
    title: "AT&T Gateway: IP Passthrough over EAP bypass",
    decision:
      "BGW320 stays in-line with IP Passthrough mode. pfSense gets the public IP directly. Gateway WiFi disabled.",
    why: "AT&T locks 802.1X auth to their gateway hardware. EAP proxy bypass is brittle — breaks on firmware updates and only saves 1–2ms. True bridge mode isn't supported.",
  },
  {
    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 SSL and proxies to backends.",
    why: "Single Caddyfile, auto-cert without exposing port 80/443 to the internet. NPM has more UI overhead for the same outcome. Traefik is more complex for no benefit here.",
  },
  {
    title: "WireGuard over OpenVPN",
    decision:
      "WireGuard on pfSense, UDP 51820, VPN subnet 10.200.0.0/24. Clients get LAN + MGMT access, blocked from Guest/IoT/WFH.",
    why: "Faster, simpler config, better battery life on mobile. ~600–900 Mbps on an N100. OpenVPN has no advantage here. Tailscale adds an external relay dependency.",
  },
  {
    title: "Pi-hole in Homelab VLAN, not MGMT",
    decision:
      "Pi-hole at 10.2.0.11 (VLAN 1020). Firewall allows port 53 inbound from all VLANs. MGMT uses pfSense Unbound as its primary DNS.",
    why: "Putting Pi-hole in MGMT would require opening MGMT to all VLANs — a larger attack surface. DNS traffic crossing into Homelab VLAN is the lesser risk.",
  },
  {
    title: "N100 for pfSense",
    decision:
      "Intel N100 mini PC: 4-core 3.4 GHz, ~6W idle. Handles 2–3 Gbps routing and 600–900 Mbps WireGuard.",
    why: "Right-sized for 1 Gbps fiber with headroom. Raspberry Pi can't handle 1 Gbps + VPN. A full rack server wastes power for this role.",
  },
  {
    title: "Shared Postgres + Redis in apps LXC",
    decision:
      "One Postgres instance, multiple databases. One Redis instance. A single init script provisions all schemas on first run.",
    why: "Avoids 15 separate DB containers. Reduces RAM overhead significantly. All productivity apps share the same LXC (10.2.0.60).",
  },
  {
    title: "Gitea CI/CD: Self-hosted runner with container build + SSH rsync deploy",
    decision:
      "act_runner v0.3.1 on Gitea LXC (10.99.0.22). Push to dev → node:22-alpine container builds Next.js → rsync out/ to Portfolio LXC → SSH docker rebuild.",
    why: "Keeps the full pipeline internal — no GitHub Actions, no external runners. Build runs in an isolated Alpine container so the Gitea LXC isn't polluted. Portfolio LXC (10.99.0.23) just serves pre-built static files via nginx.",
  },
  {
    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-16">
        <p className="font-mono text-base font-bold text-[var(--color-text)] mb-3">
          <span className="text-[var(--color-accent-green)] select-none mr-2" 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-4 py-3"
            >
              <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-1">
                {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 isolated vlans · default deny inter-vlan"
        as="section"
      >
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="border-b border-[var(--color-border)]">
                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
                  VLAN
                </th>
                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
                  Name
                </th>
                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
                  Subnet
                </th>
                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 uppercase tracking-wider">
                  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-2.5 pr-6">
                    {v.id}
                  </td>
                  <td className="font-mono text-[var(--color-text)] py-2.5 pr-6">{v.name}</td>
                  <td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
                    {v.subnet}
                  </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-8">
          {categoryOrder.map((cat) => {
            const catServices = services.filter((s) => s.category === cat);
            return (
              <div key={cat}>
                <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-3">
                  {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-3 px-4 py-3"
                    >
                      <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-xs 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-4 py-4"
            >
              <p className="font-mono text-sm text-[var(--color-text)] mb-2">{adr.title}</p>
              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-1.5 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>
      {/* GitHub CTA */}
      <section className="pt-2">
        <p className="font-mono text-sm text-[var(--color-text-dim)] mb-1">homelab/docs → github.com/lerko96/homelab-wip</p>
        <p className="font-mono text-sm text-[var(--color-text)] mb-3 opacity-75">
          VLAN maps, runbooks, service registry, config exports, and setup guides.
        </p>
        <a
          href="https://github.com/lerko96/homelab-wip"
          target="_blank"
          rel="noopener noreferrer"
          className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
        >
          ↗ github.com/lerko96/homelab-wip
        </a>
      </section>
    </>
  );
 }
@@ -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" className="dark">
      <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-8 py-14">
              {children}
            </main>
            <Footer />
          </div>
        </ThemeProvider>
      </body>
    </html>
  );
 }
@@ -1,30 +0,0 @@
 import type { Metadata } from "next";
 import Hero from "@/components/Hero";
 import Skills from "@/components/Skills";
 import Timeline from "@/components/Timeline";
 import ProjectCard from "@/components/ProjectCard";
 import Widget from "@/components/Widget";
 import { featuredProjects } from "@/data/projects";
 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 />
      <Widget title="tyler/projects" badge={featuredProjects.length}>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {featuredProjects.map((project) => (
            <ProjectCard key={project.slug} project={project} />
          ))}
        </div>
      </Widget>
      <Skills />
      <Timeline />
    </>
  );
 }
@@ -0,0 +1,51 @@
 ---
 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>
@@ -0,0 +1,39 @@
 ---
 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">
  <span>&copy; {year} tyler koenig &middot; self-hosted in a dmz lxc</span>
  <div class="flex items-center gap-5">
    <a
      href="https://github.com/lerko96"
      target="_blank"
      rel="noopener noreferrer"
      class="hover:text-[var(--color-text-fg)]"
    >
      github
    </a>
    <a
      href="https://gitea.lerkolabs.com/lerko"
      target="_blank"
      rel="noopener noreferrer"
      class="hover:text-[var(--color-text-fg)]"
    >
      gitea
    </a>
    <a
      href="https://www.linkedin.com/in/tyler-koenig"
      target="_blank"
      rel="noopener noreferrer"
      class="hover:text-[var(--color-text-fg)]"
    >
      linkedin
    </a>
    <a
      href="mailto:tyler@lerkolabs.com"
      class="hover:text-[var(--color-text-fg)]"
    >
      email
    </a>
  </div>
 </footer>
@@ -1,31 +0,0 @@
 export default function Footer() {
  return (
    <footer className="border-t border-[var(--color-border)] py-5 mt-8">
      <div className="px-8 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-5">
          <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://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>
        </div>
      </div>
    </footer>
  );
 }
@@ -0,0 +1,62 @@
 ---
 const identity = [
  ["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)]">
  <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">identity</span>
    <span class="text-[var(--color-text-label)] text-[11px]">~/identity.toml</span>
  </div>
  <div class="px-6 py-6 grid grid-cols-1 md:grid-cols-[1.4fr_1fr] gap-9">
    <div>
      <h1 class="text-[var(--color-text-heading)] text-[38px] leading-[1.05] tracking-tight font-semibold">
        tyler koenig
      </h1>
      <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">
        {identity.map(([k, v]) => (
          <Fragment>
            <dt class="text-[var(--color-text-label)] tracking-wide">{k}</dt>
            <dd class="text-[var(--color-text-fg)]">{v}</dd>
          </Fragment>
        ))}
      </dl>
    </div>
    <aside>
      <div class="text-[var(--color-text-label)] text-[11px] tracking-[0.12em] mb-2.5">CONTACT</div>
      <div class="grid gap-px">
        {contact.map(({ key, value, href, glyph }) => (
          <a
            href={href}
            target={href.startsWith("mailto") ? undefined : "_blank"}
            rel={href.startsWith("mailto") ? undefined : "noopener noreferrer"}
            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)]"
          >
            <span class="text-[var(--color-text-label)] tracking-wide">{key}</span>
            <span class="text-[var(--color-text-fg)] overflow-hidden text-ellipsis whitespace-nowrap">{value}</span>
            <span class="text-[var(--color-accent)] text-right">{glyph}</span>
          </a>
        ))}
      </div>
    </aside>
  </div>
 </section>
@@ -1,56 +0,0 @@
 export default function Hero() {
  return (
    <section className="mb-16">
      <div className="flex flex-col gap-3">
        <div>
          <p className="font-mono text-base font-bold text-[var(--color-text)]">
            <span className="text-[var(--color-accent-green)] select-none mr-2" 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 max-w-lg opacity-70">
          Security operations and self-hosted infrastructure. Homelab runs 37
          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-5 gap-y-1">
          <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://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:tylerkoenig96@gmail.com"
            aria-label="Email"
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            [email]
          </a>
        </div>
      </div>
    </section>
  );
 }
@@ -0,0 +1,67 @@
 ---
 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>
@@ -0,0 +1,85 @@
 ---
 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-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
        aria-label="Switch to light mode"
        class="text-[var(--color-text-fg)] hover:text-[var(--color-accent)] 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;
  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>
@@ -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: "/archive/", label: "archive" },
 ];
 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-8 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-6">
          {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>
  );
 }
@@ -0,0 +1,56 @@
 ---
 import type { Project } from "@/data/projects";
 interface Props {
  project: Project;
 }
 const { project } = Astro.props;
 ---
 <article class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex flex-col gap-3 p-5">
  <div class="flex items-start justify-between gap-3">
    <a
      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="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
      >
        ↗
      </a>
    </div>
  </div>
  {project.statusBadge && (
    <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">
    {project.tags.map((tag) => (
      <span class="text-xs text-[var(--color-text-label)]">
        {tag}
      </span>
    ))}
  </div>
 </article>
@@ -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-4 p-5 hover:bg-[var(--color-surface-raised)]">
      <div className="flex items-start justify-between gap-3">
        <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-3 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-xs text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1.5 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-3 gap-y-1 mt-1">
        {project.tags.map((tag) => (
          <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
            {tag}
          </span>
        ))}
      </div>
    </article>
  );
 }
@@ -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>
@@ -1,48 +0,0 @@
 import Widget from "@/components/Widget";
 const skillGroups = [
  {
    label: "Languages",
    skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
  },
  {
    label: "Frontend",
    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
  },
  {
    label: "Desktop & Tools",
    skills: ["Electron", "Node.js", "REST APIs", "Git", "Docker", "TDD"],
  },
  {
    label: "Infrastructure",
    skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
  },
  {
    label: "Practices",
    skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
  },
 ];
 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-1 xs:gap-6 py-3"
          >
            <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>
  );
 }
@@ -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 }} />;
 }
@@ -0,0 +1,101 @@
 ---
 import { timeline } from "@/data/timeline";
 const branchColor: Record<string, 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 hashes = [
  "a14c2e1", "8f9b3d2", "7a02b41", "4c1f0aa", "3e9d8c0",
  "2b6a51f", "9d4c12a", "6e0b8a3", "1c7a4ff", "d5b3e92",
  "5a8f1ee", "e2b71ac", "f0a39db", "0000000",
 ];
 ---
 <section class="border-t 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">journey</span>
    <span class="text-[var(--color-text-label)] text-[11px]">{timeline.length} commits · 5 branches · git log --all</span>
  </div>
  <!-- Desktop: tabular grid -->
  <div class="hidden md:grid grid-cols-[92px_86px_92px_1fr] text-[13px] tabular-nums">
    {["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>
 </section>
@@ -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-1.5 flex flex-col gap-0">
        {timeline.map((entry, i) => (
          <li key={i} data-tl-entry className="pl-6 pb-8 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-2 mb-1">
              <span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
              <span
                className="font-mono text-[10px] uppercase tracking-wider px-1 rounded-sm 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-1">
              {entry.title}
            </p>
            {/* Description */}
            <p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-2">
              {entry.description}
            </p>
            {/* Tags */}
            {entry.tags && entry.tags.length > 0 && (
              <div className="flex flex-wrap gap-x-3 gap-y-1">
                {entry.tags.map((tag) => (
                  <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
                    {tag}
                  </span>
                ))}
              </div>
            )}
          </li>
        ))}
      </ol>
    </Widget>
  )
 }
@@ -0,0 +1,22 @@
 ---
 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;
 ---
 <Tag class:list={["mb-0", className]}>
  <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">{title}</span>
    <span class="text-[var(--color-text-label)] text-[11px]">
      {badge !== undefined && <span>[{badge}]</span>}
      {meta && <span>{meta}</span>}
    </span>
  </div>
  <slot />
 </Tag>
@@ -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-16 ${className ?? ""}`}>
      <div className="flex items-center gap-2 mb-8">
        {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-xs text-[var(--color-text-dim)]">[{badge}]</span>
        )}
        {meta && (
          <span className="font-mono text-xs text-[var(--color-text-dim)] ml-1">— {meta}</span>
        )}
      </div>
      {children}
    </Tag>
  );
 }
@@ -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);
 }
@@ -13,6 +13,67 @@ export type Project = {
 export const projects: Project[] = [
  // --- Featured ---
  {
    slug: "homelab",
    title: "homelab",
    description:
      "7-VLAN segmented network, Wireguard VPN, Proxmox VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).",
    tags: ["Markdown", "Mermaid", "Proxmox", "Monitor", "Backup"],
    githubUrl: "https://gitea.lerkolabs.com/lerko/homelab",
    tier: "featured",
    year: 2026,
  },
  {
    slug: "portfolio",
    title: "portfolio",
    description:
      "Astro static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
    tags: ["Astro", "Dockerfile", "Tailwind", "nginx", "Caddy"],
    githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
    tier: "featured",
    year: 2021,
  },
  {
    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:
      "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",
    year: 2026,
  },
  // --- Archive ---
  {
    slug: "helm",
    title: "helm",
    description:
      "Full-stack personal productivity dashboard. Go backend with chi router and SQLite, React + TypeScript frontend. Notes, todos, calendar (CalDAV), clipboard, bookmarks, memos. Self-hosted, single-user, daily use.",
    tags: ["Go", "React", "TypeScript", "SQLite", "CalDAV"],
    githubUrl: "https://github.com/lerko96/helm",
    tier: "archive",
    year: 2026,
  },
  {
    slug: "risk-ops",
    title: "risk-ops",
    description:
      "Browser-based strategy dashboard for Risk: Global Domination (SMG Studio). Open one HTML file — no install needed.",
    tags: ["HTML", "JavaScript"],
    githubUrl: "#",
    tier: "archive",
    year: 2026,
  },
  {
    slug: "golf-book-mobile",
    title: "golf-book-mobile",
@@ -20,10 +81,30 @@ export const projects: Project[] = [
      "Offline-first mobile app for tracking golf rounds, managing your 14-club bag, and getting AI-powered club recommendations from a Smart Caddie. Covers 7 shot types per hole with full scorecard history.",
    tags: ["React Native", "Expo", "Zustand", "AI", "Mobile"],
    githubUrl: "https://github.com/lerko96/golf-book-mobile",
-    tier: "featured",
+    tier: "archive",
-    stats: "211 commits",
+    stats: "200+ commits",
    statusBadge: "Pending App Store Approval",
-    externalUrl: "#",
+    year: 2025,
  },
  {
    slug: "twitter-thread-ext",
    title: "twitter-thread-ext",
    description:
      "Chrome extension (Manifest V3) that captures entire Twitter/X threads and exports them as HTML, Markdown, PDF, or image — with metadata preservation and preview before export.",
    tags: ["Chrome Extension", "Manifest V3", "JavaScript", "jsPDF"],
    githubUrl: "https://github.com/lerko96/twitter-thread-ext",
    tier: "archive",
    year: 2025,
  },
  {
    slug: "notes-app-1.0",
    title: "notes-app-1.0",
    description:
      "Lightweight canvas drawing app with color picker, adjustable brush size, and PNG export. Runs in the browser, no dependencies.",
    tags: ["HTML5 Canvas", "JavaScript", "CSS"],
    githubUrl: "https://github.com/lerko96/notes-app-1.0",
    tier: "archive",
    year: 2025,
  },
  {
    slug: "plaiground",
@@ -55,57 +136,6 @@ export const projects: Project[] = [
    tier: "archive",
    year: 2025,
  },
  {
    slug: "open-pact",
    title: "open-pact",
    description:
      "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",
  },
  {
    slug: "helm",
    title: "helm",
    description:
      "Full-stack personal productivity dashboard. Go backend with chi router and SQLite, React + TypeScript frontend. Notes, todos, calendar (CalDAV), clipboard, bookmarks, memos. Self-hosted, single-user, daily use.",
    tags: ["Go", "React", "TypeScript", "SQLite", "CalDAV"],
    githubUrl: "https://github.com/lerko96/helm",
    tier: "featured",
  },
  // --- Archive ---
  {
    slug: "risk-ops",
    title: "risk-ops",
    description:
      "Browser-based strategy dashboard for Risk: Global Domination (SMG Studio). Open one HTML file — no install needed.",
    tags: ["HTML", "JavaScript"],
    githubUrl: "#",
    tier: "archive",
    year: 2026,
  },
  {
    slug: "twitter-thread-ext",
    title: "twitter-thread-ext",
    description:
      "Chrome extension (Manifest V3) that captures entire Twitter/X threads and exports them as HTML, Markdown, PDF, or image — with metadata preservation and preview before export.",
    tags: ["Chrome Extension", "Manifest V3", "JavaScript", "jsPDF"],
    githubUrl: "https://github.com/lerko96/twitter-thread-ext",
    tier: "archive",
    year: 2023,
  },
  {
    slug: "notes-app-1.0",
    title: "notes-app-1.0",
    description:
      "Lightweight canvas drawing app with color picker, adjustable brush size, and PNG export. Runs in the browser, no dependencies.",
    tags: ["HTML5 Canvas", "JavaScript", "CSS"],
    githubUrl: "https://github.com/lerko96/notes-app-1.0",
    tier: "archive",
    year: 2022,
  },
  {
    slug: "were-hooked",
    title: "We're Hooked",
@@ -114,7 +144,7 @@ export const projects: Project[] = [
    tags: ["Java", "Spring", "Thymeleaf", "HTML", "CSS"],
    githubUrl: "https://github.com/lerko96/were-hooked-repo",
    tier: "archive",
-    year: 2022,
+    year: 2021,
  },
  {
    slug: "mystery-educator",
@@ -124,7 +154,7 @@ export const projects: Project[] = [
    tags: ["JavaScript", "REST APIs", "HTML", "CSS"],
    githubUrl: "https://github.com/lerko96/mystery-educator",
    tier: "archive",
-    year: 2022,
+    year: 2021,
  },
 ];
@@ -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"][] = [
@@ -1,75 +1,127 @@
-export type TimelineType = 'career' | 'cert' | 'project' | 'homelab' | 'education'
+export type TimelineType =
  | "career"
  | "cert"
  | "project"
  | "homelab"
  | "education";
 export interface TimelineEntry {
-  date: string
+  date: string;
-  title: string
+  title: string;
-  type: TimelineType
+  type: TimelineType;
-  description: string
+  description: string;
-  tags?: string[]
+  tags?: string[];
 }
 export const timeline: TimelineEntry[] = [
  {
-    date: '2026',
+    date: "WIP",
-    title: 'CompTIA Network+ — in progress',
+    title: "CompTIA Network+ — in progress",
-    type: 'cert',
+    type: "cert",
-    description: 'Studying for Network+ to formalize networking knowledge built through the homelab.',
+    description:
-    tags: ['networking', 'certification'],
+      "Studying for Network+ to formalize networking knowledge built through the homelab.",
    tags: ["networking", "certification"],
  },
  {
-    date: '2025',
+    date: "2026-04",
-    title: 'Portfolio Site v2',
+    title: "Portfolio Site v2",
-    type: 'project',
+    type: "project",
-    description: 'Next.js 16 static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.',
+    description:
-    tags: ['next.js', 'tailwind', 'self-hosted'],
+      "Astro portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
    tags: ["astro", "tailwind", "self-hosted"],
  },
  {
-    date: '2024',
+    date: "2026-04",
-    title: 'CompTIA A+',
+    title: "lerkolabs.com",
-    type: 'cert',
+    type: "homelab",
-    description: 'Earned A+ certification, formalizing hardware and OS fundamentals.',
+    description:
-    tags: ['certification'],
+      "Self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
    tags: ["LXC", "DMZ", "self-hosted"],
  },
  {
-    date: '2024',
+    date: "2026-03",
-    title: 'Project Helm',
+    title: "Helm",
-    type: 'project',
+    type: "project",
-    description: 'Full-stack task and project management tool built in Go + React.',
+    description:
-    tags: ['go', 'react', 'typescript'],
+      "Full-stack task and project management tool built in Go + React.",
    tags: ["go", "react", "typescript"],
  },
  {
-    date: 'ongoing',
+    date: "2025",
-    title: 'Homelab — Proxmox Cluster',
+    title: "Proxmox Backup Server",
-    type: 'homelab',
+    type: "homelab",
-    description: '8-VLAN segmented network, Proxmox VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).',
+    description: "Deployed PBS on used desktop hardware for disaster recovery.",
-    tags: ['proxmox', 'networking', 'monitoring', 'sso'],
+    tags: ["backup", "recovery", "retention"],
  },
  {
-    date: '2023-10',
+    date: "2025",
-    title: 'SOC Analyst I — Fortress SRM',
+    title: "Proxmox Cluster",
-    type: 'career',
+    type: "homelab",
-    description: 'Threat monitoring, incident triage, and client-facing security operations in a managed SOC.',
+    description:
-    tags: ['soc', 'security'],
+      "Proxmox installed on dedicated server and the fun begins. VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).",
    tags: ["proxmox", "containers", "VMs", "linux"],
  },
  {
-    date: '2023-03',
+    date: "2024-06",
-    title: 'Config Tech II — MCPc',
+    title: "CompTIA A+",
-    type: 'career',
+    type: "cert",
-    description: 'Promoted to Config Tech II. Led imaging workflows and expanded into scripting for endpoint provisioning.',
+    description:
-    tags: ['sysadmin', 'scripting'],
+      "Earned A+ certification, formalizing hardware and OS fundamentals.",
    tags: ["certification"],
  },
  {
-    date: '2022-07',
+    date: "2024-03",
-    title: 'Config Tech I — MCPc',
+    title: "pfSense",
-    type: 'career',
+    type: "homelab",
-    description: 'Hardware configuration, OS imaging, and deployment at scale for enterprise clients.',
+    description:
-    tags: ['sysadmin', 'hardware'],
+      "Netgate 1100 (Marvell ARMADA 3720) picked up on eBay — hands-on networking configuration, VLANs, firewall rules, and troubleshooting.",
    tags: ["network", "firewall", "vlan", "dhcp"],
  },
  {
-    date: '2021',
+    date: "2023-10",
-    title: 'We Can Code IT — Java Bootcamp',
+    title: "SOC Analyst I — Fortress SRM",
-    type: 'education',
+    type: "career",
-    description: '9-month intensive bootcamp covering Java, OOP, SQL, REST APIs, and Agile development practices.',
+    description:
-    tags: ['java', 'sql', 'agile'],
+      "Threat monitoring, incident triage, and client-facing security operations in a managed SOC.",
    tags: ["soc", "security"],
  },
-]
+  {
    date: "2023-03",
    title: "Config Tech II — MCPc",
    type: "career",
    description:
      "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",
    type: "career",
    description:
      "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",
    type: "education",
    description:
      "9-month intensive bootcamp covering Java, OOP, SQL, REST APIs, and Agile development practices.",
    tags: ["java", "sql", "agile"],
  },
 ];
@@ -0,0 +1,67 @@
 ---
 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-[960px] mx-auto">
      <main>
        <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>
@@ -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>
@@ -0,0 +1,226 @@
 ---
 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="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>
@@ -0,0 +1,20 @@
 ---
 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";
 ---
 <Base>
  <Nav slot="nav" />
  <Hero />
  <div class="grid grid-cols-1 md:grid-cols-[1fr_1.2fr] border-b border-[var(--color-border)]">
    <Active />
    <HomeServices />
  </div>
  <Timeline />
  <Footer slot="footer" />
 </Base>
@@ -0,0 +1,74 @@
 ---
 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="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>
@@ -0,0 +1,115 @@
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
@theme {
  /* Console Dark (default) */
  --color-bg:             #0a0c0f;
  --color-surface:        #0e1116;
  --color-surface-raised: #11151b;
  --color-border:         #1c2128;
  --color-border-bright:  #2a3038;
  --color-text:           #c1bdb3;
  --color-text-fg:        #e8e4d8;
  --color-text-heading:   #ffffff;
  --color-text-label:     #6a675f;
  --color-text-dim:       #6a675f;
  --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: ui-sans-serif, system-ui, sans-serif;
  /* Breakpoints */
  --breakpoint-xs: 576px;
  /* Character-grid spacing — horizontal (ch) */
  --spacing-1ch:     1ch;
  --spacing-2ch:     2ch;
  --spacing-3ch:     3ch;
  --spacing-4ch:     4ch;
  /* Character-grid spacing — vertical (lh, requires line-height:1.5 on html) */
  --spacing-qtr-lh:  0.25lh;
  --spacing-half-lh: 0.5lh;
  --spacing-1lh:     1lh;
  --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;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-variant-ligatures: none;
 }
@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 }
 /* Console Light overrides */
 :root:not(.dark) {
  --color-bg:             #f3f0e8;
  --color-surface:        #faf6ec;
  --color-surface-raised: #f6f2e7;
  --color-border:         #d8d2c2;
  --color-border-bright:  #b8b2a2;
  --color-text:           #3a3c40;
  --color-text-fg:        #1c1e22;
  --color-text-heading:   #000000;
  --color-text-label:     #8a857a;
  --color-text-dim:       #8a857a;
  --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 */
 a,
 button {
  transition: color 120ms linear, border-color 120ms linear,
    background-color 120ms linear, opacity 120ms linear;
 }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
 }
@@ -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"]
 }
Author	SHA1	Message	Date
lerko	173af2df8d	feat(theme): implement console.dark + console.light design system Replace macOS Classic theme with console-inspired palette. Amber accent, warm off-white text hierarchy, desaturated green status pips, VLAN-grouped home services, git-log tabular journey, identity key-value grid with contact links, active pane (studying/shipping/maintaining). Wider 960px container, pane headers, responsive mobile fallbacks.	2026-05-18 22:09:59 -04:00
lerko	0c5d9e03b1	feat(site): migrate from Next.js to Astro Build and Deploy / deploy (push) Successful in 1m42s Details 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	2026-05-18 20:07:24 -04:00
tyler	d34f9f136c	'feat(site): /projects consolidation, homelab copy pass, theme fix' (#6 ) Build and Deploy / deploy (push) Successful in 1m0s Details Reviewed-on: #6	2026-04-27 06:18:24 +00:00
lerko96	22660bed7a	fix(theme): unblock light mode in dev Hardcoded class="dark" on <html> meant React owned it via JSX. HMR re-renders and reconciliation kept restoring the class after classList.toggle removed it, so light toggle never stuck. ThemeScript already handles initial paint; suppressHydrationWarning covers the post-script class mismatch.	2026-04-27 00:49:57 -04:00
lerko96	7f614d28b5	feat(projects): consolidate /projects, hide skills, redirect /archive - /projects: merged page with featured (top) + archive (bottom) - titles mirror homelab pattern: projects/featured, projects/archive - nav: archive → projects - home: drop Skills section and featured grid - /archive → /projects via meta-refresh + JS redirect stub	2026-04-27 00:49:52 -04:00
lerko96	e9d7a994c7	chore(content): refresh projects + timeline - featured: swap helm → nib, drop claude-vault, reorder - helm → archive - homelab description: 7 VLANs + Wireguard VPN (matches access-tier framing) - timeline: add Proxmox Backup Server 2025; pfSense entry corrected to Netgate 1100	2026-04-27 00:49:47 -04:00
lerko96	f6118aa7a4	refactor(homelab): rename VLAN col to Segment for VPN row VPN is an L3 tunnel, not an 802.1Q VLAN. Reframes the table as network segments / access tiers so the VPN row is consistent with the others.	2026-04-27 00:49:42 -04:00
lerko96	5dea6121a3	docs(homelab): trim operational detail from network table and ADRs Pure copy edit. Page now publishes the reasoning behind decisions, not the operational specifics (IPs, subnets, ports, hardware fingerprints, build pipeline mechanics). Reasoning preserved in every ADR. - VLAN table: drop Subnet column; replace numeric VLAN IDs with tier names - ISP gateway ADR: drop carrier and gateway model - Caddy ADR: tighten DNS-01 framing to internal-services exposure; SSL → TLS - WireGuard ADR: drop port, VPN subnet, throughput numbers, tier enumeration - Pi-hole ADR: drop host IP and VLAN ID; sharpen trade-off - N100 ADR: drop core/clock and precise throughput; rename to "Mini-PC" - Postgres+Redis ADR: drop apps LXC IP - Gitea CI/CD ADR: drop runner version, build image, host IPs, deploy mechanics - Authentik ADR: unchanged	2026-04-26 23:19:16 -04:00
tyler	4e51dd4a83	feat/polish (#5 ) Build and Deploy / deploy (push) Successful in 51s Details Reorder homepage sections (journey above projects), refine component styles, update copy and data across projects, timeline, and homelab. Reviewed-on: #5	2026-04-20 00:34:50 +00:00
		`@@ -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>`
		`@@ -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>
		`@@ -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>
		`@@ -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>`