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 + 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. Guestbook entries are stored on Turso.

Code is edited using Cursor on a MacBook Pro. My terminal of choice is Warp.

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

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

I shared more about the hardware I use on Uses This.

Typography

Text is set in HEX Franklin Variable with code in MonoLisa. 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. 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.

Accessibility

This site aims to conform to the Level AA accessibility standards outlined in the WCAG 2.2 specification. If you experience an issue with accessing any part of this site, please file an issue and I’ll do my best to correct it.

Privacy

I collect basic, fully-anonymized page view analytics using Fathom. I don’t want your data! If you don’t believe me, take a look at the public analytics for eva.town. On the flip side, if you’d like to share who you are and where you’re visiting from—just for kicks—you can sign the guestbook.

Notice an issue?

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