Website overhaul completed

src/js/navigation.js

@@ -0,0 +1,106 @@
+// Navigation JavaScript
+let lastScrollY = window.scrollY;
+let ticking = false;
+
+function updateNavigation() {
+  const navigation = document.getElementById("navigation");
+  const scrolled = window.scrollY > 50;
+
+  if (scrolled) {
+    navigation.classList.add("scrolled");
+
+    // Hide/show nav on scroll
+    if (window.scrollY > lastScrollY && window.scrollY > 100) {
+      navigation.classList.add("hidden");
+    } else {
+      navigation.classList.remove("hidden");
+    }
+  } else {
+    navigation.classList.remove("scrolled", "hidden");
+  }
+
+  lastScrollY = window.scrollY;
+  ticking = false;
+}
+
+function requestTick() {
+  if (!ticking) {
+    requestAnimationFrame(updateNavigation);
+    ticking = true;
+  }
+}
+
+// Mobile navigation functionality
+function setupMobileNavigation() {
+  const burgerMenu = document.getElementById("burger-menu");
+  const mainNav = document.getElementById("main-nav");
+  const body = document.body;
+
+  // Create overlay for mobile menu
+  const overlay = document.createElement("div");
+  overlay.className = "nav-overlay";
+  document.body.appendChild(overlay);
+
+  if (burgerMenu && mainNav) {
+    burgerMenu.addEventListener("click", function () {
+      const isActive = mainNav.classList.contains("active");
+
+      if (isActive) {
+        // Close menu
+        mainNav.classList.remove("active");
+        burgerMenu.classList.remove("active");
+        overlay.classList.remove("active");
+        body.classList.remove("nav-open");
+      } else {
+        // Open menu
+        mainNav.classList.add("active");
+        burgerMenu.classList.add("active");
+        overlay.classList.add("active");
+        body.classList.add("nav-open");
+      }
+    });
+
+    // Close menu when clicking on overlay
+    overlay.addEventListener("click", function () {
+      mainNav.classList.remove("active");
+      burgerMenu.classList.remove("active");
+      overlay.classList.remove("active");
+      body.classList.remove("nav-open");
+    });
+
+    // Close menu when clicking on a link
+    const navLinks = mainNav.querySelectorAll("a");
+    navLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        mainNav.classList.remove("active");
+        burgerMenu.classList.remove("active");
+        overlay.classList.remove("active");
+        body.classList.remove("nav-open");
+
+        // Update active state
+        navLinks.forEach((l) => l.classList.remove("active"));
+        this.classList.add("active");
+      });
+    });
+
+    // Set initial active state based on current hash
+    function setActiveNavLink() {
+      const currentHash = window.location.hash || "#home";
+      navLinks.forEach((link) => {
+        if (link.getAttribute("href") === currentHash) {
+          link.classList.add("active");
+        } else {
+          link.classList.remove("active");
+        }
+      });
+    }
+
+    // Update active state on hash change
+    window.addEventListener("hashchange", setActiveNavLink);
+    setActiveNavLink();
+  }
+}
+
+// Initialize navigation
+window.addEventListener("scroll", requestTick);
+window.addEventListener("load", updateNavigation);

src/js/overview.js

@@ -0,0 +1,57 @@
+// Counter animation for stats
+document.addEventListener("DOMContentLoaded", function () {
+  const counters = document.querySelectorAll(".stat-number");
+  let hasCounted = false;
+
+  function animateCounters() {
+    if (hasCounted) return;
+
+    counters.forEach((counter) => {
+      const target = parseInt(counter.getAttribute("data-count"));
+      const duration = 2000; // 2 seconds
+      const frameDuration = 1000 / 60; // 60 frames per second
+      const totalFrames = Math.round(duration / frameDuration);
+      let frame = 0;
+
+      const counterInterval = setInterval(() => {
+        frame++;
+        const progress = frame / totalFrames;
+        const currentCount = Math.round(target * progress);
+
+        counter.textContent = currentCount;
+
+        if (frame === totalFrames) {
+          clearInterval(counterInterval);
+        }
+      }, frameDuration);
+
+      counter.classList.add("animated");
+    });
+
+    hasCounted = true;
+  }
+
+  // Check if element is in viewport
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  // Check on scroll and on load
+  function checkCounters() {
+    const statsContainer = document.querySelector(".stats-container");
+    if (statsContainer && isInViewport(statsContainer)) {
+      animateCounters();
+      window.removeEventListener("scroll", checkCounters);
+    }
+  }
+
+  window.addEventListener("scroll", checkCounters);
+  checkCounters(); // Check on page load
+});

src/js/sectionTracker.js

@@ -0,0 +1,111 @@
+// Section tracking and navigation highlighting
+document.addEventListener("DOMContentLoaded", function () {
+  const sections = document.querySelectorAll("section[id]");
+  const navLinks = document.querySelectorAll(".nav-links a");
+
+  // Configuration
+  const offset = 100; // Offset for when section becomes "active" (accounts for fixed nav)
+  let isScrolling = false;
+
+  function getCurrentSection() {
+    let currentSection = "";
+    const scrollPosition = window.scrollY + offset;
+
+    // Find which section we're currently in
+    sections.forEach((section) => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.offsetHeight;
+      const sectionId = section.getAttribute("id");
+
+      if (
+        scrollPosition >= sectionTop &&
+        scrollPosition < sectionTop + sectionHeight
+      ) {
+        currentSection = sectionId;
+      }
+    });
+
+    // Special case: if we're at the very top, activate the first section
+    if (window.scrollY < 100) {
+      currentSection = sections[0]?.getAttribute("id") || "";
+    }
+
+    return currentSection;
+  }
+
+  function updateActiveNavLink() {
+    const currentSection = getCurrentSection();
+
+    navLinks.forEach((link) => {
+      const href = link.getAttribute("href");
+
+      // Remove active class from all links
+      link.classList.remove("active");
+
+      // Add active class to matching link
+      if (href === `#${currentSection}`) {
+        link.classList.add("active");
+      }
+    });
+  }
+
+  // Throttle scroll events for better performance
+  function handleScroll() {
+    if (!isScrolling) {
+      window.requestAnimationFrame(() => {
+        updateActiveNavLink();
+        isScrolling = false;
+      });
+      isScrolling = true;
+    }
+  }
+
+  // Listen for scroll events
+  window.addEventListener("scroll", handleScroll);
+
+  // Update on page load
+  updateActiveNavLink();
+
+  // Also update when clicking nav links (for smooth scroll)
+  navLinks.forEach((link) => {
+    link.addEventListener("click", function (e) {
+      // Remove active from all
+      navLinks.forEach((l) => l.classList.remove("active"));
+      // Add active to clicked link
+      this.classList.add("active");
+
+      // Let the scroll handler update it properly after scroll completes
+      setTimeout(updateActiveNavLink, 100);
+    });
+  });
+
+  // Handle hash changes (browser back/forward)
+  window.addEventListener("hashchange", function () {
+    setTimeout(updateActiveNavLink, 100);
+  });
+
+  // Intersection Observer for more precise tracking (progressive enhancement)
+  if ("IntersectionObserver" in window) {
+    const observerOptions = {
+      rootMargin: "-20% 0px -70% 0px", // Trigger when section is roughly in the middle of viewport
+      threshold: 0,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const sectionId = entry.target.getAttribute("id");
+          navLinks.forEach((link) => {
+            link.classList.remove("active");
+            if (link.getAttribute("href") === `#${sectionId}`) {
+              link.classList.add("active");
+            }
+          });
+        }
+      });
+    }, observerOptions);
+
+    // Observe all sections
+    sections.forEach((section) => observer.observe(section));
+  }
+});

src/js/stars.js

@@ -1,7 +1,7 @@
 // Create stellar background
 function createStars() {
   const stars = document.getElementById("stars");
-  const count = 150;
+  const count = 250;
   stars.innerHTML = ""; // Clear any existing stars
 
   for (let i = 0; i < count; i++) {

src/scripts/navigation.js

@@ -1,33 +0,0 @@
-// Navigation scroll effect
-function updateNavigation() {
-  const navigation = document.getElementById("navigation");
-  if (window.scrollY > 50) {
-    navigation.classList.add("scrolled");
-  } else {
-    navigation.classList.remove("scrolled");
-  }
-}
-
-// Mobile navigation functionality
-function setupMobileNavigation() {
-  const burgerMenu = document.getElementById("burger-menu");
-  const mainNav = document.getElementById("main-nav");
-
-  if (burgerMenu && mainNav) {
-    burgerMenu.addEventListener("click", function () {
-      mainNav.classList.toggle("active");
-      burgerMenu.classList.toggle("active");
-      document.body.classList.toggle("nav-open");
-    });
-
-    // Close menu when clicking on a link
-    const navLinks = mainNav.querySelectorAll("a");
-    navLinks.forEach((link) => {
-      link.addEventListener("click", function () {
-        mainNav.classList.remove("active");
-        burgerMenu.classList.remove("active");
-        document.body.classList.remove("nav-open");
-      });
-    });
-  }
-}

src/scripts/overview.js

@@ -1,56 +0,0 @@
-// Counter animation for stats
-document.addEventListener("DOMContentLoaded", function() {
-    const counters = document.querySelectorAll('.stat-number');
-    let hasCounted = false;
-
-    function animateCounters() {
-        if (hasCounted) return;
-
-        counters.forEach(counter => {
-            const target = parseInt(counter.getAttribute('data-count'));
-            const duration = 2000; // 2 seconds
-            const frameDuration = 1000 / 60; // 60 frames per second
-            const totalFrames = Math.round(duration / frameDuration);
-            let frame = 0;
-
-            const counterInterval = setInterval(() => {
-                frame++;
-                const progress = frame / totalFrames;
-                const currentCount = Math.round(target * progress);
-
-                counter.textContent = currentCount;
-
-                if (frame === totalFrames) {
-                    clearInterval(counterInterval);
-                }
-            }, frameDuration);
-
-            counter.classList.add('animated');
-        });
-
-        hasCounted = true;
-    }
-
-    // Check if element is in viewport
-    function isInViewport(element) {
-        const rect = element.getBoundingClientRect();
-        return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-        );
-    }
-
-    // Check on scroll and on load
-    function checkCounters() {
-        const statsContainer = document.querySelector('.stats-container');
-        if (statsContainer && isInViewport(statsContainer)) {
-            animateCounters();
-            window.removeEventListener('scroll', checkCounters);
-        }
-    }
-
-    window.addEventListener('scroll', checkCounters);
-    checkCounters(); // Check on page load
-});