Devlog #3: 10 hours of bugfixes, QoL improvements, and… METABALLS!!!

This devlog seriously took me forever to do, and I still haven’t even gotten to designing and writing pages.

First of all, I seriously did not expect to go nearly 10 hours without uploading a devlog. A lot of the time was actually spent just trying to figure out why the Prettier plugin for Astro wasn’t working while overhauling my project configuration… Seriously. I still don’t entirely know why.

So, as you may have noticed, what’s new is that now there are cool metaball animations! They merge together and stuff, and it’s so cool, and it’s all thanks to this article. I just adapted it and just made floating balls, with my own tweaks, of course.

In no way is any of anything done. There is still a long way to go, but everything is slowly but surely falling into place…

Anyways, since there was so much work put in at once, here’s a rundown of what’s up:

chore(dx): optimize project layout structure and update formatting configuration: The main philosophy here was to clean up my project workspace before moving onto the big stuff, so that involves cleaning up Prettier configurations and shifting reliance: .vscode/settings.json -> .prettierrc.mjs -> .editorconfig. That way, everything becomes minimal, and I don’t end up with a maintenance nightmare. Plus, I made some tiny additional polishes, such as to the README.
style: standardize tokens matrix and streamline base component layouts: These changes mostly involve improving the token standards that I have established across my webpages. For example, rather than dealing with class conflicts using tailwind-merge, I’ve kept things more minimal and decided on cleaner conventions. Also, I realized I could tokenize some additional values.
fix: resolve theme contrast boundaries and polish navigation assets: This one was a problem I actually missed, and I’m glad I caught it. I forgot to consider that the logo SVG I was using for my header was adaptive to theme. Depending on the user’s theme, the logo changes appearance. Rather, it should strictly use the dark theme. I wrapped that in a Logo.astro component and realized some additional improvements to Layout.astro.
feat: implement high-performance fluid matrix canvas background: Of course, the best for last. I already decided I wanted to use Three.js so what I did was I actually found a metaballs animation online that I really liked. I ended up using it as inspiration and created my own floating metaballs. This was one of the coolest effects I’ve ever done! Code-wise, I’ve set up a basic render pipeline.

Overall, this was a very ambitious devlog, but it still lived up to greatness! I tried to maintain my project as best as possible, and that was honestly the hard part of this project. As a next step, I think I should really start turning it into an actual website… Cheers to nearly 10 hours of work!