Cambia la imagen de fondo por una animacion de particulas

index.html

@@ -15,10 +15,10 @@
     <!-- Hero Section -->
     <section class="relative h-screen flex items-center justify-center overflow-hidden">
         <div class="absolute inset-0 z-0">
-            <img src="https://github.com/DeepRatAI/Educative-Lab/blob/main/misc/course.png?raw=true" alt="Course Banner" class="w-full h-full object-cover opacity-90">
-            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/30"></div>
+            <div id="particles-js" class="w-full h-full"></div>
+            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/30 hovered-element"></div>
         </div>
-        <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
+<div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
             <h1 class="text-4xl md:text-6xl font-bold mb-4 text-white drop-shadow-lg">Building Intelligence</h1>
             <p class="text-xl md:text-2xl font-medium mb-6 text-white/90 drop-shadow-md">AI Systems Engineering: From Machine Learning to Generative Intelligence</p>
             <p class="text-lg mb-8 text-white/80">A DeepRat Educative Lab Program</p>
@@ -164,8 +164,8 @@
             <p class="text-gray-500 text-sm">© 2025 DeepRatAI — Open Intelligence for Everyone</p>
         </div>
     </footer>
-
     <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

script.js

@@ -18,7 +18,100 @@ const appearOnScroll = new IntersectionObserver((entries, observer) => {
         observer.unobserve(entry.target);
     });
 }, { threshold: 0.1 });
-
 faders.forEach(fader => {
     appearOnScroll.observe(fader);
-});
+});
+
+// Initialize particles.js
+document.addEventListener('DOMContentLoaded', function() {
+    if (typeof particlesJS !== 'undefined') {
+        particlesJS('particles-js', {
+            "particles": {
+                "number": {
+                    "value": 80,
+                    "density": {
+                        "enable": true,
+                        "value_area": 800
+                    }
+                },
+                "color": {
+                    "value": "#ffffff"
+                },
+                "shape": {
+                    "type": "circle",
+                    "stroke": {
+                        "width": 0,
+                        "color": "#000000"
+                    }
+                },
+                "opacity": {
+                    "value": 0.5,
+                    "random": false,
+                    "anim": {
+                        "enable": false,
+                        "speed": 1,
+                        "opacity_min": 0.1,
+                        "sync": false
+                    }
+                },
+                "size": {
+                    "value": 3,
+                    "random": true,
+                    "anim": {
+                        "enable": false,
+                        "speed": 40,
+                        "size_min": 0.1,
+                        "sync": false
+                    }
+                },
+                "line_linked": {
+                    "enable": true,
+                    "distance": 150,
+                    "color": "#ffffff",
+                    "opacity": 0.4,
+                    "width": 1
+                },
+                "move": {
+                    "enable": true,
+                    "speed": 2,
+                    "direction": "none",
+                    "random": false,
+                    "straight": false,
+                    "out_mode": "out",
+                    "bounce": false,
+                    "attract": {
+                        "enable": false,
+                        "rotateX": 600,
+                        "rotateY": 1200
+                    }
+                }
+            },
+            "interactivity": {
+                "detect_on": "canvas",
+                "events": {
+                    "onhover": {
+                        "enable": true,
+                        "mode": "grab"
+                    },
+                    "onclick": {
+                        "enable": true,
+                        "mode": "push"
+                    },
+                    "resize": true
+                },
+                "modes": {
+                    "grab": {
+                        "distance": 140,
+                        "line_linked": {
+                            "opacity": 1
+                        }
+                    },
+                    "push": {
+                        "particles_nb": 4
+                    }
+                }
+            },
+            "retina_detect": true
+        });
+    }
+});

style.css

@@ -30,7 +30,6 @@ section {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 }
-
 /* Footer Icons */
 footer a svg {
   transition: all 0.3s ease;
@@ -38,4 +37,11 @@ footer a svg {
 
 footer a:hover svg {
   transform: scale(1.2);
-}
+}
+
+/* Particles.js container */
+#particles-js {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}