redesign theme

professional-theme.js

@@ -11,10 +11,9 @@ function initializeProfessionalTheme() {
     initializeLucideIcons();
     initializeThemeToggle();
     initializeMobileMenu();
-    initializeCardAnimations();
+    initializeReveal();
     initializeScrollAnimations();
     initializeButtonEffects();
-    initializeHeroAnimations();
     initializeSmoothScrolling();
     initializeWebPSupport();
 }
@@ -26,40 +25,62 @@ function initializeLucideIcons() {
     }
 }
 
-// Enhanced theme toggle functionality
+// Theme toggle — site is DARK by default; toggle switches to the
+// light Variant (body.light-mode). Icon shows the target mode:
+// dark active -> sun (tap for light); light active -> moon (tap for dark).
+function setToggleIcon(themeToggle, isLight) {
+    themeToggle.innerHTML = isLight
+        ? '<i data-lucide="moon" class="w-5 h-5"></i>'
+        : '<i data-lucide="sun" class="w-5 h-5"></i>';
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
 function initializeThemeToggle() {
     const themeToggle = document.getElementById('theme-toggle');
     const body = document.body;
-    
+
+    // Default to dark; apply saved preference if present.
+    const savedMode = localStorage.getItem('mode') || 'dark';
+    if (savedMode === 'light') body.classList.add('light-mode');
+
     if (!themeToggle) return;
-    
-    // Check for saved theme preference or default to light mode
-    const currentTheme = localStorage.getItem('theme') || 'light';
-    if (currentTheme === 'dark') {
-        body.classList.add('dark-mode');
-        themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
-        lucide.createIcons();
-    }
-    
+    setToggleIcon(themeToggle, body.classList.contains('light-mode'));
+
     themeToggle.addEventListener('click', () => {
-        body.classList.toggle('dark-mode');
-        
-        // Update icon and save preference
-        if (body.classList.contains('dark-mode')) {
-            themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
-            localStorage.setItem('theme', 'dark');
-        } else {
-            themeToggle.innerHTML = '<i data-lucide="sun" class="w-5 h-5"></i>';
-            localStorage.setItem('theme', 'light');
-        }
-        
-        // Reinitialize icons after DOM change
-        if (typeof lucide !== 'undefined') {
-            lucide.createIcons();
-        }
+        const isLight = body.classList.toggle('light-mode');
+        localStorage.setItem('mode', isLight ? 'light' : 'dark');
+        setToggleIcon(themeToggle, isLight);
     });
 }
 
+// Scroll reveal for [data-reveal] elements (staggered via data-i)
+function initializeReveal() {
+    const els = document.querySelectorAll('[data-reveal]');
+    if (!els.length) return;
+
+    const reveal = (el) => {
+        const i = parseInt(el.getAttribute('data-i') || '0', 10);
+        el.style.transitionDelay = (i * 70) + 'ms';
+        el.classList.add('is-visible');
+    };
+
+    if (!('IntersectionObserver' in window)) {
+        els.forEach(reveal);
+        return;
+    }
+
+    const io = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                reveal(entry.target);
+                io.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
+
+    els.forEach((el) => io.observe(el));
+}
+
 // Professional card hover animations
 function initializeCardAnimations() {
     document.querySelectorAll('.professional-card').forEach(card => {