Dylan Smith

What’s with the sheep?

One of my objectives doing this redesign is to “add some personality back to the my little corner of the web.” I’m finding that I lean heavily toward pretty conservative colour palettes, so I think most of that will take the form of easter eggs and microinteractions.

The first thing I did when I was code the sheep in the footer. As I mentioned in an earlier post, it’s from the cover of Minor Threat’s Out of Step, a classic hardcore punk album. I’ve been using a stylised, pixelated version of it as my favicon for years so it seemed like an obvious choice to promote that imagery to the main page. (Many years ago I tattooed the sheep on my own leg using a machine my friend bought on Craigslist.)

Cover of Minor Threat’s Out of Step album

The sheep itself is a bit boring so I thought to add the scratch-off effect. The whole rectangular div has a background image. The black squares have background-color: black (not actually black but the dark grey colour I’m using) and the rest have background-color: white. Hovering a black square fires a bit of JavaScript that adds a class with background-color: transparent, revealing the background image (a headshot of me).

Here it is on CodePen where I first made it work. It’s about 23kb worth of spans inside of a parent container using display: grid. I think this could be reduced significantly. When I started, though, I thought span tags would be lighter weight and easier to manipulate than an SVG with each pixel as a separate element. I also don’t have any other heavy assets like webfonts on the site (yet) so it felt like an acceptable price to pay.

Listen to the album on Spotify.

Newer Visualising blog article frequency Older Fresh coat of paint