Tactile Card Stack

Build a personal homepage as a table covered in paper cards. The page background is the table, and nothing floats in a void: every block is a card of some kind, with the card type matching the content type, so the page feels like a desk you could pick things up from.

Paint the table as kraft linen `#d6c8ae` with two faint repeating-linear-gradient weaves (`2px` lines every `5px` and `6px` at `2.5%` opacity) on top. Center content in a wide wrap. The header is a card-catalog drawer: a small logo card tilted `-6deg` that straightens on hover, then a row of index tabs with `12px` top radii in `#f4eddd` that rise out of a `12px` paper rail below them, the current tab in full paper `#fffdf7` and connected to the rail. A paper search field and a round theme button sit at the right.

Use **Young Serif** for headings, **Figtree** at `18px` for body, **Courier Prime** for typewritten labels, dates and call numbers (uppercase with `.1em` tracking for small labels), and JetBrains Mono only for code. Ink is `#1d232c`, muted ink `#4b5262`, the red rule `#c0392b`, and slate `#364f6a` for primary buttons. In dark mode the table becomes slate felt `#10171f`, cards turn `#1f2833`, and ink goes to `#ece6da`; persist the choice in `localStorage` inside try/catch.

Every card is paper with a `--deck` shadow that draws two cards stacked behind it: `3px 3px 0 -1px` paper-2 and `3px 3px 0 0` paper-edge, then the same at `6px 6px`. Add a soft three-step lift shadow. Each card carries `--rest` (a resting rotation of about one degree, alternating) plus `--rx`, `--ry` and `--lift` custom properties combined in one `transform: perspective(1000px) rotateX() rotateY() rotate() translateY()`. On hover a card straightens, rises `6px` and gets a deeper shadow; with a fine pointer it also tilts up to `4.5deg` toward the cursor, computed from the pointer position on `pointermove` and reset on `pointerleave`.

The hero is a two-column grid. The left card is a ruled index card: a typewriter meta row (name, place) above a `2px` red rule at `3.05rem`, then blue rules every `1.8rem` drawn with a repeating-linear-gradient, so the H1, lede and buttons sit on the lines. The primary button is a slate pill with a `4px` solid bottom ledge. The right column is a hand of four cards, each `230px` by `320px`, positioned from the same centre with `transform-origin: 50% 100%` and spread by a `72px` step: the first rotated `-15deg` and shifted `-1.5` steps, the next `-5deg` and lifted `10px`, then `5deg`, then `15deg`. Three are playing cards with a big Young Serif number, a typewriter label and corner indices with suits (one in red hearts); the top card is the portrait in a photo frame with a typewritten caption. On hover or keyboard focus the hand fans wider (`-19deg`, `-6deg`, `6deg`, `19deg`, steps of `1.9` and `0.65`, lifted `22px`) over `300ms`.

Below, label each section with a small paper slip rotated `-2deg` (Deck I, Deck II) above a serif heading. AI posts are photo cards with the banner on top; Digital Garden posts are ruled index cards with a red call number like `DG · 01` and a typewriter date; experiments are suited playing cards in a loose overlapping spread; the featured pattern library is a wide rare card with the blueprint image flush on the left and a three-cell stat row; the Work with me card is a dark card-back with a crosshatched pattern. The footer is a slate band with a newsletter card.

The effect works because rotations are small and the deck edges are hard-edged offsets, not blurred shadows; do not rotate anything more than about two degrees except the fanned hand. Below `900px` the hero stacks and the hand shrinks to `190px` by `266px` cards; on phones the tabs become a slightly skewed stacked deck behind a menu button and grids fall to one column, with no sideways scroll at `400px`. Tilt only runs for fine pointers without `prefers-reduced-motion`, and under reduced motion every transition collapses.