Most designers treat their portfolio like a document. A place to put work. I treated this one like a product.
Same brief. Same constraints. Same question every project starts with: what does this need to do?
The problem with designer portfolios is that they're usually designed for other designers. Heavy on process, light on outcomes. They show what you did, not what you can do. I wanted something different — a site that signals capability through its own existence.
If I'm repositioning as a design engineer, the portfolio is the proof. You shouldn't need to read a case study to know I can ship things. You should be able to tell from the first 10 seconds.
So the brief became: show a working interface, built and designed by one person, with real interactions.
The constraints
Three weeks. No Framer, no Webflow, no templates. Full code — Next.js, Tailwind, TypeScript, deployed to Vercel.
The constraint wasn't just discipline. It was a forcing function. If you're trying to prove you can ship, you have to actually ship. A Framer site that looks good is still a Framer site. The engineering is part of the message.
How I actually built it
Figma first. I designed the whole thing — not high fidelity wireframes, proper finished layouts. The hero interaction, the dark mode token system, the work cards, the filter logic. Designed before a line of code.
Then Claude Code. I didn't use it as autocomplete. I used it as a build partner with full context of the codebase. The workflow:
- Screenshot the Figma frame
- Describe the interaction or component
- Claude writes the first pass
- I review, adjust, iterate
The hero — the fluid color reveal on mouse move, the B&W to color canvas — that took a few hours. The kind of interaction I'd have spent a day on previously, and probably abandoned as "too complex for a portfolio."
The AI made the ambition tractable.
The design decisions that matter
A few things I deliberately chose and why:
CSS token system, no hardcoded colors. Every color in the site is a CSS variable — var(--var-foreground), var(--var-muted-foreground), etc. Dark mode works because of this. It's how a design system should work. It made the whole site feel consistent without a spec.
No rounded corners on UI elements. Sharp rectangles throughout — cards, filter pills, buttons. A deliberate choice. It creates a particular visual register — technical, precise, not soft. You feel it without naming it.
The sticky hero. The portrait section is position: sticky — it stays behind as the content scrolls over it. Technically simple, but the effect is worth it. It makes the site feel like it has depth.
Interactive photo reveal. The hero portrait is B&W by default. Mouse over it and color bleeds in where the cursor passes. An easter egg for people who explore. A small detail that takes 10 seconds to discover and 0 seconds to remember.
What I learned
The line between design and engineering blurs fast when you're doing both. There were decisions I thought were design decisions that turned out to be performance decisions. There were things I thought were dev problems that were actually UX problems.
The main one: don't design what you're afraid to build. I'd spent years handing off designs and watching the interesting parts die in implementation. When you're building it yourself, the constraint is reality — not someone else's sprint. You design things differently when you know you're shipping them.
The AI workflow changed the leverage. But it didn't change the taste. You still have to know what you want. You still have to review the output. The gap between "AI-generated" and "AI-assisted" is everything — and the gap is you.
The site is live. The code is real. If you want to see how any specific piece was built, I'm happy to walk through it.
That's the case study.
Stack
- Next.js 15 (App Router) + TypeScript
- Tailwind CSS with custom CSS token system
- Framer Motion for animations
- MDX for all notes and case studies
- Vercel for deployment
AI tools used
- Claude Code — primary build tool for components and interactions
- Cursor — iteration and smaller edits
- Build time: ~3 weeks, solo