feat/polish (#5 )

Reorder homepage sections (journey above projects), refine component styles, update copy and data across projects, timeline, and homelab. Reviewed-on: #5
Merge pull request 'feat(content): reposition for security engineer, expand services' (#4 ) from feat/timeline into dev
2026-04-20 00:34:50 +00:00 · 2026-04-17 01:24:22 +00:00
15 changed files with 397 additions and 222 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -29,9 +29,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts

-# claude code
-CLAUDE.md
-.claude/
-
 # docs
 /docs
--- a/src/app/archive/page.tsx
+++ b/src/app/archive/page.tsx
@@ -10,9 +10,9 @@ export const metadata: Metadata = {
 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>
+      <div className="mb-4lh">
+        <p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+          <span className="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
          tyler/projects/archive
        </p>
        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
@@ -29,12 +29,12 @@ export default function ArchivePage() {
              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"
+              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
            >
-              <div className="flex flex-col gap-2 flex-1 min-w-0">
-                <div className="flex items-center gap-3">
+              <div className="flex flex-col gap-1ch flex-1 min-w-0">
+                <div className="flex items-center gap-1ch">
                  {project.year && (
-                    <span className="font-mono text-xs text-[var(--color-text-dim)] shrink-0">
+                    <span className="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
                      {project.year}
                    </span>
                  )}
@@ -45,16 +45,16 @@ export default function ArchivePage() {
                <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">
+                <div className="flex flex-wrap gap-x-1ch gap-y-0.5">
                  {project.tags.map((tag) => (
-                    <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+                    <span key={tag} className="font-mono text-sm 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"
+                className="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
                aria-hidden="true"
              >
                ↗
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -29,6 +29,20 @@
  /* 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;

@@ -41,7 +55,8 @@
 /* Base */
 html {
  scroll-behavior: smooth;
-  font-size: 14px;
+  font-size: 15px;
+  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
--- a/src/app/homelab/page.tsx
+++ b/src/app/homelab/page.tsx
@@ -21,14 +21,54 @@ const glanceStats = [
 ];

 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" },
+  {
+    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: "1099",
+    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 = [
@@ -69,7 +109,8 @@ const adrs = [
    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",
+    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.",
@@ -85,15 +126,21 @@ 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>
+      <div className="mb-4lh">
+        <p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+          <span
+            className="text-[var(--color-accent-green)] select-none mr-1ch"
+            aria-hidden="true"
+          >
+            ❯
+          </span>
          homelab
        </p>
        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
-          Personal infrastructure environment for learning, self-hosting, and operational
-          practice. Running 24/7 on production-grade hardware with real network segmentation,
-          SSO, monitoring, and IaC-style documentation.
+          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>

@@ -101,14 +148,13 @@ export default function HomelabPage() {
      <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">
+            <div key={label} className="bg-[var(--color-surface)] px-2ch py-half-lh">
+              <p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
                {label}
              </p>
-              <p className="font-mono text-sm text-[var(--color-text)]">{value}</p>
+              <p className="font-mono text-sm text-[var(--color-text)]">
+                {value}
+              </p>
            </div>
          ))}
        </div>
@@ -121,19 +167,19 @@ export default function HomelabPage() {
        as="section"
      >
        <div className="overflow-x-auto">
-          <table className="w-full text-xs border-collapse">
+          <table className="w-full text-sm border-collapse">
            <thead>
              <tr className="border-b border-[var(--color-border)]">
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
                  VLAN
                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
                  Name
                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
                  Subnet
                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 uppercase tracking-wider">
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
                  Purpose
                </th>
              </tr>
@@ -144,14 +190,18 @@ export default function HomelabPage() {
                  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">
+                  <td className="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
                    {v.id}
                  </td>
-                  <td className="font-mono text-[var(--color-text)] py-2.5 pr-6">{v.name}</td>
-                  <td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
+                  <td className="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
+                    {v.name}
+                  </td>
+                  <td className="font-mono text-[var(--color-text-label)] py-half-lh pr-[3ch]">
                    {v.subnet}
                  </td>
-                  <td className="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">{v.purpose}</td>
+                  <td className="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
+                    {v.purpose}
+                  </td>
                </tr>
              ))}
            </tbody>
@@ -160,31 +210,27 @@ export default function HomelabPage() {
      </Widget>

      {/* Services */}
-      <Widget
-        title="homelab/services"
-        badge={services.length}
-        as="section"
-      >
-        <div className="flex flex-col gap-8">
+      <Widget title="homelab/services" badge={services.length} as="section">
+        <div className="flex flex-col gap-3ch">
          {categoryOrder.map((cat) => {
            const catServices = services.filter((s) => s.category === cat);
            return (
              <div key={cat}>
-                <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-3">
+                <p className="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
                  {categoryLabels[cat]}
                </p>
                <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
                  {catServices.map((svc) => (
                    <div
                      key={svc.name}
-                      className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-3 px-4 py-3"
+                      className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-1ch px-2ch py-half-lh"
                    >
                      <i
                        className={`${svc.icon} text-[var(--color-text-label)] text-xs mt-0.5 w-3.5 shrink-0`}
                        aria-hidden="true"
                      />
                      <div>
-                        <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
+                        <p className="font-mono text-sm text-[var(--color-text)] mb-0.5">
                          {svc.name}
                        </p>
                        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
@@ -211,15 +257,21 @@ export default function HomelabPage() {
          {adrs.map((adr) => (
            <div
              key={adr.title}
-              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
+              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh"
            >
-              <p className="font-mono text-sm text-[var(--color-text)] mb-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>
+              <p className="font-mono text-sm text-[var(--color-text)] mb-1lh">
+                {adr.title}
+              </p>
+              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
+                <span className="text-[var(--color-text-label)] opacity-100">
+                  decision:{" "}
+                </span>
                {adr.decision}
              </p>
              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-                <span className="text-[var(--color-text-label)] opacity-100">why: </span>
+                <span className="text-[var(--color-text-label)] opacity-100">
+                  why:{" "}
+                </span>
                {adr.why}
              </p>
            </div>
@@ -227,19 +279,22 @@ export default function HomelabPage() {
        </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.
+      {/* Gitea CTA */}
+      <section className="pt-qtr-lh">
+        <p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
+          homelab/docs
+        </p>
+        <p className="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
+          VLAN maps, runbooks, service registry, config exports, and setup
+          guides.
        </p>
        <a
-          href="https://github.com/lerko96/homelab-wip"
+          href="https://gitea.lerkolabs.com/lerko/homelab"
          target="_blank"
          rel="noopener noreferrer"
          className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
        >
-          ↗ github.com/lerko96/homelab-wip
+          ↗ gitea.lerkolabs.com/lerko/homelab
        </a>
      </section>
    </>
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({

          {/* 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">
+            <main className="px-4ch py-3lh">
              {children}
            </main>
            <Footer />
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,15 +16,15 @@ export default function Home() {
  return (
    <>
      <Hero />
+      <Timeline />
      <Widget title="tyler/projects" badge={featuredProjects.length}>
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
          {featuredProjects.map((project) => (
            <ProjectCard key={project.slug} project={project} />
          ))}
        </div>
      </Widget>
      <Skills />
-      <Timeline />
    </>
  );
 }
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,11 +1,11 @@
 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">
+    <footer className="border-t border-[var(--color-border)] py-1lh mt-2lh">
+      <div className="px-4ch flex items-center justify-between">
        <span className="font-mono text-sm text-[var(--color-text-dim)]">
          &copy; {new Date().getFullYear()} Tyler Koenig
        </span>
-        <div className="flex items-center gap-5">
+        <div className="flex items-center gap-2ch">
          <a
            href="https://github.com/lerko96"
            target="_blank"
@@ -15,6 +15,15 @@ export default function Footer() {
          >
            [github]
          </a>
+          <a
+            href="https://gitea.lerkolabs.com/lerko"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Gitea"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [gitea]
+          </a>
          <a
            href="https://www.linkedin.com/in/tyler-koenig"
            target="_blank"
@@ -24,6 +33,13 @@ export default function Footer() {
          >
            [linkedin]
          </a>
+          <a
+            href="mailto:tyler@lerkolabs.com"
+            aria-label="Email"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [email]
+          </a>
        </div>
      </div>
    </footer>
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,10 +1,15 @@
 export default function Hero() {
  return (
    <section className="mb-16">
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1ch">
        <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>
+          <p className="font-mono text-sm font-bold text-[var(--color-text)]">
+            <span
+              className="text-[var(--color-accent-green)] select-none mr-1ch"
+              aria-hidden="true"
+            >
+              ❯
+            </span>
            tyler koenig
          </p>
          <p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
@@ -12,15 +17,20 @@ export default function Hero() {
          </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
+        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
+          Homelab runs 30+
          services across segmented VLANs — pfSense, Authentik SSO, full
          observability stack. Write software too: mobile apps, Go backends,
-          open protocols. Daily drivers, all of it.{' '}
-          <span className="animate-cursor text-[var(--color-accent-green)]" aria-hidden="true">█</span>
+          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">
+        <div className="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
          <span className="font-mono text-sm text-[var(--color-accent-green)]">
            ● available
          </span>
@@ -33,6 +43,15 @@ export default function Hero() {
          >
            [github]
          </a>
+          <a
+            href="https://gitea.lerkolabs.com/lerko"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Gitea"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [gitea]
+          </a>
          <a
            href="https://www.linkedin.com/in/tyler-koenig"
            target="_blank"
@@ -43,7 +62,7 @@ export default function Hero() {
            [linkedin]
          </a>
          <a
-            href="mailto:tylerkoenig96@gmail.com"
+            href="mailto:tyler@lerkolabs.com"
            aria-label="Email"
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -15,7 +15,7 @@ export default function Nav() {
  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">
+      <nav className="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
        <Link
          href="/"
          className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
@@ -23,7 +23,7 @@ export default function Nav() {
          ~/
        </Link>

-        <ul className="flex items-center gap-6">
+        <ul className="flex items-center gap-2ch">
          {links.map(({ href, label }) => {
            const active =
              pathname === href || pathname === href.replace(/\/$/, "");
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -6,8 +6,8 @@ type Props = {

 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">
+    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
+      <div className="flex items-start justify-between gap-1ch">
        <a
          href={project.githubUrl}
          target="_blank"
@@ -16,7 +16,7 @@ export default function ProjectCard({ project }: Props) {
        >
          {project.title}
        </a>
-        <div className="flex items-center gap-3 shrink-0">
+        <div className="flex items-center gap-1ch shrink-0">
          {project.stats && (
            <span className="font-mono text-sm text-[var(--color-text-dim)]">
              {project.stats}
@@ -46,7 +46,7 @@ export default function ProjectCard({ project }: Props) {
      </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">
+        <span className="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
          {project.statusBadge}
        </span>
      )}
@@ -55,9 +55,9 @@ export default function ProjectCard({ project }: Props) {
        {project.description}
      </p>

-      <div className="flex flex-wrap gap-x-3 gap-y-1 mt-1">
+      <div className="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
        {project.tags.map((tag) => (
-          <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+          <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
            {tag}
          </span>
        ))}
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -1,6 +1,18 @@
 import Widget from "@/components/Widget";

 const skillGroups = [
+  {
+    label: "Infrastructure",
+    skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
+  },
+  {
+    label: "Desktop & Tools",
+    skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs", ],
+  },
+  {
+    label: "Practices",
+    skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
+  },
  {
    label: "Languages",
    skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
@@ -9,18 +21,6 @@ const skillGroups = [
    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);
@@ -32,7 +32,7 @@ export default function Skills() {
        {skillGroups.map(({ label, skills }) => (
          <div
            key={label}
-            className="flex flex-col xs:flex-row gap-1 xs:gap-6 py-3"
+            className="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh"
          >
            <span className="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
              {label}
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -54,9 +54,9 @@ export default function Timeline() {

  return (
    <Widget title="tyler/journey">
-      <ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-1.5 flex flex-col gap-0">
+      <ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
        {timeline.map((entry, i) => (
-          <li key={i} data-tl-entry className="pl-6 pb-8 last:pb-0 relative">
+          <li key={i} data-tl-entry className="pl-[3ch] pb-2lh last:pb-0 relative">
            {/* Spine dot */}
            <span
              className="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
@@ -65,10 +65,10 @@ export default function Timeline() {
            />

            {/* Date + type badge */}
-            <div className="flex items-center gap-2 mb-1">
+            <div className="flex items-center gap-1ch mb-half-lh">
              <span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
              <span
-                className="font-mono text-[10px] uppercase tracking-wider px-1 rounded-sm border"
+                className="font-mono text-sm px-1 border"
                style={{
                  color: typeColor[entry.type],
                  borderColor: typeColor[entry.type],
@@ -80,20 +80,20 @@ export default function Timeline() {
            </div>

            {/* Title */}
-            <p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-1">
+            <p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
              {entry.title}
            </p>

            {/* Description */}
-            <p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-2">
+            <p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
              {entry.description}
            </p>

            {/* Tags */}
            {entry.tags && entry.tags.length > 0 && (
-              <div className="flex flex-wrap gap-x-3 gap-y-1">
+              <div className="flex flex-wrap gap-x-1ch gap-y-half-lh">
                {entry.tags.map((tag) => (
-                  <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+                  <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
                    {tag}
                  </span>
                ))}
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -20,17 +20,17 @@ export default function Widget({
  const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;

  return (
-    <Tag className={`mb-16 ${className ?? ""}`}>
-      <div className="flex items-center gap-2 mb-8">
+    <Tag className={`mb-4lh ${className ?? ""}`}>
+      <div className="flex items-center gap-1ch mb-2lh">
        {prefix && (
          <span className="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
        )}
        <span className="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
        {badge !== undefined && (
-          <span className="font-mono text-xs text-[var(--color-text-dim)]">[{badge}]</span>
+          <span className="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
        )}
        {meta && (
-          <span className="font-mono text-xs text-[var(--color-text-dim)] ml-1">— {meta}</span>
+          <span className="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
        )}
      </div>
      {children}
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -13,6 +13,57 @@ export type Project = {

 export const projects: Project[] = [
  // --- Featured ---
+  {
+    slug: "homelab",
+    title: "homelab",
+    description:
+      "8-VLAN segmented network, 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: "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,
+  },
+  {
+    slug: "portfolio",
+    title: "portfolio",
+    description:
+      "Next.js 16 static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+    tags: ["Next.js", "Dockerfile", "Tailwind", "nginx", "Caddy"],
+    githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
+    tier: "featured",
+    year: 2021,
+  },
+  {
+    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",
+    year: 2026,
+  },
+  {
+    slug: "claude-vault",
+    title: "claude-vault",
+    description:
+      "A scaffolding system for maintaining a living project knowledge base alongside a code repo, powered by Claude Code skills.",
+    tags: ["Shell", "Developer-Tools", "Claude", "Knowledge-Management"],
+    githubUrl: "https://github.com/lerko96/claude-vault",
+    tier: "featured",
+    year: 2026,
+  },
+  // --- Archive ---
  {
    slug: "golf-book-mobile",
    title: "golf-book-mobile",
@@ -20,10 +71,40 @@ 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",
-    stats: "211 commits",
+    tier: "archive",
+    stats: "200+ commits",
    statusBadge: "Pending App Store Approval",
-    externalUrl: "#",
+    year: 2025,
+  },
+  {
+    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: 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,
  },
 ];

--- a/src/data/timeline.ts
+++ b/src/data/timeline.ts
@@ -1,75 +1,119 @@
-export type TimelineType = 'career' | 'cert' | 'project' | 'homelab' | 'education'
+export type TimelineType =
+  | "career"
+  | "cert"
+  | "project"
+  | "homelab"
+  | "education";

 export interface TimelineEntry {
-  date: string
-  title: string
-  type: TimelineType
-  description: string
-  tags?: string[]
+  date: string;
+  title: string;
+  type: TimelineType;
+  description: string;
+  tags?: string[];
 }

 export const timeline: TimelineEntry[] = [
  {
-    date: '2026',
-    title: 'CompTIA Network+ — in progress',
-    type: 'cert',
-    description: 'Studying for Network+ to formalize networking knowledge built through the homelab.',
-    tags: ['networking', 'certification'],
+    date: "WIP",
+    title: "CompTIA Network+ — in progress",
+    type: "cert",
+    description:
+      "Studying for Network+ to formalize networking knowledge built through the homelab.",
+    tags: ["networking", "certification"],
  },
  {
-    date: '2025',
-    title: 'Portfolio Site v2',
-    type: 'project',
-    description: 'Next.js 16 static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.',
-    tags: ['next.js', 'tailwind', 'self-hosted'],
+    date: "2026-04",
+    title: "Portfolio Site v2",
+    type: "project",
+    description:
+      "Next.js 16 portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+    tags: ["next.js", "tailwind", "self-hosted"],
  },
  {
-    date: '2024',
-    title: 'CompTIA A+',
-    type: 'cert',
-    description: 'Earned A+ certification, formalizing hardware and OS fundamentals.',
-    tags: ['certification'],
+    date: "2026-04",
+    title: "lerkolabs.com",
+    type: "homelab",
+    description:
+      "Self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+    tags: ["LXC", "DMZ", "self-hosted"],
  },
  {
-    date: '2024',
-    title: 'Project Helm',
-    type: 'project',
-    description: 'Full-stack task and project management tool built in Go + React.',
-    tags: ['go', 'react', 'typescript'],
+    date: "2026-03",
+    title: "Helm",
+    type: "project",
+    description:
+      "Full-stack task and project management tool built in Go + React.",
+    tags: ["go", "react", "typescript"],
  },
  {
-    date: 'ongoing',
-    title: 'Homelab — Proxmox Cluster',
-    type: 'homelab',
-    description: '8-VLAN segmented network, Proxmox VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).',
-    tags: ['proxmox', 'networking', 'monitoring', 'sso'],
+    date: "2024-08",
+    title: "Proxmox Cluster",
+    type: "homelab",
+    description:
+      "Proxmox VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).",
+    tags: ["proxmox", "networking", "monitoring", "sso"],
  },
  {
-    date: '2023-10',
-    title: 'SOC Analyst I — Fortress SRM',
-    type: 'career',
-    description: 'Threat monitoring, incident triage, and client-facing security operations in a managed SOC.',
-    tags: ['soc', 'security'],
+    date: "2024-06",
+    title: "CompTIA A+",
+    type: "cert",
+    description:
+      "Earned A+ certification, formalizing hardware and OS fundamentals.",
+    tags: ["certification"],
  },
  {
-    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: "2024-03",
+    title: "pfSense",
+    type: "homelab",
+    description: "Netgate pfSense n100 picked up on ebay.",
+    tags: ["network", "firewall", "vlan", "dhcp"],
  },
  {
-    date: '2022-07',
-    title: 'Config Tech I — MCPc',
-    type: 'career',
-    description: 'Hardware configuration, OS imaging, and deployment at scale for enterprise clients.',
-    tags: ['sysadmin', 'hardware'],
+    date: "2023-10",
+    title: "SOC Analyst I — Fortress SRM",
+    type: "career",
+    description:
+      "Threat monitoring, incident triage, and client-facing security operations in a managed SOC.",
+    tags: ["soc", "security"],
  },
  {
-    date: '2021',
-    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'],
+    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"],
+  },
+];
Author	SHA1	Message	Date
tyler	4e51dd4a83	feat/polish (#5 ) All checks were successful 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
tyler	8e9fcfaeeb	Merge pull request 'feat(content): reposition for security engineer, expand services' (#4 ) from feat/timeline into dev All checks were successful Build and Deploy / deploy (push) Successful in 1m11s Details Reviewed-on: #4	2026-04-17 01:24:22 +00:00