Building My Personal Blog with v0 in a Day

When I decided to build my personal website, I didn't want just a blog.

I wanted a single space that could clearly present:

• My portfolio
• My writing
• My resume

1. Comparing v0 and Lovable

Before committing to one tool, I gave both v0 and Lovable the exact same prompt.

Both tools generated decent results and it was actually very similar.

Lovable felt slightly more template driven and conservative.

v0's output felt more current and visually balanced.

And I found it easier to manually edit and refine the generated code in v0 than in Lovable.

That's why I chose v0 as the starting point.

2. Generating the First Version with v0

I prompted v0 to generate:

System Role: Act as an expert frontend developer and UI/UX designer. Build a professional personal portfolio and blog website using React, Tailwind CSS, and Lucide icons.

Core Layout & Navigation:

• Create a clean, minimalist navigation bar at the top with a logo/name on the left and three navigation links on the right: "Blog", "Portfolio", and "About".
• The Blog page should be the default landing page (root route).
• The UI should follow a "Tech-Blog" aesthetic similar to Medium or Substack: plenty of white space, high-quality typography (serif for body text, sans-serif for headings), and a focus on readability.

Page 1: Blog (Home Page)

• Header Section: A subtle intro with my name and a one-sentence bio.
• Feed Style: A vertical list of blog posts. Each entry should show a date, a title in bold, a short 2-line excerpt, a "5 min read" tag, and a small thumbnail image to the right.
• Sidebar (Desktop only): Include a "Tags" section (e.g., #React, #TypeScript, #Design)

Page 2: Portfolio

• Grid Layout: A clean 2-column or 3-column grid of projects.
• Project Cards: Each card should have a project image, title, a brief description of the tech stack used, and two buttons: "View Demo" and "GitHub".
• Include a hover effect that slightly lifts the card or intensifies the shadow.

Page 3: About

• A classic "About Me" layout.
• Left side (or Top): A professional headshot (use a placeholder) and social media icons (GitHub, LinkedIn).
• Right side: A narrative bio section followed by a "Skills" section using small, muted gray badges.

Design Aesthetic:

• Color Palette: Primarily white/off-white background with deep charcoal text. Use a single accent color for links and buttons.
• Typography: Use a clean Serif font for the blog post content to mimic the Medium reading experience.
• Responsiveness: Ensure the sidebar hides on mobile and the navigation switches to a hamburger menu or a simplified bottom bar.

Within seconds, I had a structured layout.

It wasn't the final version.

But it gave me something more valuable than perfection — momentum.

Instead of designing every component manually, I could evaluate the structure immediately.

3. Refining for Clarity

This was the most important phase.

Because the goal wasn't just "complete."

It was "complete but clean."

I adjusted:

• Section spacing to reduce visual noise
• Typography scale for hierarchy
• Add Modal UI for Portfolio
• Button emphasis for resume access
• Fix Tags Function
• Add Image Loading Animations

4. What This Process Taught Me

Using v0 didn't design the site for me.

It accelerated iteration.

Because the structure appeared instantly, I could focus on:

• Information architecture
• Positioning
• User flow
• First-impression clarity

The tool reduced build time. But the thinking still required discipline.

Final Reflection

This site is more than a blog.

It's a structured representation of how I think — about technology, product, and clarity.

Building it quickly reminded me of something important:

When friction is low, strategic decisions become more visible.

And sometimes, the hardest part of design is not building more but choosing less.