v0
v0 prompt for a portfolio website
This v0 prompt turns a portfolio into six regenerable components, with the work grid's hover states specified down to the outcome-line reveal. The copy skeleton keeps the hero an identity statement rather than a slogan. Visual direction stays out of the text — the customizer's style, palette, type, and motion choices fill the tokens.
Last updated
Prompt
Generate a portfolio site for {{product}}, built to convince {{audience}} to reach out. Split it into components I can regenerate independently — Hero, WorkGrid, WorkCard, AboutStrip, Services, Contact — Next.js with Tailwind, using shadcn/ui where it earns its place (Button, Card).
Structure, top to bottom:
1. Hero: an identity statement, not a slogan — line one is the name or studio, line two a single sentence stating the craft and the client it serves, set large; beneath it two links, one to the work anchor and one mailto.
2. WorkGrid: six WorkCard entries in a 2x3 grid; each card carries an image placeholder, project name, a one-line outcome ("what changed for the client"), and a tag row; on hover the image scales slightly and the outcome line slides into view — the hover states are the point of this section.
3. AboutStrip: one wide band — portrait placeholder left, a three-sentence bio right covering where they've worked, what they believe about the craft, and one human detail.
4. Services: four noun-phrase offerings in a row, each with a one-line deliverable description, no icons required.
5. Contact: a closing headline inviting the right kind of project, the email set at display size, and a current-availability line.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Spacing: sections py-28 on desktop, py-16 on mobile, on a 4px base; the work grid runs gap-4 so images dominate the section.
Responsive: below md the grid drops to one column and the hover reveal is replaced by an always-visible outcome line; cap the hero statement near 20ch so it never sets as one long line.
The primary call to action is "{{cta}}" — it labels the hero's first link and the Contact button.
After building, check that: every WorkCard shows its outcome line on mobile without hover; headings run h1 in the hero then h2 per section with no skips; the email appears in both hero and Contact; and tab focus reaches every card link in grid order.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Generate a portfolio site for a project management SaaS, built to convince engineering managers at startups to reach out. Split it into components I can regenerate independently — Hero, WorkGrid, WorkCard, AboutStrip, Services, Contact — Next.js with Tailwind, using shadcn/ui where it earns its place (Button, Card).
Structure, top to bottom:
1. Hero: an identity statement, not a slogan — line one is the name or studio, line two a single sentence stating the craft and the client it serves, set large; beneath it two links, one to the work anchor and one mailto.
2. WorkGrid: six WorkCard entries in a 2x3 grid; each card carries an image placeholder, project name, a one-line outcome ("what changed for the client"), and a tag row; on hover the image scales slightly and the outcome line slides into view — the hover states are the point of this section.
3. AboutStrip: one wide band — portrait placeholder left, a three-sentence bio right covering where they've worked, what they believe about the craft, and one human detail.
4. Services: four noun-phrase offerings in a row, each with a one-line deliverable description, no icons required.
5. Contact: a closing headline inviting the right kind of project, the email set at display size, and a current-availability line.
Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.
Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.
Spacing: sections py-28 on desktop, py-16 on mobile, on a 4px base; the work grid runs gap-4 so images dominate the section.
Responsive: below md the grid drops to one column and the hover reveal is replaced by an always-visible outcome line; cap the hero statement near 20ch so it never sets as one long line.
The primary call to action is "start a free trial" — it labels the hero's first link and the Contact button.
After building, check that: every WorkCard shows its outcome line on mobile without hover; headings run h1 in the hero then h2 per section with no skips; the email appears in both hero and Contact; and tab focus reaches every card link in grid order.Same task in other tools
Questions about this prompt
How do I drop in my real projects?
Send v0 a follow-up listing your six projects — name, one-line outcome, tags — and tell it to map them onto the existing WorkCard props. Keep the outcome-line format from the prompt ("what changed for the client"); it's what separates the grid from a thumbnail dump.
Does this work inside my existing Next.js site, or only as a fresh v0 project?
Both. v0 lets you copy each component's code, and the per-section split means you can lift WorkGrid or Contact into an existing app on their own. Watch the imports: the shadcn/ui pieces must already exist in your repo or be swapped for your own equivalents.
The hover reveal feels like too much motion (or too little) — where do I adjust?
That's governed by the Motion level dropdown, so try a calmer or livelier customizer pick before hand-editing anything. If the setting is right but the cards still bother you, ask v0 to regenerate WorkCard alone with your adjustment — the component split exists so one section can change without the rest.
Part of the v0 landing-page cluster — start from the main v0 landing page prompt.