Bento-Grid-Portfolio

Create a bento grid portfolio inspired by Apple's keynote slides: one page of asymmetric tiles in different sizes that together say who this person is and what they've made.

Brief

Subject: the portfolio of Mira Okafor, an independent product designer in Lisbon who works with climate-tech startups

Use real-feeling content: project names, clients, outcomes with numbers, a location with live local time, current availability

Design Requirements

Layout: CSS Grid, 4 columns on desktop; tiles span 1–2 columns and 1–2 rows so size signals importance

Colour: Dark base (#09090b), tiles (#18181b), one accent (#fbbf24) for availability, links and one hero detail. Give one or two project tiles their own colour taken from the project

Tiles: 20px radius, 1px rgba(255,255,255,0.06) border; each tile's content is composed for its size — not centred text in a box

Typography: One sans family with character (e.g. Manrope, Schibsted Grotesk) and a clear scale from tile titles down to captions. Tile titles in sentence case — no tracked-out all-caps label at the top of every tile

Grid Structure (Desktop)

```

| Large Hero (2x2) | Small Card |

| | Small Card |

| Medium (2x1) | Tall (1x2) |

| Small | Small | |

```

Sections to Include

Hero Bento Cell — 2x2 tile with the name, discipline and a one-line statement of what they do

About Cell — Portrait and a three-sentence bio

Project Cells — 4–5 project tiles, each with a visual (CSS/SVG composition or photo), the client and one outcome; hover reveals a short description

Skills Cell — Tools and disciplines with real structure (grouped, or with years of use) rather than a tag cloud

Contact Cell — Email with a copy button and current availability

Social Links Cell — Dribbble, LinkedIn, Read.cv

Technical Details

grid-template-columns: repeat(4, 1fr) with explicit spans; gap 16px

Placeholder photos: https://picsum.photos/seed///

Hover: the border brightens; the grid itself stays still

Responsive: 2 columns on tablet, 1 on mobile, in a sensible reading order

Visible focus states; respect prefers-reduced-motion