add particles.js

LuisOtavio13 · LuisOtavio13 · commit 78cc2ab6e91b · 2025-07-23T08:16:52.000-03:00
diff --git a/index.html b/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="pt-br">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GitHub Explorer Framework</title>
+  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
   <style>
-    /* Reset e Estilos Gerais */
+    
     * {
       margin: 0;
       padding: 0;
@@ -16,10 +17,10 @@
     body {
       background: #0d1117;
       color: #c9d1d9;
-      padding-top: 80px; /* Espaço para a navbar fixa */
+      padding-top: 80px; 
     }
 
-    /* Navbar Principal */
+    
     .navbar {
       position: fixed;
       top: 0;
@@ -43,7 +44,7 @@
       padding: 1rem 5%;
     }
 
-    /* Logo */
+    
     .logo {
       color: white;
       font-size: 1.8rem;
@@ -60,7 +61,7 @@
       transform: scale(1.05);
     }
 
-    /* Links da Navbar */
+    
     .nav-links {
       display: flex;
       gap: 2rem;
@@ -77,7 +78,7 @@
       transition: all 0.3s ease;
     }
 
-    /* Efeito Hover nos Links */
+    
     .nav-links a::after {
       content: '';
       position: absolute;
@@ -97,7 +98,7 @@
       color: #58a6ff;
     }
 
-    /* Botão de Contato */
+   
     .cta-button {
       background: linear-gradient(45deg, #238636, #2ea043);
       color: white;
@@ -116,7 +117,7 @@
       background: linear-gradient(45deg, #2ea043, #3fb950);
     }
 
-    /* Menu Hambúrguer (Mobile) */
+    
     .menu-toggle {
       display: none;
       flex-direction: column;
@@ -136,7 +137,7 @@
       transition: all 0.3s ease;
     }
 
-    /* Efeito X quando aberto */
+    
     .menu-toggle.active span:nth-child(1) {
       transform: rotate(45deg) translate(5px, 5px);
       background: #58a6ff;
@@ -151,20 +152,25 @@
       background: #bc8cff;
     }
 
-    /* Conteúdo principal */
+    
     .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 2rem 5%;
     }
 
-    /* Seção Hero */
     .hero {
       display: flex;
       flex-direction: column;
       gap: 3rem;
       padding: 4rem 0;
+      position: relative;
+      z-index: 1;
     }
+    .hero-text, .hero-code {
+  position: relative;
+  z-index: 2;
+}
 
     @media (min-width: 768px) {
       .hero {
diff --git a/js/index.js b/js/index.js
@@ -1,13 +1,14 @@
 document.addEventListener('DOMContentLoaded', function() {
-  // Elementos DOM
+  // DOM Elements
   const navbar = document.querySelector('.navbar');
   const menuToggle = document.querySelector('.menu-toggle');
   const navLinksContainer = document.querySelector('.nav-links');
-  const navLinks = document.querySelectorAll('.nav-links a:not([data-target=""])'); // Exclui links sem data-target
+  const navLinks = document.querySelectorAll('.nav-links a:not([data-target=""])'); // Excludes links without data-target
   const contentSections = document.querySelectorAll('.content-section');
   const heroSection = document.querySelector('.hero');
-  
-  // 1. Efeito de Scroll na Navbar
+
+  // 1. Navbar Scroll Effect
+  // Adds or removes the 'scrolled' class to the navbar depending on scroll position
   window.addEventListener('scroll', function() {
     if (window.scrollY > 50) {
       navbar.classList.add('scrolled');
@@ -16,84 +17,85 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
 
-  // 2. Menu Mobile
+  // 2. Mobile Menu Toggle
+  // Toggles menu visibility on smaller screens
   menuToggle.addEventListener('click', function() {
     this.classList.toggle('active');
     navLinksContainer.classList.toggle('active');
   });
 
-  // 3. Sistema de Navegação
+  // 3. Navigation System
   function setupNavigation() {
-    // Mostra uma seção específica
+    // Displays a specific section based on ID
     function showSection(sectionId) {
-      // Esconde todas as seções
+      // Hide all sections
       contentSections.forEach(section => {
         section.style.display = 'none';
       });
-      
-      // Mostra a seção selecionada
+
+      // Show selected section
       const targetSection = document.getElementById(sectionId);
       if (targetSection) {
         targetSection.style.display = 'block';
-        
-        // Scroll suave para a seção
+
+        // Smooth scroll to the section
         setTimeout(() => {
           targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }, 50);
       }
-      
-      // Atualiza o link ativo na navbar
+
+      // Update active link in navbar
       navLinks.forEach(link => {
         link.classList.remove('active');
         if (link.getAttribute('data-target') === sectionId) {
           link.classList.add('active');
         }
       });
-      
-      // Fecha o menu mobile se estiver aberto
+
+      // Close mobile menu if open
       menuToggle.classList.remove('active');
       navLinksContainer.classList.remove('active');
     }
-    
-    // Configura os eventos de clique nos links
+
+    // Set up click events on navigation links
     navLinks.forEach(link => {
       link.addEventListener('click', function(e) {
         const targetSection = this.getAttribute('data-target');
         
-        // Só previne o comportamento padrão para links internos
+        // Prevent default only for internal links
         if (targetSection) {
           e.preventDefault();
           showSection(targetSection);
           history.pushState(null, null, `#${targetSection}`);
         }
-        // Links sem data-target (como Documentation) seguirão normalmente
+        // External/documentation links behave normally
       });
     });
-    
-    // Verifica a hash da URL ao carregar a página
+
+    // Check initial hash when the page loads
     function checkInitialHash() {
       const initialHash = window.location.hash.substring(1);
       if (initialHash && document.getElementById(initialHash)) {
         showSection(initialHash);
       } else {
-        // Mostra a seção home por padrão
+        // Default to 'home' section
         showSection('home');
       }
     }
-    
-    // Verifica mudanças na hash
+
+    // Listen for URL hash changes
     window.addEventListener('hashchange', function() {
       const newHash = window.location.hash.substring(1);
       if (newHash && document.getElementById(newHash)) {
         showSection(newHash);
       }
     });
-    
-    // Inicializa
+
+    // Initialize navigation system
     checkInitialHash();
   }
 
-  // 4. Fechar menu ao clicar fora
+  // 4. Close Mobile Menu When Clicking Outside
   document.addEventListener('click', function(e) {
     if (!navLinksContainer.contains(e.target) && 
         !menuToggle.contains(e.target) &&
@@ -103,6 +105,120 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
 
-  // Inicializa a navegação
+  // Initialize navigation setup
   setupNavigation();
-});
+});
+document.addEventListener('DOMContentLoaded', function() {
+  // 1. Create particle container
+  const particlesContainer = document.createElement('div');
+  particlesContainer.id = 'particles-js';
+  particlesContainer.style.position = 'absolute';
+  particlesContainer.style.top = '0';
+  particlesContainer.style.left = '0';
+  particlesContainer.style.width = '100%';
+  particlesContainer.style.height = '100%';
+  particlesContainer.style.zIndex = '-1';
+  particlesContainer.style.background = '#0d1117'; // Dark background
+
+  // Insert particle container inside hero section
+  const heroSection = document.querySelector('.hero');
+  heroSection.style.position = 'relative';
+  heroSection.style.overflow = 'hidden';
+  heroSection.insertBefore(particlesContainer, heroSection.firstChild);
+
+  // 2. Particle.js Configuration
+  particlesJS('particles-js', {
+    "particles": {
+      "number": {
+        "value": 80,
+        "density": {
+          "enable": true,
+          "value_area": 800
+        }
+      },
+      "color": {
+        "value": ["#d6e4f0", "#a8c0d6", "#7a9bbc"] // Light blue shades
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        }
+      },
+      "opacity": {
+        "value": 0.7,
+        "random": true,
+        "anim": {
+          "enable": true,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 3,
+        "random": true,
+        "anim": {
+          "enable": true,
+          "speed": 2,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#fcfdff", // Pure white
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 2,
+        "direction": "none",
+        "random": true,
+        "straight": false,
+        "out_mode": "out",
+        "bounce": false,
+        "attract": {
+          "enable": true,
+          "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
+  });
+
+  // 3. Ensure hero content appears above particles
+  const heroContent = document.querySelector('.hero-text');
+  const heroCode = document.querySelector('.hero-code');
+  if (heroContent) heroContent.style.position = 'relative';
+  if (heroCode) heroCode.style.position = 'relative';
+});
