Waxlimbs.com

My band Waxlimbs has had a variety of web presences over the years, but the time finally came for a fully custom website. I decided to take a fun approach to the layout, while designing a site which would be useful for press personnel who need a quick reference resource, and rich enough for fans of the band to dig into. The aesthetic would be minimal, making use of a simplistic, high-contrast colour scheme.

The website had to serve two purposes. For one, it needed to make sense at a glance with live gigs, contact and newsletter pages immediately apparent, but it also needed to be deep enough to allow for some playful and ongoing worldbuilding, and I needed to be able to fill it with easter eggs (see inspiration like Iglooghost’s exoportal.xyz). I also wanted to be thorough in usage of alt text, and to design the site to be keyboard navigable for those using screen readers.

I once again opted for Lume, a small static site generator paired with Vento as the templating language. I’ve used Lume extensively at this point (including for this website right here!) and wanted to tap into its array of plugins and direct support via their Discord server. It also works pretty seamlessly with TypeScript via the esbuild plugin, which came in handy for things like the lightboxes on the site. One particularly nice Lume feature I took advantage of was Lume’s ability to run server-side JS with the built-in process() method in the _config.ts file. This allowed me to do things like mark all external links with an arrow indicator and set up social icons in the footer, without needing to bog down clients on page-load.

The nav menu

The sidebar nav menu was a really fun part of designing the site, because I got to play with more exciting and over-the-top hover and focus styles than I normally would on a client project.

Chiefly among my favourite design flairs on the project, I made use of a linear-gradient to get the pink angle shape on the right side of each menu item on hover. I had originally planned to try a complicated SVG mask, but it became clear that in this case, simpler was better.

I also got to mess around with animations a bit by adjusting the letter spacing and left margin of the link on focus and hover.

For a lot of web development work, I try to keep hover and focus animations relatively calm, but this project was one where we wanted to play up some of the more fun and goofy affordances of web technologies.

The Music page

I took the approach of storing the site’s global data and settings in a data.json file, leveraging Lume’s ability to parse it in any Vento file. This was really handy for setting up basic variables like sidebar and logo width, a list of social links, and a huge array of our releases as JSON objects. I’ve wanted a “source of truth” for all our releases for a long time now, so this was very satisfying to build out. I’ve stored release dates, cover art with alt text descriptions, and purchase links, which is so handy to have as an artist with a somewhat lengthy discography, who often needs to pull this data from somewhere for marketing purposes.

Probably the most complex design work happened on the Press page. We wanted to stop using downloadable PDFs for our EPK (Electronic Press Kit), so I used some of the components I built for Nicole Calzavara’s website to lay out the page content. I mostly made use of the Image With Text component, and the Image Grid. For the latter, it felt pertinent to add arrow-key navigation between grid images with TypeScript, considering our plan to include a lot of live performance photos in grids.

Speaking of grids...

One last fun and notable thing was the table of contents which appears on specific pages (Press) and all posts. An npm markdown plugin which generates a table of contents (TOC) based on DOM headers existed already, but I was building page layouts in Vento, and required something that could construct a TOC from raw HTML while ignoring markdown post-processing. Noé Charron helped me write a script which loops through all of the titles on a page and spits out HTML based on each title's heading level, and I took it to Óscar Otero (the developer behind Lume), who then wrote an officially supported plugin which the site now uses.

In closing, it is so freeing to finally have a website completely owned and built by us after spending so many years on large platforms with rigid site builders. This project has ignited our fervor for fun little easter eggs and the web as a form of play, adding another evolving project to the Waxlimbs catalog.