This website
A portfolio that claims fluency across design, engineering and AI has to prove it in its own interface, not in a list of skills.
- Role
- Strategy, design, frontend architecture, content, SEO, performance
- System type
- Marketing site / interaction system
- Disciplines
- Strategy · Design · Engineering · Intelligence · Operations
- Technology
- React 19, TypeScript, TanStack Start, Tailwind CSS v4, Motion, Canvas
Key challenge
Make the experience feel years ahead while staying fast, accessible, and legible to a hiring manager reading it on a phone in poor light.
The situation
The previous site described three separate professional identities — design engineer, AI consultant, fractional lead — and asked the visitor to assemble the person themselves.
The problem
Range read as fragmentation. The work of combining disciplines, which is the actual differentiator, was invisible in the interface.
The constraints
A single operator, no fabricated client material, and a hard requirement that the cinematic layer never compromise first paint, keyboard use, or reduced-motion preferences.
The system
One identity — AI-Native Design Engineer — expressed through a narrative homepage: intrigue, position, proof, model, depth, human, fit, action. Content lives in typed data modules so every surface stays consistent.
Architecture
File-based routing with a data layer separated from presentation: projects, capabilities, stack and experiments are structured records that drive the homepage, the work index, case studies and the command surface from one source.
Interface
A computational hero field, an interactive capability graph, an intent selector that re-emphasises the page around what the visitor is trying to build, and a ⌘K command surface over the whole body of work.
Intelligence
Grounded search over structured portfolio data, designed so a language layer can be added behind the same interface without redesign — and without ever inventing experience.
Execution
Every token, component, animation, route and metadata block was designed and written by one person.
Lessons
Motion communicates relationships or it is decoration. Once each animation had to justify what it explained, most of them got quieter and the site got better.
Architectural insight
Ambition and restraint are not opposites: every expensive visual here is deferred, reduced-motion aware, and removable without breaking the narrative.