Colophon

How did this get here?

This site is built with Eleventy, a simple static site generator that does a lot. I've got a pre-build step to process my design tokens, bundle my CSS partials with LightningCSS (no Sass!), and minify JS with ESBuild. Font scales are calculated with Utopia, the base shadow styles are generated via Josh Comeau's Shadow Palette, and the bouncy theme menu opening animation is built via Jake Archibald's Linear Easing Generator. Outside the build, I use SVGOMG to optimise SVGs, and Glyphhanger to subset my fonts. You can view the source code on GitHub to see how it's all set up. I only ask that you don't steal my code and slap your own name on it.

Hosting & Domain

The hosting is provided by Netlify and the domain is registered with Namecheap, though I'm thinking of switching to something else next time renewal rolls around!

Synthesizer

The synth on the About page is based on Bret Cameron's tutorial, and extended with envelope shaping and lowpass filtering by peeking at Daniel Schulz's code.

Themes

My website has distinct themes with distinct typefaces (some paid, some free) and visuals, making it, in effect, my very own CSS Zen Garden. You'll find some more details below for each theme (the Dusk, Campfire and Cyberpunk themes are remixes of themes from my website's previous version, so they may look familiar), but if you still have questions, please feel free to ask!

First off, the homepage wordmark for my name is a custom edit of the Sprat typeface with everything tightened up and minor corrections. When I first saw it, I knew I had to use it: it's got a vibe reminiscent of Stephen King books and other designs using ITC Benguiat (you know, the Stranger Things logo!). The reveal animation is very simple but does the trick and is pretty performant compared to the last version!

Dawn

The default Light Mode theme is set in Canela Bold for headings and overall is aiming for some vintage print design, hence the off-white background and sharp red contrasting headings, going for an old book that's sat in the sun too long kind of feel. (ironically enough, I sampled some colours from a gorgeous OmniChord OM84 electronic instrument)

Vapor

This vaporwave theme tries to stay minimal while being loud with colours. The headings are set in Xahn Mono Italic with exaggerated tracking, a serif-monospace hybrid that looks lovely.

Vintage

Who doesn't love some gold-and-burgundy colours? Old school computers and gaming consoles had those vibes going, and the Nintendo Famicom especially… which inspired most of this theme. Using a very Swiss-like typeface for headings aptly named Switzer as the Nintendo font is a little chonky and perhaps copyrighted!

Quill

This is my peace-and-quiet theme. It uses Gambarino for headings, reminiscent of Apple's Garamond Condensed, and is very desaturated, nearly black-on-white-but-not-fully. The footer illustrations are from Hamonshū, that I only know of thanks to Eric Meyer, who uses those exquisitely well on his website. I also took a page out of Sara Soueidan's book with the <hr> element, so I guess this theme is for homages!

Dusk

The default Dark Mode theme is set in MD Nichrome Bold, which has that sci-fi look I'm after (it look me a while to settle on it after testing several matches!). The neon glow from buttons and the synthwave-y <hr> (horizontal rule, horizon… get it?) elements are pretty cool, and the footer just… belongs.

Cyberpunk

The cyberpunk aesthetic is pretty fascinating, and the game Cyberpunk 2077 made great use of that. So I made great use of that game's interface, reusing the same Rajdhani typeface and other visual cues. I drew a little nonsensical circuitboard for the footer, it looks right at home.

Campfire

I want to be more outdoorsy, but living in a city, this will have to do for now, with a theme heavily inspired by US national parks and more specifically, the art for the Firewatch video game by Olly Moss. I used the Chinook typeface to get the retro vibe I was after, and made a vector landscape of Mont Blanc, the mountain peak close to my hometown of Lyon, in France. (Alistair did this too, but like, way better)

Director

If you've every played Control, this one will seem familiar. It draws from the game's look and feel (brutalist with hints of colour), and the inverted pyramids. The headings are set in TeX Gyre Adventor, a close match to the original ITC Avant-Garde Gothic used in the game.

Thank you so much for stopping by!