This Portfolio
A portfolio where the interface is the case study.Overview
This site is its own exhibit. Instead of a static page, it runs on an AI persona: a Gemini-powered model with tool access that answers as me and responds by composing the interface, surfacing case studies, my story, contact options and the CV as components in the conversation. Five themes each carry a bespoke full-screen canvas effect, from orbiting dust to a CRT scanline field, all driven by one design-token contract. I designed and built every part of it.
Problem
Portfolios force a trade: scannable but forgettable, or novel but obstructive. A recruiter needs credibility in thirty seconds, a curious visitor deserves something worth exploring, and for a designer who codes, the site itself is the most honest work sample there is. It had to do all three jobs at once.
Objective
Build a portfolio that is evidence rather than description: agentic interaction patterns demonstrated in the medium itself, a working design system in miniature, and production-grade engineering, with the work still reachable in two clicks for anyone in a hurry.
Approach
Conversation as Navigation
The model does not answer with prose alone. It decides which component to surface through tool calls, the same generative-UI pattern I work on at Lleverage. Tabs and cards feed the same thread, so navigation and conversation are one system.A Design System in Miniature
Every surface, text tier, accent, radius, shadow and typeface is a semantic token. Five themes redefine the same contract, and the canvas effects read their colours from it, so a theme switch restyles the whole world without moving a pixel of layout.Craft in the Details
A dock that carries navigation and chat in one symmetric bar, artwork that floats and lifts above the cards, fixed line boxes so switching themes never jumps the page, and motion tuned around a single spring curve.Production Discipline
Strict TypeScript throughout, statically generated case-study pages with full metadata for sharing, App Check guarding the model endpoint, and accessibility carried through real buttons and a live-region chat thread.
Results
The Medium Is the Evidence
One codebase demonstrates interaction design, visual craft and engineering at once, and can answer questions about itself.Two Audiences, One Site
Recruiters scan linkable case-study pages; curious visitors talk to AI Marcus and watch the interface assemble itself.Five Themes, One Contract
The token system keeps a CRT terminal and a fountain-pen paper theme coherent within the same product.Learnings
Show, Then Tell
A claim about craft is weaker than an interface that demonstrates it; the portfolio became the proof it was trying to present.Tokens Buy Freedom
The stricter the token contract, the cheaper each new theme became; constraint is what made five worlds affordable.Agentic UX Needs Fallbacks
Every conversational path has a direct one: tabs, cards and routes carry visitors who will never type a message.Related Writing
