Museum Exhibition

Build a personal blog home page as a small museum. The site is a set of painted wings, every post and project hangs as a framed work with a tombstone placard and an accession number, and the home page is the lobby with a floor plan for a front door. What makes it work is consistency: exactly three object treatments (frame, placard, accession number) used for everything, and one wall color per wing.

Use a wrap of about 1240px. Each section is a room with generous padding (`clamp(3rem, 6vw, 5rem)`), a small circled room code (`G0`, `B1`, `A1`) beside a large heading, and either a plaster ground, a tinted ground, or a fully painted wall in the wing color. The lobby hero is two columns: wall lettering, lede, buttons and a three-figure stat row on the left; the framed portrait with its placard on the right. Then a plan section with an SVG floor plan whose rooms are links beside a wing directory list, an aubergine-painted room hanging six recent AI posts in a three-column `auto-fill` grid of frames, a highlights tour, a Digital Garden room, an experiments room, Wing C's open-source works hung as alternating large frames followed by a ruled accession register table, and a visitor services row.

Set headings in **Bodoni Moda** as wall vinyl: the hero at about 5rem, regular weight, with an italic second phrase. Use **Source Serif 4** for body at 18px, **Archivo** in small spaced uppercase for labels, eyebrows and placard meta, and **IBM Plex Mono** for accession numbers like `AJ.2026.0814`, built from the publication date.

The light plaster is `#f5f1e9` with a fine noise texture multiplied over it, cards and placards are cream `#fffdf8`, ink is `#1c1a17`. Wing paints are verdigris `#2d5b4e` for Writing, aubergine `#3c2c5e` for AI, slate `#364f6a` for Projects, ochre `#7d5210` for Patterns and oxblood `#6c2727` for About; each sets `--wing` and a readable `--wing-ink`. In dark mode the walls go to `#121110`, placards to a dark warm grey, and each wing ink lightens (`#bca8ec` for AI, `#9dbbdc` for Projects) so labels stay readable on deep paint.

A frame is a thick black border (gilt for the portrait, drawn with a `border-image` linear gradient from `#c9a45a` through `#7b5a20`), a cream mat as padding, and an inset bevel shadow on the mat. Hang each frame under a picture light: a `::before` on its container fills the top 70% with a soft warm radial glow. The placard sits below and slightly offset: title in bold serif, maker and date line, medium line, then the accession number. Posts without art show a hatched mat labelled `Image not on view` instead of a broken image.

The masthead is a slim bar with an `AJ` monogram and `The AntJanus Collection` lettering, a directory of wing links each with a small paint dot and a wing label above the name, and a `Gallery lights` theme toggle; a painted strip of all five wing colors runs under it. The current wing gets an underline in its paint; move it to the room in view. Below 900px the directory collapses behind a `Directory` button.

Keep motion to a 180ms lift on hovered frames; a museum should feel still. Under `prefers-reduced-motion`, drop the lift. At 400px wide the lobby stacks with the portrait below the stats, frames go one per row with the placard beneath, the accession table keeps its columns by wrapping descriptions, and nothing scrolls sideways.