Iris Voss — Folio. Built from one prompt.

Build a one-page portfolio for a fictional photographer "Iris Voss" using React, TypeScript, Vite, Tailwind CSS. No photographs — every visual is a generative CSS gradient plate, which is the concept: "photographs pending, light already booked."

FONTS: "Sora" (300, 400, 600) from Google Fonts, utility `.font-sora` in src/styles.css. Background `#0c0c0e`, text `#ececf1`.

HERO (h-screen, grid place-items-center, relative):
- A single 3:4 "plate" card (`w-[min(62vw,420px)] aspect-[3/4] rounded-[1.5rem]`) whose background is `linear-gradient(135deg, #f6d365 0%, #fda085 45%, #7f7fd5 100%)` with `box-shadow: 0 40px 80px rgba(0,0,0,0.55)`.
- The card TILTS toward the cursor: a mousemove listener on the hero computes nx, ny in [-1, 1] from the center and sets `transform: perspective(900px) rotateY(${nx * 10}deg) rotateX(${-ny * 10}deg)` on the card via a ref (no re-render per move — write style directly). Ease back to zero on mouseleave with `transition: transform 0.6s cubic-bezier(0.22,1,0.36,1)`.
- Name plate overlapping the card's bottom-left corner (-translate-x-6 translate-y-6): "IRIS VOSS" in `font-sora font-semibold text-[clamp(2rem,6vw,4rem)] tracking-[-1px]` with "LIGHT / FORM / DISTANCE" beneath in `text-[11px] tracking-[0.45em] text-white/50 uppercase`.

INDEX (second section, min-h-screen, px-6 sm:px-16, py-24): six series rows, each `group flex items-baseline justify-between border-b border-white/10 py-7 cursor-pointer`:
- "Meltwater" — "ICELAND, 2024" ; "Sodium Nights" — "TOKYO, 2024" ; "Blue Hour Census" — "OSLO, 2025" ; "Static Bloom" — "SEOUL, 2025" ; "Vanishing Point" — "ATACAMA, 2026" ; "Afterimage" — "IN PROGRESS"
- Titles `font-sora text-2xl sm:text-4xl font-light tracking-tight transition-transform duration-300 group-hover:translate-x-4`; locations `text-[11px] tracking-[0.3em] text-white/40 uppercase`
- On hover a small gradient swatch (h-10 w-16 rounded-md, same gradient rotated per row: `linear-gradient(${45 + i * 60}deg, #f6d365, #fda085, #7f7fd5)`) fades in at the row's right, `opacity-0 group-hover:opacity-100 transition-opacity duration-300`.

FOOTER (py-16, text-center): "Booking spring 2027 — studio@irisvoss.photo" in `text-[12px] tracking-[0.35em] uppercase text-white/50`, email underlined. Hero elements enter with `@keyframes drift-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }` 0.8s ease-out, card first, nameplate delayed 0.2s. Single App.tsx + src/styles.css.

portfoliotiltminimal