UX designer portfolio template

Prompt our AI to generate a UX designer portfolio instantly

Generate a similar UX designer portfolio

To create an UX designer portfolio like this one, click on the prompt below. You'll be able to edit the text to add your business name and unique details. See our AI instantly create your personalized version of this UX designer portfolio template, which you can customize and launch the same day.

For the homepage of Priya Nakamura's portfolio, build a case-study-driven site where the work is read, not just glanced at — each project opens to a real, scrollable case study, not a lightbox image. For the hero, use a full-bleed dark charcoal-navy background (#12141C) with a single oversized UI screenshot bleeding off the right edge at a slight tilt (-4deg), cropped tight so only a fragment of a real dashboard is visible — no laptop mockup frame. Nav reads PRIYA NAKAMURA, headline I design the parts of software people don't notice — because they just work, subheadline Product designer. 6 years. Fintech, healthcare, and the occasional weird internal tool, CTA View case studies. Typography pairs General Sans (bold, oversized, spanning ~80% of viewport width on the headline) with IBM Plex Mono for all metadata labels — case study tags, dates, role, tools — set in small caps at 12px letter-spaced 0.05em, giving the page a technical, spec-sheet feel that reads as credible rather than decorative. The saturated accent is an amber #FFB84D, repeating in the mono tags, the cursor-following dot on desktop, and link underlines; everything else stays tinted-neutral, never pure black. Below the hero, a grid of case study cards, each showing a one-line problem statement, the client/project name, and a single representative screen; clicking opens a full case study with a Problem/Process/Solution structure and real metrics (Cut onboarding drop-off from 34% to 11%). The signature moment: each case study opens with a horizontal filmstrip — styled like actual 35mm film with sprocket holes along the top and bottom edges — that auto-scrolls once on load through five to seven thumbnails tracing the process from rough sketch to final UI, each frame captioned with a timecode-style label (Week 1, Week 3, Ship); this filmstrip motif recurs at the top of every case study, always in the same position, so it reads as Priya's signature rather than a one-off flourish. On scroll, sections fade up 320ms ease-out with a slight 12px vertical offset; the cursor-following amber dot scales up 1.4x over 150ms ease-out when hovering any card; under prefers-reduced-motion, the filmstrip renders as a static strip and all fades become instant opacity swaps. Every project name, metric, and case study detail should read as a real, specific piece of work — no Project 1 or Lorem ipsum anywhere.