Update app.js

Author: Deadcoder001

assets/js/app.js

@@ -1,16 +1,16 @@
-// ParticlesJS Configuration
 particlesJS('particles-js',
+  
   {
     "particles": {
       "number": {
-        "value": 200,
+        "value": 200, // Increased particle count
         "density": {
           "enable": true,
           "value_area": 800
         }
       },
       "color": {
-        "value": ["#00fffc", "#fc00ff", "#fffc00"]
+        "value": ["#00fffc", "#fc00ff", "#fffc00"] // Randomized particle colors
       },
       "shape": {
         "type": "circle",
@@ -24,9 +24,9 @@ particlesJS('particles-js',
       },
       "opacity": {
         "value": 0.7,
-        "random": true,
+        "random": true, // Random opacity for variation
         "anim": {
-          "enable": true,
+          "enable": true, // Enable opacity animation
           "speed": 1,
           "opacity_min": 0.1,
           "sync": false
@@ -36,28 +36,28 @@ particlesJS('particles-js',
         "value": 4,
         "random": true,
         "anim": {
-          "enable": true,
+          "enable": true, // Enable size animation
           "speed": 10,
           "size_min": 0.3,
           "sync": false
         }
       },
       "line_linked": {
         "enable": true,
-        "distance": 120,
+        "distance": 120, // Decreased distance for tighter connections
         "color": "#ffffff",
         "opacity": 0.5,
         "width": 1.5
       },
       "move": {
         "enable": true,
-        "speed": 4,
+        "speed": 4, // Slightly slower movement for a smoother effect
         "direction": "none",
         "random": false,
         "straight": false,
         "out_mode": "out",
         "attract": {
-          "enable": true,
+          "enable": true, // Enable attraction effect
           "rotateX": 600,
           "rotateY": 1200
         }
@@ -68,7 +68,7 @@ particlesJS('particles-js',
       "events": {
         "onhover": {
           "enable": true,
-          "mode": ["grab", "bubble", "repulse"]
+          "mode": ["grab", "bubble", "repulse"] // Enable multiple modes on hover
         },
         "onclick": {
           "enable": true,
@@ -105,43 +105,17 @@ particlesJS('particles-js',
     "retina_detect": true,
     "config_demo": {
       "hide_card": false,
-      "background_color": "#1a2a6c",
+      "background_color": "#1a2a6c", // Gradient start color
       "background_image": "",
       "background_position": "50% 50%",
       "background_repeat": "no-repeat",
       "background_size": "cover",
       "background_gradient": {
-        "type": "radial",
-        "colors": ["#1a2a6c", "#b21f1f", "#fdbb2d"],
-        "direction": "center"
+        "type": "radial", // Radial gradient effect
+        "colors": ["#1a2a6c", "#b21f1f", "#fdbb2d"], // Gradient colors
+        "direction": "center" // Gradient direction
       }
     }
   }
-);
-
-// Cursor-following dot implementation
-const cursorDot = document.createElement("div");
-cursorDot.style.position = "fixed";
-cursorDot.style.width = "10px";
-cursorDot.style.height = "10px";
-cursorDot.style.backgroundColor = "black";
-cursorDot.style.borderRadius = "50%";
-cursorDot.style.pointerEvents = "none";
-cursorDot.style.zIndex = "1000";
-cursorDot.style.transition = "transform 0.1s ease";
-document.body.appendChild(cursorDot);
-
-let mouseX = 0, mouseY = 0;
-
-// Smooth motion effect
-document.addEventListener("mousemove", (event) => {
-  mouseX = event.clientX;
-  mouseY = event.clientY;
-});
 
-// Animation loop for smooth motion
-function animateDot() {
-  cursorDot.style.transform = `translate(${mouseX - 5}px, ${mouseY - 5}px)`;
-  requestAnimationFrame(animateDot);
-}
-animateDot();
+);