---
id: "2113138110062305773"
source: https://x.com/wallofportfolio/status/2113138110062305773
author: "Wall of Portfolios (@wallofportfolio)"
media: "video, 2940x1664, 43.9s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Illustrated Arcade Portfolio

## Summary
A portfolio that plays like a game: an electric violet hero with a bold flat-vector self-portrait and lime "Work with me" button, a dark section of neon-edged trading cards for creative skills, a polaroid "snap" pop-up with a travel photo, and a mini arcade game where pixel bricks spell out the name. Illustration and interaction carry the whole story.

## Style
- Theme: dark (with a violet hero)
- Mood: playful, bold, inventive, energetic
- Tags: portfolio, illustration, hero, trading-cards, arcade-game, pixel-art, neon
- Category: Hero, Illustration

## Palette
| Role | Hex |
|---|---|
| Electric violet | #524ED8 |
| Night | #0C0C10 |
| Charcoal | #1D1C22 |
| Slate | #393944 |
| Lime | #C6F432 |
| Cyan | #33D6E8 |
| Hot pink | #FF4D8D |
| Mustard | #F2C94C |
| Paper | #FAF9F9 |

## Typography
- Hero headline: chunky rounded display sans with a dark drop shadow, white, four lines. Lilita One or Bricolage Grotesque (800).
- Labels and buttons: small uppercase monospaced or pixel-style caps ("SENIOR PRODUCT DESIGNER", "WORK WITH ME"). Space Mono (700).
- Card text: clean sans. Inter (400 / 700).
- Arcade: pixel font for score and prompts ("CLICK OR PRESS SPACE TO START"). Press Start 2P.

## Layout
- 16:9 browser frame (2940x1664) inside a portfolio directory (profile column on the left).
- Hero: headline block on the left 45%, full-height character illustration on the right with floating UI fragments (wireframe panels, a pen tool, a type icon).
- Cards section: three stacked, slightly fanned cards centred on a dark textured background.
- Polaroid pop-up centred over a dimmed scene with a lime "Try another" button below.
- Arcade: a wide black playfield with a score at top left and hearts at top right.

## Elements
- Character: flat vector man with beard and glasses, yellow shirt, purple jacket, lime lightning bolts.
- Trading cards: dark glass, 2px gradient borders (pink to cyan) with glow, small caps header, illustration, title and two short points.
- Polaroid: off-white frame, handwritten caption and a location pin.
- Pixel bricks: violet, blue, green and cyan blocks forming letters.

## Motion
- Hero elements float gently; UI fragments drift a few pixels.
- Cards fan out and tilt toward the cursor (3D tilt about 8 degrees) with a glow following the pointer.
- The polaroid drops in with a slight rotation; "Try another" swaps the photo.
- The arcade game starts on click: a ball breaks the pixel bricks.

## Rebuild it
1. Hero: violet background with a subtle tiled floor pattern; headline in a rounded display font with `text-shadow: 3px 3px 0 #000`.
2. Place the illustration as an SVG; animate fragments with small looping `y` offsets.
3. Cards: absolutely stacked with Motion `rotate` offsets; use a pointer-tracked `rotateX`/`rotateY` for tilt and a radial gradient glow.
4. Polaroid modal: `rotate-[-2deg] bg-[#FAF9F9] p-4 pb-10` with a handwritten font caption.
5. Build the arcade with a small canvas breakout game; generate the letter bricks from a 5x7 pixel font map.

## Generation prompt
A playful illustrated portfolio: an electric violet hero with a bold rounded headline and a lime button beside a flat vector character with beard and glasses in a purple jacket surrounded by floating UI fragments, a dark section with fanned neon-edged trading cards, a polaroid travel photo pop-up, and a black arcade playfield where violet, blue and green pixel bricks spell a name; energetic, inventive, game-like, no real names.