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.

src/components/Active.astro

@@ -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>

src/components/Footer.astro

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

src/components/Hero.astro

@@ -1,71 +1,62 @@
-<section class="mb-16">
+---
-  <div class="flex flex-col gap-1ch">
+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>
-      <p class="font-mono text-sm font-bold text-[var(--color-text)]">
+      <h1 class="text-[var(--color-text-heading)] text-[38px] leading-[1.05] tracking-tight font-semibold">
-        <span
-          class="text-[var(--color-accent-green)] select-none mr-1ch"
-          aria-hidden="true"
-        >
-          ❯
-        </span>
         tyler koenig
-      </p>
+      </h1>
-      <p class="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
+      <p class="text-[var(--color-text)] text-sm mt-2 leading-relaxed max-w-[540px]">
-        Security Operations · Self-Hosted Infrastructure
+        security operations, self-hosted infrastructure, and the software that holds it together.
-      </p>
-    </div>
-
-    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
-      Homelab runs 30+
-      services across segmented VLANs — pfSense, Authentik SSO, full
-      observability stack. Write software too: mobile apps, Go backends,
-      open protocols. Daily drivers, all of it.{" "}
-      <span
-        class="animate-cursor text-[var(--color-accent-green)]"
-        aria-hidden="true"
-      >
-        █
-      </span>
       </p>
 
-    <div class="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
+      <dl class="mt-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-[13px] tabular-nums">
-      <span class="font-mono text-sm text-[var(--color-accent-green)]">
+        {identity.map(([k, v]) => (
-        ● available
+          <Fragment>
-      </span>
+            <dt class="text-[var(--color-text-label)] tracking-wide">{k}</dt>
-      <a
+            <dd class="text-[var(--color-text-fg)]">{v}</dd>
-        href="https://github.com/lerko96"
+          </Fragment>
-        target="_blank"
+        ))}
-        rel="noopener noreferrer"
+      </dl>
-        aria-label="GitHub"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [github]
-      </a>
-      <a
-        href="https://gitea.lerkolabs.com/lerko"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Gitea"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [gitea]
-      </a>
-      <a
-        href="https://www.linkedin.com/in/tyler-koenig"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="LinkedIn"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [linkedin]
-      </a>
-      <a
-        href="mailto:tyler@lerkolabs.com"
-        aria-label="Email"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [email]
-      </a>
     </div>
+
+    <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>

src/components/HomeServices.astro

@@ -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>

src/components/Nav.astro

@@ -8,54 +8,66 @@ const links = [
 ];
 ---
 
-<header class="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
+<header class="sticky top-0 z-50 bg-[var(--color-surface-raised)] border-b border-[var(--color-border)]">
-  <nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
+  <nav class="max-w-[960px] mx-auto px-6 h-11 flex items-center justify-between text-xs tabular-nums">
-    <a
+    <div class="flex items-center gap-4">
-      href="/"
+      <a href="/" class="text-[var(--color-text-fg)] tracking-wide hover:text-[var(--color-text-heading)]">
-      class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
+        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>
 
-    <ul class="flex items-center gap-2ch">
       {links.map(({ href, label }) => {
         const active = pathname === href || pathname === href.replace(/\/$/, "");
         return (
-          <li>
           <a
             href={href}
             aria-current={active ? "page" : undefined}
             class:list={[
-                "font-mono text-sm",
               active
-                  ? "text-[var(--color-text)]"
+                ? "text-[var(--color-text-fg)]"
-                  : "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
+                : "text-[var(--color-text-label)] hover:text-[var(--color-text-fg)]",
             ]}
           >
             {label}
           </a>
-          </li>
         );
       })}
-      <li>
       <button
         data-theme-toggle
         aria-label="Switch to light mode"
-          class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
+        class="text-[var(--color-text-fg)] hover:text-[var(--color-accent)] cursor-pointer"
       >
-          [light]
+        light
       </button>
-      </li>
+    </div>
-    </ul>
   </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.textContent = isDark ? "light" : "dark";
     btn.setAttribute(
       "aria-label",
       isDark ? "Switch to light mode" : "Switch to dark mode",

src/components/ProjectCard.astro

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

src/components/Timeline.astro

@@ -1,8 +1,7 @@
 ---
-import Widget from "./Widget.astro";
+import { timeline } from "@/data/timeline";
-import { timeline, type TimelineType } from "@/data/timeline";
 
-const typeColor: Record<TimelineType, string> = {
+const branchColor: Record<string, string> = {
   career: "var(--color-timeline-career)",
   education: "var(--color-timeline-education)",
   cert: "var(--color-timeline-cert)",
@@ -10,79 +9,93 @@ const typeColor: Record<TimelineType, string> = {
   homelab: "var(--color-timeline-homelab)",
 };
 
-const typeLabel: Record<TimelineType, string> = {
+const hashes = [
-  career: "career",
+  "a14c2e1", "8f9b3d2", "7a02b41", "4c1f0aa", "3e9d8c0",
-  education: "education",
+  "2b6a51f", "9d4c12a", "6e0b8a3", "1c7a4ff", "d5b3e92",
-  cert: "cert",
+  "5a8f1ee", "e2b71ac", "f0a39db", "0000000",
-  project: "project",
+];
-  homelab: "homelab",
-};
 ---
 
-<Widget title="tyler/journey">
+<section class="border-t border-[var(--color-border)]">
-  <ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
+  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
-    {timeline.map((entry) => (
+    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">journey</span>
-      <li data-tl-entry class="pl-[3ch] pb-2lh last:pb-0 relative">
+    <span class="text-[var(--color-text-label)] text-[11px]">{timeline.length} commits · 5 branches · git log --all</span>
-        <span
-          class="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
-          style={`background-color: ${typeColor[entry.type]}`}
-          aria-hidden="true"
-        />
-
-        <div class="flex items-center gap-1ch mb-half-lh">
-          <span class="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
-          <span
-            class="font-mono text-sm px-1 border"
-            style={`color: ${typeColor[entry.type]}; border-color: ${typeColor[entry.type]}; opacity: 0.7;`}
-          >
-            {typeLabel[entry.type]}
-          </span>
   </div>
 
-        <p class="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
+  <!-- Desktop: tabular grid -->
-          {entry.title}
+  <div class="hidden md:grid grid-cols-[92px_86px_92px_1fr] text-[13px] tabular-nums">
-        </p>
+    {["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>
+    ))}
 
-        <p class="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
+    {timeline.map((entry, i) => {
-          {entry.description}
+      const color = branchColor[entry.type] || "var(--color-text-fg)";
-        </p>
+      const hash = hashes[i] || "0000000";
-
+      const last = i === timeline.length - 1;
-        {entry.tags && entry.tags.length > 0 && (
+      const borderClass = last ? "" : "border-b border-[var(--color-border)]";
-          <div class="flex flex-wrap gap-x-1ch gap-y-half-lh">
+      return (
-            {entry.tags.map((tag) => (
+        <Fragment>
-              <span class="font-mono text-sm text-[var(--color-text-dim)]">
+          <div class:list={["py-3.5 px-3 pl-6", borderClass]}>
-                {tag}
+            <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>
             )}
-      </li>
+          </div>
-    ))}
+        </Fragment>
-  </ol>
-</Widget>
-
-<script>
-  if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-    const entries = document.querySelectorAll<HTMLElement>("[data-tl-entry]");
-
-    const observer = new IntersectionObserver(
-      (observed) => {
-        observed.forEach((entry) => {
-          if (entry.isIntersecting) {
-            (entry.target as HTMLElement).style.opacity = "1";
-            (entry.target as HTMLElement).style.transform = "translateY(0)";
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { threshold: 0.15 },
       );
+    })}
+  </div>
 
-    entries.forEach((el) => {
+  <!-- Mobile: stacked cards -->
-      el.style.opacity = "0";
+  <div class="md:hidden">
-      el.style.transform = "translateY(8px)";
+    {timeline.map((entry, i) => {
-      el.style.transition = "opacity 240ms linear, transform 240ms linear";
+      const color = branchColor[entry.type] || "var(--color-text-fg)";
-      observer.observe(el);
+      const hash = hashes[i] || "0000000";
-    });
+      const last = i === timeline.length - 1;
-  }
+      return (
-</script>
+        <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>

src/components/Widget.astro

@@ -8,23 +8,15 @@ interface Props {
 }
 
 const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
-const slashIdx = title.lastIndexOf("/");
-const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
-const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
 ---
 
-<Tag class:list={["mb-4lh", className]}>
+<Tag class:list={["mb-0", className]}>
-  <div class="flex items-center gap-1ch mb-2lh">
+  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
-    {prefix && (
+    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">{title}</span>
-      <span class="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
+    <span class="text-[var(--color-text-label)] text-[11px]">
-    )}
+      {badge !== undefined && <span>[{badge}]</span>}
-    <span class="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
+      {meta && <span>{meta}</span>}
-    {badge !== undefined && (
+    </span>
-      <span class="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
-    )}
-    {meta && (
-      <span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
-    )}
   </div>
   <slot />
 </Tag>

src/layouts/Base.astro

@@ -30,10 +30,8 @@ const {
     class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
   >
     <slot name="nav" />
-    <div
+    <div class="max-w-[960px] mx-auto">
-      class="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]"
+      <main>
-    >
-      <main class="px-4ch py-3lh">
         <slot />
       </main>
       <slot name="footer" />

src/pages/homelab.astro

@@ -85,17 +85,9 @@ const adrs = [
 >
   <Nav slot="nav" />
 
-  <div class="mb-4lh">
+  <div class="px-6 py-6 border-b border-[var(--color-border)]">
-    <p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+    <h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">homelab</h1>
-      <span
+    <p class="text-[var(--color-text)] text-sm leading-relaxed max-w-2xl">
-        class="text-[var(--color-accent-green)] select-none mr-1ch"
-        aria-hidden="true"
-      >
-        ❯
-      </span>
-      homelab
-    </p>
-    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
       Personal infrastructure environment for learning, self-hosting, and
       operational practice. Running 24/7 on production-grade hardware with
       real network segmentation, SSO, monitoring, and IaC-style
@@ -106,11 +98,11 @@ const adrs = [
   <Widget title="homelab/overview" badge={glanceStats.length} as="section">
     <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
       {glanceStats.map(({ label, value }) => (
-        <div class="bg-[var(--color-surface)] px-2ch py-half-lh">
+        <div class="bg-[var(--color-surface)] px-5 py-3">
-          <p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
+          <p class="text-sm text-[var(--color-text-label)] mb-1">
             {label}
           </p>
-          <p class="font-mono text-sm text-[var(--color-text)]">
+          <p class="text-sm text-[var(--color-text-fg)]">
             {value}
           </p>
         </div>
@@ -123,17 +115,17 @@ const adrs = [
     meta="8 network segments · default deny"
     as="section"
   >
-    <div class="overflow-x-auto">
+    <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="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
+            <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
               Segment
             </th>
-            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
+            <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
               Name
             </th>
-            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
+            <th class="text-[var(--color-text-label)] text-left py-2 text-[10px] tracking-[0.16em] uppercase">
               Purpose
             </th>
           </tr>
@@ -141,13 +133,13 @@ const adrs = [
         <tbody>
           {vlans.map((v) => (
             <tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
-              <td class="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
+              <td class="text-[var(--color-accent)] py-2.5 pr-8 text-sm">
                 {v.id}
               </td>
-              <td class="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
+              <td class="text-[var(--color-text-fg)] py-2.5 pr-8 text-sm">
                 {v.name}
               </td>
-              <td class="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
+              <td class="text-[var(--color-text)] py-2.5 text-sm">
                 {v.purpose}
               </td>
             </tr>
@@ -158,26 +150,24 @@ const adrs = [
   </Widget>
 
   <Widget title="homelab/services" badge={services.length} as="section">
-    <div class="flex flex-col gap-3ch">
+    <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="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
+            <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)] flex items-start gap-1ch px-2ch py-half-lh">
+                <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-3">
-                  <div>
+                  <p class="text-sm text-[var(--color-text-fg)] mb-0.5">
-                    <p class="font-mono text-sm text-[var(--color-text)] mb-0.5">
                     {svc.name}
                   </p>
-                    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                  <p class="text-xs text-[var(--color-text)] leading-relaxed">
                     {svc.description}
                   </p>
                 </div>
-                </div>
               ))}
             </div>
           </div>
@@ -192,20 +182,20 @@ const adrs = [
     badge={adrs.length}
     as="section"
   >
-    <div class="flex flex-col gap-px bg-[var(--color-border)]">
+    <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-2ch py-1lh">
+        <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-4">
-          <p class="font-mono text-sm text-[var(--color-text)] mb-1lh">
+          <p class="text-sm text-[var(--color-text-fg)] mb-3">
             {adr.title}
           </p>
-          <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
+          <p class="text-sm text-[var(--color-text)] leading-relaxed mb-2">
-            <span class="text-[var(--color-text-label)] opacity-100">
+            <span class="text-[var(--color-text-label)]">
               decision:{" "}
             </span>
             {adr.decision}
           </p>
-          <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+          <p class="text-sm text-[var(--color-text)] leading-relaxed">
-            <span class="text-[var(--color-text-label)] opacity-100">
+            <span class="text-[var(--color-text-label)]">
               why:{" "}
             </span>
             {adr.why}
@@ -215,21 +205,20 @@ const adrs = [
     </div>
   </Widget>
 
-  <section class="pt-qtr-lh">
+  <section class="px-5 py-6">
-    <p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
+    <p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2">
       homelab/docs
     </p>
-    <p class="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
+    <p class="text-sm text-[var(--color-text)] mb-3">
-      VLAN maps, runbooks, service registry, config exports, and setup
+      VLAN maps, runbooks, service registry, config exports, and setup guides.
-      guides.
     </p>
     <a
       href="https://gitea.lerkolabs.com/lerko/homelab"
       target="_blank"
       rel="noopener noreferrer"
-      class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      class="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
     >
-      ↗ gitea.lerkolabs.com/lerko/homelab
+      <span class="text-[var(--color-accent)]">↗</span> gitea.lerkolabs.com/lerko/homelab
     </a>
   </section>
 

src/pages/index.astro

@@ -3,12 +3,18 @@ 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>

src/pages/projects.astro

@@ -13,18 +13,15 @@ import { featuredProjects, archiveProjects } from "@/data/projects";
 >
   <Nav slot="nav" />
 
-  <div class="mb-4lh">
+  <div class="px-6 py-6 border-b border-[var(--color-border)]">
-    <p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+    <h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">projects</h1>
-      <span class="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
+    <p class="text-[var(--color-text)] text-sm leading-relaxed max-w-xl">
-      projects
-    </p>
-    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
       Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
     </p>
   </div>
 
   <Widget title="projects/featured" badge={featuredProjects.length} as="section">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-px bg-[var(--color-border)] m-5">
       {featuredProjects.map((project) => (
         <ProjectCard project={project} />
       ))}
@@ -32,38 +29,38 @@ import { featuredProjects, archiveProjects } from "@/data/projects";
   </Widget>
 
   <Widget title="projects/archive" badge={archiveProjects.length} as="section">
-    <div class="flex flex-col gap-px bg-[var(--color-border)]">
+    <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-2ch px-2ch py-1lh group"
+          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-1ch flex-1 min-w-0">
+          <div class="flex flex-col gap-2 flex-1 min-w-0">
-            <div class="flex items-center gap-1ch">
+            <div class="flex items-center gap-3">
               {project.year && (
-                <span class="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
+                <span class="text-sm text-[var(--color-text-label)] shrink-0">
                   {project.year}
                 </span>
               )}
-              <span class="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
+              <span class="text-sm text-[var(--color-text-fg)] group-hover:text-[var(--color-accent)] truncate">
                 {project.title}
               </span>
             </div>
-            <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+            <p class="text-sm text-[var(--color-text)] leading-relaxed">
               {project.description}
             </p>
-            <div class="flex flex-wrap gap-x-1ch gap-y-0.5">
+            <div class="flex flex-wrap gap-x-3 gap-y-0.5">
               {project.tags.map((tag) => (
-                <span class="font-mono text-sm text-[var(--color-text-dim)]">
+                <span class="text-xs text-[var(--color-text-label)]">
                   {tag}
                 </span>
               ))}
             </div>
           </div>
           <span
-            class="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
+            class="text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-accent)] shrink-0 mt-0.5"
             aria-hidden="true"
           >
             ↗

src/styles/globals.css

@@ -3,24 +3,28 @@
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* macOS Classic Dark (default) */
+  /* Console Dark (default) */
-  --color-bg:             #131313;
+  --color-bg:             #0a0c0f;
-  --color-surface:        #1e1d1e;
+  --color-surface:        #0e1116;
-  --color-surface-raised: #272727;
+  --color-surface-raised: #11151b;
-  --color-border:         #3a3a3a;
+  --color-border:         #1c2128;
-  --color-border-bright:  #404040;
+  --color-border-bright:  #2a3038;
-  --color-text:           #caccca;
+  --color-text:           #c1bdb3;
-  --color-text-label:     #9e9e9e;
+  --color-text-fg:        #e8e4d8;
-  --color-text-dim:       #8f8f8f;
+  --color-text-heading:   #ffffff;
-  --color-accent-green:   #62ba46;
+  --color-text-label:     #6a675f;
+  --color-text-dim:       #6a675f;
+  --color-text-faint:     #3a3830;
+  --color-accent:         #d4a259;
+  --color-accent-green:   #7b9e7b;
   --color-accent-red:     #c74028;
 
-  /* Timeline type colors — dark */
+  /* Timeline branch colors — dark */
-  --color-timeline-career:    #62ba46;
+  --color-timeline-career:    #b390a8;
-  --color-timeline-education: #c28b12;
+  --color-timeline-education: #999999;
-  --color-timeline-cert:      #c75828;
+  --color-timeline-cert:      #cba76c;
-  --color-timeline-project:   #c72855;
+  --color-timeline-project:   #8ba8c0;
-  --color-timeline-homelab:   #e1d797;
+  --color-timeline-homelab:   #9ab494;
 
   /* Typography */
   --font-mono: "Source Code Pro", ui-monospace, monospace;
@@ -60,10 +64,9 @@ html {
   background-color: var(--color-bg);
   color: var(--color-text);
   font-family: var(--font-mono);
+  font-variant-ligatures: none;
 }
 
-@keyframes blink { 50% { opacity: 0; } }
-.animate-cursor { animation: blink 1s step-start infinite; }
 
 @layer base {
   * {
@@ -73,24 +76,28 @@ html {
   }
 }
 
-/* macOS Classic Light overrides */
+/* Console Light overrides */
 :root:not(.dark) {
-  --color-bg:             #ffffff;
+  --color-bg:             #f3f0e8;
-  --color-surface:        #f9f9f9;
+  --color-surface:        #faf6ec;
-  --color-surface-raised: #f7f7f7;
+  --color-surface-raised: #f6f2e7;
-  --color-border:         #e0e0e0;
+  --color-border:         #d8d2c2;
-  --color-border-bright:  #d2d2d2;
+  --color-border-bright:  #b8b2a2;
-  --color-text:           #000000;
+  --color-text:           #3a3c40;
-  --color-text-label:     #505050;
+  --color-text-fg:        #1c1e22;
-  --color-text-dim:       #929292;
+  --color-text-heading:   #000000;
-  --color-accent-green:   #036a07;
+  --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:    #036a07;
+  --color-timeline-career:    #6e3d7a;
-  --color-timeline-education: #0433ff;
+  --color-timeline-education: #595959;
-  --color-timeline-cert:      #957931;
+  --color-timeline-cert:      #9c6620;
-  --color-timeline-project:   #6f42c1;
+  --color-timeline-project:   #355d8a;
-  --color-timeline-homelab:   #0000a2;
+  --color-timeline-homelab:   #3d7048;
 }
 
 /* Default transitions — linear, fast */