# Portfolio index with hover preview > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The home page of a fictional Lisbon art director, Ines Varga. The whole site is an index: a giant serif "Index" headline, a one-sentence pitch, discipline filters, and a hairline table of twelve projects (number, project, client, discipline, year). Hovering a row dims every other row to 32% and floats a 300×380 "plate" (a CSS-gradient composition standing in for the project's key image) that chases the cursor with a lerp and tilts with its velocity. The detail worth copying is the lag: the plate eases toward the pointer at 11% of the remaining distance per frame and rotates up to ±6° in the direction of travel, so it feels like a print being slid across a table. ## Reference behaviour 1. Initial state: row 03 "Lumen No. 4" is active (hero state), its plate visible at ~62% of the row width, vertically centred on the row (clamped to at least 266px from the top). Other rows are at 32% opacity. 2. Move the pointer onto any row: that row becomes active (full opacity, project name slides 14px right over 420ms, number turns vermilion). All other rows drop to opacity .32 over 160ms. 3. The plate targets `pointerX + 165px, pointerY`, clamped so it never leaves the viewport (16px margin; top clamp 76px below the sticky header). Each animation frame moves `x += (tx − x) × 0.11`, same for y. Rotation is `clamp((tx − x) × 0.04, −6°, 6°)`. The rAF loop stops itself when the remaining distance is under 0.4px. 4. When the active row changes, the new plate reveals over the old one with a bottom-up clip-path wipe (`inset(100% 0 0 0)` → `inset(0)`, 420ms expo-out). Plates are stacked; the active one has `z-index:2`. 5. Leaving the list: plate fades to 0 over 240ms and scales to .92; all rows return to full opacity. 6. Keyboard focus on a row (Tab) activates it the same way and parks the plate at 68% of the row width, centred on the row. 7. Filter pills (All 12 / Identity 3 / Editorial 4 / Packaging 3 / Motion 2): click sets `aria-pressed` and hides non-matching rows (`display:none`). 8. Header clock shows Lisbon time (UTC+1 in October) as `LIS HH:MM`, refreshed every 30s. 9. The page scrolls: after row 12 comes a footer with an 88px serif sign-off "Have a slow thing to make? Write." (the last word underlined 3px vermilion) and contact meta. Scrolling while not hovering hides the plate. ## Structure ``` 1280 × 800 (12-col grid, 40px side padding, 20px gutters) ┌────────────────────────────────────────────────────────────────────────┐ │ Ines Varga │ • Art direction & identity · Lisbon │ LIS 21:12 │ Index Info Journal Contact │ 60 sticky ├────────────────────────────────────────────────────────────────────────┤ │ │ Identities, books and packaging │ │ Index⁽¹²⁾ (172px Gloock, cols 1–7) │ for people… (22px serif, 30ch) │ │ │ [All¹²][Identity³][Editorial⁴]… │ ├─NO.──PROJECT──────────────────────CLIENT──────────DISCIPLINE─────YEAR──┤ 34, 1px ink rule │ 01 Salt & Ledger Ferro Ceramics Identity 2026 │ 50 │ 03 Lumen No. 4 ┌──────────┐ Oficina Lumen Packaging 2025 │ ← active │ 04 Rio Abaixo │ plate │ … │ │ … │ 300×380 │ │ │ └──────────┘ │ ├────────────────────────────────────────────────────────────────────────┤ │ Have a slow thing to make? Write. (88px) │ email · address │ footer └────────────────────────────────────────────────────────────────────────┘ columns: No. 1/2 · Project 2/7 · Client 7/10 · Discipline 10/12 · Year 12/13 (right-aligned) ``` - `

` sticky, 12-column grid: `.name` (link), `.role` with a 7px green availability dot, `#clock`, `