thEgallery
← back
t

thEgallery

live· Sep 2026
Portfolio siteProduct pagesAstroTailwindStatic generation

One file describes every project

Each project is a typed entry in a single data file: title, summary, status, tags, and which pages it has. The homepage, the work gallery, the cards, and the little link cues under each card all read from that one list. The list of pages is also what decides which cues appear, so a project only advertises a technical page once one exists.

Theme without the flash

The toggle cycles through auto, light, and dark. A tiny inline script in the head reads the saved choice and sets the theme class before the page paints, which is what stops a dark-mode visitor from getting a white flash on every load. In auto mode it follows the system setting.

Card art that generates itself

Until a project has a real screenshot, its hover art is generated: an accent gradient, a dot texture, and a big monogram tucked into the corner. The gradient angle comes from a hash of the project's slug, so every project gets its own look and the same project looks the same on every build. Swapping in a real image later only means replacing that one component.

Whole-card links that still nest

Cards are fully clickable, yet they also hold their own links to About and Technical pages, and nested anchors are not valid HTML. So the card link is stretched over the card and the cue links sit on top of it as siblings. The hover row grows with max-height instead of a transform, which keeps it glued to the card with no gap at any point in the animation.

Fonts are part of the build

Geist, Newsreader, and Fraunces are served from the site itself, not from a font provider, which removes a third-party request and keeps the text stable. The variable Newsreader file covers all three weights the site uses, so one download does the work of three. Code ligatures come from the official Geist package.

Ambient background, no assets

The faint line art behind every page is a single inline SVG, stretched to cover a page of any length. Its strokes use the current color, so they pick up the accent for whichever theme is active with no extra CSS. The lines all start and end off the edge, so nothing closes into a shape that pulls the eye.