Bento

Build a personal portfolio site using the "Bento" theme — Soft pastel bento grid — a personal site that reads at a glance.

## Art direction
Calm and modular. A 4-column bento grid where tiles span 1, 2 or 4 columns and 1 or 2 rows, so the composition is irregular without being chaotic. Everything is white on a pale lilac wash, 20px radii, hairline lilac borders, and one soft violet accent. Each tile holds exactly one idea and roughly one sentence — if it needs a paragraph, it needs its own page.

## Colour palette (use these exact values)
- Background: #F7F5FF
- Surface / cards: #FFFFFF
- Primary text: #1E1B2E
- Secondary text: #6E6885
- Accent (buttons, links, active state): #6D5AE6
- Text on accent: #FFFFFF
- Borders / dividers: #E6E1F7
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Geist", "Inter", system-ui, sans-serif
- Body: "Geist", "Inter", system-ui, sans-serif
- One family, three sizes, and that is the whole system: 40px/600 for the intro, 17px/500 for tile titles, 14px/1.6 muted for tile body. Tracking stays at -0.01em throughout.

## Page structure
1. Intro tile spanning two columns: a large hello, a one-line description of what you do, and a location with a live local time.
2. Portrait tile: a square photo with rounded corners and a small availability dot.
3. Stack tile: eight tool chips laid out in two rows.
4. Writing tile spanning two columns: three post titles with dates, each row a link, and a 'All posts' link at the bottom.
5. Projects tile spanning two columns and two rows: three project rows with a small square thumbnail, a name, a one-line result and an arrow.
6. Now tile: what you are working on this month, one sentence, with a coloured dot.
7. Socials tile: four icon buttons in a row.
8. Contact tile spanning the full width: an email address at 28px with a copy button.
9. A one-line footer under the grid — no columns, just a credit and the year.

## Components and detailing
Every tile is the same component: white, 20px radius, 1px `#E6E1F7` border, 20px padding, and a `0 2px 12px rgba(30,27,46,0.05)` shadow. Tiles lift 2px on hover with the border going accent. Chips are 28px pills with a lilac tint. Icon buttons are 36px squares with a 12px radius. The grid collapses to two columns on tablet and one on mobile, keeping the intro tile first.

## Motion
Tiles stagger in on load with a 10px rise and a 40ms delay between them, once. Hover lifts are 150ms. The availability dot pulses slowly. Nothing else moves.

## Copy and imagery
First person, warm, short. Say what you do and who for in one sentence, then let the tiles carry specifics: real project names, real outcomes, real post titles with dates. If a tile has nothing true to say, delete it rather than padding it.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.