Massive update today!

To start with, I didn’t really like the morph sidebar I made last time, so I made the hard choice to remove it.

I looked at some Hack Club event websites, and found out many of them are using custom image assets for things like container borders and buttons, I like that idea, it’s cool to make hand drawn assets and use them on your website, it gives your website something special. So of course I tried it myself, First I did some research on how it works and how you can make custom section borders, I found this guide: https://css-tricks.com/revisiting-css-border-image/

This guide explains very well how custom borders work and how you can use it Of course I saved it to my personal Readeck ;)

I started with just drawing a simple square in GIMP (just because I already know how to use GIMP) and then I applied it with CSS to my sections like in the guide, this worked, but I didn’t look that good, so I removed the CSS blur effect from earlier and used image opacity in GIMP to create a blue semi-transparent section, and I added a thin extra line to the border to make it look better.

I wanted to use this on my LastFM music widget as well, but that didn’t work because the background needs to be applied with CSS with colors from the currently playing songs cover image, so there I can’t use the same border image as background. The problem here is that the background is then going outside of the border lines, after MANY ways of trying to fix this I found the solution, I made a black and white version of the image and updated my javascript to replace the black and white with the correct colors and then inject THAT image. This works extremely good, it’s looks so good now!

When that was finally done, I did some last changes, made assets for buttons, lines, the navbar, the other cards, etc, all the components do now have a custom drawn border.

I ended with adding new fonts, all the normal text is now Jetbrains Mono Regular (cause why not, I use that everywhere) and the headings are my own handwriting! I used an online tool to make a hand drawn font and used that font on my site! (MyDamnFont)