It seems as the "spotlight effect" causes most of the performance issues. The mousemove event seems to trigger a reflow when you hover some of the sections and/or scroll down. There's also a constantly running CSS animation that uses a lot of CPU time.
I have no idea why you're setting the style property of those elements every time you move the mouse, but I suppose that's what the Astro component you're using does.
Also as a hint: Never use subpixel values in CSS, they'll make everything slow. You could've used the JS "value | 0" or "value.toFixed(0)" trick to make it an integer and to prevent the floating precision from messing up the stylesheets. Some browsers (like Safari) will ignore values when they have more than 4 digits after the dot.
I'm writing this because you're setting the style property to something like this (copied out of the Inspector):
> radial-gradient(500px circle at 325.25px 188.38333129882812px, var(--spotlight-color, rgba(139, 92, 246, 0.18)), transparent 50%)
I have no idea why you're setting the style property of those elements every time you move the mouse, but I suppose that's what the Astro component you're using does.
Also as a hint: Never use subpixel values in CSS, they'll make everything slow. You could've used the JS "value | 0" or "value.toFixed(0)" trick to make it an integer and to prevent the floating precision from messing up the stylesheets. Some browsers (like Safari) will ignore values when they have more than 4 digits after the dot.
I'm writing this because you're setting the style property to something like this (copied out of the Inspector):
> radial-gradient(500px circle at 325.25px 188.38333129882812px, var(--spotlight-color, rgba(139, 92, 246, 0.18)), transparent 50%)