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

## Summary
A light, personality-packed portfolio: a big two-line intro with the second line in bright blue, a tilted polaroid photo, a vinyl record player that actually plays music, impact stats in soft cards, a canvas of testimonial notes with multiplayer-style name cursors, and mentoring numbers. It feels like the designer's desk rather than a template.

## Style
- Theme: light
- Mood: warm, playful, confident, personal
- Tags: portfolio, hero, stats-cards, testimonials, multiplayer-cursors, vinyl-player, sidebar-nav
- Category: Hero, Testimonials

## Palette
| Role | Hex |
|---|---|
| Page | #F2F2F0 |
| Card | #FFFFFF |
| Line | #E3E4E3 |
| Soft grey | #C8C8C9 |
| Text grey | #989897 |
| Ink | #1A1A1C |
| Bright blue | #1F5FD6 |
| Record red | #C0262D |

## Typography
- Intro: heavy geometric grotesk, two lines, about 5% of the content width; line two in blue. Inter Display (800).
- Stats: very large bold numerals (350M+, 20%, 75%) with small grey descriptions. Inter (700 / 400).
- Section titles ("Thinking out loud"): bold, tight. Inter Display (700).
- Testimonials: small sans with a bold name line and a grey role line.

## Layout
- 16:9 browser frame (2940x1664) inside a portfolio directory (profile column on the far left).
- Site sidebar (about 8% wide): name, icon nav list (Work, Apps, Experiments, Games, Youtube, Mentoring, About, Contact) with small NEW / PLAY badges, Music and Theme toggles at the bottom, and a doodle character.
- Hero: intro left, polaroid right; a record player overlaps the top right corner.
- Three equal stat cards below the hero; later sections stack vertically.

## Elements
- Polaroid: white frame, 3 degree tilt, small location tag.
- Record player: black vinyl with a red label and a tonearm, spinning while music plays.
- Stat cards: white, 16px radius, faint pastel glow, small logo chip top right.
- Testimonial canvas: dotted grid with note cards, round avatars and coloured name-tag cursors.
- Floating "Ask" chat pill and a round avatar button bottom right.

## Motion
- The record spins continuously; the tonearm drops when music starts.
- Scrolling reveals sections with gentle fade and rise (300ms).
- Cursors on the testimonial canvas drift between notes like live collaborators.
- Hovering a stat card lifts it slightly.

## Rebuild it
1. Build a two-column layout: fixed `w-56` sidebar with icon links and toggles; main column `max-w-5xl`.
2. Hero: `text-6xl font-extrabold tracking-tight` with the second line `text-blue-600`; polaroid as `rotate-3 bg-white p-2 pb-8 shadow-xl`.
3. Record player: an SVG disc with `animation: spin 3s linear infinite` and a tonearm rotated with a transition; wire it to an `<audio>` element.
4. Stats: `grid grid-cols-3 gap-4`, cards `rounded-2xl bg-white p-6` with a soft gradient glow.
5. Testimonial canvas: absolute-positioned cards on a dotted background; animate small cursor labels along paths with Motion.
6. Use placeholder names, photos and companies.

## Generation prompt
A playful light portfolio website: a big bold two-line intro with the second line in bright blue, a tilted polaroid photo placeholder, a spinning black vinyl record player with a red label, three soft white stat cards with large numbers, a dotted canvas of testimonial notes with colourful multiplayer name cursors, a slim sidebar with icon links and a doodle character; warm, personal, modern, no real names.