---
id: "2115685024704196687"
source: https://x.com/wallofportfolio/status/2115685024704196687
author: "Wall of Portfolios (@wallofportfolio)"
media: "video, 2940x1664, 30.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Playful UX Portfolio with 3D Avatar

## Summary
A UX designer portfolio dressed as a social network profile: a fixed left sidebar with avatar, role, location and a Message button, a top search bar, and a scrolling feed of intro, client timeline, project cards, Q and A, an upcoming AI section, testimonials and a dark contact footer. The familiar app shell makes a long portfolio feel easy to browse.

## Style
- Theme: light (off-white feed, black accents, dark footer)
- Mood: friendly, personal, clean, approachable
- Tags: portfolio, profile-layout, sidebar, project-cards, timeline, testimonials, footer-cta
- Category: Landing page, Testimonials

## Palette
| Role | Hex |
|---|---|
| Page background | #F8F8F9 |
| Card white | #FFFFFF |
| Ink and buttons | #1F1E21 |
| Divider | #EAEBEC |
| Muted grey | #C1BFC0 |
| Secondary text | #7E7277 |
| Badge blue | #2F3CF5 |

## Typography
- Intro heading: sans semibold, about 28px, sentence case, two lines. Closest: Plus Jakarta Sans 600 or Inter 600.
- Section titles (centred): sans medium about 22px with a hand-drawn caret mark.
- Body: 13px regular grey, leading 1.5; Q and A questions 15px semibold.
- Micro labels: uppercase 8px with 0.1em tracking (role line, chips).
- Sidebar name 13px bold, role 9px grey.

## Layout
- About 1.77:1 (2940x1664) screen capture.
- Left sidebar about 17% wide: 64px circular avatar, name, role, location pin, two small experience badges, a black Message pill with an icon button, then Profile and Portfolio nav items.
- Top bar: a 280px rounded search field with a magnifier and three icons plus an avatar at the far right.
- Feed: one centred column about 900px wide, sections spaced about 80px apart; cards 16px radius with 1px #EAEBEC borders and no heavy shadows.
- Footer: a near-black card with 24px radius at the bottom of the feed.

## Elements
- Intro: greeting heading, uppercase location line, a short bio paragraph.
- Illustration banner: a stylised 3D avatar and a pug in sunglasses on a grey pattern of rounded squares, with a caption in large light grey type.
- Link row: a black Resume pill with download icon and four square social buttons (32px, 8px radius).
- Client timeline: a thin violet line with four dots and four placeholder client logos below.
- Project cards: image left (rotated phone mockup on a light background), chips (Mobile App, Fintech), a two-line title, a description and a black View Project pill.
- Q and A block with a photo of the designer presenting on the right.
- Upcoming card: a blue "Soon" tag, title, text and three tilted image cards (record player, product, landscape).
- Testimonials: three columns with round avatars, name, role and a paragraph.
- Dark footer: monogram, a contact heading, email line, Download CV button and social squares, small copyright.

## Motion
- 1.2s to 29.0s: a continuous scroll through the feed (intro, 6.8s timeline, 12.4s projects, 17.9s Q and A, 23.5s AI card, 29.0s testimonials and footer).
- Scrolling is smooth with about 500ms ease-out per wheel step; sections appear to fade up about 20px as they enter (400ms).
- The tilted cards in the AI section fan out slightly (rotations of about -8deg, 0deg and 8deg) on entry.
- The sidebar and top bar stay fixed throughout.

## Rebuild it
1. Shell: `grid grid-cols-[240px_1fr]` with a sticky sidebar (`h-screen sticky top-0`) and a sticky top bar inside the main column.
2. Sidebar: avatar `size-16 rounded-full`, text stack, and a `rounded-full bg-neutral-900 text-white px-4 py-2` Message button beside a square icon button.
3. Feed: `max-w-[900px] mx-auto space-y-20`; cards `rounded-2xl border border-neutral-200 bg-white`.
4. Timeline: a 1px violet line with absolutely placed 8px dots, logos in a 4-column grid underneath.
5. Wrap each section in a Motion `motion.section` with `initial={{ opacity: 0, y: 20 }}`, `whileInView={{ opacity: 1, y: 0 }}`, `transition={{ duration: 0.4 }}`.
6. Fan cards: three absolutely positioned images with `rotate` values and a `whileHover` lift of `y: -8`.

## Generation prompt
A clean light-mode personal portfolio website styled like a social network profile: a left sidebar with a round avatar, name, role and a black message button; a feed with a friendly greeting, a 3D cartoon avatar beside a pug in sunglasses, a client logo timeline, project cards with phone mockups and black pill buttons, testimonials with round avatars and a dark rounded contact footer; friendly, modern, minimal, placeholder names only.