claude codenext.jsweb developmentai toolsportfolio

Building My Portfolio Site with Claude Code

The Idea

I wanted to get more familiar with Claude Code and figured the best way to learn a tool is to build something real with it. So I decided to build a professional portfolio site. Somewhere to host my resume, list my experience, and write about things I am learning in data, analytics, and AI.

Before writing a single line of code, I used Claude Desktop to think through how to approach the project. It helped me break the build into focused sessions rather than trying to do everything at once. That framing made the whole thing feel manageable.

I Am Not a Software Engineer

That context matters for what comes next.

I have built websites before. Some simple vanilla JS sites, a few projects in Framer. Those usually take me a full day, sometimes a full weekend, and they do not end up looking particularly great.

This site took a few hours after work over a couple of days. And it looks better than anything I have built before.

What Claude Code is doing here is not magic for an experienced developer. Setting up a Next.js project with a blog is straightforward if you do it regularly. But I do not do it regularly. I have the technical understanding to know what I want, I just have not built the speed to execute it quickly. That is exactly the gap Claude Code fills.

How the Build Went

I started by describing the project and asking Claude Code to set up the scaffolding. I referenced ShipFast, a Next.js boilerplate I had used before, as a starting point. Claude Code actually pushed back on that. It pointed out that ShipFast comes with Stripe integrations, database connections, and auth flows that a portfolio site does not need. It suggested a simpler setup using plain Next.js and MDX for the blog. That was the right call and I appreciated that it simplified rather than just doing what I asked.

For the design, I found a Framer template I liked and gave Claude Code the URL. It used that as a reference and styled the site to match. Dark background, clean typography, yellow accents. It looked good.

For the content, I handed it a PDF of my resume. It parsed it and populated the experience, skills, and certifications sections across the site without much issue. That part genuinely surprised me with how clean the output was.

The Things That Needed Fixing

There were some visual issues out of the box. The contrast was pretty bad. Dark grey text on a black background. It was hard to read. One prompt asking it to adhere to standard accessibility contrast guidelines fixed it.

There was also a moment where my name rendered at what looked like size 300 font at the top of the page. It looked ridiculous. Some elements were overlapping in ways that made no sense as a finished product. These are things a human developer would have caught before calling something done.

But none of it was frustrating to fix. A quick prompt describing the problem and it corrected it. For a simple site like this, the issues were minor.

Final Thoughts

If you have technical knowledge but are not a full-time developer, Claude Code is worth trying. The gap it closes is not about understanding what to build. It is about the time and muscle memory it takes to build it quickly.

I own all the code. I pay a small Vercel hosting fee. I am not locked into a monthly subscription with a no-code platform. And the site is more polished than anything I would have shipped on my own in this timeframe.

That is a pretty good outcome for a few evenings of work.