Detail 01 · Overview
The brief
Who the site is for, what it has to prove, and the stack and workflow chosen for it. 5 minutes, 1 demo.
01 · The idea
A portfolio that does what it says
Most portfolios describe the work. This one had to be the work. I design interfaces and I build them, so the site itself is the clearest proof I can give: something that was sketched, then built, and polished until it felt right.
That set the brief. Not a list of projects with screenshots, but a place where every interaction shows the same skill: taking an idea from a pencil sketch to an interface that works, on any screen.
02 · Who it’s for
Three readers, one site
A site for everyone is a site for no one, so I picked three readers and asked what each of them needs in the first minute. Pick one below and see where the site answers them.
“Can this person take a design all the way to a polished, working product?”
- The headline says it in one line: designer and design engineer.
- The resume is one tap away, from any page.
- The full resume, readable on a phone and downloadable as a one-page PDF.
- This case study: the proof, every decision shown with a demo and the real code.
The hiring manager matters most, and gets the shortest path: one line that says what I do, a resume a tap away, and this case study for the proof. The other two get the details, and the details are where the craft shows.
03 · What it has to prove
Three things, shown, not listed
Design engineering is judged on whether you can carry a design all the way into polished, working product. So the site has to show three things, and each of them is a part of this case study:
- UX thinking: who it’s for, what they should feel and do, and the trade-offs behind each decision.
- A design system: one visual language, followed everywhere.
- The build: how it was engineered, iterated and shipped, down to the real code.
The visual idea came straight from that. If the job is turning sketches into interfaces, the site can be a sketchbook: dark paper, structure in white pencil, and one ember accent saved for what matters. Every page sketches itself in pencil before it arrives, which is the whole brief in one moment.
04 · Decisions
The rules it’s built on
Pencil for structure, ember for what matters
Frames, rules and boxes are hand-drawn in faint white. The accent colour is spent only on the active state, the thing being studied, or a key note.
Motion with a reason
Everything that moves explains something: where you’re going, what changed, what to look at. Nothing pops in or out.
Nothing borrowed
No UI kit and no template. Every part, from the islands to the scroll ruler, was drawn for this site.
Works everywhere
Phone, tablet and desktop, keyboard and touch, with motion reduced for anyone who asks for less.
The trade-off I chose knowingly: a portfolio this animated asks for a little patience. The page transitions are slow on purpose, so the site makes up for it by never hiding the content: the resume and the work are always one step away.
05 · Stack and workflow
A small stack, used all the way
The stack is deliberately small. Next.js for pages and routing, React for components, Tailwind for styling, Motion for every animation and Lenis for the smooth scroll. This case study adds MDX for writing and Shiki for highlighting code at build time.
"dependencies": {
"@mdx-js/loader": "^3.1.1",
"@mdx-js/react": "^3.1.1",
"@next/mdx": "^16.3.8",
"lenis": "^1.3.26",
"motion": "^13.5.0",
"next": "^16.3.8",
"react": "^19.3.0",
"react-dom": "^19.3.0",
"rehype-mdx-code-props": "^3.0.1",
"remark-smartypants": "^3.0.3",
"shiki": "^4.5.0"
},The way it was built matters as much as what it was built with. I worked with an AI coding agent: I set the direction and the rules, it wrote the code, and nothing shipped until it looked right in the browser.
1.Decide the feel
What should this part feel like, and why does it earn its place? That part is mine.
why?2.Mark it up
A screenshot drawn over, a few words on what to change. The fastest brief there is.
screenshot + notes3.Build it with an agent
An AI coding agent writes the code, against the project's own rules: the ember rule, pencil not boxes, nothing pops.
CLAUDE.md4.Check it in the browser
On a phone, a tablet and a desktop, slowed down until every frame holds up.
375 · 820 · 15365.Keep it or throw it out
Most ideas change on the way. Some go back to the start.
How I direct the agent, and what stays mine, has a detail of its own at the end of this case study.
06 · Takeaways
What to keep
- A portfolio is most convincing when it is the work, not a description of it.
- Pick your readers, and give the most important one the shortest path.
- Let the visual idea come from the job itself, then hold every part to the same few rules.
The home page: the signature, the name and the portrait, in the first ten seconds.