A comprehensive dive into the design, creation and philosophy of this site.

Site Philosophy

This site exists to scratch an itch I’ve long had. Sharing stuff on social media has never been my mojo, I’ll often post my photography, however I yearned for something more expansive and interesting, so I made a website.

The design of this site was made with one goal in mind: create vibrant a site that looks good and is fun to use, with the smallest file size possible. This meant several things, for one, no javascript but also no media queries to change the layout. Fonts are used, but are extremely slimmed down to reduce filesize. Combined with optimising images, it means even the largest page on the site is under 800kb and the smallest is just 45kb.

Design Language

3 words, corresponding to their font names: Barlow, League Spartan and Lunchtype22

The site has a simple, consistent design language to make discerning the content of pages easy. Page headers use the Barlow fontface with a weight of 500. Text, paragraphs and links are in League Spartan Variable.

Links have a set of rules to follow depending on where it is, and what it links to. Inline links look like this, having an underline for visibility. Links in lists have one of two operator prefixes to display if a link is external or internal. “∙” operators mean the link connects to somewhere within the site, while “⬩” means the links is an external url and will open in a new tab. “◼” is designated for gemini content and should open in your browser of choice.

Inspirations and Mentions

Lizbeth Poirier’s beautiful site Ritual Dust was a big inspiration and help when designing the site, Lizbeth has an incredibly helpful collection of resources that I learned a lot from including Fonts, Html and Css. Thomasorus’ Html Tips guide is a great read if you are building your own site with minimal knowledge. Lastly, I used Rekka Bellum’s great imagemagick guide to create a script for optimising my images and reducing their file sizes.

Further Reading