✨ Building This Portfolio — AI in the Loop
— 01 CONTEXT
A portfolio that practices what it preaches
My positioning says "Product Designer crafting end-to-end experiences accelerated by AI." So when it came time to rebuild my portfolio, using a drag-and-drop site builder felt like a contradiction. If AI is genuinely part of my workflow, the portfolio itself should be proof.
So I set myself a constraint: design and ship the whole site by directing AI, specifically Claude Code, the way I'd work with a design-engineering partner. I would own the taste, the direction, and every design decision. AI would own the code. No Figma files, no handoff. The browser was the canvas.
— 02 PROBLEM
Thirty seconds to earn a deeper read
Hiring managers skim. Realistically I get about thirty seconds before someone decides whether to keep reading or close the tab. My old portfolio didn't survive that skim: the content was buried in Notion, the visual identity didn't feel like mine, and nothing about it showed the AI-augmented way I actually work now.
I needed a site that leads with personality, gets to the work fast, and quietly demonstrates craft in the details. And I wanted to find out, honestly, how far a designer can get building production UI with AI as the only engineer.
— 03 APPROACH
Briefing AI like a design partner
I started the way I'd start any project: with a spec. I wrote a full brief covering brand colors, typography, layout direction, and an editorial "magazine spread" aesthetic, then had Claude propose a build plan before writing any code. Getting alignment before execution mattered just as much here as it does with human teammates.
Content came next. I exported my case studies from Notion, had Claude extract and structure them into a reusable six-section template, then rewrote every paragraph in my own voice. That last part was non-negotiable. AI drafts read like AI, and I wanted the site to sound like me talking about my work, not a press release.
Then we iterated, a lot. The hero alone went through several rounds: capability pills, then a photo with hover states, then AI-generated versions of me (made in ChatGPT) with the backgrounds programmatically removed, a speech bubble, floating skill labels, and a crossfade between two poses matched pixel-for-pixel in height so the swap feels animated. I gave feedback the way I'd annotate a design review: "closer to the body," "less contrast," "that arrow feels broken." Each note became a live change I could react to in the browser within minutes.
The same loop shaped everything else: a logo marquee that pauses on hover, image galleries with a lightbox and keyboard navigation, tag chips restyled from pill to rounded square so they stop reading as buttons, a nav that stays hidden on the landing page and slides in on scroll, and a type system that landed on DM Serif Display, Playfair Display, and Poppins after trying three combinations in situ.
— 04 WHAT CHANGED
From scaffold to live site in a week of sessions
The result is the site you're reading right now: a home page with personality and interaction detail, a work index, five full case studies pulled out of Notion and rewritten, an about page, and a design token system keeping it all consistent. All of it built conversationally, without me writing the code myself.
The velocity was the real eye-opener. Ideas that would normally wait for a free evening with Figma and a dev environment went from thought to shipped in minutes. Trying a font combination meant seeing it live across the whole site, not mocking up three artboards. Killing a bad idea cost nothing, so I explored more directions than I ever would have otherwise.
Just as important: the process surfaced real design decisions constantly. AI can produce options endlessly, but it can't tell you which one is right. Every "keep this, revert that" moment was design judgment, and the site is better because those calls stayed human.
— 05 REFLECTION
AI moves fast, taste sets the direction
Building this confirmed something I believe about AI in design: it collapses the distance between intent and artifact, but it doesn't supply the intent. The skill that mattered most wasn't prompting, it was the same skill I use in every design review: seeing what's off, naming it precisely, and knowing when to stop iterating.
It also changed how I think about deliverables. Working directly in the live product, with real type, real motion, and real content, gave me better answers faster than any mockup would have. I still love Figma for exploration, but for a project like this, the browser was the honest medium.
And there's something fitting about the meta of it all. The portfolio claims I design end-to-end experiences accelerated by AI. Now it doesn't just claim it. It is one.
— 06 AT A GLANCE
Project summary
- Role
- Designer & Creative Director (AI pair: Claude Code)
- Timeline
- June–July 2026 (~1 week of sessions)
- Team
- Solo, with Claude Code as engineer
- Platform
- Web (Next.js, Tailwind CSS, Framer Motion)
- Outcome
- This live site: 3 pages, 5 case studies, design token system, shipped without writing code by hand
