A little glitch
I've been slowly working away at developing a portfolio, and I was starting to get a bit lost. I decided to seek out some examples and get a bit of inspiration. I happened to stumble on a couple of portfolios that had a bit of 'glitch-aesthetic'. As an ex-graphic designer who grew up in the era of grunge design, I love these little flashback reminders to another time, where design wasn't flat or fucking liquid-(gl)ass. This was a time when digital was mediated through the analogue - that 9 times out of 10, your problem was a dodgy connection or cable.
I wanted to do something quick and get a win on the board, so having played with Claude a little, I thought, let's see what it can do. I pointed it at a site whose effect I liked - michaelvillar.com - and one that should be easy to replicate. It had a logo as an SVG and so did I. So I pointed Claude at the site - and shared the javascript file I dug through the source to find - and asked it to replicate it for my site. I got a nice set of code, and after tweaking some CSS has it all working. I asked Claude to abstract the code so that I could apply it to other elements of the page - and it quickly created a reusable utility that can apply the glitch effect to any element. I've got it working on hoverand on a random time loop - but just on the HSM logo.
I am just beginning down the road on this project - but I am keen to pull in a few of these little visual elements and move beyond the flat and static in the final design. Will see where this all goes!