Vibe Coding (4) — Build #1: Your First Portfolio Landing Page in v0
In this guide, you will build the structural foundation of a personal portfolio landing page in v0 — the kind a job-seeker sends to recruiters, hiring managers, or potential clients. We'll focus on getting the structure and content right; design polish (colors, typography, animations, dark mode) is the focus of Article 05. By the end of this article, you'll have a complete, published portfolio at a .vercel.app URL — solid in structure, basic in style, ready to be polished.
Difficulty: ★★☆☆☆ (Approachable; first real build of the series)
Required Tools: v0 (Free or Premium) + your own content (résumé, project descriptions, photos)
Updated: May 2026
Overview
A personal portfolio is the cleanest first vibe coding project for several reasons. It's a single page (no complex navigation between routes). The data is fully your own (no external APIs or databases needed). The design space is well-explored (thousands of examples to draw from). The output has a clear success criterion (does it land you better job conversations than your résumé alone?). Most importantly: it's a real artifact you'll actually use, not a throwaway tutorial app.
This article is split into structure first, polish later. That ordering matters. Beginners often try to nail design and structure simultaneously and end up with neither — they spend an hour adjusting button colors before realizing the entire page is missing a key section. The professional approach is the opposite: get the right structure with placeholder styling first, then make it look great. Article 04 (this one) handles structure. Article 05 handles polish, with reference designs from Dribbble, Aura.build, Awwwards, and Land-book.
By the end of this article, you'll have a portfolio with all the right sections (hero, about, projects, experience, contact), populated with your real content, published to a shareable URL. It won't look amazing yet — the typography will be generic, the colors will be default, and there won't be any custom animations. That's intentional. We're building the skeleton; Article 05 dresses it up.
Who This Is Useful For
What You Will Build
A complete one-page portfolio site with these sections:
At the end of the article you'll have:
What You Need
Step 1 — Define Your Portfolio Goal Before You Prompt
This is the step nearly everyone skips and immediately regrets. Before opening v0, write down — in one sentence — what your portfolio is for. The goal shapes every decision that follows: which sections matter, which projects to feature, what the hero copy says, what the primary call-to-action should be.
Examples of clear goals:
Vague goals produce vague portfolios. "Get a good job" is a bad goal because it doesn't help you decide what to feature. "Get a senior PM role at a B2B SaaS company in 2026" is a great goal because it makes every other decision easier.
Step 2 — Gather Your Content First (30 Minutes Now Saves 2 Hours Later)
The single biggest determinant of how long this build takes is whether you have your content ready when you start prompting. v0 generates structure brilliantly; it can't invent your real work history or project details. Beginners who start prompting before gathering content end up with a half-built page filled with placeholder text — and they get stuck.
Before opening v0, prepare these in a notes document:
You don't need to write polished copy yet — you just need to have the raw material. v0 will help you polish the writing during the iteration step.
Step 3 — Write the Initial Prompt
Open v0. Set the model to v0 Pro (the default — best balance for this kind of build). In the chat input, paste a prompt that includes:
A working template you can adapt:
Build me a personal portfolio landing page for [your name], a
[your role / target role]. The portfolio's goal is [your one-
sentence goal from Step 1].Single page with these sections, in this order:
1. Hero — Name + tagline + a clear primary CTA button
("Get in touch" or "Schedule a call" or similar)
2. About — 2-3 paragraphs about my background and what I'm
working on now
3. Selected Work / Projects — 4-6 project cards with title,
1-line summary, impact bullets, and optional links
4. Experience — Work history in a clean vertical timeline
5. Skills — A grid of tools and skills I work with
6. Contact — Email, LinkedIn, [other contact options], plus
the primary CTA repeated
7. Footer — Social links and a small "made with v0" note
Use a clean, modern, minimal design as the starting point. Don't
over-design — I want the structure right first; we'll polish
the visual style after.
The page should be fully responsive (looks good on mobile and
desktop). Use semantic HTML and accessible markup.
Use placeholder text for now where I haven't given you content;
I'll fill it in next.
Hit enter. v0 generates a complete portfolio page in 60–120 seconds. The result will be functional and reasonably polished, but generic — exactly what we want for the structure-first approach.
Step 4 — First Generation: What to Look At
When the first generation lands, resist the urge to start changing things immediately. Spend 3 minutes evaluating it instead.
Structural questions to ask:
What NOT to evaluate yet:
If structural problems exist, fix them with a single focused prompt. For example:
After 1–3 structure-fix iterations, the skeleton should be in place. Now you're ready to fill in real content.
Step 5 — Add Your Real Content, Section by Section
Now the highest-leverage step: replacing placeholder text with your real content. The pattern that works best is one section at a time, in order. Trying to populate all sections in one prompt produces confused output; separate prompts for separate sections produce clean results.
Hero section prompt:
Update the Hero section with this content:Name: Marcus Lin
Tagline: "Senior Product Manager building B2B SaaS that
small businesses actually love. Currently leading retention
at Acme Corp."
Primary CTA button text: "Schedule a call"
Primary CTA links to: https://cal.com/marcuslin/intro
Secondary CTA: "View my work" (scrolls to Projects section)
Optional: a small profile photo on the right side
About section prompt:
Update the About section with this content:[Paste your 2-3 paragraph About text here, exactly as you wrote
it in Step 2]
Style: warm and conversational, but professional. Don't add any
content or change the wording — use exactly what I provided.
Projects section prompt (the most detail-heavy):
Update the Projects section with these 5 real projects.
Replace all placeholder cards with these:Project 1:
Title: Customer Success Platform Redesign
Summary: Led the end-to-end redesign of Acme Corp's CS
platform, focused on reducing time-to-resolution for support
tickets.
Impact bullets:
• Reduced average ticket resolution time 38%
• Increased CSAT from 7.2 to 8.6
• Shipped to 12,000 customers across 4 markets
Role: Lead PM
Year: 2025
Link: https://example.com/case-study (or omit if no link) [Repeat for Projects 2-5...]
Experience section prompt:
Update the Experience section with these roles, in reverse
chronological order:[Paste each role with company, title, dates, and 1-2
accomplishment bullets]
Skills, Contact, Footer prompts — same pattern. One section per prompt, real content, no design changes yet.
Step 6 — A Quick Mobile Check
Before publishing, check the mobile view. v0 typically has a viewport toggle in the preview pane — switch to mobile size and scroll through your portfolio.
Common mobile issues:
If you spot issues, ask v0 to fix them with mobile-specific prompts:
The page looks good on desktop but on mobile:
The Hero CTA button is too small — make it full-width and
taller (at least 48px tap target)
The Project cards stack into one column (good) but the impact
bullets have too much spacing — tighten them
The Footer's social icons are too close together — add more
spacing between themDon't change the desktop layout, only mobile.
v0 will adjust the responsive breakpoints accordingly. Re-check both views after each iteration.
Step 7 — Publish to Preview and Share for Feedback
Click Publish in the top-right of v0. Choose Publish to Preview (we'll use Production after the polish in Article 05). v0 deploys your portfolio in 30–60 seconds and gives you a your-name-portfolio.vercel.app URL.
Share the URL with 2–3 trusted people for feedback before polishing. The pattern that works:
Ask each one a specific question:
Their feedback shapes your priorities for Article 05's polish work.
Step 8 — Save Your Reference Designs for the Polish Step
Article 05 covers design polish with reference inspiration from real sites. Spend 10 minutes now, while your portfolio is fresh in mind, browsing for designs you'd want yours to look like.
The four reference sites we'll use in Article 05:
For each, save:
9 references with notes is the right starting set for Article 05. Don't skip this — going into design polish without references produces generic "AI-looking" output. Going in with strong references produces a portfolio that looks intentional.
Common Mistakes to Avoid
Three patterns that cost beginners time on their first portfolio build.
Mistake #1: Trying to design and structure simultaneously. The most common mistake. Beginners spend an hour adjusting button colors before realizing the entire Skills section is missing. Strict separation — structure first, polish later — produces better outcomes in less time.
Mistake #2: Skipping content prep. Starting v0 prompts before you have your real content is the fastest way to get stuck. The 30 minutes spent gathering content in Step 2 saves hours of frustration later.
Mistake #3: Generic copy. "Passionate about building great products" is the kind of line that disqualifies you the moment a recruiter reads it. Specific beats generic. "Reduced churn 23% in 6 months by rebuilding onboarding" is what gets meetings booked.
Going Further
Don't add a custom domain yet. Article 05 covers the polish work; once your portfolio looks the way you want, Article 02's domain workflow is the right next step. Adding a domain to a half-finished portfolio creates a fragile commitment ("I have to keep it at this URL even though I want to redo it").
Save the v0 project name and URL. You'll come back to it for Article 05. The project persists in your v0 account; iterate further whenever inspiration strikes.
Browse 30 minutes of references this week. The polish work in Article 05 is dramatically better when you arrive with strong reference designs. Don't skip Step 8.
Read the next article — Article 05 covers design polish with the four reference sites (Dribbble / Aura.build / Awwwards / Land-book) and shows how to translate visual inspiration into specific v0 prompts.
Key Takeaways
Here's what you learned in this guide:
Your portfolio is now solid in structure, populated with your real work, and shareable at a .vercel.app URL. It's not pretty yet — and that's fine. The next article makes it pretty. The hard part — knowing what your portfolio is for, gathering your real content, getting the structure right — is done.