Case Study

Rebuilding My Portfolio with AI-Assisted Development

How I used AI coding tools to rebuild a portfolio site in a weekend — what worked, what didn't, and the surprising productivity gains.

By Philippe

Last fall my portfolio site was embarrassing. Three-year-old React app, a Webpack config I was afraid to touch, and a design that looked fine in 2021. I’d been putting off the rebuild because I knew it was going to be a weekend project. Then I decided to do the whole thing with AI-assisted development and see how fast I could actually move.

This is the story of that rebuild — what I tried, what surprised me, and what I’d do differently.

The Before

The old site was a Create React App project that had accumulated the usual debt: a pinned Node version, three different CSS approaches coexisting in the same codebase, and a node_modules folder I hadn’t touched in two years. Deploying required a manual npm run build and an SFTP upload. It worked, but I’d stopped updating it because the maintenance cost felt out of proportion to the benefit.

The worst kind of technical debt isn’t the code that breaks — it’s the code that works well enough that you never have to fix it, so you never learn anything from it.

The site had no analytics, no contact form that worked reliably, and a blog section I’d added and never populated. Classic developer portfolio.

The Approach

I decided to rebuild with Astro for the same reasons I later chose it for this blog: static output, zero client JS by default, content collections for the blog section. The AI angle was the experiment: I wanted to use Claude and Cursor to write as much of the boilerplate as possible and see where they actually helped versus where I had to think for myself.

The tools: Cursor for code editing with inline AI, Claude for longer architectural questions and spec writing, and the existing Tailwind docs for styling reference.

The Build

I started Friday evening and finished Sunday afternoon — about 16 hours of actual work spread across the weekend. Honest accounting:

PhaseTimeNotes
Setup & scaffolding2 hrsAstro project, Tailwind, MDX, deploy config
Component development6 hrsHeader, footer, project cards, blog layout
Content migration3 hrsMoving projects, rewriting descriptions
Styling polish3 hrsDark mode, typography, responsive layout
Deploy & QA2 hrsGitHub Pages, DNS, Lighthouse passes

Here’s an example of the kind of component AI handled well — a project card that needed a consistent layout but no interesting logic:

---
interface Props {
  title: string;
  description: string;
  url: string;
  tags: string[];
  year: number;
}
 
const { title, description, url, tags, year } = Astro.props;
---
 
<article class="rounded-lg border border-border p-6 hover:border-accent transition-colors">
  <div class="flex items-start justify-between gap-4">
    <h3 class="font-heading font-bold text-text">{title}</h3>
    <span class="text-muted text-sm shrink-0">{year}</span>
  </div>
  <p class="text-muted mt-2 text-sm">{description}</p>
  <div class="mt-4 flex flex-wrap gap-2">
    {tags.map(tag => (
      <span class="text-xs px-2 py-1 rounded bg-surface text-muted">{tag}</span>
    ))}
  </div>
</article>

The AI generated this in one shot. I reviewed it, adjusted the class names to match my design tokens, and moved on. That pattern — generate, review, adjust — repeated about 20 times over the weekend.

Results

The rebuilt site is measurably better on every metric I care about:

MetricOld SiteNew Site
Lighthouse Performance7198
Lighthouse Accessibility83100
First Contentful Paint2.1s0.4s
Total Blocking Time340ms0ms
Bundle size (JS)142kb0kb
Deploy processManual SFTPGit push

The bundle size going to zero was the most satisfying number. There is genuinely no JavaScript on the portfolio pages — it’s all HTML and CSS. The contact form goes through a Netlify form handler. The blog is static MDX.

What I’d Do Differently

The weekend rebuild worked, but there were friction points I’d smooth out on the next project.

I should have written the design tokens first. I ended up with color variables that were slightly inconsistent between components because I defined them incrementally as I went. Defining the full palette upfront — backgrounds, text, borders, accent — would have saved two hours of cleanup on Sunday.

I also accepted too many AI suggestions without reading them carefully in the first few hours, when I was moving fast. I ended up with a few components that worked but used patterns I wouldn’t have chosen myself, and unpicking them cost more time than careful review upfront would have.

AI-assisted development doesn’t make you faster by eliminating decisions. It makes you faster by shifting which decisions you spend time on. You still have to know what good looks like.

Conclusion

The rebuild took a weekend instead of a month. Not because AI wrote everything — it didn’t — but because it handled the parts of the project that would have been tedious and correct-but-boring to write. That freed up focus for the parts that actually required taste and judgment.

The portfolio is live. The blog section actually has posts in it now.

Comments