now its too simple.

making it more visually engaging, dynamic, animated

index.html

@@ -38,17 +38,159 @@
             line-height: 1.6;
             overflow-x: hidden;
             cursor: none;
+            position: relative;
+        }
+        
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 40% 20%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
+            pointer-events: none;
+            z-index: 0;
         }
+        
         .custom-cursor {
-            width: 16px;
-            height: 16px;
-            border: 1px solid var(--accent);
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--accent);
             border-radius: 50%;
             position: fixed;
             pointer-events: none;
             z-index: 9999;
-            transition: all 0.15s ease;
+            transition: all 0.1s ease;
             opacity: 0.8;
+            box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
+        }
+        
+        .cursor-follower {
+            width: 40px;
+            height: 40px;
+            background: rgba(124, 58, 237, 0.1);
+            border: 1px solid rgba(124, 58, 237, 0.3);
+            border-radius: 50%;
+            position: fixed;
+            pointer-events: none;
+            z-index: 9998;
+            transition: all 0.3s ease;
+        }
+        
+        .magnetic-button {
+            position: relative;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .magnetic-button:hover {
+            transform: scale(1.05);
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+        
+        @keyframes glow-pulse {
+            0%, 100% { 
+                box-shadow: 0 0 20px rgba(124, 58, 237, 0.5),
+                           0 0 40px rgba(124, 58, 237, 0.3),
+                           0 0 60px rgba(124, 58, 237, 0.1);
+            }
+            50% { 
+                box-shadow: 0 0 30px rgba(124, 58, 237, 0.7),
+                           0 0 60px rgba(124, 58, 237, 0.4),
+                           0 0 90px rgba(124, 58, 237, 0.2);
+            }
+        }
+        
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        .glow-pulse {
+            animation: glow-pulse 2s ease-in-out infinite;
+        }
+        
+        .parallax-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%237c3aed" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,133.3C960,128,1056,96,1152,90.7C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
+            background-size: cover;
+            z-index: -1;
+        }
+        
+        .text-reveal {
+            opacity: 0;
+            transform: translateY(50px);
+            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .text-reveal.active {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .stagger-animation > * {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .stagger-animation.active > * {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .stagger-animation.active > *:nth-child(1) { transition-delay: 0.1s; }
+        .stagger-animation.active > *:nth-child(2) { transition-delay: 0.2s; }
+        .stagger-animation.active > *:nth-child(3) { transition-delay: 0.3s; }
+        .stagger-animation.active > *:nth-child(4) { transition-delay: 0.4s; }
+        .stagger-animation.active > *:nth-child(5) { transition-delay: 0.5s; }
+        .stagger-animation.active > *:nth-child(6) { transition-delay: 0.6s; }
+        
+        .gradient-mesh {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(at 40% 20%, rgba(124, 58, 237, 0.3) 0px, transparent 50%),
+                radial-gradient(at 80% 0%, rgba(59, 130, 246, 0.3) 0px, transparent 50%),
+                radial-gradient(at 0% 50%, rgba(236, 72, 153, 0.2) 0px, transparent 50%);
+            filter: blur(100px);
+            z-index: -1;
+        }
+        
+        .morphing-shape {
+            width: 300px;
+            height: 300px;
+            background: linear-gradient(45deg, #7c3aed, #3b82f6, #ec4899);
+            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            animation: morph 8s ease-in-out infinite;
+            opacity: 0.1;
+            filter: blur(40px);
+        }
+        
+        @keyframes morph {
+            0%, 100% {
+                border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+                transform: translate(-50%, -50%) rotate(0deg);
+            }
+            50% {
+                border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+                transform: translate(-50%, -50%) rotate(180deg);
+            }
         }
 .mono {
             font-family: 'JetBrains Mono', monospace;
@@ -238,7 +380,9 @@
 </head>
 <body>
     <div class="custom-cursor"></div>
+    <div class="cursor-follower"></div>
     <div id="particles-js"></div>
+    <div class="gradient-mesh"></div>
 <!-- Navigation -->
     <nav class="fixed top-0 w-full bg-opacity-90 backdrop-blur-xl bg-opacity-90 backdrop-blur-xl z-50 border-b border-gray-800">
         <div class="max-w-7xl mx-auto px-6 py-4">
@@ -262,15 +406,18 @@
         </div>
     </nav>
     <!-- Hero Section -->
-    <section id="home" class="min-h-screen flex items-center justify-center px-6 pt-20 relative">
-        <div class="max-w-7xl mx-auto text-center animate-slide-up">
-            <div class="mb-8 relative">
-                <img src="https://raw.githubusercontent.com/Dev-in-the-BM/Dev-in-the-BM/blob/main/banner.png" alt="Profile Banner" class="w-full max-w-4xl mx-auto rounded-xl border border-gray-800 shadow-xl">
+    <section id="home" class="min-h-screen flex items-center justify-center px-6 pt-20 relative overflow-hidden">
+        <div class="morphing-shape"></div>
+        <div class="parallax-bg"></div>
+        <div class="max-w-7xl mx-auto text-center relative z-10">
+            <div class="mb-8 relative floating">
+                <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl blur-xl opacity-50"></div>
+                <img src="https://raw.githubusercontent.com/Dev-in-the-BM/Dev-in-the-BM/blob/main/banner.png" alt="Profile Banner" class="w-full max-w-4xl mx-auto rounded-xl border border-gray-800 shadow-2xl relative z-10 transform hover:scale-105 transition-transform duration-500">
             </div>
-            <h1 class="text-5xl md:text-7xl font-bold mb-6">
-                Hi <span class="emoji-bounce inline-block">👋</span>, I'm <span class="gradient-text">Dev-in-the-BM</span>
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 text-reveal">
+                Hi <span class="emoji-bounce inline-block">👋</span>, I'm <span class="gradient-text glow-pulse">Dev-in-the-BM</span>
             </h1>
-<div class="text-2xl md:text-3xl text-gray-400 mb-8 max-w-4xl mx-auto">
+            <div class="text-2xl md:text-3xl text-gray-400 mb-8 max-w-4xl mx-auto stagger-animation">
                 <span class="inline-flex items-center gap-2 mb-2">
                     <span class="emoji-bounce">🎩</span>
                     <span>Yeshiva Bochur</span>
@@ -281,17 +428,17 @@
                     <span>Vibe Coder</span>
                 </span>
             </div>
-            <div class="flex justify-center gap-6 mb-12">
-                <a href="#projects" class="btn-primary">
+            <div class="flex justify-center gap-6 mb-12 stagger-animation">
+                <a href="#projects" class="btn-primary magnetic-button">
                     <i data-feather="briefcase" class="w-5 h-5"></i>
                     View Projects
                 </a>
-<a href="#contact" class="btn-secondary">
+                <a href="#contact" class="btn-secondary magnetic-button">
                     <i data-feather="mail" class="w-5 h-5"></i>
                     Get in Touch
                 </a>
             </div>
-            <div class="terminal max-w-3xl mx-auto">
+<div class="terminal max-w-3xl mx-auto">
                 <div class="terminal-header">
                     <div class="terminal-dot bg-red-500"></div>
                     <div class="terminal-dot bg-yellow-500"></div>
@@ -573,22 +720,76 @@
     <script>
         // Initialize Feather Icons
         feather.replace();
-        // Custom Cursor
+        // Enhanced Custom Cursor
         const cursor = document.querySelector('.custom-cursor');
+        const follower = document.querySelector('.cursor-follower');
 
         document.addEventListener('mousemove', (e) => {
-            cursor.style.left = e.clientX - 8 + 'px';
-            cursor.style.top = e.clientY - 8 + 'px';
+            cursor.style.left = e.clientX - 10 + 'px';
+            cursor.style.top = e.clientY - 10 + 'px';
+            
+            setTimeout(() => {
+                follower.style.left = e.clientX - 20 + 'px';
+                follower.style.top = e.clientY - 20 + 'px';
+            }, 100);
         });
 
         document.addEventListener('mousedown', () => {
-            cursor.style.transform = 'scale(0.8)';
+            cursor.style.transform = 'scale(0.6)';
+            follower.style.transform = 'scale(0.8)';
         });
 
         document.addEventListener('mouseup', () => {
             cursor.style.transform = 'scale(1)';
+            follower.style.transform = 'scale(1)';
+        });
+
+        // Magnetic button effect
+        document.querySelectorAll('.magnetic-button').forEach(button => {
+            button.addEventListener('mousemove', (e) => {
+                const rect = button.getBoundingClientRect();
+                const x = e.clientX - rect.left - rect.width / 2;
+                const y = e.clientY - rect.top - rect.height / 2;
+                
+                button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px) scale(1.05)`;
+            });
+            
+            button.addEventListener('mouseleave', () => {
+                button.style.transform = 'translate(0, 0) scale(1)';
+            });
+        });
+
+        // Text reveal animation
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const textObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('active');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.text-reveal').forEach(el => {
+            textObserver.observe(el);
+        });
+
+        document.querySelectorAll('.stagger-animation').forEach(el => {
+            textObserver.observe(el);
+        });
+
+        // Parallax effect
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const parallax = document.querySelector('.parallax-bg');
+            if (parallax) {
+                parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
+            }
         });
-        // Particles.js
+// Particles.js
         particlesJS('particles-js', {
             particles: {
                 number: {
@@ -656,22 +857,25 @@
                 }
             });
         });
-        // Add slide-up animation on scroll
-        const observerOptions = {
-            threshold: 0.1,
-            rootMargin: '0px 0px -50px 0px'
-        };
+        // Enhanced scroll animations
+        const sections = document.querySelectorAll('section');
+        sections.forEach((section, index) => {
+            section.style.opacity = '0';
+            section.style.transform = 'translateY(50px)';
+            section.style.transition = `all 0.8s cubic-bezier(0.4, 0, 0.2, 1) ${index * 0.1}s`;
+        });
 
-        const observer = new IntersectionObserver((entries) => {
+        const sectionObserver = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    entry.target.classList.add('animate-slide-up');
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
                 }
             });
-        }, observerOptions);
+        }, { threshold: 0.1 });
 
-        document.querySelectorAll('section').forEach(section => {
-            observer.observe(section);
+        sections.forEach(section => {
+            sectionObserver.observe(section);
         });
 // Terminal typing effect
         const terminalLines = document.querySelectorAll('.terminal .text-green-400 p');
@@ -682,11 +886,28 @@
                 line.style.opacity = '1';
             }, index * 1000);
         });
-// Mobile menu toggle
+        // Mobile menu toggle with animation
         function toggleMobileMenu() {
-            // Implement mobile menu toggle logic here
-            console.log('Mobile menu toggled');
+            const mobileMenu = document.createElement('div');
+            mobileMenu.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center';
+            mobileMenu.innerHTML = `
+                <div class="text-center">
+                    <button onclick="this.parentElement.parentElement.remove()" class="absolute top-6 right-6 text-white">
+                        <i data-feather="x" class="w-8 h-8"></i>
+                    </button>
+                    <nav class="flex flex-col gap-6 text-2xl">
+                        <a href="#home" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Home</a>
+                        <a href="#about" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">About</a>
+                        <a href="#projects" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Projects</a>
+                        <a href="#skills" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Skills</a>
+                        <a href="#sponsor" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Sponsor</a>
+                        <a href="#contact" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Contact</a>
+                    </nav>
+                </div>
+            `;
+            document.body.appendChild(mobileMenu);
+            feather.replace();
         }
-    </script>
+</script>
 </body>
 </html>