The spines of 12 books, including Visual Explanations, The Display of Quantitative Information, The Geometry of Type, Understanding Comics, Nicely Said, Don't Make Me Think!, Queer by Design, The 99% Invisible City, Interaction of Color, The Elements of Style, Thinking Fast and Slow, and The Death and Life of Great American Cities.

Colophon

Colophon is a designer-y word for “how it’s made”—here’s what powers eva.town.

Planted Last tended

About this site

I designed and built this site myself. It’s a home to share things I’m exploring and things I’ve built. It’s a place for me to learn in public.

All code is open source and available on GitHub. The first commit was December 5, 2018, but the earliest version of this site dates back to 2015, an era when I eschewed versioning and uploaded files manually via FTP. I’ve grown a lot since then—and the technology around me has grown, too.

Technology

This site is built using Astro. Astro handles the content-heavy views (written in MDX), but for more interactive components I use React and TypeScript.

Code is edited using VS Code on a MacBook Pro. My terminal of choice is Warp. My go-to coding font is MonoLisa.

End-to-end tests are written using Playwright, and I use Polypane to preview devices, test accessibility, and toggle user preferences like (prefers-color-scheme).

Domain registration, hosting, and deployment are via Vercel. Email forwarding is through ImprovMX. I send occasional newsletters using Buttondown.

Typography

Text is set in Franklin Gothic URW served via Adobe Fonts. Typography is scaled using a lot of math and a fluid type scale by Utopia, meaning that font sizes will interpolate between mobile and desktop to optimize for the current browser width.

Type inspiration can be found anywhere, from comic art and video games to bodega window displays, but I often return to a handful of resources:

Styling

I use Radix Colors to apply palettes consistently, ensure accessibility, and seamlessly switch between light and dark mode. Icons are from Remix Icon. Styles are written using plain ‘ol CSS. I don’t use a grid. Pixel portraits of me were created by @NullTheFool on the Pixel Art Discord. Pixelated header images are created using the Atkinson dithering algorithm via Dithermark.

Sounds

The toy synth uses samples from Mixkit, Bolder Sounds, Freesound, Soundpacks, Philharmonia Orchestra Sound Samples, Precisionsound, HearthSounds, and The Mushroom Kingdom.

Energy

I minimize energy usage on this site by avoiding unnecessary scripts (such as trackers, analytics, or resource-intensive animations) and compressing images and video.

The internet consumes a lot of electricity. 416.2TWh per year to be precise. To give you some perspective, that’s more than the entire United Kingdom. Website Carbon Calculator

As of October 18, 2023, carbon results for eva.town indicate that the home page is cleaner than 95% of web pages tested, producing 0.05g of CO2 per page view. The site uses Vercel’s serverless architecture to further cut energy consumption.

Notice an issue?

If you spot a typo, encounter a broken feature, or have a recommendation for an improvement, file an issue on GitHub.