Back to all posts
Claude CodeAI Development ToolsWeb DevelopmentAI CodingNext.js

Building My Personal Website with Claude Code: An AI Developer's Journey

7 min read

What is Claude Code and Why Should You Care?

Ever had that moment when you think, "I should finally build my personal website," but then the thought of setting up components, styling everything, and making it responsive makes you close your laptop and watch Netflix instead? Yeah, me too—until I discovered Claude Code.

Claude Code is Anthropic's agentic AI coding assistant that can generate, modify, and debug entire codebases based on natural language instructions. Think of it as pair programming with an AI that actually understands what you're trying to build.

In this post, I'll walk you through how I used Claude Code to build my personal website in under an hour, what I learned, and whether it's worth adding to your developer toolkit.

💡 TL;DR: Claude Code helped me build a complete personal website in ~20 minutes for $6.50. It's excellent for quickly scaffolding projects and handling large-scale changes, but use other tools for minor tweaks.

🤯 Meta moment: You're currently reading this post on the very website that Claude Code built. The blog you're reading about... is the blog you're reading. How's that for inception?

Getting Started with Claude Code

First things first—installation. The official docs recommend:

npm install -g @anthropic-ai/claude-code

But this didn't work smoothly for me. Instead, I had to use:

npx @anthropic-ai/claude-code

And then to intialize the claude cli I had to use as well npx @anthropic-ai/claude-code. Not a dealbreaker, but worth noting if you run into similar issues.

Claude Code Initial View

Claude Code Initial View

Kicking Off My Website Project

I started with a basic Next.js template and then initialized Claude Code:

claude init

This cost $0.10 and created a specialized documentation file (Claude.md) that scans your project and documents important information—like a README specifically for AI assistants. In my case with a brand new project, it wasn't particularly useful, but for mature codebases, it helps Claude understand the project structure, dependencies, and how to run it.

The Magic of the First Prompt

Here's where things got interesting. I typed my simple request:

This project is about creating a personal website for me, showcasing my projects, blog posts, achievements, education, and jobs. Your task is to create the first version of this website.

That's it. That's the entire prompt.

Within minutes (which, I'll admit, felt longer while watching my credit card get charged in real-time), Claude Code had generated a complete website structure. Final damage: $0.91 for the initial website generation.

What Claude Code Actually Generated

Setting Claude to SOLO mode (with a simple yes, and don't ask again this session) allowed it to edit files freely. Here's what it built:

  • A responsive home page with hero section, skills, projects, and blog previews
  • Dedicated About, Projects, Blog, and Contact pages
  • Proper routing and navigation
  • Markdown support for blog posts
  • Basic styling with Tailwind CSS

The most impressive part? It didn't just throw together some templates—it actually analyzed what a personal website needs and built a coherent structure where everything worked together.

Making It Personal: The CV Challenge

Next challenge: making this generic site actually reflect me.

My first attempt was feeding Claude my LinkedIn data export, which was a spectacular failure and cost me $1 in AI credits. The LinkedIn PDF format was too complex for Claude to parse effectively.

Instead, I attached my structured CV to the repo and asked Claude to reference it—which worked beautifully.

Pro tip: When working with any AI coding assistant, structured, clean data always wins. A well-formatted CV with clear sections was infinitely more useful than LinkedIn's data soup.

After processing my CV, Claude:

  • Rewrote my bio with actual details from my experience
  • Populated my education and work sections
  • Updated my skills list with accurate technologies
  • Connected my real social accounts
  • Listed my actual projects with descriptions

Total cost for personalization: $1.52 and about 5 minutes of waiting. Claude did take some creative liberties with my bio - it added some extra information and reworded things in a slightly more formal tone than I would have written myself, but nothing too outlandish. It was interesting to see how it interpreted my professional experience.

Claude Code vs. Other AI Coding Tools: A Real Comparison

I've spent the last few months working with various AI coding assistants, including Cursor, GitHub Copilot, and now Claude Code. Here's where each tool shines:

Claude Code:

  • Excels at building entire projects from scratch
  • Understands full-project context
  • Can make sweeping architectural changes
  • Better for complex, multi-file changes
  • More expensive but more capable for large tasks

Cursor:

  • Better for quick edits within existing files
  • Less expensive for daily use
  • Faster for small, targeted changes
  • Uses the same Claude 3.7 model but with different capabilities

GitHub Copilot:

  • Great for in-line code suggestions
  • Subscription model makes it more cost-effective for frequent, small tasks
  • Less capable for building entire projects from concept

For my website project, Claude Code was clearly the right choice—I needed something that could generate an entire codebase quickly. For daily tweaks and improvements, I've found Cursor to be more practical.

The Cost-Benefit Analysis

Let's break down the numbers:

  • Website creation time with Claude Code: ~20 minutes
  • Manual tweaking and details: ~2 hours
  • Total development cost: $6.50

Is $6.50 expensive? For a professional tool that saved me days of work, absolutely not. Is it expensive compared to free alternatives? Yes, but the time savings were worth it for me.

Here's a cost breakdown that might help you decide if it's worth it for your projects:

  • Just starting the CLI: $0.0002
  • Simple file edits: $0.10-0.30 per edit
  • Generating a first website skeleton: $0.90-2.00 depending on complexity
  • Processing and incorporating external data: $1.00-2.00

⚠️ Warning: Conversation Black Hole ⚠️

Here's where things can get expensive fast. If Claude Code introduces an error and you start having a back-and-forth conversation trying to fix it? That's how you end up eating ramen for the rest of the month. Each message exchange costs money, and those costs stack up quickly.

I once got stuck in an error loop trying to fix a component that Claude had broken, and watched in horror as my credits drained away with each "Hey Claude, that didn't work, can you try..." message. $2 disappeared in about 10 minutes of troubleshooting.

Rule of thumb: Use Claude Code for direct, big, clear changes. Don't chat with it like it's your coding buddy unless you're prepared to pay for the therapy session. When you need small tweaks or fixes, switch to cheaper tools or just do it yourself.

Real-World Applications: Beyond Personal Websites

While I used Claude Code for a personal website, its applications extend much further:

1. Prototyping MVPs: Generate working prototypes in hours instead of days

2. Refactoring legacy code: Have Claude analyze and modernize outdated codebases

3. Learning new frameworks: Ask Claude to build a simple app in a framework you're learning

4. Code migrations: Convert code from one language or framework to another

5. Documentation generation: Create comprehensive docs for existing projects

Lessons Learned & Best Practices

After going through this process, here are my top tips for using Claude Code effectively:

1. Plan your prompts carefully: The more specific your initial prompt, the better the results and the less you'll spend on iterations.

2. Save working checkpoints: Claude can occasionally get stuck in error loops. Commit working code frequently so you don't lose progress.

3. Know when to walk away: If Claude makes an error and can't fix it in 1-2 attempts, stop the conversation and fix it manually. Your wallet will thank you.

4. Use the right tool for the job: Claude Code for big architectural changes, other tools for small tweaks.

5. Prepare structured data: Clean, well-formatted data saves time and money when personalizing projects.

6. Be ready to manually fix edge cases: Claude gets 90% right, but plan to manually address the remaining 10%.

The Final Verdict

Would I use Claude Code again? Absolutely—but strategically. It's now my go-to tool for:

  • Building project foundations quickly
  • Generating boilerplate code
  • Making large-scale architectural changes

But for day-to-day development and minor fixes, I'll stick with lighter-weight tools.

The biggest win wasn't just saving time on building the website—it was breaking through the activation energy required to start the project in the first place. The hardest part of any side project is often just getting something workable that you can iterate on. Claude Code excels at providing that initial momentum.

As a backend developer who avoids CSS like it's contaminated with plague bacteria, having an AI that could generate a decent-looking frontend was literally worth every penny.

If you're considering Claude Code for your next project, my advice is simple: Give it clear instructions, budget for some creative interpretation, and be prepared to guide it when necessary. It's not perfect, but it's remarkably capable and can dramatically accelerate your development process.

Happy coding!

P.S. Take a moment to look around this website. Everything you see—the layout, components, responsive design, navigation, and yes, even this blog post display—was generated by Claude Code. As you scroll, click, and navigate, you're experiencing firsthand what AI-generated code can accomplish. Not bad for $6.50 and 20 minutes of prompting, right?