feat(ui): add timeline component; complete terminal-noir design system

- introduce Timeline component with scroll-in animation and type-colored
  spine dots (career/edu/cert/project/homelab)
- swap terminal-noir palette for macOS Classic dark/light with matching
  timeline color tokens in globals.css
- add light mode overrides, cursor blink keyframe, font-size 14px base
- update Widget header: prefix/name split, bracket badge, no divider rule
- align archive and homelab page headers to ❯ prompt style
- convert all font-sans prose in homelab/archive to font-mono
- rename widget titles to namespaced paths (homelab/network, etc.)
- skills label: uppercase tracking → plain text-sm; remove row borders

src/app/archive/page.tsx

@@ -11,22 +11,17 @@ export default function ArchivePage() {
   return (
     <>
       <div className="mb-16">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
-            archive
-          </span>
-          <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
-        </div>
-        <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
-          Earlier Work
-        </h1>
-        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
+        <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="projects" badge={archiveProjects.length} as="section">
+      <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
@@ -47,7 +42,7 @@ export default function ArchivePage() {
                     {project.title}
                   </span>
                 </div>
-                <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                <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">

src/app/globals.css

@@ -3,17 +3,24 @@
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* Terminal-Noir palette */
-  --color-bg:             #0a0a0a;
-  --color-surface:        #111111;
-  --color-surface-raised: #1a1a1a;
-  --color-border:         #2a2a2a;
-  --color-border-bright:  #444444;
-  --color-text:           #e8e8e8;
-  --color-text-label:     #666666;
-  --color-text-dim:       #444444;
-  --color-accent-green:   #00cc44;
-  --color-accent-red:     #cc2200;
+  /* 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;
@@ -34,11 +41,15 @@
 /* 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;
@@ -47,6 +58,26 @@ html {
   }
 }
 
+/* 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 {

src/app/homelab/page.tsx

@@ -81,16 +81,11 @@ export default function HomelabPage() {
     <>
       {/* Header */}
       <div className="mb-16">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
-            lerkolabs
-          </span>
-          <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
-        </div>
-        <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
-          Home Infrastructure Lab
-        </h1>
-        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
+        <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.
@@ -98,7 +93,7 @@ export default function HomelabPage() {
       </div>
 
       {/* At a Glance */}
-      <Widget title="at a glance" badge={glanceStats.length} as="section">
+      <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
@@ -116,7 +111,7 @@ export default function HomelabPage() {
 
       {/* VLAN table */}
       <Widget
-        title="network"
+        title="homelab/network"
         meta="8 isolated vlans · default deny inter-vlan"
         as="section"
       >
@@ -151,7 +146,7 @@ export default function HomelabPage() {
                   <td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
                     {v.subnet}
                   </td>
-                  <td className="font-sans 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>
@@ -161,7 +156,7 @@ export default function HomelabPage() {
 
       {/* Services */}
       <Widget
-        title="services"
+        title="homelab/services"
         badge={services.length}
         as="section"
       >
@@ -187,7 +182,7 @@ export default function HomelabPage() {
                         <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
                           {svc.name}
                         </p>
-                        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                           {svc.description}
                         </p>
                       </div>
@@ -202,7 +197,7 @@ export default function HomelabPage() {
 
       {/* ADRs */}
       <Widget
-        title="architecture decisions"
+        title="homelab/ADRs"
         meta="why things are configured the way they are"
         badge={adrs.length}
         as="section"
@@ -214,11 +209,11 @@ export default function HomelabPage() {
               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-sans text-sm text-[var(--color-text)] leading-relaxed mb-1.5 opacity-75">
+              <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-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+              <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>
@@ -228,16 +223,16 @@ export default function HomelabPage() {
       </Widget>
 
       {/* GitHub CTA */}
-      <section className="border-t border-[var(--color-border)] pt-6">
-        <p className="font-mono text-sm text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p>
-        <p className="font-sans text-sm text-[var(--color-text)] mb-3 opacity-75">
-          Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
+      <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-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
         >
           ↗ github.com/lerko96/homelab-wip
         </a>

src/components/Skills.tsx

@@ -27,16 +27,14 @@ const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
 
 export default function Skills() {
   return (
-    <Widget title="skills" badge={totalCount} as="section">
+    <Widget title="tyler/skills" badge={totalCount} as="section">
       <div className="flex flex-col">
-        {skillGroups.map(({ label, skills }, i) => (
+        {skillGroups.map(({ label, skills }) => (
           <div
             key={label}
-            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-4 ${
-              i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
-            }`}
+            className="flex flex-col xs:flex-row gap-1 xs:gap-6 py-3"
           >
-            <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
+            <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)]">

src/components/Widget.tsx

@@ -15,22 +15,22 @@ export default function Widget({
   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-3 mb-8">
-        <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase whitespace-nowrap">
-          {title}
-        </span>
-        {meta && (
-          <span className="font-mono text-xs text-[var(--color-text-dim)] whitespace-nowrap">
-            {meta}
-          </span>
+      <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>
         )}
-        <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
+        <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)] whitespace-nowrap">
-            {badge}
-          </span>
+          <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}

src/data/timeline.ts

@@ -0,0 +1,75 @@
+export type TimelineType = 'career' | 'cert' | 'project' | 'homelab' | 'education'
+
+export interface TimelineEntry {
+  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: '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: '2024',
+    title: 'CompTIA A+',
+    type: 'cert',
+    description: 'Earned A+ certification, formalizing hardware and OS fundamentals.',
+    tags: ['certification'],
+  },
+  {
+    date: '2024',
+    title: 'Project 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 (Grafana + Prometheus + Loki).',
+    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: '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-07',
+    title: 'Config Tech I — MCPc',
+    type: 'career',
+    description: 'Hardware configuration, OS imaging, and deployment at scale for enterprise clients.',
+    tags: ['sysadmin', 'hardware'],
+  },
+  {
+    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'],
+  },
+]