Skip to main content

Vibing

Your site is live locally and the basics are in place. From here on, you're in the driver's seat. This is where you start building features by describing what you want and letting Claude Code do the heavy lifting.

There's no single right way to do this. The whole point is to explore, experiment, and build something that represents you. That said, here are some ideas and example prompts to get you going.

How vibing works​

The loop is simple:

  1. Describe what you want in Claude Code
  2. Review what Claude writes — read through the code, make sure it makes sense
  3. Test it in the browser
  4. Iterate — if something isn't right, tell Claude what to fix

You don't need to get everything perfect in one prompt. It's totally normal to go back and forth: "make the button bigger", "move the sidebar to the left", "actually, use a different font". Claude remembers the context of your conversation.

Commit often

After each feature works, commit your code to Git. You can ask Claude to do this:

Claude Code prompt:

Commit the current changes with a descriptive message

This way you always have a checkpoint to roll back to if something goes wrong.

Ideas for your profile site​

Add a photo​

Claude Code prompt:

Add a profile photo to the hero section. Use a circular crop with a subtle shadow. I'll put my photo at src/assets/photo.jpg — use that path.

(After running this, drop your photo file into src/assets/photo.jpg)

Add a projects section​

Claude Code prompt:

Add a "Projects" section below the About section. Show 3-4 project cards in a grid. Each card should have a title, short description, and a link. Use placeholder content for now — I'll fill in the details later.

Add a skills or experience section​

Claude Code prompt:

Add a "Skills" section that shows my skills as tags/badges. Group them into categories like "Technical", "Business", and "Languages". Use a clean layout with rounded badges.

Add animations​

Claude Code prompt:

Add subtle scroll animations so each section fades in as the user scrolls down. Keep it tasteful — nothing flashy.

Add a contact form​

Claude Code prompt:

Add a "Contact Me" section at the bottom with a simple form that has name, email, and message fields. Since we don't have a backend, make the submit button open the user's email client with a pre-filled email to [your email] using a mailto link.

Add dark mode​

Claude Code prompt:

Add a dark mode toggle to the top-right corner of the page. Default to the user's system preference. Save the choice in localStorage so it persists across visits.

Make it look professional​

Claude Code prompt:

Improve the overall design of the site. Add consistent spacing, better typography, and a cohesive color scheme using Tailwind. Make it feel clean, modern, and professional. Make sure everything is responsive and looks good on mobile.

Add multiple pages​

If you want to expand beyond a single page:

Claude Code prompt:

Install React Router and add a navigation bar. Create separate pages for Home (the current profile page), Projects (a dedicated page showing my work), and Contact. Add smooth transitions between pages.

Go your own way​

The list above is a suggestion, not a rulebook. Once you get comfortable with the loop — describe, review, test, iterate — you can build whatever you want. Some more ideas:

  • Blog section — a list of posts you write (stored as Markdown files)
  • Resume page — a nicely formatted online resume
  • Testimonials — quotes from people you've worked with
  • Timeline — a visual timeline of your education and career

Tips for vibing effectively​

Be specific in your prompts. "Make the site better" is vague. "Add a projects section with cards in a 2-column grid" gives Claude something concrete to build.

Test after every change. Don't stack up five prompts before checking the browser. Build one thing, see it work, then move on.

Read what Claude writes. You don't need to understand every line, but skimming the code helps you learn what's going on in your own project. Over time, you'll start catching things before they become bugs.

Update CLAUDE.md as you go. If you establish a pattern you like — a folder structure, a naming convention, a color scheme — add it to CLAUDE.md so Claude keeps following it.

Commit before risky changes. If you're about to ask Claude to refactor something big, commit first. That way you can always roll back if it goes sideways.

You're building a real project​

Seriously — what you have at this point is a real, working website that you built. It's something you can put on your resume, share with people, and deploy to the internet. Every feature you add from here makes it more yours.

Have fun with it.

Ready for more?

If you've finished your profile site and want to try something more ambitious, check out Path B: Building Your App to build a full web app with login and a database.