Colophon

Stack

Back End

Built using 11ty static site generator with nunjucks templating, because I want something low-maintenance. Articles can written in markdown with the option to include custom HTML, so the best of both worlds. Hosted on Github and deployed using Github Pages, but planning to move to Gitlab. Link to Github repo

Front End

  • All screenshots are of software I have worked on.
  • All other images are my own creations, mostly drawn in Figma.
  • All animations are either screen recordings of my software or generated in Figma Motion based on my prototypes.
  • The interactive molecule was rendered in rdkit.
  • I'm using alpine.js for most interactivity, because it's just nice to have your interactions defined inline.
  • The smooth-scrolling gallery is provided by splide.js because writing a good, smooth, interactive gallery in vanilla JS is beyond by JS ability.
  • Material Line Icons by Vjacheslav Trushkin (sun, moon, left/right arrows, download), they do wonderful dual-tone and animated icons, MIT license.
  • The light switch sound came from Switch ON - small light.wav by MastersDisaster | License: Attribution 4.0

Tool List

AI Usage Policy

This is my personal policy about AI usage. I believe in being honest about where LLMs were used in generating code/content. I have used LLMs to brainstorm, validate my code quality, help with the JS and automate writing much of the CSS boiler plate (which is why the CSS is real mess and needs refactoring, when I have time). None of the images or text are AI-generated and only a so-called "AI background removal tool" has been used for image editing.

Easter Eggs & Cool Things

Light switch animation Manually switching between dark/light mode on the home page activates an SVG animation whereby the dude at the desk turns on/off his lamp. This is literally just CSS tied to a named element in the in line SVG activated by the vanilla JS dark mode logic. It's simple but it took hours to do. Some may say this was a waste of time but I say the time you enjoy wasting is not wasted time.

Steam animation The steam coming off the cup of tea on the hero image is actually an SVG fractal noise filter; I want to learn more about these, because they are crazy powerful.

Dynamically changing SVG colour Getting the stick figures (and CV logos) to change colour dynamically betweeen themes, required in-lining them and using a CSS variable. This is annoying because updating each SVG now requires manually editing the SVG code instead of just getting a raw extract from Figma. I don't recommend this approach.

Inspiration

Credit where credit's due. I believe in sharing your sources. The design for this site was inspired by several great creators who you should check out
  • The stick figure design is of course based on Randall Munroe's ever-genius XKCD and the associated font is literally Randall's own handwriting.
  • The cream and charcoal styling and Bricolage Grotesque font was basically stolen from Zen browser (which incidentally is my favourite browser)
  • My good friend and incredible UX designer, Dev Patel, has a wonderful portfolio, I stole the design of several of his components
Back to Home

Keyboard shortcuts