feat: remove StarsCanvas component and replace with Stars component f…

…or improved performance

v2/src/App.jsx

@@ -1,12 +1,12 @@
 import { BrowserRouter } from 'react-router-dom';
 
 import About from '@/components/About';
+import StarsCanvas from '@/components/canvas/Stars';
 import Contact from '@/components/Contact';
 import Experience from '@/components/Experience';
 import Feedbacks from '@/components/Feedbacks';
 import Hero from '@/components/Hero';
 import Navbar from '@/components/Navbar';
-import StarsCanvas from '@/components/StarsCanvas';
 import Tech from '@/components/Tech';
 import Works from '@/components/Works';
 

v2/src/components/canvas/Stars.jsx

@@ -0,0 +1,47 @@
+import { Suspense, useRef, useState } from 'react';
+
+import { PointMaterial, Points, Preload } from '@react-three/drei';
+import { Canvas, useFrame } from '@react-three/fiber';
+import * as random from 'maath/random';
+
+const Stars = (props) => {
+  const ref = useRef();
+  const [sphere] = useState(() =>
+    random.inSphere(new Float32Array(5000), { radius: 1.2 })
+  );
+
+  useFrame((state, delta) => {
+    ref.current.rotation.x -= delta / 10;
+    ref.current.rotation.y -= delta / 15;
+  });
+
+  return (
+    <group rotation={[0, 0, Math.PI / 4]}>
+      <Points ref={ref} positions={sphere} stride={3} frustumCulled {...props}>
+        <PointMaterial
+          transparent
+          color="#f272c8"
+          size={0.002}
+          sizeAttenuation={true}
+          depthWrite={false}
+        />
+      </Points>
+    </group>
+  );
+};
+
+const StarsCanvas = () => {
+  return (
+    <div className="w-full h-auto absolute inset-0 z-[-1]">
+      <Canvas camera={{ position: [0, 0, 1] }}>
+        <Suspense fallback={null}>
+          <Stars />
+        </Suspense>
+
+        <Preload all />
+      </Canvas>
+    </div>
+  );
+};
+
+export default StarsCanvas;