---
id: "2113192132827574699"
source: https://x.com/eduardbodak/status/2113192132827574699
author: "Eduard Bodak (@eduardbodak)"
media: "video, 1600x1600, 18.0s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Floating Project Wall Portfolio

## Summary
A portfolio hero made of dozens of small project screenshots and clips scattered across a charcoal canvas, drifting past at different speeds and sizes like a living moodboard. It replaces a project list with a sense of volume and range, letting the work itself be the first impression.

## Style
- Theme: dark
- Mood: energetic, curated, eclectic, confident
- Tags: portfolio, project-wall, parallax, scattered-grid, video-thumbnails, moodboard, hero
- Category: Hero, Motion

## Palette
| Role | Hex |
|---|---|
| Canvas | #222327 |
| Deep charcoal | #1B1B20 |
| Near black | #121116 |
| Lilac | #E4DFED |
| Dusty rose | #A69999 |
| Muted violet | #5B5467 |
| Accent magenta | #E83FD0 |
| Accent yellow | #F5C518 |

## Typography
- The tiles carry their own type; the wall itself has none. If a heading is needed, a condensed bold grotesk in white. Anton or Oswald (700).

## Layout
- Square frame (1600x1600); an irregular grid of three loose columns with tiles of different widths (roughly 10% to 30% of the frame) and large gaps.
- Tiles keep their own aspect ratios (mostly 16:10 website shots, some squares).
- No borders between tiles; the dark canvas shows through everywhere.

## Elements
- Website screenshots and short loops: bold type posters, pink shop pages, purple sports pages, product boxes on cyan, dark cinema sites.
- A few interactive moments inside tiles (a cursor pressing a lime button, a pink "Shop" button).
- Thin 2px radius corners; no shadows.

## Motion
- The whole wall scrolls upward continuously; columns move at slightly different speeds for parallax (about 20% difference).
- Tiles fade in as they enter and out as they leave the frame.
- Some tiles play their own short loops (cursor clicks, colour changes) while drifting.

## Rebuild it
1. Lay out three absolutely positioned columns of tiles; give each column its own scroll speed and translate it with `requestAnimationFrame` (or CSS `animation: drift 40s linear infinite`).
2. Duplicate each column's content to loop seamlessly.
3. Use muted autoplaying `<video>` tiles only while visible (IntersectionObserver) to keep it light.
4. Vary tile widths between three sizes and add generous gaps; keep the background `#222327`.
5. Fill tiles with your own projects; avoid real client branding in mockups.

## Generation prompt
A dark charcoal portfolio wall: dozens of small website screenshots and video thumbnails in loose columns with large gaps, bold poster typography, pink and purple pages, a product box on cyan, a lime button being clicked, all drifting slowly upward at different speeds like a living moodboard; eclectic, energetic, modern web design, no real brand names.