fix: perf issue

Author: xirf

src/components/BaseNavbar.astro

@@ -21,7 +21,7 @@ const links = [
 let dummy = ["delay-100", "delay-200", "delay-300", "delay-400", "delay-500", "delay-600", "delay-700", "delay-800", "delay-900"];
 ---
 
-<header class="absolute top-0 left-0 w-full text-white z-999 py-6 sm:(py-12) flex items-center justify-between px-1/12" x-data="{open:true}">
+<header class="absolute top-0 left-0 w-full text-white z-999 py-6 sm:(py-12) flex items-center justify-between px-1/12" x-data="{open: false}">
 	<div class="flex gap-32 items-center justify-between flex-grow relative">
 		<a href="/" class="text-2xl sm:text-3xl font-logo">Andka</a>
 		<nav
@@ -47,7 +47,7 @@ let dummy = ["delay-100", "delay-200", "delay-300", "delay-400", "delay-500", "d
 			</div>
 		</nav>
 		<div class="lg:hidden" @click="open = !open">
-			<div class="w-5 h-5 relative ">
+			<div class="w-5 h-5 relative">
 				<div
 					class="absolute left-0 w-full h-2px bg-white top-1 duration-500 transition-all ease-in-out"
 					:style="open ? 'transform:rotate(45deg); top: 50%' : 'transform:rotate(0deg);'">

src/components/home/Expertise.astro

@@ -18,7 +18,7 @@ const expertise = [
 ];
 ---
 
-<div class="w-full py-32 overflow-x-hidden overflow-y-visible px-8 flex items-center justify-center flex-col gap-16" x-data="{i: 0}">
+<div class="w-full py-32 overflow-x-hidden px-8 flex items-center justify-center flex-col gap-16" x-data="{i: 0}">
 	<div class="border-1 border-#fff2 bg-#ffffff08 relative rounded-3xl grid grid-cols-1 sm:grid-cols-3 max-w-6xl backdrop-blur-xl">
 		{
 			expertise.map((el, index) => (

src/components/home/GIT.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<div class="w-full flex flex-col sm:(items-center justify-center) pt-32 px-8 xl:(p-32 pb-46) gap-8 relative mt-8">
+<div class="w-full flex flex-col sm:(items-center justify-center) pt-32 pb-70 px-8 xl:(p-32 pb-46) gap-8 relative mt-8">
 	<h1 class="text-5xl sm:(text-6xl text-center) font-bold font-heading">Let's get in touch!</h1>
 	<section class="grid gap-2 ">
 		<p class="text-xl sm:(text-2xl text-center) font-300 w-full">Work with me, or just say hi! I'd love to hear from you.</p>

src/components/home/Hero.astro

@@ -1,7 +1,6 @@
-<main class="w-full relative min-h-screen w-full flex items-center justify-center">
+<main class="w-full relative min-h-screen w-full flex items-center justify-center overflow-hidden">
 	<div
-		class="w-90vw -z-10 h-80vw rounded-full absolute top-0 left-1/2 -translate-y-3/5 -translate-x-1/2 blur-300px scale-y-70%"
-		style="background-image: radial-gradient(circle,#442464 0%, #9d53d6 50%, #5ee3f0 80%);">
+		class="-z-10 w-70 h-70 blur-150 -translate-y-1/2 lg:(w-90vw h-80vw -translate-y-3/5 -translate-x-1/2  blur-300px left-1/2) rounded-full absolute top-0  scale-y-70% bg-purple"></div>
 	</div>
 
 	<div class="z-90 flex p-8 lg:p-0 flex-col gap-8 sm:(gap-12 text-center items-center justify-center) text-white">
@@ -15,7 +14,8 @@
 			</div>
 		</a>
 	</div>
-	<div class="absolute w-full top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 -z-11 overflow-hidden flex items-center justify-center opacity-50 sm:opacity-100">
+	<div
+		class="absolute w-full top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 -z-11 overflow-hidden flex items-center justify-center opacity-50 sm:opacity-100">
 		<canvas width="1000" height="1000" id="herocanvas" class="w-1000px h-1000px" aria-hidden="true"> </canvas>
 	</div>
 </main>
@@ -31,7 +31,7 @@
 		const hWidth = width / 2;
 		const hHeight = height / 2;
 		const particles = [];
-		const particlesCount = 200;
+		const particlesCount = Math.min(100, Math.floor(window.innerWidth / 10));
 		const defaultPartSpeed = 0.005;
 
 		let bgOpacity = 1;
@@ -75,7 +75,6 @@
 				this.time -= this.speed;
 
 				this.θ = 2 * Math.PI * this.u + this.time;
-
 				this.φ = Math.acos(2 * this.v - 1) - Math.PI * 0.5;
 
 				this.x = this.radius * Math.sin(this.θ) * Math.cos(this.φ);
@@ -99,11 +98,14 @@
 			}
 
 			render(ctx: CanvasRenderingContext2D) {
-				const hSize = this.size / 2;
+				const x = this.x + hWidth;
+				const y = this.y + hHeight;
+				const radius = this.size / 2;
 
 				ctx.fillStyle = this.getColor(ctx);
-
-				ctx.fillRect(hWidth + this.x - hSize, hHeight + this.y - hSize, this.size, this.size);
+				ctx.beginPath();
+				ctx.arc(x, y, radius, 0, Math.PI * 2);
+				ctx.fill();
 			}
 
 			get data() {