Colophon

A note on how this site is made.

This is a small, static site. I wanted something that loads fast, reads well, and is easy to keep around for a long time. No frameworks downloaded to the reader, no cookies, no consent banner — just lightweight, privacy-friendly analytics (GoatCounter) so I can see roughly how many people stop by.

Stack

FrameworkAstro 5 with MDX for posts that need richer components
StylingHand-written CSS with custom properties for the dual theme. No utility framework.
HostingGitHub Pages, deployed via GitHub Actions on push to main
Sourcegithub.com/SylvainEstebe/SylvainEstebe.github.io

Typography

BodyFraunces — a warm variable serif with optical sizing, used for prose and display titles
UIInter — sans-serif for navigation, metadata, code blocks' line numbers, and section eyebrows
MonoSystem monospace stack (SF Mono / Menlo / Consolas) — no extra download

Design notes

The warm cream palette (#fbf6ec light, #1a1814 dark) is a small rebellion against the cool grays of most academic sites. The accent stays blue (#39468a) because some habits are worth keeping.

Blog posts use a Tufte-style layout: text in a comfortable reading column, with side notes floating into the right margin on wide screens and collapsing to click-to-expand on mobile. The pattern is borrowed from Tufte CSS, the spirit from Maggie Appleton.

The photo gallery uses a justified-flex layout — each image's intrinsic dimensions drive a CSS flex-grow calculation so every row fills the page width, without any JavaScript. Adapted from the astro-photo-grid starter.

Performance

A typical page ships under 30 KB of HTML + CSS to the reader. Images go through Astro's asset pipeline (responsive WebP, lazy loading). The only first-party JavaScript on most pages is the theme-toggle switch — about 20 lines; analytics run on a tiny third-party script (GoatCounter, ~3 KB, no cookies).

Influences

I borrowed shamelessly from Maggie Appleton (the warm cream and serif typography, the side-note pattern), Tufte CSS (marginalia), and the broader digital gardens movement (the post/note distinction).