How this site works
This portfolio is itself a build log entry. It's a static site that treats motion as an engineering budget: computed at build time, animated sparingly, and honest about what its instruments show.
Six decisions that shaped it
Static first
Astro 7 renders every page to plain HTML at build time. There is no server, no hydration waterfall, and exactly one React island on the whole site (the photography lightbox). Everything else that moves is vanilla TypeScript.
No WebGL, on purpose
The isometric SLAM map and the exploded lens are not 3D scenes. Their geometry (spline sampling, isometric projection, cone offsets, checker polygons) is computed at build time and shipped as plain SVG; anime.js only drives the car along the path and blows the lens apart. The result works on a phone, costs almost no battery, and weighs kilobytes.
One motion engine
A single script (src/scripts/motion.ts) reads declarative data-attributes (data-reveal, data-stagger, data-counter, data-scramble, data-draw, data-parallax) and wires IntersectionObserver + anime.js v4. Pages ship zero per-effect JavaScript. With JS off or prefers-reduced-motion on, all content is simply visible.
App-like navigation
Astro's ClientRouter crossfades between pages while the scroll-progress bar persists across swaps. Every component script re-initializes through astro:page-load with idempotency guards, which is also why the hero footage restarts when you come back home.
Design tokens over decoration
One dark OLED palette (background #09090B, a blue-cyan-indigo accent triad kept under ten percent of any surface), three self-hosted variable fonts (Space Grotesk for display, Inter for body, JetBrains Mono for the HUD labels), and Tailwind v4 with the tokens defined as CSS variables.
Honest instruments
Every readout on this site is a real fact: the ticker values, the stats, the clock (actual Winnipeg time). The cone map renders a synthetic circuit today and is built to render a real logged run from the car; it says SIM on it until it does.
Read the code
The whole site is on GitHub: the motion engine, the SVG track generator, the design tokens. If any of it is useful for your own portfolio or your team's site, take it.