Back to Articles
Web Developmentv0AI ToolsTutorialProductivity

How I Built My Website in 1 Hour with v0

How I used v0 (Vercel) to quickly ship a simple personal website — plus what I learned from iterating on it.

Bilal HamdaniehJanuary 18, 20265 min read

If you’ve ever wanted to build a personal website but got stuck on design or the time commitment — same.

I wanted a small “home base” for my writing and projects, and I didn’t want it to turn into a long side quest. So I used v0 by Vercel to get a first version online in about 1 hour, then tightened things up with a bunch of quick iterations.

What is V0?

v0 is Vercel’s AI builder for shipping web apps quickly. It started as an interface/UI generator, but now it goes beyond frontend — you can connect things like Supabase and other backends, and even set up a database in a few clicks.

For this website, I intentionally kept it simple and didn’t use those features (for now). I just wanted a clean site + articles online fast.

My starting point

I had a clear goal: build a professional AI engineer portfolio with:

  • a strong homepage

  • a blog system for writing

  • a modern, techy aesthetic

  • room to add AI tools later


Instead of spending weeks on design mockups and wiring everything from scratch, I used v0 to get the foundation in place and iterate from there.

Step-by-step: how I did it

Step 1: Share context

I gave v0 my LinkedIn and a short background document so it could understand what I do and the vibe I wanted.

My first prompt was detailed (and cost me roughly ~$15). Important note: that was just the first “big” prompt — after that, it was a lot of smaller, quick iterations (I did ~40 tweaks).

Here’s the initial prompt:

> "I would like to build a website for myself that has cool animations, information, and perhaps in the future, I integrate AI features and applications on my site for people to try out. You can read the documents attached to learn about me, and you can ask me a few questions before to plan it out.
>
> On a high level, I'm currently an AI Engineer working on Voice AI Agents, and I do dabble in all things ML/LLM and Automations in my free time. I'd like my website to be extremely catchy in terms of styling, tech-oriented, but also offers knowledge to users for their benefits. I care to have articles, and free AI tools for people to use."

Based on that, v0 suggested a dark cyberpunk/neon direction with animations and a simple blog setup.

Step 2: Generate the first version

Within seconds, v0 produced an initial plan and a working draft. It included:

  • Homepage: a hero section with animation (particle background + role transitions)

  • Navigation: a sticky, glassmorphic navbar

  • Structure: routes like \app/articles/\ for the blog and \app/about/\ for a timeline/about page

  • Styling: a theme direction (electric cyan + neon magenta)


At this stage it wasn’t “done”, but it was a solid starting point.

Step 3: Iterate on the important parts

Most of the real work happened here — lots of small changes, fast.

A few examples of what I iterated on:

  • Navigation & styling: refining the glassmorphism effect and sticky behavior

  • Article system: making posts modular (each article lives in its own file under \content/articles/\) so publishing stays easy

  • Mobile responsiveness: fixing overflow and spacing issues with proper breakpoints

  • Table of contents: adding a sidebar with heading detection + scroll highlighting


Step 4: Add personal touches

Once the structure felt right, I added the parts that make it “me”:

  • my portrait in the hero section

  • social links (LinkedIn, GitHub)

  • little copy and layout tweaks

  • footer updates


Step 5: Deploy & domain

Deployment was straightforward on Vercel.

  • Domain: I compared pricing (GoDaddy was around $20/year; Vercel was around $13/year) and went with Vercel for the convenience of having it integrated.
  • Deployment: a simple push + deploy flow, with SSL handled automatically.

The result

In about 1 hour (plus quick iterations), I went from blank slate to a site I can actually use:

  • ✅ animated homepage

  • ✅ about/timeline section

  • ✅ blog system ready for posts

  • ✅ mobile responsive layout

  • ✅ custom domain + deployment

  • ✅ solid Lighthouse scores


What I learned

1) Focus on direction, not details

I didn’t write every line from scratch. I focused on communicating the direction clearly, then refined the output.

2) AI accelerates execution (you still steer)

v0 didn’t remove decision-making — it shortened the time between “idea” and “working version”.

3) Iteration is the superpower

The first draft gets you moving. The quality comes from fast iteration — and v0 makes that loop quick.

If you want to try it

If you’re curious, you can try V0 here!

And if you’d like to build something similar, I’m happy to share my v0 project and turn it into a template so you can copy the code and adapt it.


If you have questions or want to share what you built, feel free to connect with me on LinkedIn or check out my GitHub.
B

Written by Bilal Hamdanieh

AI Engineer specializing in Voice AI Agents and intelligent automation systems. Building the future of human-AI interaction at Marr Labs, based in Lebanon.