Building a portfolio page using v0

With AI everyone can build their own products now.

So I spent the last few weeks going through the Coding with AI Bootcamp from Harold Dijkstra and Max Haining.

I built a lot including a dynamic gradient background that matches any UI you add to the canvas (which I’m definitely incorporating into the new product I’m working on) 👀

Being able to go from idea to live code in minutes is seriously magic…

So I asked Harold to share a tutorial just for the Dive community and he agreed 🙌

Also you can use the code DIVECLUB to get $100 off the next cohort. The content is gold but having a community to build alongside is seriously the game changer.

Alright I’ll let Harold take it from here 👇

Building a dark-themed portfolio page with v0

To give you a sense of what it’s like to build with AI we’re going to create a portfolio page with v0.

For the design of our portfolio we are going to use components from 21st.dev (inspired by shadcn). It’s an open-source community registry for minimal, modern, and reusable React components powered by Tailwind CSS and Radix UI.

We’ll show you how to use this in v0 below 👇

Time to cook 🧑‍🍳

You can read articles and listen to episodes all you want… but the best way to learn to build with AI is by rolling up your sleeves and doing it:

1️⃣ Visit v0.dev to to sign up for an account

2️⃣ Head over to 21st.dev and browse their pre-designed UI components to find a dark-themed hero section

3️⃣ Copy the prompt of your hero component that is optimized for v0, as shown below:

4️⃣ Head over to v0 and past the prompt into the v0 chat box. v0 will ask you to save this as .tsx doc to attach as a file. Confirm yes.

Then add the following prompt, and hit enter to get v0 started:

Create a modern, responsive portfolio landing page for a fictional coding and design bootcamp to showcase students work. The background color of the landing page should be dark to match the hero section.

The landing page should include the following sections:

• A header with the a logo, navigation links, and a call-to-action button

• A hero section with AS PER THE ATTACHED .TSX FILE

• A gallery section highlighting 3 student projects

• A testimonials section with quotes from satisfied customers

• A footer with important links and social media icons

If you have used Claude Artifacts or ChatGPT Canvas before, the v0 interface will look familiar.

On the left is the chat, where v0 shares what it does and where you can ask it to iterate on the design until you are happy.

On the the right you can see the code generated by v0 and a preview of the UI.

5️⃣ Adding images to your landing page

To add images to any part of your landing page tell v0 which part of the page you want to update. Confirm you want to replace the placeholder for that image.

Request the use of blob storage (cloud storage used to host your images). And attach a copy of the image you want to add to your app.

Sample prompt:

6️⃣ Customize your design

After the initial prompt, you can keep chatting with v0 in plain English to iterate on the design until you are happy with how it looks. Tweak colors, fonts, and spacing to make it yours.

Here’s what it could look like now, after you following the steps above. But because AI tools are non-deterministic, your outputs might look different than ours. Each design and text you generate with v0 will have its own subtle variations.

How to deal with errors?

When working with AI coding tools, small errors are part of the process. Don’t worry, it’s completely normal and easy to handle.

If you see an error, head over to the Console tab above the canvas. Hover over the error message, and you’ll see an Ask v0 button appear.

Click on this, and v0 will automatically generate a prompt to resolve the issue.

Sometimes, you might encounter a second error right after the first. Just repeat the steps, and watch as the fix takes shape in real-time 🤗

3 tips to get the most from v0 as a beginner

1 — Use the Element Selector to tweak your design

Enable the arrow icon at the top right of the canvas to enter element selector mode.

Hover over your landing page, and you’ll see a blue border highlight individual elements. Click on the element you want to adjust, for example a button, and an input box will appear.

From there, request a quick change, and v0 will handle the rest.

2 — Track changes with Version Cards

Every time you run a new prompt, a bordered card appears in the chat showing the changes v0 has made.

Each card is marked with a version number, so you can easily roll back to a previous iteration if the new changes aren’t working for you.

3 — Dive into the Code Editor

Feeling adventurous and want to challenge yourself?

Open the code editor using the Code tab above the canvas. Use search (CTRL+F or CMD+F) to find and manually tweak landing page copy.

Once you’ve made a change, hit the Save button, and see the update instantly reflected in the UI preview.

Ok Ridd here again 👋

Throughout the course we also learned best practices for tools like Claude, Replit Agent, and Lovable too.

If you’re looking for a little push and want to dive into building your ideas with AI this is a heck of a next step.

Join the next cohort and get $100 off