---
id: "2115682101001662559"
source: https://x.com/wallofportfolio/status/2115682101001662559
author: "Wall of Portfolios (@wallofportfolio)"
media: "video, 2940x1664, 29.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Brick-Red Paper-Notes Designer Portfolio

## Summary
A product designer portfolio scrolled from top to bottom: a brick-red grid-paper hero with a condensed all-caps name, marker-highlighted copy, taped paper stat notes and a stacked case-study card carousel, then a tool ticker band, a black testimonial section, a contact block with a code-style business card, an about intro on off-white and a dark footer. Worth studying for how a paper-scrap metaphor and one loud color carry the whole personality.

## Style
- Theme: mixed (red and black sections with an off-white about section)
- Mood: bold, crafted, warm, confident, playful
- Tags: portfolio, paper-cards, condensed-type, marker-highlight, card-stack, logo-ticker, grid-paper
- Category: Landing page, Testimonials

## Palette
| Role | Hex |
|---|---|
| Brick red | #B32911 |
| Near black | #1C1816 |
| Off-white paper | #F0EEE9 |
| White nav pill | #FFFFFF |
| Card beige | #C7BEAD |
| Mauve gray | #928389 |
| Dark brown | #4B3B39 |
| Marker yellow | #F2E14C |

## Typography
- Display (name, section titles like the peers and contact headings): condensed grotesk, bold, uppercase, tight leading (0.95), white or near black, about 6 to 9% of the viewport height. Closest free font: Bebas Neue or Oswald 700.
- Body: neo-grotesk sans, regular, sentence case, about 1.4% of viewport height, with key phrases on a yellow marker highlight. Inter 400.
- Stat numbers on paper notes: condensed bold (Oswald 700) with tiny body captions.
- Small labels (nav links, tag above the name, ticker labels): mono or pixel-ish uppercase, about 0.8% of height, tracked +0.1em. Space Mono 700 works.
- Code card: monospace 400 in a JSON layout (JetBrains Mono).

## Layout
- 16:9 browser capture framed by a portfolio-platform sidebar on the left (about 8% wide) with avatar and Message button.
- Site content: max width about 1100px; hero split 55/45 with text left and the card stack right.
- Hero background: brick red with a faint 24px grid of darker lines; ticker band below on black with a zigzag stitched edge top and bottom.
- Cards: square corners or 4px radius, beige paper texture, drop shadow 0 10px 24px rgba(0,0,0,0.25), stacked with 6 to 10px offsets.
- Once scrolled, the nav becomes a floating white pill (radius 999px) with the name left and four links right.

## Elements
- Small black tag above the name with an outlined selection box around the name (like a design tool selection).
- Three paper stat notes (percentages and a big number) with tiny captions.
- Case study stack: a top card with a screenshot, an index number, a bold uppercase title, meta line and a read-case-study link; round prev and next buttons with a 01 / 04 counter.
- Ticker: tool icons and uppercase names scrolling horizontally on black.
- Testimonial: oversized quote mark, highlighted phrases, avatar, name and role, with 02 / 03 counter.
- Contact block: big uppercase question and answer lines, social icon buttons, and a beige code card with traffic-light dots.

## Motion
- 1.2 to 6.6s: the case-study carousel advances; the top card slides off and the next one settles from the stack (about 500ms, ease-out, slight rotation).
- Ticker band scrolls left continuously (about 40px per second).
- 12s: the nav collapses into a floating pill as you scroll (300ms).
- 12 to 17s: testimonial cards swap like a deck.
- 22.7 to 28.1s: the about headline reveals line by line (about 80ms stagger) on the off-white grid section.

## Rebuild it
1. Sections as full-width blocks: hero `bg-[#B32911]` with a `background-image` of two 1px linear-gradients at 24px for the grid.
2. Headline `font-[Oswald] font-bold uppercase leading-[0.95] text-white text-[clamp(48px,7vw,104px)]`; highlights as `bg-[#F2E14C] text-black px-1`.
3. Stat notes: rotated beige `div`s (`rotate-[-2deg]`) with a small tape strip pseudo-element.
4. Card stack: an array in state; `AnimatePresence` exits the top card with `x: -120, rotate: -6, opacity: 0` (500ms) while the rest animate `y` and `scale` up by one step via `layout`.
5. Ticker: duplicate the list and animate `x` from 0 to -50% with `repeat: Infinity, ease: "linear", duration: 30`.
6. Nav: `useScroll` and `useMotionValueEvent` to switch to a fixed white pill after 80px.

## Generation prompt
A bold personal portfolio website for a product designer: brick red grid-paper background, a huge condensed white all-caps name, body text with yellow marker highlights, beige paper notes with big statistics, a stack of paper case-study cards with round arrow buttons, a black band of scrolling tool icons with zigzag stitched edges, a black testimonial section with a paper quote card, and an off-white about section; crafted, warm and confident, no real logos.