How I Built rektbelly.com with Claude Code

The Premise

What happens when you use AI to build a portfolio site that tracks how much AI costs to use? You get rektbelly.com — a site that is simultaneously the product, the proof, and the case study.

This is the story of building it.

The Numbers

Let me start with what matters:

• Time to scaffold: One Claude Code session
• Time to full homepage: Two sessions
• Total AI cost so far: $55 (and counting — this number updates live on the dashboard)
• Traditional development estimate: $30,000 at market rates

That's a 545x cost advantage. And the site tracks itself as a project, so those numbers update as we build.

The Architecture Decision

Before writing a single line of code, I spent the first session establishing architecture rules that would prevent the most common AI-assisted development failure: the spaghetti problem.

When you let AI generate code session after session without constraints, you get an unmaintainable mess. Colors hardcoded in 47 files. Data duplicated across components. Styles that fight each other.

The fix was a three-layer separation:

1. Theme Layer — One file (theme.ts) controls every color, font, radius, and animation token
2. Component Layer — Self-contained React components that read styles from CSS variables
3. Data Layer — A single projects.json file that feeds every component via hooks

This means I can reskin the entire site by editing one file. I can swap the isometric grid for a different visualization without touching the homepage. And when the daily pipeline updates project stats, every component reflects the change automatically.

The Stack

• Next.js 14 with App Router — static generation for speed, dynamic routes for flexibility
• TypeScript — catches mistakes before they ship
• Tailwind CSS — utility classes bound to theme tokens via CSS custom properties
• Geist Sans — Vercel's own font, designed for dashboard UIs
• Plus Jakarta Sans — display font with distinctive terminals
• JetBrains Mono — the best monospace font for data-heavy interfaces

No component library. No CSS-in-JS runtime. No state management library. The site is fast because it's simple.

What Claude Code Did Well

Parallel component generation. I could describe the full homepage layout and get NavBar, HeroSection, StatBar, IsometricGrid, CostArbitrageChart, ProjectCards, and Footer generated in one pass. Each component followed the architecture rules because they were established upfront.

Data pipeline awareness. Claude Code understood that projects.json is the single source of truth and consistently wired components to consume data via props rather than hardcoding values.

Responsive design. Mobile-first layouts with Tailwind breakpoints came out correct on the first try for most components.

What I Had to Guide

Design taste. AI can generate technically correct code, but the difference between "works" and "looks like a Bloomberg terminal meets a premium fintech product" requires human judgment. Font pairing, spacing rhythm, and the decision to use green-only (no decorative red) all came from the brief.

Architecture discipline. Without the upfront rules in CLAUDE.md, the AI would have hardcoded colors, imported data directly in components, and created a fragile codebase. The constraints made the output better.

What's Next

The site currently tracks 11 projects worth $877,500 in traditional development value, built for $2,590 in AI costs. Every day, a pipeline updates the numbers. Every new project adds to the story.

Next: the dashboard with deep-dive analytics, and then — the blog you're reading right now.

The numbers don't lie. The portfolio grows. And rektbelly.com tracks every dollar.