Colophon

Or, how this site is made.

Implementation

I built this version of the site with Eleventy. You can find the entirety of the implementation (and indeed the entire history of the implementation) on GitHub. I’m using it with the following plugins:

Typography

Perhaps my favorite part of web design, and also the part with which I spend the most part fussing.

Context Typeface
Body text Sabon, designed by Jan Tschichold in the mid-1960s as a Garamond revival. In my opinion, the most beautiful Garamond in existence. Licensed via [Fonts.com].
Headings Cronos, designed by Robert Slimbach in 1996. A nice contrast to Sabon with its digital-era roots. The typeface I’ve been using on my site the longest at this point! Licensed via Adobe Fonts.1
Code Hack, designed by Chris Simpkins in 2015 as an extension of the Deja Vu/Bitstream Vera lineage. Licensed in parts under the MIT License, the public domain, and Bitstream Vera License (see details here).

Inspiration

While working on this design, I took more-or-less-direct inspiration in a variety of ways from some of my favorite current or previous designs around the web:

  • Tim Brown

  • Ethan Marcotte

  • Trent Walton

  • Craig Mod—a truly wonderful site, but I actually loved the previous design iteration even more.

  • Jen Simmons—as with Mod’s current site, I really like what she’s doing on her site now—it’s all sorts of fun layout-wise—but it’s quite distinct from what she was doing when I was stealing ideas from her late in 2018!

  • Reda Lemeden

  • Jason Santa Maria—from whom, if I recall, I originally got the idea of a versioned website.

All content is © Chris Krycho, 2019 — Creative Commons Attribution 4.0. Software components are MIT-licensed. For the full license text, see LICENSE.md


  1. Longtime readers may recall (and new readers may be curious about) my deep frustrations with this situation. Nothing there has changed—but I ended up paying for Adobe’s Lightroom package when I picked back up photography, and it comes bundled. So here we are. ↩︎