Devlog 4: Migrated fully to pnpm 12.1 and fixed a concerning phantom dependency!

A dozen or so more hours into this project since I started logging, and I just realized I could migrate to the “better npm.” Not a very eventful devlog, but it’s weird that I just now realize I have free will. It’s literally better in every way. (What am I doing?)

What’s important to highlight, though, is that this decision literally exposed an implicit coupling in my dependencies. Brittle architecture, if you will.

Once upon a while ago, I imported clsx while using tailwind-merge and then I never thought about it again because it worked out of the box. However, I never actually installed clsx independently… It was a phantom dependency, which just so happened to resolve itself because npm just makes it work while pnpm actually cares about what’s good for your codebase. I can’t believe this kind of code smell really just started fouling now.

As a side note, I fixed some other bugs that accidentally showed up along the way, such as the Vercel badge not linking to the website properly, as well as README improvements, some of which, of course, reflect the new documentation.

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:

1. 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.

2. 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.

3. 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.

4. 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!

Devlog #2: Cleaning up the repo and polishing the developer experience

I’m still maintaining the repo! I plan to move past that soon, though.

I migrated away from GitHub Pages and fully to Vercel, renamed the project for consistency, built on top of the environment cleanup, pinned Node 24 (not sure why that was out of date), and set up workspace formatting rules that I set up a couple of days ago.

This devlog is more of an intermission, but I am looking forward to cooler updates like Three.js animations in the near future! Metaballs are looking really cool right now…

Devlog #1: Building the foundation

A month ago, I woke up one day and decided to build a personal portfolio from scratch. The funny part is that the website itself is basically just “coming soon” right now.

I’ve spent maybe 50+ unlogged hours:

1. learning web development
2. designing the entire visual system
3. setting up:
    i. Astro, Tailwind CSS & TypeScript,
    ii. GitHub Actions,
    iii. Vercel deployment,
    iv. SEO,
    v. accessibility,
    vi. responsive behaviour,
    vii. and a proper development workflow

…on a whim.

I am genuinely at my limit, but I literally just started. Coming from a systems (and game) development background, I planned to use the same things I’ve learned along the way while adapting to the conventions and weird (terrible) nuances that come with web development.

Yet, I haven’t even finished mobile accessibility for a header and a footer. Who knew you had to “rewrite” tailwind-merge itself to fix a class conflict? That alone took me several hours to figure out.

The actual site is still mostly empty, but the foundation is finally starting to feel solid.

Looking forward to some cool Three.js experiments soon, though…