add file

Author: shahealamit

script.js

@@ -0,0 +1,100 @@
+// Initialize AOS (Animate On Scroll)
+AOS.init({ once: true, offset: 50, duration: 800 });
+
+// Mobile Menu Toggle
+document.getElementById('mobile-btn').addEventListener('click', () => {
+    document.getElementById('mobile-menu').classList.toggle('hidden');
+});
+
+// Filter Projects
+function filterProjects(cat, btn) {
+    document.querySelectorAll('.filter-btn').forEach(b => {
+        b.classList.remove('bg-teal-500', 'text-white', 'border-teal-500');
+        b.classList.add('border-slate-700', 'text-slate-400');
+    });
+    btn.classList.remove('border-slate-700', 'text-slate-400');
+    btn.classList.add('bg-teal-500', 'text-white', 'border-teal-500');
+    document.querySelectorAll('.project-card').forEach(card => {
+        if (cat === 'all' || card.classList.contains(cat)) {
+            card.style.display = 'block';
+            card.classList.add('aos-animate');
+        } else {
+            card.style.display = 'none';
+        }
+    });
+}
+
+// --- 4-WAY BUBBLE GENERATOR ---
+function createBubbles() {
+    const container = document.getElementById('four-way-bg');
+    const icons = ['fa-bug', 'fa-bug', 'fa-server', 'fa-docker', 'fa-check-circle', 'fa-code-branch'];
+    const animations = ['move-up', 'move-down', 'move-left', 'move-right'];
+    const colors = ['p-bug', 'p-dev', 'p-qa'];
+
+    for (let i = 0; i < 25; i++) {
+        const bubble = document.createElement('i');
+        const randomIcon = icons[Math.floor(Math.random() * icons.length)];
+        const randomAnim = animations[Math.floor(Math.random() * animations.length)];
+        const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+        bubble.classList.add('fas', randomIcon, 'bubble-particle', randomAnim, randomColor);
+
+        // Random Positioning
+        if (randomAnim === 'move-up' || randomAnim === 'move-down') {
+            bubble.style.left = Math.random() * 90 + 5 + '%';
+        } else {
+            bubble.style.top = Math.random() * 90 + 5 + '%';
+        }
+
+        bubble.style.animationDuration = (Math.random() * 3 + 3) + 's';
+        bubble.style.animationDelay = (Math.random() * 5) + 's';
+
+        container.appendChild(bubble);
+    }
+}
+
+// Typing Effect
+const textElement = document.getElementById('typed-text');
+
+const phrases = [
+    "DevOps Engineer",
+    "DevOps Freelancer",
+    "CI/CD Pipelines",
+    "AWS & Docker"
+];
+
+let phraseIndex = 0;
+let charIndex = 0;
+let isDeleting = false;
+let typeSpeed = 100;
+
+function typeText() {
+    const currentPhrase = phrases[phraseIndex];
+
+    if (isDeleting) {
+        textElement.textContent = currentPhrase.substring(0, charIndex - 1);
+        charIndex--;
+        typeSpeed = 50;
+    } else {
+        textElement.textContent = currentPhrase.substring(0, charIndex + 1);
+        charIndex++;
+        typeSpeed = 100;
+    }
+
+    if (!isDeleting && charIndex === currentPhrase.length) {
+        isDeleting = true;
+        typeSpeed = 1800;
+    } else if (isDeleting && charIndex === 0) {
+        isDeleting = false;
+        phraseIndex = (phraseIndex + 1) % phrases.length;
+        typeSpeed = 500;
+    }
+
+    setTimeout(typeText, typeSpeed);
+}
+
+// Initialize on DOM Load
+document.addEventListener('DOMContentLoaded', () => {
+    createBubbles();
+    typeText();
+});