Back to Articles
Web DevelopmentV0AI ToolsTutorialProductivity

How I Built My Website in 1 Hour with V0.app

A step-by-step guide on how I used AI to create a stunning personal website, ready & deployed.

Bilal HamdaniehJanuary 15, 20256 min read

If you've ever thought about building a personal website but got stuck on design or the time commitment—this article is for you. I recently built my entire portfolio website in 1 hour using V0.app, and I'm going to show you exactly how.

What is V0.app?

V0 is Vercel's AI-powered interface generation tool. You describe what you want, and it generates production-ready React components using Next.js, Tailwind CSS, and shadcn/ui. Think of it as an expert developer who instantly turns your ideas into code.

My Starting Point

I had a clear goal: create a professional AI engineer portfolio with a stunning homepage, a blog system, and a modern aesthetic. Instead of spending weeks designing mockups and writing code from scratch, I turned to V0.

Step-by-Step: How I Did It

Step 1: Share Context

I gave V0 my LinkedIn portfolio and a brief background document to provide context on my work and skills.

My prompt was detailed (and cost me roughly $15): > "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." V0 analyzed the attachments and proposed a dark cyberpunk/neon aesthetic with bold animations and a markdown-based blog system.

Step 2: Let V0 Work Its Magic

Within seconds, V0 generated a complete implementation plan. It built:

  • Homepage: A hero section with an animated particle background and role transitions.

  • Navigation: A sticky, glassmorphic navbar.

  • Structure: A full app/articles/ blog system and an app/about/ timeline.

  • Styling: A custom electric cyan and neon magenta theme.


Step 3: Iterate on Key Components

The initial build was impressive, but I spent some time refining the details:

Navigation & Styling: I asked V0 to perfect the glassmorphism effect on the sticky navbar. Article System: I requested a modular setup where each article lives in its own file under content/articles/, making it incredibly easy to add new posts. Mobile Responsiveness: When I noticed text overflow on smaller screens, V0 instantly fixed it with proper breakpoints. Table of Contents: For the blog, V0 added a sidebar with automatic heading detection and scroll highlighting.

Step 4: Add Personal Touches

I uploaded my professional portrait, which V0 integrated into the hero section. I also added my social links (LinkedIn, GitHub), and the footer was updated automatically.

Step 5: Deploy & Domain

This is where Vercel shines.
Domain: GoDaddy wanted $20/year; Vercel offered it for $13/year, integrated directly into the deployment.
Deployment: With one click from V0, my site was live on Vercel's edge network with automatic SSL. No server configuration required.

The Result

In just 1 hour, I went from a blank slate to a fully functional portfolio with:

  • ✅ Animated homepage with particle effects

  • ✅ Professional about section with timeline

  • ✅ Blog system ready for articles

  • ✅ Mobile responsive design

  • ✅ Custom domain deployed globally

  • ✅ Great Lighthouse scores


What I Learned

1. Focus on Direction, Not Details

I didn't need to write every line of code. I focused on communicating the vision, and V0 handled the implementation.

2. AI Accelerates, Not Replaces

V0 didn't eliminate decision-making—it accelerated execution. I still made design and content choices, but those decisions took minutes rather than days.

3. Iteration is Fast

No digging through documentation or debugging CSS for hours. If I wanted a change, I just described it, and V0 made it happen instantly.

Get Started Today

Whether you're a developer, designer, or entrepreneur, V0 removes the friction of web development. You can focus on your story while AI handles the heavy lifting.

Start Building with V0.app →

The best part? You can start for free.

What are you waiting for? Your website is 1 hour away.
Have questions about using V0 or want to share what you built? 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.