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 and paragraphs are in League Spartan Variable and all links use the Lunchtype22 fontface.

  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 designated browser.

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