repair particles

public/js/app.js

@@ -73,53 +73,6 @@ document.addEventListener('DOMContentLoaded', () => {
     observer.observe(section);
   });
 
-  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`;
-    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');
-      setTimeout(() => {
-        activeParticles.delete(particle);
-        particlePool.push(particle);
-      }, 500);
-    }, 14000);
-  }
-
-  function animate() {
-    if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
-    requestAnimationFrame(animate);
-  }
-
 
   // Debounce function to prevent rapid clicks
   function debounce(fn, wait) {
@@ -2484,5 +2437,65 @@ document.addEventListener('DOMContentLoaded', () => {
 
   window.addEventListener('resize', applyResponsiveStyles);
 
+  sections.forEach(section => {
+    section.style.transform = 'translateY(30px)';
+    section.style.opacity = '0';
+    section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
+    observer.observe(section);
+});
+
+  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`;
+    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');
+      setTimeout(() => {
+        activeParticles.delete(particle);
+        particlePool.push(particle);
+      }, 500);
+    }, 14000);
+  }
+
+  function animate() {
+    if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
+    requestAnimationFrame(animate);
+  }
+
+  // Initialize and start
+setTimeout(() => {
+  initializeParticlePool();
+  animate();
+}, 500);
+
 
 });