---
id: "2113140897584181653"
source: https://x.com/wallofportfolio/status/2113140897584181653
author: "Wall of Portfolios (@wallofportfolio)"
media: "video, 2940x1664, 33.0s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Horizontal Case-Study Portfolio

## Summary
A product designer's portfolio shown inside a portfolio directory: a fixed profile sidebar on the left, and a site that scrolls sideways through full-height panels, from a bold intro with a big yellow circle to case-study cards with tags, wireframe boards and a teaching section. Horizontal paging with a ruler-style progress bar makes a long portfolio feel like flipping through a book.

## Style
- Theme: light
- Mood: confident, structured, warm, professional
- Tags: portfolio, horizontal-scroll, case-studies, profile-sidebar, pager, tags, editorial
- Category: Landing page, Web app

## Palette
| Role | Hex |
|---|---|
| Page | #F6F6F5 |
| Panel | #FFFFFF |
| Divider | #DEDDD9 |
| Muted | #B6BBBD |
| Text grey | #636367 |
| Ink | #1A1A1A |
| Sun yellow | #FDE008 |
| Accent orange | #F26B2A |

## Typography
- Intro statement: large grotesk, medium, black, tight leading. Inter Display (500).
- Case-study titles: same family, semibold, about 2% of frame width. Inter (600).
- Body, bullets and meta (company, year, role): small regular grey. Inter (400).
- Tags: tiny text in rounded pills with icons.

## Layout
- 16:9 browser frame (2940x1664). Directory chrome: search bar top centre, icons top right.
- Left column (about 9% wide): round photo, name, role, location, a black "Message" button, Profile / Portfolio links.
- Main area: the portfolio site with a top bar (name left, section links right, a tick-mark ruler in the middle showing "1 / 9") and a bottom bar ("Scroll, drag, or use Left Right" hint, Previous / Next, copyright).
- Content: side-by-side panels, each about 60% of the main width, separated by thin rules.

## Elements
- Intro panel: multi-line statement partly covered by a large solid yellow circle.
- Case-study panel: company and year, title, role, three bullet points, a row of tag pills (0 to 1, Design system, Accessibility), "Open case study" link.
- Visual panels: wireframe boards with phone screens and annotation arrows, dashboards, product screenshots with coloured top borders (green, orange, blue).
- Chat bubble button fixed bottom right.

## Motion
- Panels slide horizontally on scroll, drag or arrow keys (about 500ms, ease-in-out); the ruler's active tick moves in step and the counter updates.
- The cursor drags the strip; momentum carries it to the nearest panel.
- Subtle fade on panel content as it arrives.

## Rebuild it
1. Make the main area a horizontal track: `flex h-full` inside `overflow-hidden`, translated by `-index * panelWidth` with Motion springs; map wheel, drag and arrow keys to index changes.
2. Build the ruler: 60 thin ticks with the active one taller and darker; show "n / total" beside it.
3. Panels: white cards separated by `border-l border-neutral-200`, with a 4px coloured top border per case study.
4. Tags: `rounded-full border px-2 py-0.5 text-xs` with small icons.
5. Keep the profile sidebar fixed; use placeholder name, photo and companies.

## Generation prompt
A clean light product designer portfolio inside a directory layout: a narrow left profile sidebar with a round photo placeholder and a black Message button, and a horizontally scrolling site of white panels with a big yellow circle intro, case-study cards with small tag pills and bullet points, phone wireframe boards and dashboard screenshots, a tick-mark progress ruler at the top and Previous / Next at the bottom; structured, warm, professional, no real names.