Paper Notebook

Build a personal homepage as a single ring-bound notebook page lying on a desk. The whole site is one ruled paper sheet: punched holes and a red margin line on the left, handwritten headings and margin notes, real-world paper objects instead of cards, and coloured index-divider tabs as the navigation.

Paint the page background as kraft desk `#d9cdb6`. Centre a notebook up to `76rem` wide and put one sheet in it: paper `#fbf8ef`, a `2px 6px 6px 2px` radius, a soft shadow plus two offset copies (`6px 6px` and `12px 12px`, each a paper-coloured fill with a darker `1px` edge) so two more sheets peek out behind it. Rule the sheet with a `linear-gradient` that draws a pale blue `#b8cde4` line every `2rem`; that `2rem` is the whole page's rhythm, and body text sits on it. Leave an `11rem` left margin: a double red margin line (`1px` borders either side of a `3px` gap, `#e08a84`) at `margin - 1.5rem`, and down the far left a strip of punched holes, each a radial gradient circle of the desk colour about `1.6rem` across with a thin darker rim, repeating every `14rem`.

Use **Caveat** 700 for display headings and tabs, **Kalam** for margin notes, captions and sticky-note text, **Source Serif 4** at `18px` on the `2rem` line for body, and **JetBrains Mono** for small uppercase meta lines that read like printed stamps. Keep handwriting large or short. Ink is navy `#1f2833` and `#26405c`, the pen is red `#b3261e`, links are blue ink `#1f4e8c`, and the highlighter is `#fde68a`. The dark theme is black paper and gel pen: charcoal `#1d2026` paper, dim blue rules, light ink, a salmon `#ff9a8b` pen and a translucent highlighter, toggled by a button labelled Day page / Night page and stored in `localStorage` inside try/catch.

The navigation is a set of index tabs, each a different pastel. On screens `88rem` and wider they stick out of the sheet's right edge as a vertical stack about `7.75rem` wide, rounded `0 12px 12px 0`, tucked `10px` under the sheet with an inset shadow; the current tab slides flush and gets a short dark underline. Narrower, they become a row of tabs poking up above the top edge. Update the current tab as sections scroll into view.

The hero puts a small masthead (a circled monogram, Notebook of, the name in Caveat, a mono place line) above a two-column grid. On the left a Caveat H1 with the last phrase behind a slightly rotated yellow highlighter swipe, a serif lede, three stats each with the number hand-circled by an SVG red pen stroke, a stamped dark button, and a red-underlined pen link. On the right a Polaroid of the portrait (white frame, `.75rem` padding, a thicker bottom with a Kalam caption) tilted a couple of degrees and held by a strip of washi tape: a striped or dotted pastel band `6.5rem` by `1.75rem`, rotated `-3deg`, with zig-zag torn ends from a `clip-path` polygon.

Every section heading is a Caveat title with a short handwritten red label sitting in the left margin, right-aligned against the margin line. Featured posts are yellow sticky notes in Kalam; article cards are white index cards with their own fainter rules, a red header line and a taped photo; the archive is a list with red handwritten dates in the margin; experiments are small index cards; the featured project is a Polaroid beside circled stats and a stamp button; and the footer ends with a dashed tear-off newsletter coupon and a page number.

The page works because everything snaps to the `2rem` rule and handwriting is used sparingly; do not set paragraphs in Caveat or Kalam, and do not rotate more than a few degrees. Below `60rem` the hero stacks. Below `56rem` the margin shrinks to `3.25rem`, the punched holes disappear, the margin line moves in, and margin labels and dates move above their headings, so nothing scrolls sideways at `400px`. The only motion is the sheet sliding up `18px` over `450ms` on load and `150ms` hover nudges on cards and Polaroids, all removed under `prefers-reduced-motion`.