---
id: "2115684397467029820"
source: https://x.com/wallofportfolio/status/2115684397467029820
author: "Wall of Portfolios (@wallofportfolio)"
media: "video, 2940x1664, 23.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Social Profile Styled Designer Portfolio

## Summary
A product designer portfolio dressed up as a professional social network profile: a fixed left profile column with avatar, role, location and a black Message button, a top bar with a search field and notification icons, and a main feed that scrolls through a serif hero statement, featured case studies with metrics, a card grid, a stack of tilted photos and a contact block. The borrowed interface makes the portfolio instantly familiar and a little cheeky.

## Style
- Theme: light (warm off-white with black accents)
- Mood: friendly, polished, clever, professional, warm
- Tags: portfolio, social-profile-ui, serif-headings, case-studies, sticky-sidebar, photo-stack, metrics, product-designer
- Category: Landing page

## Palette
| Role | Hex |
|---|---|
| Page off-white | #FAFAF8 |
| Card white | #FFFFFF |
| Section grey | #F2F2F1 |
| Panel white | #FEFEFE |
| Border grey | #C5C8CA |
| Ink | #2D3130 |
| Muted text | #878682 |

## Typography
- Hero statement and section titles ("Featured work", "Also shipped"): transitional serif, regular, sentence case, centred, about 5% of frame height for the hero, 3.5% for section titles. Fraunces Regular or Newsreader.
- Case study titles: same serif, semibold, two lines, about 2.4% of frame height; inactive titles fade to 25% grey.
- UI text (sidebar name, role, nav, chips, button labels): neutral grotesk 12 to 14px, name in semibold. Inter.
- Metrics ("3,500+", "4.6/5", "67.3%"): serif numerals about 2.5% of frame height with 9px grey captions.

## Layout
- 16:9 frame (2940x1664) at desktop width.
- Sticky left column about 16% wide: 72px circular avatar, name, role, location pin line, small company logo dot, a black pill Message button with an icon (36px tall) plus a bookmark icon button, then Profile and Portfolio nav rows.
- Top bar: centred search field (pill, 1px border) and right-aligned icon buttons plus a small avatar with a caret.
- Main column about 80% wide; hero inside a faint dotted frame with corner handles, like a selected canvas object.
- Featured work: two columns, a vertical list of case study titles with a left accent bar on the active one, and a large screenshot on the right.
- Card grid: three columns, 12px radius, 1px border, image top, chips, title, two-line description, footer with link and year.
- Corners mostly 8 to 12px; shadows are very soft (0 4px 16px rgba(0,0,0,0.06)).

## Elements
- Hero selection frame: thin grey rectangle with tiny square handles at the corners around the headline and a subline.
- Logo strip: five greyscale placeholder company logos under the hero.
- Case study rows: tag chips (three small grey pills), title, description, three metrics in a row.
- Screenshot panels: product UI screenshots with 12px radius, partially cropped by the viewport edge.
- Photo stack: three or four portrait photos with white borders, rotated -6 to 8 degrees, overlapping.
- Contact block: serif two-line prompt, an email line with copy icon, and a "Connect with me" list of three links with arrow icons.

## Motion
- 0 to 23300ms: smooth scroll of the main column only; the sidebar and top bar stay fixed.
- Featured work: the active case study title sharpens from 25% to 100% opacity as its screenshot scrolls into view (300ms crossfade), with the accent bar sliding to it.
- At about 15000ms the tilted photo stack rises into the centre, cards fanning apart with a 120ms stagger and settling with a spring.
- At the end, photos scatter toward the top edges while the contact block fades in (500ms).
- A custom cursor stays as a small arrow with no trail.

## Rebuild it
1. React layout: `grid grid-cols-[240px_1fr]` with the sidebar `sticky top-0 h-screen` and a `sticky top-0` search header in the main column.
2. Hero: a `relative border border-dashed border-neutral-300` box with four absolutely placed 6px squares at the corners; serif headline `font-serif text-5xl text-center`.
3. Featured work: two-column section with `position: sticky` on the screenshot; use Motion `useScroll` per row to drive title opacity with `useTransform(progress, [0, 0.5, 1], [0.25, 1, 0.25])`.
4. Card grid: `grid grid-cols-3 gap-4`, cards `rounded-xl border bg-white p-3`.
5. Photo stack: absolutely positioned images with initial rotations; animate in with `whileInView` and `staggerChildren: 0.12`, spring stiffness 200.
6. Footer: a huge thin outlined name cropped by `overflow-hidden` (`[-webkit-text-stroke:1px_#E5E5E3]`).

## Generation prompt
A warm off-white product designer portfolio styled like a professional social network profile: a fixed left sidebar with a round avatar, role, location and a black Message button, a top search bar, a centred serif hero statement inside a dotted selection frame with corner handles, featured case studies with metrics and large product screenshots, a three-card grid, a fanned stack of tilted portrait photos, and a calm serif contact block; clean grotesk UI text, soft shadows, no real names or logos.