Back to blog
June 17, 2026·8 min read

Building a portfolio with AI: what I learned (and unlearned)

IAClaude CodeNext.jsProcesoDesignOps
Building a portfolio with AI: what I learned (and unlearned) 1

I've been designing digital products for over 15 years. I know how to define a design system, facilitate a research session, or write a content strategy document. I also know how to code and build websites — but not at this level. Not with the depth of infrastructure decisions, deployment pipelines, and DNS configuration that a production-grade site demands.

This is the story of how I built andresballen.com using Claude Code, and what that experience revealed about the future of design work.

It started with documents, not code

Before writing a single line of code, I spent weeks in a parallel research phase — running the same questions across ChatGPT, Gemini, Claude, Grok, and Copilot simultaneously, then comparing and synthesizing the outputs.

The brief was simple: help me build a portfolio that competes at a high level. What followed was a series of markdown documents that became the foundation of everything: a benchmark of the top 20 UX portfolios in the world (with individual analysis of each one), a deep research report on digital banking UX patterns from my professional work, a complete content strategy in Spanish and English, a design system definition, a component inventory, and a professional profile document that synthesized 15 years of career history into a coherent narrative.

Each AI brought something different. ChatGPT was methodical and structured. Gemini went deep on competitive analysis. Grok was faster and more opinionated. Claude was the best at reasoning through contradictions and synthesizing across sources. Copilot was useful for the more technical research. None of them alone produced what all of them together did.

I also had an important raw material: my old WordPress site. I exported the database — posts, pages, content accumulated over more than a decade — and fed it into the research process. The AI helped me identify what was still relevant, what had aged poorly, what needed to be rewritten from scratch, and what could become the foundation for new case studies.

The result was something I hadn't expected: an unusually coherent starting point. By the time I wrote the first line of code, I already knew the tone of voice, the bilingual routing logic, which content actually needed to exist, and what the site was trying to say about me professionally. That's the work that usually gets skipped — and it's exactly the work that most portfolios fail to do.

Claude Code as a collaborator, not a tool

I want to be honest about what Claude Code is and isn't. It's not a code generator you prompt once and walk away from. It's closer to a very capable senior developer who works in your terminal, reads your files, reasons about your codebase, and tells you when something is a bad idea.

The best moments weren't when it wrote code for me. They were when I described a problem and it pushed back: *"this approach will break i18n routing because..."* or *"the deploy branch strategy will hit a 100MB GitHub limit with the @next/swc binary."* Those were the moments where I learned something real.

The cPanel chapter (or: how I almost gave up)

The original plan was to host on cPanel — my existing shared hosting. What followed was about two weeks of debugging that touched GitHub Actions workflows, FTP upload scripts, disk quota limits, npm cache corruption, and git repository errors that I still don't fully understand.

Looking back, that chapter was actually valuable. It forced me to understand the deployment stack at a level I'd never needed to before. I learned what a standalone Next.js build actually is. I learned why node_modules can't go in a git repository. I learned that 1GB of hosting disappears faster than you think when you're building modern JavaScript.

The lesson wasn't "cPanel is bad." It was: the right infrastructure decision depends on the project, and migrating early is better than migrating under pressure.

Moving to Vercel changed everything

The decision to move to Vercel was made in less than an hour. Within 30 minutes the site was deployed. Within another 30, the contact form was working.

That contrast — two weeks of cPanel debugging vs. 30 minutes on Vercel — tells you something about the importance of choosing the right tool for the job. For a Next.js portfolio, Vercel is the obvious choice. I should have started there.

The DNS rabbit hole

Even after Vercel was running perfectly, the custom domain took almost 24 hours to fully propagate. And when it did, the contact form stopped working — because the SMTP server lived on cPanel, and the mail DNS records were now pointing to Vercel IPs.

Then the emails were bouncing from Gmail with SPF and DKIM failures, because cPanel routes email through MailChannels and that relay IP wasn't in the SPF record.

These are the kinds of problems that would have taken me days to solve alone. With Claude Code, each one was diagnosed and resolved in minutes — not because the AI "knew the answer," but because it could read the error logs, understand the DNS records, explain what was failing and why, and propose a fix.

What I actually learned

AI amplifies your existing knowledge. The more I understood about DNS, HTTP, and deployment, the better my conversations with Claude Code became. It's not a shortcut around understanding — it's a multiplier on top of it.

The design skills transferred directly. Thinking in systems, defining problems before jumping to solutions, understanding user flows — all of that applied directly to architectural decisions in the codebase. DesignOps is closer to DevOps than most designers realize.

Documentation is a first-class deliverable. The markdown documents from the research phase became the project's source of truth. The commit history became the changelog. Writing clearly, early, paid off every time I returned to the project.

Speed without quality is just technical debt. There were moments when Claude Code suggested a quick fix that would have introduced a security vulnerability or a CSP bypass. Noticing those moments — and pushing back — required judgment that no AI can replace.

What's next

This site is not finished. The Three.js hero animation needs tuning. There are case studies to write. The bilingual content needs expansion.

But it's live, it's fast, it sends email, it tracks analytics, and it represents my work accurately. For a solo project built without a development budget, that's not nothing.

More than the site itself, this process gave me a new model for how designers can build. Not by learning to code in the traditional sense — but by developing enough technical literacy to collaborate meaningfully with AI tools that can handle the implementation.

That's the skill I'll be investing in going forward.

Andrés Ballén

Andrés Ballén

UX Strategy & DesignOps Leader