Editorial Designer Portfolio

Create a modern, editorial personal portfolio with hero, selected work, about, and contact.

A cream, editorial portfolio for a product designer, with an oversized serif hero, a selected work grid built around one featured project, a short about strip, and a bold contact close.

Portfolio

designpromptkit.com/prompts/designer-portfolio

Live HTML Preview

Copy-ready prompt1812 chars

Build a distinctive, editorial portfolio website for a product designer as a single responsive page using semantic HTML and Tailwind CSS. Warm off-white (cream) canvas, near-black ink, one warm terracotta accent (#C75B39), an oversized high-contrast serif for display headings paired with a clean sans for body. Make it feel like a confident print-editorial layout, not a generic template.

Sections, in order:

1. Header
   - Left: a compact wordmark ("Maya O.")
   - Center/right: nav links for Work, Studio, Contact
   - Far right: a small status pill with a pulsing dot ("Available · '25")

2. Hero
   - A small eyebrow line: role + location ("Product Designer & Art Director, Lagos ↔ London")
   - A very large serif headline, 2–3 lines, with one phrase emphasized in the accent color
   - A short supporting paragraph
   - Two inline links: "Selected work ↓" and an email
   - A small right-aligned numbered index (01 Work, 02 Studio, 03 Contact)

3. Selected work
   - A section label with a count, e.g. "Selected work (03)"
   - An asymmetric grid: one large featured project spanning full width, then two projects side by side
   - Each project card: a generative/gradient image area, an index number, a serif project title, and a meta line (role · year), with a corner arrow on hover

4. About strip
   - A portrait placeholder on one side
   - A short bio paragraph, and a capabilities list (Product Design, Design Systems, Brand, Prototyping) plus a tools row

5. Contact close
   - A full-width band with a huge serif line ("Let's make something good.")
   - A primary email button and a row of social links
   - A bottom footer row with copyright and location/time

Make it fully responsive and accessible: semantic landmarks, correct heading order, strong color contrast, and visible focus states.

About this design prompt

Portfolios tend to fail in one of two ways. Either they look like a template, or the decoration buries the work. This prompt goes the other direction. It uses a large serif headline, a warm off white background, and a lot of empty space, so the projects stay the loudest thing on the page. The grid gives one project more room than the rest, which is usually how you want people to read your work anyway.

What this prompt builds

An oversized serif hero with your name and what you actually do
A selected work grid where one project runs the full width
Project cards with a role, a year, and one line of context
A short about strip that reads like a person wrote it
A large contact section with a plain email link

Best used for

A designer or freelancer who needs a site that does not look generic
Presenting three to six projects without writing a case study for each
A personal site you can update by editing one file

Tips for better results

Pick the project you want to be hired for and make that the featured one.
Keep the about copy to two or three sentences. A long bio pushes the work down the page.
The serif does the heavy lifting. If you swap it, swap it for another serif with real character.

Prompt details

Design type: Portfolio
Works with: Claude, v0, Framer, Tailwind
Style: Editorial, Modern, Premium