Skip to main content

Scaffold Your Site & Build the Homepage

Now that Claude Code knows what you're building, let's create the actual project and get your first page up and running.

Step 1: Scaffold the React + Vite project​

Type this inside Claude Code:

Claude Code prompt:

Scaffold a React + Vite project in this directory. Use Tailwind CSS for styling. Keep it simple — no routing library needed since this will be a single-page site.

Claude will:

  • Initialize the Vite project with npm create vite@latest
  • Set up Tailwind CSS
  • Set up the basic project structure

This will take a minute. When it's done, Claude will tell you the project is ready.

Step 2: Build your profile page​

Now describe what you want your site to look like. Be as specific as you can — the more detail you give, the better the result.

Claude Code prompt:

Build a personal profile page as the main page of this site. It should include:

- A hero section at the top with my name "[Your Name]" and a short tagline like "[Your Title / What You Do]"
- An "About Me" section with a paragraph placeholder I can fill in later
- A "Links" section with links to my LinkedIn, GitHub, and email (use placeholder URLs for now)
- A footer with a simple copyright line

Use a clean, modern design with Tailwind. Make it responsive so it looks good on mobile.

Claude will create the component files and styles. Once it's done, let's see it in action.

Step 3: Run the development server​

Time to see your site in action. To do this, you need to start a development server — a small program that runs your site on your own computer so you can preview it in a browser. It watches your files for changes and automatically refreshes the page whenever something updates. This is how every web developer works: you write code, save, and instantly see the result.

Keep Claude Code running — don't exit it. Instead, open a second terminal window:

  • Mac: Press Cmd + T in Terminal to open a new tab, or open a new Terminal window
  • Windows: Open a new Git Bash window
  • Linux: Open a new terminal tab with Ctrl + Shift + T

In the new terminal, navigate to your project folder and start the server:

cd ~/repos/your-repo-name
npm run dev

You should see output like:

  VITE v6.x.x  ready in 300ms

  ➜  Local:   http://localhost:5173/

Open http://localhost:5173 in your browser. You should see your personal profile page.

What is localhost:5173?

localhost means "this computer" — the site is only visible to you, not on the internet yet. 5173 is the port number (like a channel) that Vite uses. This is completely normal for development. When you're ready to share your site with the world, we'll deploy it to Cloudflare later.

If something doesn't look right

Switch back to your Claude Code terminal and tell it what you want changed. Because you kept Claude Code running, it still has the full context of your conversation. For example:

"Make the hero section taller and center the text vertically"

"Change the color scheme to dark blue and white"

"Add more spacing between sections"

After Claude makes changes, check your browser — the dev server will automatically reload with the updates.

Step 4: Customize the content​

Now replace the placeholder content with your real information. You can either:

  1. Edit the files directly — open the component files in a text editor and replace the placeholder text
  2. Ask Claude — switch to your Claude Code terminal and describe what to change

Claude Code prompt:

Update the profile page with my real information:
- Name: [Your Name]
- Tagline: [Your Tagline]
- About: [A paragraph about yourself]
- LinkedIn: [Your LinkedIn URL]
- GitHub: [Your GitHub URL]
- Email: [Your Email]

Step 5: Commit your progress​

This is a great time to save your work. In your Claude Code terminal:

Claude Code prompt:

Commit the current changes with a descriptive message

What just happened?​

You now have a working personal profile site running locally. It's:

  • Built with React and Vite (fast and modern)
  • Styled with Tailwind CSS (clean and responsive)
  • Version-controlled with Git (your changes are saved)

What's next?​

Your site is live locally — now it's time to make it yours. Head to Vibing to learn how to add features, polish the design, and make it your own.