Glass Hypertext

Build a single-page personal site in frosted glass that behaves like hypertext. Every internal link announces that it can be previewed, hovering or focusing it opens a glass preview card that itself links onward up to four deep, and the page ends with a "What links here" panel listing every page that points at this one. The glass stays calm and conventional so the link behaviour is the thing people notice.

Lay the page out in a centred wrap of about 1200px with a `clamp(16px, 4vw, 40px)` gutter and sections separated by `clamp(56px, 8vw, 104px)`. Open with a two-column hero: the portrait with a glass stat lens across its bottom, and beside it a mono eyebrow, the headline with one Instrument Serif italic word, and a strong glass card holding the lede, three buttons and a mono line reading `↩ Linked from 2 pages · ↗ Links out to 20 pages` whose first half jumps to the backlinks. Then Start-here image cards, a "Follow a trail" section pairing a strong glass explainer with a glass map of the main pages as small glass nodes joined by SVG lines, two columns of latest writing, an AI experiments grid, a three-panel contact band, and finally the backlinks.

Use Geist at an 18px base, Instrument Serif italic for one accent word per headline, and Geist Mono for eyebrows, kinds, counts and the preview trail. The ground is `#e6ecf6` in light and `#060a13` in dark with ink `#0c1626` and `#eef3fb`, under a drifting four-blob mesh with grain. Glass is about 60% white in light and deep navy in dark with `backdrop-filter: blur(18px) saturate(170%)`, a rim highlight, a long soft shadow and a pointer-following specular; buttons and links use the brand slate `#364f6a` and the ice blue `#a9c8ea` in dark. Provide a light/dark toggle that honours the system preference.

Give every internal text link a 2px dotted underline offset 5px at 60% of the link colour, and end it with a bead: an inline-block `::after` 0.5em round, a two-stop gradient in the link's blue and violet under a small white radial highlight at 35% 30%, a 1px glass ring and a tiny drop shadow. The bead scales to 1.35 on hover and while its preview is open, and the underline turns solid. Cards, rows and map nodes preview too but skip the bead; instead they get a 2px warm outline while their preview is open.

Store preview data in one object keyed by page: title, kind and date, a description, the page image, the keys of the pages it links onward to, and how many pages link to it. Open a preview after 320ms of hover or immediately on keyboard focus; close it on Esc, on scroll, or 200 to 300ms after the pointer leaves both link and card. The card is `min(390px, 100vw - 24px)` wide with a 22px radius, a stronger glass fill, `blur(22px) saturate(180%)` and a deep shadow, and it enters from 8px down and 0.98 scale over 160 to 180ms. Inside: the page image at 16:7 fading into the glass through a mask, the kind in mono, the title, the description clamped to four lines, a row of "Links onward" chips that open the next preview, and a footer with "Linked from N pages" and an "Open →" link. Nested previews fan out beside their parent so it stays readable, the earlier ones desaturate slightly, and from the second level a mono breadcrumb trail shows the path. Skip previews on touch devices and just follow the link.

Build the backlinks section as a grid at `minmax(0, .8fr) minmax(0, 1.6fr)`. The left is a strong glass summary that sticks at `top: 100px`: a mono eyebrow, `2 pages point here` with the last word in serif italic, a sentence, and a two-cell stat block (pages linking in, pages linked out) whose cells are separated by 1px gaps over a line colour. The right is a list of glass rows, one per linking page, each with the source title as a previewable link, a mono kind label, and one line per link location such as `In the breadcrumb trail, as Home`, indented 16px behind a 2px left rule with the anchor text in a soft highlighted `mark`. End the list with a glass note for links that only live in the navigation.

The one thing that makes this work is consistency: if a link previews, it always looks the same, and if it doesn't, it never wears the bead. Don't add previews to external links; give those an arrow instead. Below 900px stack the hero and the backlinks grid and let the summary card scroll normally. With `prefers-reduced-motion` previews appear without the rise and the mesh stops drifting; with `prefers-reduced-transparency` panels and preview cards become near-solid.