BUILD INSTRUCTIONS¶

What to build¶

A standalone index.html in this directory. Single file, all CSS/JS inline.

Read timeline-data.md in this same directory. It contains the full narrative, milestones, people, and themes.

Dark cyberpunk: #0a0a1a background, neon purple (#7c4dff) + cyan (#00d4ff)
Vertical timeline: center-line desktop, left on mobile
Two visual tracks: OBSESSION (purple) and CAREER (cyan). Some milestones are both (gradient).
Scroll-triggered card animations (IntersectionObserver)
Pulsing glow nodes on the timeline spine
Animated canvas background: subtle grid + floating particles
Header: // TECHNOLOGY_OBSESSION with glitch animation
Subtitle: from frankensteined 386s to autonomous AI fleets
Expandable detail panels on each card
Fonts: Inter + Fira Code via Google Fonts CDN
Responsive (700px and 480px breakpoints)
Under 35KB. No frameworks. Pure vanilla HTML/CSS/JS.
Respect prefers-reduced-motion

Extract from timeline-data.md. Each card needs: date, title, track (obsession/career/both), tag, summary (1-2 sentences), expandable detail.

Write to ./index.html, overwriting any existing file.