How this site was made

Next.js 16 App Router, TypeScript, and Tailwind CSS v4 with CSS-first design tokens, statically prerendered and deployed on Vercel. Type is Big Shoulders for display, Archivo for body, and IBM Plex Mono for everything that should read like an instrument label. The visual language borrows from the work itself: a dashed lane-line motif and detection-style corner ticks on media frames, each in the accent color of the product it frames.

It is dark only, on purpose. There is no theme toggle to maintain and no flash of the wrong mode. One dark palette is the identity.

The main engineering surfaces are the animated hero, responsive evidence-led case studies, accessible no-login demo players, editorial product captures, typed evidence records, sanitized downloadable JSON, and cross-case navigation. The gear logo is a canvas particle system that scatters binary digits when the pointer gets close.

Accessibility choices are implemented, not aspirational: the hero video respects prefers-reduced-motion, scroll-reveal animations disable themselves under reduced motion and never hide above-the-fold content, the bobbing scroll cue stops animating, smooth scrolling reverts to instant, videos retain native controls after playback begins, and transcripts remain available without login.

AI tools, disclosed: Claude Code was the pair programmer for this site's code, working in this repository alongside me. The hero animation was generated with Higgsfield AI models and directed from the Claude Code CLI. The words on every page are mine, and every technical claim on the case-study pages was checked against the actual repositories before it shipped.

The loop tells four true stories in order: writing software at my desk, welding a cafe racer frame, 3D printing a unicorn for my daughter, and the memory game we play as a family. It is the About Me section, animated.

Getting one recognizable character through four scenes out of a generative video tool is direction work more than prompt work. The pipeline starts with a single character reference image. Each scene begins as a still keyframe generated against that reference. Keyframes are edited as images until they are right, because stills are cheap and video passes are not. Only an approved still is promoted to an image-to-video pass at 1080p. Every prompt lives in a JSON file in this repository, and a small script drives the Higgsfield API through the character, keyframe, and video stages.

Rejected along the way: a printer keyframe with a visible brand label, a keyframe showing a finished unicorn print when the scene was supposed to show printing, and two full takes of the printing scene before the version where the build plate starts high under the nozzle and descends as the unicorn grows, the way a real printer works.

Assembly is deliberately boring engineering. An ffmpeg script normalizes every scene to 1920x1080 at 30 fps, crushes near-blacks to true black so scene edges disappear into the page, joins scenes with 0.75 second crossfades, and closes the loop with an end-to-start crossfade so there is no seam frame. The player serves H.264 first with a VP9 fallback, and a radial mask blends the video into the pure-black hero behind it.

Why disclose all this? Because for the AI-engineer work I do, the agentic tooling is the point. The animation was storyboarded, generated, revised, and assembled from a terminal session. A disclosed AI video is a case study. An undisclosed one is a liability.