---
id: "2115681137985192024"
source: https://x.com/wallofportfolio/status/2115681137985192024
author: "Wall of Portfolios (@wallofportfolio)"
media: "video, 2940x1664, 65.4s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Red Accent Editorial Product Portfolio

## Summary
A product designer portfolio dressed as a professional networking profile: a sticky left sidebar with avatar, role, location and a Message button, a fake search top bar, and a long editorial scroll of headlines that pair heavy black sans with red italic serif words. Red blocks, crop-mark corners, line illustrations and small network diagrams keep a strict two-colour system feeling lively.

## Style
- Theme: light (warm paper with signal red)
- Mood: editorial, confident, witty, structured, warm
- Tags: portfolio, profile-layout, serif-accent, red-accent, sticky-sidebar, case-studies, line-illustration
- Category: Landing page, Typography

## Palette
| Role | Hex |
|---|---|
| Background | #F4F2EE |
| Sidebar white | #FFFFFF |
| Rule grey | #E7E4DF |
| Brick red block | #A4352D |
| Card | #EFECE8 |
| Muted text | #B9B0AF |
| Signal red | #DA2C21 |
| Ink | #161616 |

## Typography
- Display headlines ("A decade of ...", "Products I've ...", "What pushes me."): grotesk sans, bold 700, sentence case, tight tracking (-0.03em), about 6% of frame height, ink; the last word swaps to a red italic or roman book serif at the same size. Inter Tight (700) with Instrument Serif (400 italic).
- Eyebrows ("SELECTED WORK", "THREE MEDIUMS, ONE PRACTICE"): sans 9px, uppercase, tracking 0.14em, preceded by a 5px red dot. Inter (600).
- Body copy: sans regular 11 to 12px, grey #6B6660, 1.5 line height. Inter (400).
- Project titles ("A Room Across Centuries"): sans semibold 15px. Inter (600).
- Sidebar name and role: sans semibold and regular, 12px and 10px. Inter.

## Layout
- 16:9 canvas (2940x1664). Fixed 180px white left sidebar; a 36px top bar with a search field, icons and avatar; content column about 900px wide.
- Sections divided by full-width 1px #E7E4DF rules with large 120px vertical gaps.
- Project feature: red block about 600x300px with thin L-shaped crop marks at its four corners, holding phone or desktop mockups.
- Two-column project cards with title, one-line pitch, tag line in small caps and a bordered "Visit" button with an arrow box.
- Principles row: three 48px red circles with white line icons, each over a short title and paragraph.
- Footer: big two-line question headline left, bordered buttons below, link list with arrows at right.
- No shadows; borders 1px, radii 0 to 4px.

## Elements
- Avatar on a red disc, name placeholder, role, location pin line, small experience logos row.
- Black pill "Message" button with an envelope icon and a square bookmark button.
- Hand-drawn line illustration of a room labelled "Interior design".
- Red textured block with phone and dashboard mockups.
- Network diagrams: grey nodes and lines converging on a red node; a curved path with red endpoints.
- Silhouette of a person standing on a horizontal line at the left of "What pushes me."
- Red outlined "Open to work" badge, "Let's talk" button, placeholder email field with copy icon.

## Motion
- Continuous scroll over about 65s; sections fade and rise 16px as they enter (about 500ms ease-out).
- Red serif words appear a beat after the sans part (about 150ms delay).
- Mockups inside the red blocks slide up slightly with parallax.
- Network diagram nodes pulse and lines draw on hover; a small red arrow cursor tracks the pointer.
- The sidebar stays fixed the entire time.

## Rebuild it
1. Shell: `grid grid-cols-[180px_1fr] min-h-screen bg-[#F4F2EE]` with a sticky `aside` (`sticky top-0 h-screen bg-white border-r`).
2. Headline component: `h2.text-6xl.font-bold.tracking-tight` with a nested `em.font-serif.italic.text-[#DA2C21]` for the accent word.
3. Crop marks: four 16px absolutely positioned spans with 1px borders on two sides around each red block.
4. Reveals: `motion.section` with `whileInView={{opacity:1,y:0}}` from `y:16`, `viewport={{once:true,margin:'-15%'}}`.
5. Parallax mockups: `useScroll({target})` and `useTransform(scrollYProgress,[0,1],[40,-40])`.
6. Buttons: `border border-neutral-800 h-8 px-3 text-xs` with a separate bordered arrow square.

## Generation prompt
A long scroll recording of a product designer portfolio styled like a professional network profile on warm off-white paper: a fixed sidebar with a portrait on a red circle and a black message pill, big black sans headlines ending in red italic serif words, signal-red blocks with crop-mark corners holding phone mockups, small line illustrations and network diagrams, a silhouette standing on a line, and a footer asking to collaborate; editorial, minimal, two-colour, no logos.