Bea Madjus
Back to Work

Building This Portfolio — AI in the Loop

AI-augmentedBuild in public
RoleDesigner & Creative Director
Year2026
ToolsClaude Code, Next.js, ChatGPT

— 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.

Version one: sage green palette, capability pills, and an illustrated avatar. A solid start, but it didn't feel like me yet
The early editorial dark section, built from the original written spec before any visual iteration
Case studies extracted from my Notion export into a reusable six-section template, then rewritten in my voice
The logo marquee, mid-iteration: mismatched sizes and a combined logo strip that took three rounds to get right
Hero exploration: an AI-generated photo with the design process baked into the image itself
The post-it hover experiment. I killed this one minutes after seeing it live, and that cheap reversal is the whole point of the workflow

— 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.

Where it landed: Playfair Display headline, the Kamusta speech bubble, a soft gradient glow, and a photo that swaps poses on hover

— 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