update particles and feature cards

js/main.js

@@ -33,28 +33,58 @@ sections.forEach(section => {
     observer.observe(section);
 });
 
-function createParticle() {
+const PARTICLE_POOL_SIZE = 50;
+const particlePool = [];
+const activeParticles = new Set();
+
+function createParticleElement() {
     const particle = document.createElement('div');
     particle.classList.add('particle');
     if (Math.random() > 0.6) particle.classList.add('large');
+    return particle;
+}
+
+function initializeParticlePool() {
+    for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
+        particlePool.push(createParticleElement());
+    }
+}
+
+function resetParticle(particle) {
     particle.style.left = `${Math.random() * 100}%`;
     particle.style.top = `${Math.random() * 100}%`;
     particle.style.animationDelay = `${Math.random() * 8}s`;
     particle.style.animationDuration = `${8 + Math.random() * 6}s`;
-    document.body.appendChild(particle);
-    // Remove particle with fade-out effect
+    particle.classList.remove('fade-out');
+    return particle;
+}
+
+function spawnParticle() {
+    if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
+
+    const particle = resetParticle(particlePool.pop());
+    if (!particle.parentNode) document.body.appendChild(particle);
+    activeParticles.add(particle);
+
     setTimeout(() => {
         particle.classList.add('fade-out');
-        // Wait for fade-out animation to complete before removing
-        setTimeout(() => particle.remove(), 500);
+        setTimeout(() => {
+            activeParticles.delete(particle);
+            particlePool.push(particle);
+        }, 500);
     }, 14000);
 }
 
-// Delay particle creation to ensure background renders
+function animate() {
+    if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
+    requestAnimationFrame(animate);
+}
+
+// Initialize and start
 setTimeout(() => {
-    // Create particles frequently
-    setInterval(createParticle, 75);
-}, 500); // 500ms delay
+    initializeParticlePool();
+    animate();
+}, 500);
 
 function throttle(fn, wait) {
     let lastTime = 0;