About Josh

Josh W. Comeau joshwcomeau.com/about-josh/

Design type: Bento-grid personal about page
Page tags: about bento grid dark personal portrait illustration stickers footer newsletter playful
Site tags: dark personal developer
Vocabulary: bento gridirregular tile spanscutout portraitsilhouette cloud horizonrounded tilesmonospace stat highlightsplayful 3d mascotsbreakout stickerscentred tile copyarrow link listsgradient footernewsletter inline inputdark navy palettehot-pink accent
Prompt: Show prompt
Build a dark, playful personal "about me" page. Palette: page bg #101418, raised tiles #1A2028, cloud silhouettes #1F2730, body text #E6E9EE, muted #9AA4B2, accent hot pink #FF3D8B (used for monospace stats), logo/links soft periwinkle #7C9BFF, newsletter button yellow #FFD60A. Type: a friendly rounded geometric sans (e.g. Wotfard, Nunito Sans or Outfit) for everything; a monospace italic for highlighted numbers. - Header: small two-tone wordmark [Your name] left, 4 text nav links, icon buttons (search, sound, theme, RSS) right. ~960px content column. - Hero: big bold "Hi there! I'm [Your name]." (~48px) with 3 short paragraphs on the left; a cut-out photo of you on the right that overlaps a horizon of soft cloud/hill silhouettes in a slightly lighter navy. - Bento grid: 3–4 column grid of rounded (12px) dark tiles with varied spans: a wide map tile, small fact tiles with an emoji/illustration on top, a tall tile with an illustrated object, a photo tile, and two tall text tiles ending in arrow (→) link lists. Text inside tiles is centred, ~15px, with one stat per tile in pink monospace (e.g. "[12,000 downloads]"). - Let 2–3 3D/cartoon stickers break out of the grid edges (a mascot peeking from the left, an orbiting planet at the right). - Footer: transitions via cloud silhouettes into a teal-navy gradient (#1C3446→#2A5C74). Wordmark + tagline, newsletter email input with yellow arrow button, then 3 link columns with uppercase small labels, and a row of social icons. Motion: gentle hover lift on tiles, sound-on-click icons optional. Responsive: grid collapses to 2 then 1 column; photo stacks under the hero text.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of About Josh on Josh W. Comeau