colophon

21/05/2024

So, the first thing you may be asking…what’s a colophon? To be frank, I didn’t know what a colophon was until I ended up reading Eryc’s, where it essentially acts as a neat explainer of the different technology choices related to a website, be it: philosophy, typography, inspirations, framework choice and use of libraries. When making reference to the IndieWeb’s definition, many colophons are concise in nature, in appreciation to how they are used in publications.

Now that we’ve got the definitions out of the way, let’s actually get into the colophon in itself.

Philosophy

As mentioned in my first blog post, I’ve always had an appreciation for minimal sites, where it forced me to be deliberate with what I wanted to display on my site, with simplistic styles that just felt perfect. My goal with this site is to hopefully wow you, the end user, in the same way that I was wowed when I first caught sight of these simple, but elegant sites.

Additional focuses include:

  • Simplicity. Not only in the aesthetic of the site, but also in the file structure, the used technologies, essentially all aspects of the website. Everything should have it’s own specific purpose, with any unnecessary bloat being removed.
  • Performance. Quality content should be delivered to the end-user quickly, where this means very minimal usage of JS, and prioritising HTML & CSS.
  • Scalability. Creating a personal site is a serious undertaking, where making use of integrations and libraries that e.g. allowing for the easy management of blog posts means that there is minimal friction when it comes to adding content to the site. Ensuring simplicity often goes hand in hand with guaranteeing this.

Typography

The site originally used Helvetica Neue as the sans-serif font, where I opted to change this to the beautiful (and open-source) Nacelle. I believe that typography is a critical component towards giving sites “character”, with me having the desire to convey this “character” across all operating systems (even if it increases the network payload of the site). I very much believe that Nacelle does an excellent job in capturing the beauty of swiss typefaces, with it also being a great match for the selected serif font: Newsreader. I fell in love with this font upon immediately seeing it in Glenn Hitchcock’s site, and the rest is history. Commit Mono was selected as the monospace font, where I’ve been using this for a while in my code editor (VS Code). I’ve always been very picky when it to monospace fonts, but this font’s legibility blew me away, making for a very easy switch from Geist Mono. It also has an amazing showcase website.

Technology

This site was built using Astro as the static-site generator, TailwindCSS for styling, and TypeScript for creating helper functions. This site was deployed using Cloudflare Pages.

The dynamic OG generation for blog posts is powered by Satori.

This site uses Loglib for cookie-free, privacy-friendly analytics.

Inspiration

This site wouldn’t be what it is without the exceptional work of individuals such as Paco Coursey and Rauno Freiberg, where I was gobsmacked by the simplistic beauty of their sites, causing me to re-think how I wanted to approach the task of nailing down the design of the site. It was their work that led me to the path of wanting to chase simplicity at all costs, where I’ve had a great amount of fun realising the renewed vision sparked by these individuals.

I’d like to especially thank hasparus with his work on zaduma, and nexxeln with his work on nexxel.dev, where the initial concepts of the site was very much inspired by both of these sites.

I’d also like to give praise to (in no particular order):

an(other) aside

Again, I’d like to thank you for reading the entirety of this post, where it means a lot to me. I sincerely hope that you have found joy in reading my writings.

I was planning on publishing a post on my development experience ahead of this if I’m being honest with myself, but having an understanding of the different pieces that made this site what it is, and getting that out there ended up being the greater priority.

The dev experience post will come in good time though, I promise.