Full Tutorial: Build a Stunning Personal Website with AI in 15 Minutes

From zero to published website using Bolt (no coding experience required)

Dear subscribers,

Today, I want to share how to build a stunning personal website with AI.

It’s easy to do with Bolt and one of the most practical ways to ship something useful with AI in just 15 minutes (no coding experience required).

Here’s how I created petergyang.com in 6 steps:

1. Start with a detailed AI prompt

2. Use the visual editor to make edits

3. Edit copy and links directly in code

4. Add a timeline of your latest tweets

5. Add motion to make the page more engaging

6. Deploy the website in one click

Thanks to Inkko for helping me with the above. Let's walk through each step.

---

This post is brought to you by…Jira Product Discovery

Product organizations struggle to scale planning across multiple teams. Jira Product Discovery Premium makes it easy.

• Level up your roadmaps with aggregated views across all teams.

• Organize and prioritize at every level with hierarchies linking ideas to big bets.

• Focus stakeholder conversations and control who sees what and when with granular permissions.

Plus get 24/7 support, higher storage limits, and enterprise-grade platform features.

---

1. Start with a detailed AI prompt

To start, go to Bolt and paste in this AI prompt:

Build a high-end personal landing page with a fixed parallax full-screen hero using an abstract gradient background. Add a bold headline, a one-liner bio, and a smooth scroll-down indicator. Below:

1. A centered intro block with large sans-serif text on black
2. A split section: portrait on the left, bio and links (X, LinkedIn, newsletter) on the right
3. A featured work section with 3 cards, grayscale images, and hover effects
4. A minimalist contact section with a name/email form

Use premium typography (Söhne or Inter), wide spacing, micro-interactions, and a transparent navbar that turns solid on scroll. Make the entire layout feel cinematic, clean, and editorial. It should be dark-themed with #015FFC accents. Everything should feel like it belongs in an Awwwards showcase.

You can also use Bolt's enhance prompt button to improve the above further. Just review everything before starting.. Just review everything before getting Bolt to code.

---

2. Use the visual editor to make edits

Bolt takes 2-3 minutes to create your site. When it's done, you'll see a landing page with an intro block, featured work section, contact form, and about section below:

Now use Bolt's AI visual editor feature to customize everything:

1. Click the visual editor button (top right cursor icon)

2. Select any element like the nav bar

3. Type in chat: "Change this to [your name]"

Bolt will then update just that section based on your instructions.

You can also use the visual editor to:

1. Edit images. For example, I selected the placeholder About Me image, pasted my own profile picture in chat, and then asked AI to “Replace with this image.”

2. Make design tweaks. For example, I selected the cover section and asked it to “Reduce top padding by 50%” so that people can see my profile pic above the fold.

---

3. Edit copy and links in code directly

Sometimes it's faster to edit copy, links, and images in the code directly.

For example, I updated the Featured Work section with relevant links and images from Pexels (a great free stock photo website).

To edit the code, select the “Code” tab and use search (top left) to find the text you want to replace. You don't need to understand the code — just find and swap the text.

---

If you’re enjoying this post, you should join my AI product community with Colin Matthews where 400+ PMs and AI builders are already sharing great tips like below.

If you’re already a paid subscriber, check your previous emails for the link to join.

---

4. Add a timeline of your latest tweets

A static page is boring so let’s get AI to add a timeline of your latest tweets. Here’s the process and prompt to do that in just 3 steps:

1. Go to publish.twitter.com

2. Enter your handle (eg., @petergyang)

3. Customize the height, width, and theme to match your website

4. Copy the embed code into Bolt’s chat window and ask it to:

Add a new section "Latest posts" below featured work that pulls in my latest X/Twitter posts dynamically. Use the Twitter timeline embed, here's the code:

(Paste code)

Deploy the website (see step 6 below) and your tweets should show up automatically.

---

5. Add motion to make the page more engaging

You can also make your website more engaging by adding subtle animations. Here’s an exact prompt that you can use:

Make the site feel buttery smooth and ultra-polished. On page load, have the hero content softly fade in and rise with a gentle scale-up, each element slightly delayed for a smooth staggered entrance. Apply scroll-triggered animations for each section with subtle fade-up and slight motion, using slow easing curves like ease-out or cubic-bezier(0.25, 1, 0.5, 1).

Bolt should understand all of it, no plugins or manual CSS needed.

---

6. Deploy the page in 1-click

To deploy your website, hit the Deploy button (top right) to get a Netlify link that anyone can visit. You can also:

1. Link it to a custom domain by following the Netlify instructions here. You’ll have to add a ALIAS record to your DNS settings like what I did below:

2. Sync it to GitHub for full control or further edits in another tool like Cursor. You can do this by selecting “Integrations” and then following the steps.

---

Other ideas to improve your personal website

Here are some more features you can add to your website:

• Photo grid instead of the hero image

• Testimonials carousel

• Blog or portfolio sections

When adding features, I like to research first before asking AI to code:

1. Research in Claude / ChatGPT first (e.g., How do I add a carousel testimonial to my personal website?). Decide if the feature is too complicated or not.

2. Ask Bolt to build the feature with relevant context pasted from my research

This way, I’m prompting Bolt in an informed way instead of randomly. One final tip:

If Bolt makes a mistake or messes up your page, simply scroll back in chat to before it made the mistake and hit the revert button to go back to a working version.

---

Wrap up

Building a personal website with Bolt is one of the most beginner-friendly ways to see what AI is capable of. Here are the steps again:

1. Start with a detailed AI prompt

2. Use the visual editor to make edits

3. Edit copy and links directly in code

4. Add a timeline of your latest tweets

5. Add motion to make the page more engaging

6. Deploy the website in one click

Feel free to drop a link to your personal website in the comments — I’d love to see your creations!