Mastodon

About this bookshelf

This bookshelf is a running list of the books I've read since I started tracking my reading in 2009-ish. When available, I've also included any notes or highlights I captured as I was reading.

Made by Kyle Johnston

Design notes

Inspiration

This project is an extension of my 'everything I read this year' posts (2020, 2019, 2018). The end of year posts were a lot of work, so I created this website to save time ¯\_(ツ)_/¯ and maintain a real-time view of my reading journey. I was inspired by projects like reading.lol, arcana.computer, and Highlights.

Navigation

The colorful navigation bar is inspired by book spine design. On large screens, the vertical orientation emphasizes this concept.

Typography

The headline font – Roboto Flex – is a variable font that enables the ultra-compressed look of the title on book detail pages. Read more about its extensive features or get it from Google Fonts.

The inspiration for the headline typography came from a classic Herman Miller ad

Headline Test

Design inspiration: Herman Miller ad

Tooling

Astro – a fun framework for building fast websites

Figma for concept design – Figma file

GitHub for tracking changes and triggering builds

Netlify for hosting with automated builds from GitHub commits

Tailwind CSS for styling

Visual Studio for coding