Colophon

Snowfall animation adapted from a demo by Alvaro Montoro, now available (and customizable) at snowfall.css.

Principles

I find it easy to make design choices when I’ve already chosen a set of constraints/rules to adhere to. For this version of my site, I chose the following principles:

I. Speed

The internet has gotten faster, but average page load times have stayed the same. This kinda sucks, and this site tries to lower that average.

It tries to achieve an seamless SPA-like user experience while being a collection of regular HTML pages. You can see more about how I achieved this in the Features section.

Pages weigh an average of 15kb after the fonts have been cached. Thus, the majority of it’s load time is taken up by latency, not bandwidth. That, in turn, is minimised using Netlify’s global CDN and prefetching + caching.

II. Thoughtfulness

How can I make navigation as seamless as possible? How can I maintain a high level of information density with a minimal (yet beautiful) layout? These are the questions that guided most of design for this version of the site.

There are also annoying bugs and imperfections that will pop up across platforms and viewports, caring for quality means choosing to care about them. If you see one, please let me know.

It might seem wasteful to put so much effort into tiny details like “should the transition delay on this hover efect be 0.4s or 0.45s?”, but I consider it to be reasonable investment.

III. Simplicity

Simplicity does not imply minimalism. Nor does it necessarily involve strict rules like “No Javascript or animations!”

The real goal is to have the site be as easy as possible to maintain, modify, and add to. To pick a simple set of guiding rules, and stick by them whenever possible. Let constraints guide creativity, etc, etc.

In my case, this involved picking a simple folder heirarchy, basic color palette, one stylesheet, and zero external dependencies or JS frameworks.

Content

I hate doing things that I know I won’t care about in a year (or more) from now. So the idea of a long site was an obviously appealing one.

Target Audience

People with too much time on their hands.

Or anyone who cares about the web, economics, math, people, ideas, terrible advice, magic ink, or me.

Inspiration

These are some of the people from whom I’ve stolen ideas for specific design elements, data representation, page types, content and philosophies of site-building.

Stack

This site is generated using Hugo, chosen for it’s speed and feature set. The layout uses a custom theme (that I intend to make open-source in the future) and uses no external libraries or frameworks.

This setup costs me exactly $0 a month for hosting, and $10 a year for the domain.

Features

The design choices and constraints were largely decided by the principles set out above, and manifested themselves in certain specific ways:

• Table of contents: The main design goal for this site is making it look and feel as much like a book as possible, starting with a table of contents for the homepage. The CSS for the list items was stolen from Nicholas’s explainer, and adapted for my uses.

• List of page headings: To aid navigation, a list of page headings is auto-generated by Hugo’s .TableOfContents variable and added to the center column. It is available on horizontal iPad and desktop screens, but is hidden on mobile.

• SPA-like navigation: I just use a small script to store the leftmost menu’s scroll-position to LocalStorage and retrieve it on page refresh. Page loads also use an animated fade-in effect to make naviagation feel smooth.

  Navigation is sped up by using instant.page, which prefetches pages whenever you hover over a link. I use an inlined, minified version of the script so as to avoid loading an external file.

  (Check out Brian’s site for a better example of this personal-website-as-SPA idea, but that’s an actual Next.js SPA, and requires so much effort).

• Information hiding: Hovering over page numbers will reveal the description for that page. Allows me to maintain higher information density alongside the clean book-like look.

• Starterpack: Inspired by Aaron Lewis, . The gallery grid uses CSS from Chris Coyier’s tutorial.

Media

Images are compressed using Squoosh and uploaded directly to the site repository. Netlify’s CDN is responsible for delivering and caching them alongside each page.

Fonts

The main font used across this site is Petrona, designed by Ringo R. Seeber. It’s one of the few fonts that has the full range of possible font-weights, for both italic and normal styles.

They were converted from .ttf to .woff2 files using Google’s woff2 library. This takes the file size from 217kb to ~90kb.

I then used pyftsubset to reduce the number of glyphs to just the Basic Latin (0020-007F) and the first half of General Punctuation (2000-2038) subsets, which brings them down to ~45kb.

Font files are served and cached locally by Netlify.

Analytics

Site analytics provided by Umami, a really cool self-hosted, open source, GDPR-compliant analytics project. This means no cookies, tracking or personal data collection.

I host my version using the generous free tiers on Netlify (server) and Supabase (database).