Design
The squarish, block based design is supposed to imitate retro-futuristic computer interfaces such as Metal Gear Solid (V), Chaos Theory or Nier Automata:
MGSV UI
Splinter Cell HUD
The site itself is built in Jekyll, and it uses hamilton as a base theme, using CSS from Yorha CSS (https://github.com/metakirby5/yorha) to provide styling.
I'd read some blogs with neat sidenotes for links, upon researching how to do this I came across references to Edward Tufte. Projects such as tufte-jekyll provided the base for this site, as well as some some useful code snippets. In the end, these 3 influences: hamilton theme, yorha CSS, and tufte-jekyll are all mashed together in a horrific chimera of CSS, js, and ruby jekyll plugins.
You can see a post highlighting the features and content styles here: Tufte style post, plus some custom jekyll plugins i wrote for scrollable + dropdown code blocks. Overall each post should make good use of images of different widths, plus sidenotes, resulting in something like this:
This actually got me reading Tufte's books on design, Visual Explanations, Envisioning Information, and The visual display of quantative information. These are beautifully produced, informative, and a joy to read. Although they mainly focus on images, tables, and graphs or charts.
Although I'm not much of a designer I'm proud how this blog's design has ended up. I do my drawings in Excalidraw, which provides a really intuitive interface that can produce "hand-drawing-y" images. Over time, especially since LLMs have come about, I've been trying to incorporate more interactive elements such as embedded HTML diagrams and matplotlib charts, to make it feel less dry.
After a while I realised that one of the inspirations for this blog, and my excalidraw-y diagramming style was this book I read as a kid: The way things work. It explains mechanical and scientific concepts with fun, engaging illustrations, and got me interested in science and technology. The illustrations in there are infitnitely better than mine, but I think I can trace back some of my wanting to understand and draw the shapes and interactions of systems to this. For example check out this amazing illustration of pin & tumbler locks:
The illustrations make frequent use of mammoths, a motif that hasn't made it over to my drawings, but I remember loving the inclusion of mammoths in that book, and the fun it added to diagrams. I found this good article about the books and their illustration that nicely summarises how the humour in the pictures helps readers:
epigraph 'The mammoth is us; a little bewildered but trying hard to make its way in a complex world. [...] Like the mammoth, the inventor seeks to humanise our attempts to understand technology and render it comprehensible; even if the answers gained are sometimes wrong. His descriptions are not always right, which on the surface could seem misleading. However, his story is always clearly indicated as a secondary and intentionally humorous tale
https://www.christopherroosen.com/blog/2021/9/5/david-macaulay-neil-ardley-the-way-things-work
Similarly, I'd like to think my tails of failing to solve challenges, and frequent dead ends provide a more approachable narrative in learning how things work. There's another great quote from that article later on that discusses the method of communicating complex topics with illustrations:
The goal of such explanation isn’t to understand every aspect of a machine or technology, but to grasp its core ‘zeitgeist,’ its operating principle. The goal is not for people to be able to build a complex device, like a gearbox or telephone, but to understand how, in principle, these these things work. Crucially, its mean to encourage people to be curious and interested, to want to know more.
I think this is also what makes me draw all the crappy excalidraw images, wanting to break down the systems to their component parts, and put them back together.
Depending on the platform you're reading from, you may notice the site doesn't render well on mobile. This is because I hat every second I spend on CSS / HTML, and I often hardcode widths etc as pixel counts in the source. Apologies.