How this site is put together.
I always wanted my own website, and I wanted to teach myself to code past HTML. This page is the part I would normally keep in a scratch file: the tokens, the components, the marks, the copy decisions, and every change I have made with the reason attached.
It is public because I found evebouffard.com and loved being able to see the thinking that went into a site alongside the site. So here is mine.
In plain terms: this is the behind-the-scenes page, the colors and fonts and building blocks the site is made of, and a log of what changed and why.
01What I changed, and why
snapshotted from the repo on every pushThe list on the left is written by the repo itself: on every push, a small Action snapshots the commits on samievargas.com into the site, so it updates when I push and never has to ask GitHub from your browser. The notes on the right are the ones worth a sentence of explanation, because a commit message never says why.
Commits
The reasons
Empty, everything I know about is shipped, and I am pushing the rest right now.
02The pieces I reuse
three typefaces, one greenYoung Serif for anything that speaks, Onest for the reading, and Geist Mono for anything that labels or measures, with paper and ink for the frame and one green for the thing you should look at.
In plain terms: one sentence under every project for the reader who skipped the technical part.
--accent: oklch(0.47 0.08 168);
03The mark, and what a link looks like
Most people meet this site as a favicon in a crowded tab strip or a card in someone's Slack. Both were the least considered part of it, so I redrew them in the same type as everything else.
Favicon
favicon.svg · favicon-32.png · favicon-16.png · apple-touch-icon 180 · icon-192 · icon-512, both maskable
Social card · 1200×630
The card used to be 347×190 and said only my name, so it arrived blurry and told you nothing. Now it carries the claim, the domain, and three numbers I can defend.
04The lines that do the work
length against the limit each surface truncates at05How it is built
Plain HTML, CSS custom properties, and vanilla JavaScript modules, deployed on GitHub Pages, with no framework and no build step, which was the point, because I wanted to understand every part of it rather than inherit someone else's structure.
The two LLM apps on the site, Signal and Brain Dump, talk to the Anthropic API through a Cloudflare Worker, so the key stays on the server and the front end can stay public, and it is the same pattern both times.
I built it with Claude Opus, and I am saying so here because the alternative is pretending I did not, and what I brought was the judgement about what to cut, what to prove, and which numbers I am willing to defend.
HTML · CSS custom properties · vanilla JS modules
Anthropic API behind a Cloudflare Worker
dbt on BigQuery · Python · folium
GitHub Pages · custom domain · GA4
Claude Opus, and my own judgement about what to cut