This website
The why
This website is part portfolio , part digital garden and part recipe blog . It is where I collect and expand upon my thoughts and discoveries, and where I showcase what I create, craft and conjure.
See the whole structure in the Tree .
Explore projects over time in the Timeline .
Fonts
When selecting fonts for this website, I was looking to combine my love for 70’s psychedelia and gothic blackletter while keeping everything mostly legible and accessible.
Fonts used on this website:
Basteleur for the larger titles
Cooper Std is used for the second level of titles
Distro is used for the third level of titles
Wrenema is used for body text
If you’re into cool fonts look up this directory of open source fonts by womxn , this crazy foundry making free fonts , this directory of free to use and free to modify fonts and the download foundry making really experimental stuff. Last thing, here’s a cool site with all the unicode characters handy .
Color theme
This website changes color theme every season. For doing so I’m using a theming system based on the one built by Devine Lu Linvega in their older JS apps, see the code and find other themes here . It uses an svg file to store the color values. By default, the first time you load the website it will apply this season’s theme, but you can also change it by dragging and dropping a theme svg file onto it. Once you do so, it will save your preferred theme in local storage so you’ll see it when you visit again. Also note that these themes are compatible with the older hundred rabbits apps like Left , Orca or Dotgrid feel free to use them for that too!
Here are the themes I’ve made so far
Images
By default it loads low resolution dithered images (generated with Ditherit.com ) to reduce the loading time and the bandwidth needed to view the website. A toggle on the top right allows to switch to high resolution images. This feature was based upon Nate Steiner’s imageswap .
Technology
This website is basically a collection of html files in folders, generated by Hugo . It does not require javascript to run. The files are hosted on DigitalOcean and the domain on Gandi .
If you’re interested in better markup and more accessible websites, go take a look at this little guide:
Html tips by Thomasorus
“Technologies aren’t created in isolation. They are imprinted with the ghosts of their past.”
– Jeremy Keith in Resilient web design