This is the result of many, many hours sat at my keyboard trying
different things, most of which failing.
Figuring out how to install Tailwind in this setup was a real adventure
with all of the resources online pulling me in two different ways.
Documentation is hard.
I definitely do prefer having the codebase use the tools available more,
instead of the old simple web dev stuff I'm used to. We're using what's
available through Svelte a lot more now.
I think that these changes will make the codebase easier to work in,
with the architecture being more familiar to regular web developers, and
these changes should also reduce friction when adding new content, which
is the main goal.
I'll never get this time back though, and I'm still slightly
contemplating whether it was really worth it.
I've made the tough decision to disable the BG animation by default.
It's just to heavy on performance and is somewhat distracting for some
people. I'm planning on making a toggle on it, but I'm not sure that
will be done by the next release.
Despite the simplicity of the commit title, this was a pretty big
change. The styling used to just go off of the system's color scheme,
but that can't be overridden. Instead, I have made a variable that
determines whether dark theme is active and made a small panel with some
buttons to change the theme. I had to change a lot of code to achieve
this and lost a lot of hair (I metaphorically pulled it out) from
writing this code.
I also changed things from legacy mode to rune mode (Svelte 4 to 5)
while I was at it, that wasn't too big.
When you navigate away from the homepage then navigate back, it will
assign a new event listener to scroll without removing the old one.
This change makes it so the event listener is removed when you navigate
away, and is put back normally when you navigate back.
So it turns out the performance improvements were completelty neglected
because my code is bad. The buffer wasn't getting rendered to the canvas
in the best way, and there were too many particles for smaller screens.
I have now added a simple math equasion to the init function that
decides how many particles are needed based on the display size. It
still needs a lot of tweaking, and a more complex function is probably
necessary for good results. I'm still trying to get this background to
not suck and actually look good.
Turns out the performance bottleneck was actually rendering the
gradients every frame, so they are now rendering to a buffer when the
page loads once and that buffer is being rendered as an image every
frame. No functionality has been changed; but it runs so much faster and
is much more efficient on mobile devices.
