Add new particle system

js/main.js

@@ -33,58 +33,136 @@ sections.forEach(section => {
     observer.observe(section);
 });
 
-// const PARTICLE_POOL_SIZE = 50;
-// const particlePool = [];
-// const activeParticles = new Set();
+    particlesJS("particles-js", {
+        "particles": {
+            "number": {
+                "value": 30,
+                "density": {
+                    "enable": true,
+                    "value_area": 800
+                }
+            },
+            "color": {
+                "value": ["#14b8a6", "#3b82f6"] // Mimics gradient by alternating colors
+            },
+            "shape": {
+                "type": "circle", // Matches border-radius: 50%
+                "stroke": {
+                    "width": 0,
+                    "color": "#000000"
+                }
+            },
+            "opacity": {
+                "value": 0.9, // Matches box-shadow opacity
+                "random": true,
+                "anim": {
+                    "enable": true, // Mimics fadeInOut animation
+                    "speed": 1, // Slower for smooth fade
+                    "opacity_min": 0, // Fades to fully transparent
+                    "sync": false
+                }
+            },
+            "size": {
+                "value": 8, // Default size (matches 8px)
+                "random": true, // Allows some particles to be larger (up to 12px)
+                "anim": {
+                    "enable": true,
+                    "speed": 4,
+                    "size_min": 4, // Smaller sizes for variation
+                    "sync": false
+                }
+            },
+            "line_linked": {
+                "enable": false // No lines needed per CSS
+            },
+            "move": {
+                "enable": true,
+                "speed": 2, // Mimics float animation
+                "direction": "none",
+                "random": true,
+                "straight": false,
+                "out_mode": "out",
+                "bounce": false,
+                "attract": {
+                    "enable": false
+                }
+            }
+        },
+        "interactivity": {
+            "detect_on": "canvas",
+            "events": {
+                "onhover": {
+                    "enable": true,
+                    "mode": "repulse"
+                },
+                "onclick": {
+                    "enable": true,
+                    "mode": "push"
+                },
+                "resize": true
+            },
+            "modes": {
+                "repulse": {
+                    "distance": 100,
+                    "duration": 0.4
+                },
+                "push": {
+                    "particles_nb": 4
+                }
+            }
+        },
+        "retina_detect": true
+    });
 
-// function createParticleElement() {
-//     const particle = document.createElement('div');
-//     particle.classList.add('particle');
-//     if (Math.random() > 0.6) particle.classList.add('large');
-//     return particle;
-// }
+    // Custom logic for glow effect
+    document.addEventListener('DOMContentLoaded', () => {
+        const pJS = window.pJSDom[0].pJS;
+        const targetElements = document.querySelectorAll('.feature-card, .nav-btn, .btn-minecraft');
 
-// function initializeParticlePool() {
-//     for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
-//         particlePool.push(createParticleElement());
-//     }
-// }
+        // Function to check if a particle is behind or near an element
+        function checkParticleProximity() {
+            targetElements.forEach(element => {
+                const rect = element.getBoundingClientRect();
+                let hasGlow = false;
 
-// 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;
-// }
+                pJS.particles.array.forEach(particle => {
+                    const particleX = particle.x + pJS.canvas.el.offsetLeft;
+                    const particleY = particle.y + pJS.canvas.el.offsetTop;
+                    const buffer = 20; // Buffer zone around element for glow trigger
 
-// function spawnParticle() {
-//     if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
+                    // Check if particle is within or near the element's bounding box
+                    if (
+                        particleX >= rect.left - buffer &&
+                        particleX <= rect.right + buffer &&
+                        particleY >= rect.top - buffer &&
+                        particleY <= rect.bottom + buffer
+                    ) {
+                        hasGlow = true;
+                    }
+                });
 
-//     const particle = resetParticle(particlePool.pop());
-//     if (!particle.parentNode) document.body.appendChild(particle);
-//     activeParticles.add(particle);
+                // Apply or remove glow effect
+                if (hasGlow) {
+                    element.classList.add('glow-effect');
+                    element.classList.remove('no-glow');
+                } else {
+                    element.classList.remove('glow-effect');
+                    element.classList.add('no-glow');
+                }
+            });
+        }
 
-//     setTimeout(() => {
-//         particle.classList.add('fade-out');
-//         setTimeout(() => {
-//             activeParticles.delete(particle);
-//             particlePool.push(particle);
-//         }, 500);
-//     }, 14000);
-// }
+        // Run proximity check in a separate animation loop
+        function animateGlowEffect() {
+            checkParticleProximity();
+            requestAnimationFrame(animateGlowEffect);
+        }
+
+        // Start the animation loop
+        animateGlowEffect();
+    });
 
-// function animate() {
-//     if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
-//     requestAnimationFrame(animate);
-// }
 
-// // Initialize and start
-// setTimeout(() => {
-//     initializeParticlePool();
-//     animate();
-// }, 500);
 
 function throttle(fn, wait) {
     let lastTime = 0;