This Portfolio
A portfolio where the interface is the case study.Overview
This site is its own exhibit, and it has been built twice. The first version, in mid-2025, led with an AI persona: a Gemini-powered model with tool access that answers as me and composes the interface as it goes, surfacing case studies, my story, contact options and the CV as components in the conversation. Fourteen months later I reviewed it as a visitor would and decided it was no longer good enough. Conversational, generative UI had gone from a differentiator to table stakes, and a portfolio has to sell the work first. The second version puts the case studies at the front, keeps the agent as a way in, and raises the craft of everything visible: a token-driven design system, five themes with bespoke canvas effects, and a rebuilt landing and dock. Both versions were designed and built by me alone, and the way I built them could not have been more different.
Problem
Version one solved a 2025 problem. Talking to an AI version of a designer, with the interface assembling itself around the conversation, was rare enough to be the point. By 2026 it was not: chat-first sites were everywhere, and a visitor who had to type before seeing any work was paying for novelty with their time. Underneath that sat the classic portfolio trade-off. 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. The original also carried a harder, less visible problem: getting a model to know when a question deserves a sentence and when it deserves the interface, and getting that behaviour right by hand, with no agent to help write or tune it.
Objective
Rebuild the site as evidence rather than description. Put the work first and make every case study a real, linkable page. Keep the agent, but as a door rather than the room. Build a design system small enough to hold in one file and strict enough that new themes are cheap. And use the rebuild itself to test a belief I had been forming at Lleverage: that with coding agents at their current level, a designer can design and ship in the product, with Figma reserved for the first sketch.
Approach
Designing the Conversation
The first build started in Figma with one question: how do you keep the ease of chat without confining everything to a chat bubble? The answer was a thread that mixes prose with rich components. The model replies in words when a question is precise, and with the interface when the visitor wants to explore: a timeline for my story, a card picker for the work, contact options, the CV. Conversing and exploring became one motion.Teaching the Model When to Show, Not Tell
Gemini gets a concise system prompt and six tool declarations, one per thing the site can do. The real work was in the descriptions: what counts as an explicit request for my story versus a greeting, when to open a study versus answer a question about it, and how to attach a one-line intro and follow-up suggestions to every tool call so the conversation keeps moving. In the first version every word of that was written and tuned by hand, one prompt revision at a time.Pre-emptive Cost Control
A public model endpoint is an open invitation, so the guards went in before the traffic did. Gemini Flash Lite keeps replies fast and cheap. Firebase App Check with reCAPTCHA sits in front of the endpoint. A daily message allowance per visitor degrades gracefully into the browsable site rather than a wall, with the CV and every study still one tap away.The Review, Fourteen Months On
I came back to the site as a visitor and judged it against the market. The AI persona was no longer unique, the visuals had aged, and the work was buried behind an interaction. The brief for the rebuild came out of that review: work first, craft everywhere, and keep only what was still genuinely good.Work First, Agent Second
Every study became a static route with its own metadata, Open Graph image and structured data, with one typed data source feeding the chat, the pages and the server-rendered profile content so nothing can drift. The landing leads with a carousel of the work, and the tabs, cards and chat all feed the same thread, so navigation and conversation are one system with a direct path for anyone who will never type a message.A Design System in Miniature
Every surface, text tier, accent, radius, shadow and typeface became a semantic token, forty-four per theme. A theme is nothing more than a new set of values for the same contract, so the CRT terminal and the fountain-pen paper theme share every line of layout, and the canvas effects read their colours from the same tokens. Five felt like the right number: enough to prove the system, not so many that choosing becomes a chore.Designing in the Product
The concept already existed in Figma, and Figma stopped being useful there. Everything in the rebuild was designed and refined during development, alongside coding agents, with no code typed by hand and no new Figma work. Each pass ran as a critique: screenshot every theme on desktop and mobile, judge it, direct the next change. The tool changed. The judgement did not.Craft in the Details
A dock that carries navigation and chat in one symmetric bar and glides between its resting place and the footer as a conversation begins. Fixed line boxes so switching themes never shifts the page. Artwork that floats above its card. A mobile bar that tracks the browser chrome and the keyboard. Each was a small problem worth solving properly, because on a portfolio the small problems are the work sample.Production Discipline
Strict TypeScript throughout, a discriminated union for everything the thread can hold, statically exported pages on Firebase Hosting, and accessibility carried through real buttons and links, a live-region chat thread, named icon-only controls and decorative imagery hidden from assistive tech.
Results
Two Audiences, One Site
Recruiters scan linkable case-study pages that render before any interaction. Curious visitors talk to AI Marcus and watch the interface assemble itself. Neither has to wait for the other.The Medium Is the Evidence
One codebase demonstrates interaction design, visual craft and engineering at once, and can answer questions about itself.Five Themes, One Contract
The token system keeps a CRT terminal and a fountain-pen paper theme coherent within the same product, and a new theme is a values file rather than a redesign.A Working Proof of the New Workflow
The rebuild shipped with no hand-typed code and no new Figma work, and it is the most finished thing I have made. The argument in the articles is made in the medium.Fast, Cheap and Safe to Run
Flash Lite, App Check and a daily allowance mean the agent answers quickly, the site costs almost nothing to keep alive, and the browsable routes are always there as the fallback. Lighthouse scores it 100 for accessibility and SEO.Learnings
Novelty Has a Half-Life
What made the first version stand out became ordinary within a year. The work is the durable asset; the interaction around it is packaging, and packaging needs refreshing.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.Figma Is for the First Sketch
Once the concept exists, designing in the product with an agent is faster and more honest than designing a picture of the product. Beyond that first sketch, Figma became the bottleneck.Judgement Is the Job Now
When nothing is typed by hand, taste, direction and knowing what is wrong are the whole contribution. Nothing stayed on this site until it had been reviewed in every theme.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, and the daily limit hands them the same site, not a dead end. Guards like that are cheaper to design in than to bolt on after the first bill.Related Writing
