My main site, vaxerski.xyz, has finally been updated after 2 years of pretty much no change.
The 2020 website, although having I'd say a pretty nice and simple design, had some flaws.
Firstly, it was VERY minimalistic. I mean, three links and a video. That's it, pretty much. So, this time, after getting my lazy ass to finally make a redesign, I've come up with, in my opinion, way cooler design for the 2022 facelift. Go see it, if you haven't!
In this blogpost I'd like to say a few words about how I achieved the cool stuff that moves.
The intro - ink splatters.
Ink splatters that you see in the beginning weren't difficult to make - with my After Effects experience they were a 15-minute job. However, After Effects exports to AVIs. AVI is a format for videos, that After Effects uses in order to have LITERALLY zero compression. Every frame is a lossless image, with no itra- or interframe compression. This means the output of a 10 second clip is in excess of 6GB on disk. That's not ideal. Well, having a buncha experience with that, I quickly did what I'd usually do, plop the video into Handbrake, an excellent program for quick and good video encoding, but the output was... well, the thing is Handbrake doesn't support alpha. Neither does MP4. as far as it seems right now to me! I've seen people argue about that on Reddit though, so I won't be the one to judge. What worked for me, was to instead of making it to mp4 with Handbrake, I instead used the good old ffmpeg to make it into a webm.
If you want the command, here: ffmpeg -i input.avi -pix_fmt yuva420p output.webm
So, that was sorted. Next, I moved onto the animated ink splatters on the bottom of the page.
In the beginning, I tried to simply make a video, where the splatters grow over time, and adjust its time at scroll. This was BAD. It was so slow and choppy it looked horrible. Instead of that, I exported the video into 62 PNG frames, and made a script that changes the opacity of the correct frame to 1, and to every other to 0 on the scroll event. This worked pretty well, and since opacity doesn't trigger layout (as far as I know), it's smooth as well.
So that's two out of the three.
The third video was the easiest when it comes to coding, but the hardest when it comes to making. Coding the parallax on it was very simple, as I've reused code from my past projects. I am using a perspective-based CSS parallax, because if you do it in JS, I hate you. CSS parallax = smooth and light, JS = not so much.
When it comes to the making of the video, it took me a good hour or two to make in After Effects, and then
to render. Yea, not pretty. It was a 1440p, 13s 30FPS clip.
Why? because of the sheer amount of effects, and the fact that some of the subcomps were over 8K.
Why? because of zooming in an out, at multiple stages. I wanted to have clear pixels, I can wait an hour for that :P
So, that'd be mostly it for this 2022 redesign. It seems like it's become a bi-annual tradition now. 2018 - first design, still available at vaxerski.xyz/legacy. 2020 - second design, now available at vaxerski.xyz/2020. and 2022 - current design.
I'd also like to mention, just like I do in the footer, that the inspiration for the design comes from "Unrequited" by GamersTent. I like to mention those.