How I Built This Personal Portfolio Website with AI

I built this entire website with the help of AI tools - specifically Claude 3.5 Sonnet and Cursor. This wasn't just AI-assisted development; it was 100% AI-powered from start to finish. In this post, I'll walk you through the process, explain the architecture, and show how AI can dramatically speed up web development.

The Tech Stack

This website is built with:

Next.js - React framework for server-rendered applications
TailwindCSS - Utility-first CSS framework
MDX - Markdown with JSX for content
Claude 3.5 Sonnet - AI assistant for code generation
Cursor - AI-powered code editor

Project Structure

The website follows a clean, modular architecture:

my-personal-website/
├── content/ # Content files (blog posts, projects)
│ ├── blogs/ # MDX files for blog posts
│ └── projects/ # MDX files for projects
├── public/ # Static assets
│ └── images/ # Images for the website
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── about/ # About page components
│ │ ├── blog/ # Blog components
│ │ ├── home/ # Homepage components
│ │ ├── layout/ # Layout components
│ │ └── projects/ # Project components
│ ├── lib/ # Utility functions
│ │ └── mdx.js # MDX processing utilities
│ ├── pages/ # Next.js pages
│ │ ├── about.js # About page
│ │ ├── blog/ # Blog pages
│ │ │ ├── index.js # Blog listing page
│ │ │ └── [slug].js # Dynamic blog post page
│ │ ├── projects/ # Project pages
│ │ │ ├── index.js # Projects listing page
│ │ │ └── [slug].js # Dynamic project page
│ │ ├── contact.js # Contact page
│ │ ├── index.js # Homepage
│ │ └── 404.js # Custom 404 page
│ └── styles/ # Global styles
└── next.config.js # Next.js configuration

The Initial Prompt: Getting Started

I started the project with a simple but specific prompt to Claude:

I want to create a personal website with Next.js and TailwindCSS. It should have:
- A homepage with a hero section, featured projects, and latest blog posts
- An about page with my bio and skills
- A projects page to showcase my work
- A blog with MDX support
- A contact page
Can you help me set up the project structure and create the basic components?

This initial prompt was crucial - it set the scope and direction for the entire project. Claude responded with a detailed plan, including:

Project setup instructions
Folder structure recommendations
Component architecture
Installation commands for all dependencies

Step-by-Step Development Process

1. Project Setup

Following Claude's guidance, I set up the Next.js project:

Create a new Next.js project

npx create-next-app my-personal-website
cd my-personal-website

Install dependencies

npm install tailwindcss postcss autoprefixer
npm install gray-matter next-mdx-remote

2. Creating the Basic Structure

With Claude's guidance, I created the basic folder structure and component architecture. The AI suggested a modular approach with separate components for different sections of the website.

For example, here's how I prompted for the Navbar component:

Create a responsive navbar component for my Next.js website. It should:
- Have my name/logo on the left
- Navigation links in the center (Home, About, Projects, Blog)
- A Contact button on the right
- Be mobile-friendly with a hamburger menu
- Change appearance on scroll

Claude generated the entire component structure, including:

Layout components (Navbar, Footer)
Page components (Home, About, Projects, Blog, Contact)
Utility functions for MDX processing

3. Fixing Unexpected Bugs

When I encountered errors, I shared them directly with Claude. For example, when I got this error:

Error: getStaticPaths is only allowed for dynamic SSG pages and was found on '/blog/first-post'.

I simply shared the error message and Claude diagnosed the problem:

The error occurs because we're trying to use getStaticPaths on a static page. For blog posts, we need to use dynamic routing. Let's fix this by:
1. Rename src/pages/blog/first-post.js to src/pages/blog/[slug].js
2. Update the getStaticProps and getStaticPaths functions
3. Make sure your MDX files are in the correct location

Claude provided the exact code changes needed to fix the issue.

4. Changing the Theme

Initially, the website had a blue color scheme, but I wanted to switch to a more minimalist black and white theme. I prompted Claude:

I don't want to blue color for my hero section. Change it to light grey color theme (for button as well)

Claude provided the exact CSS changes needed in TailwindCSS:

- <div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+ <div className="bg-gray-50">

- <h1 className="text-5xl font-bold mb-6">
+ <h1 className="text-5xl font-bold mb-6 text-gray-900">

- <p className="text-xl mb-8">
+ <p className="text-xl mb-8 text-gray-600">

I applied these changes to all components for a consistent look.

The Role of Cursor AI

While Claude generated most of the code, Cursor AI was invaluable for:

Quick Edits: Suggesting code completions as I typed
Code Explanation: Helping me understand complex parts of the codebase
Refactoring: Suggesting improvements to existing code
Integration: Seamlessly working with Claude's suggestions

For example, when implementing the MDX rendering for blog posts, Cursor helped me understand how the serialization process works and suggested optimizations for the component structure.

Debugging Workflow with AI

My debugging workflow was surprisingly efficient:

Identify the error: Run the app and note any errors
Share with Claude: Copy the error message and relevant code
Implement solution: Apply Claude's suggested fixes
Verify: Test the application to ensure the fix worked

This iterative process was much faster than traditional debugging, where I might spend hours searching for solutions online.

Custom Components and Features

I also used AI to create custom features, such as:

Custom 404 Page

I showed Claude Amazon's 404 page and asked for something similar:

I want to make this page, inspiration from this page [image of Amazon 404 page]

Claude generated a complete 404 page with:

A large "SORRY" heading
A friendly message
A link back to the homepage
Space for a mascot image

MDX Components

For blog posts and projects, I needed custom MDX components:

Help me create custom components for my MDX content to make it look better

Claude provided a complete set of styled components for headings, lists, code blocks, and more.

Lessons Learned

Building this website with AI taught me several valuable lessons:

Specificity Matters: The more specific my prompts, the better the results
Iterative Development: Building in small chunks with AI feedback at each step works best
Error Sharing: Sharing complete error messages with context helps AI provide better solutions
Visual References: Sharing screenshots of what I wanted helped Claude understand my goals
Understanding the Code: Even with AI generating code, I needed to understand how it worked

Challenges and Solutions

Challenge: MDX Rendering Issues

When my MDX content wasn't rendering properly, I shared the specific issue with Claude:

The http://localhost:3000/blog/first-post seems not to render the markdown. Please help check.

Claude diagnosed the issue and provided a complete solution with custom MDX components and proper serialization options.

Challenge: Styling Consistency

To maintain consistent styling across the site, I asked Claude to help me standardize the color scheme:

The button in my navigation bar is still blue. I want them black and white, just like other parts of the whole website.

Claude provided a comprehensive update to all button styles across the site.

Conclusion

This project demonstrates that AI can now handle end-to-end web development. With the right prompts and iterative feedback, tools like Claude and Cursor can:

Generate complete, working code components
Design coherent architecture
Debug complex issues
Implement styling and design changes
Create content and documentation

The most exciting part? This is just the beginning of AI-assisted development. As these tools improve, they'll enable developers to focus more on creativity and less on implementation details.

If you're interested in building your own site with AI assistance, I hope this post gives you a helpful starting point!

Have questions about my AI development process? Feel free to contact me!