---
id: "2115683618370818121"
source: https://x.com/wallofportfolio/status/2115683618370818121
author: "Wall of Portfolios (@wallofportfolio)"
media: "video, 2940x1664, 27.1s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Dark Product Designer Portfolio Scroll

## Summary
A screen recording of a product designer's dark portfolio, viewed inside a portfolio directory with a white profile sidebar. It scrolls from a portrait hero over a glowing grid, through device-mockup case studies, an experience list, a three-step process, a gallery of paintings and a contact form. Worth studying for its calm near-black surfaces, soft violet accents and highlighted keywords in body copy.

## Style
- Theme: dark (near-black site inside a white directory frame)
- Mood: calm, personal, polished, understated
- Tags: portfolio, dark-mode, case-studies, highlighted-text, device-mockups, contact-form, single-page
- Category: Landing page

## Palette
| Role | Hex |
|---|---|
| Page background | #141317 |
| Card surface | #1A1920 |
| Deep surface | #111114 |
| Directory white | #FEFEFE |
| Body text grey | #B1B5B8 |
| Muted text | #676568 |
| Border | #3F3C3E |
| Violet accent | #7B7BF0 |

## Typography
- Name heading and section titles ("Let's connect"): sans, medium, sentence case, white, about 2.5 percent of frame height. Manrope (500).
- Eyebrow labels ("SELECTED WORK", "EXPERIENCE", "HOW I WORK"): tiny uppercase sans with wide tracking (about 0.12em), violet. Manrope (600).
- Body: small regular sans in grey with key phrases wrapped in soft violet highlight chips. Manrope (400).
- Nav links: tiny uppercase sans with tracking; a segmented "PIXEL / PAPER" toggle.
- Wordmark: a wide geometric placeholder monogram in white.

## Layout
- About 16:9 frame (2940x1664): a white directory sidebar about 5 percent wide holds an avatar, a name and role, a black "Message" pill and profile links; a search bar and icons run across the top.
- The portfolio itself is a centred single column about 55 percent of the viewport width on #141317, with a slim top nav.
- Sections are separated by 120 to 160px of vertical space; cards use 12 to 16px radii with 1px borders in #3F3C3E at low opacity.
- Experience rows are a three-column table (logo and company, role, dates) with hairline dividers.
- Process section: three equal columns with numbers "01", "02", "03".
- Gallery: three image tiles with 12px radius and 12px gaps.

## Elements
- Hero: a portrait photo fading into a dark grid of thin lines with a bright white glowing point, the name, role, location on the right, intro text, a violet "Resume" pill and a ghost "Copy Email" button.
- Case study cards: large dark cards with a hand holding a phone or a laptop render, title and short description underneath, and a "Case study coming soon" tag.
- Experience list: company logos as 24px icons, role in grey, date ranges right aligned.
- Process columns: number, bold title, short paragraph; a violet ghost link button below.
- Outside work gallery: painted landscapes and florals; the last tile has a dark overlay with a "Click here to view more" prompt.
- Contact form: two-column inputs (Name, Email, Phone, Company) with "Optional" hints, a tall Message textarea, a violet "Send it" pill.
- Footer: tiny copyright left, social link right.

## Motion
- 0 to 27s: a steady mouse-wheel scroll through the whole page, roughly one section every 4 to 5 seconds.
- Sections fade and rise in as they enter (about 400ms, ease-out, 16px offset).
- The hero grid's glowing point pulses softly; case study cards lift slightly on hover.
- The directory sidebar stays fixed while the portfolio scrolls; the clip ends on the contact form and footer.

## Rebuild it
1. Shell: `bg-[#141317] text-[#B1B5B8] font-[Manrope]`; a centred `max-w-3xl mx-auto px-6` column with a slim sticky nav.
2. Hero: a portrait image masked with `mask-image: radial-gradient(...)` over a CSS grid background (`background-size: 32px 32px` with 1px lines at 8 percent white) and a small blurred white dot.
3. Highlight chips: wrap key phrases in `span` with `bg-[#7B7BF0]/20 text-white rounded px-1`.
4. Buttons: primary `rounded-full bg-[#7B7BF0] text-white px-4 py-1.5 text-sm`; ghost `border border-white/10`.
5. Case cards: `rounded-2xl bg-[#1A1920] border border-white/5 overflow-hidden` with the mockup image and caption.
6. Reveal: wrap each section in `motion.section` with `initial={{ opacity: 0, y: 16 }}`, `whileInView={{ opacity: 1, y: 0 }}`, `viewport={{ once: true, margin: "-80px" }}`, 400ms ease-out.
7. Form: CSS grid `grid-cols-2 gap-4` inputs `bg-[#111114] border border-white/10 rounded-lg h-10`.

## Generation prompt
Screen recording of an elegant dark product designer portfolio scrolling smoothly: a portrait hero over a faint glowing grid, short intro text with soft violet highlighted keywords and a violet pill button, large dark cards with a phone held in hand and a laptop mockup, a minimal experience table, three numbered process columns, a gallery of colourful paintings and a clean two-column contact form, near-black background with subtle borders, no real names or logos.