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!
Comments
Comment on this blog post by publicly replying to this Mastodon post using a Mastodon or other ActivityPub/​Fediverse account.
No known comments, yet. Reply to this Mastodon post to add your own!