Construct a Gorgeous Private Web site with AI in 15 Minutes

Expensive subscribers,

In the present day, I need to share learn how to construct a shocking private web site with AI.

It’s straightforward to do with Bolt and one of the vital sensible methods to ship one thing helpful with AI in simply quarter-hour (no coding expertise required).

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

1. Begin with an in depth AI immediate

2. Use the visible editor to make edits

3. Edit copy and hyperlinks straight in code

4. Add a timeline of your newest tweets

5. Add movement to make the web page extra partaking

6. Deploy the web site in a single click on

Due to Inkko for serving to me with the above. Let’s stroll by way of every step.

This publish is delivered to you by…Jira Product Discovery

Product organizations wrestle to scale planning throughout a number of groups. Jira Product Discovery Premium makes it straightforward.

• Stage up your roadmaps with aggregated views throughout all groups.

• Arrange and prioritize at each degree with hierarchies linking concepts to massive bets.

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

Plus get 24/7 help, greater storage limits, and enterprise-grade platform options.

Strive Jira Product Discovery for Free

To start out, go to Bolt and paste on this AI immediate:

Construct a high-end private touchdown web page with a set parallax full-screen hero utilizing an summary gradient background. Add a daring headline, a one-liner bio, and a clean scroll-down indicator. Under:

1. A centered intro block with giant sans-serif textual content on black
2. A break up part: portrait on the left, bio and hyperlinks (X, LinkedIn, e-newsletter) on the correct
3. A featured work part with 3 playing cards, grayscale photographs, and hover results
4. A minimalist contact part with a reputation/e-mail type

Use premium typography (Söhne or Inter), broad spacing, micro-interactions, and a clear navbar that turns strong on scroll. Make your complete format really feel cinematic, clear, and editorial. It ought to be dark-themed with #015FFC accents. The whole lot ought to really feel prefer it belongs in an Awwwards showcase.

You may as well use Bolt’s improve immediate button to enhance the above additional. Simply overview all the pieces earlier than beginning.. Simply overview all the pieces earlier than getting Bolt to code.

Bolt takes 2-3 minutes to create your web site. When it is accomplished, you may see a touchdown web page with an intro block, featured work part, contact type, and about part under:

Now use Bolt’s AI visible editor characteristic to customise all the pieces:

1. Click on the visible editor button (prime proper cursor icon)

2. Choose any ingredient just like the nav bar

3. Kind in chat: “Change this to [your name]”

Bolt will then replace simply that part based mostly in your directions.

You may as well use the visible editor to:

1. Edit photographs. For instance, I chosen the placeholder About Me picture, pasted my very own profile image in chat, after which requested AI to “Change with this picture.”

2. Make design tweaks. For instance, I chosen the quilt part and requested it to “Cut back prime padding by 50%” so that folks can see my profile pic above the fold.

Generally it is sooner to edit copy, hyperlinks, and pictures within the code straight.

For instance, I up to date the Featured Work part with related hyperlinks and pictures from Pexels (a fantastic free inventory picture web site).

To edit the code, choose the “Code” tab and use search (prime left) to seek out the textual content you need to substitute. You needn’t perceive the code — simply discover and swap the textual content.

When you’re having fun with this publish, it is best to be a part of my AI product group with Colin Matthews the place 400+ PMs and AI builders are already sharing nice ideas like under.

Improve now to get instantaneous entry

When you’re already a paid subscriber, test your earlier emails for the hyperlink to affix.

A static web page is boring so let’s get AI so as to add a timeline of your newest tweets. Right here’s the method and immediate to try this in simply 3 steps:

1. Go to publish.twitter.com

2. Enter your deal with (eg., @petergyang)

3. Customise the peak, width, and theme to match your web site

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

Add a brand new part "Newest posts" under featured work that pulls in my newest X/Twitter posts dynamically. Use the Twitter timeline embed, here is the code:

(Paste code)

Deploy the web site (see step 6 under) and your tweets ought to present up routinely.

You may as well make your web site extra partaking by including delicate animations. Right here’s a precise immediate that you should use:

Make the location really feel buttery clean and ultra-polished. On web page load, have the hero content material softly fade in and rise with a delicate scale-up, every ingredient barely delayed for a clean staggered entrance. Apply scroll-triggered animations for every part with delicate fade-up and slight movement, utilizing gradual easing curves like ease-out or cubic-bezier(0.25, 1, 0.5, 1).

Bolt ought to perceive all of it, no plugins or handbook CSS wanted.

To deploy your web site, hit the Deploy button (prime proper) to get a Netlify hyperlink that anybody can go to. You may as well:

1. Hyperlink it to a customized area by following the Netlify directions right here. You’ll have so as to add a ALIAS file to your DNS settings like what I did under:

2. Sync it to GitHub for full management or additional edits in one other device like Cursor. You are able to do this by deciding on “Integrations” after which following the steps.

Listed here are some extra options you possibly can add to your web site:

When including options, I prefer to analysis first earlier than asking AI to code:

1. Analysis in Claude / ChatGPT first (e.g., How do I add a carousel testimonial to my private web site?). Resolve if the characteristic is simply too difficult or not.

2. Ask Bolt to construct the characteristic with related context pasted from my analysis

This fashion, I’m prompting Bolt in an knowledgeable manner as a substitute of randomly. One ultimate tip:

If Bolt makes a mistake or messes up your web page, merely scroll again in chat to earlier than it made the error and hit the revert button to return to a working model.

Constructing a private web site with Bolt is without doubt one of the most beginner-friendly methods to see what AI is able to. Listed here are the steps once more:

1. Begin with an in depth AI immediate

2. Use the visible editor to make edits

3. Edit copy and hyperlinks straight in code

4. Add a timeline of your newest tweets

5. Add movement to make the web page extra partaking

6. Deploy the web site in a single click on

Be happy to drop a hyperlink to your private web site within the feedback — I’d like to see your creations!