function loadHTMLComponents() {
    // Function to load HTML into the specified container
    function loadHTML(containerId, fileName) {
        fetch(fileName)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Error loading ${fileName}: ${response.statusText}`);
                }
                return response.text();
            })
            .then(data => {
                document.getElementById(containerId).innerHTML = data;
  
                // Call activateLink function once header is loaded
                if (fileName.includes('header.html')) {
                    activateLink();
                }
            })
            .catch(error => {
                console.error(error);
            });
    }
  
    // Load header and footer
    loadHTML('header', 'header.html');
    loadHTML('footer', 'footer.html');
  }
  
  // Function to activate the correct link in the header
  function activateLink() {
    const currentPage = window.location.pathname.split('/').pop().split('.').shift();
    const navLinks = document.querySelectorAll('a[data-page]');
  
    navLinks.forEach(link => {
        if (link.getAttribute('data-page') === currentPage) {
            link.classList.add('active');  // Add 'active' class to the current page link
        }
    });
  }
  
  // Run the function to load the components when the DOM content is fully loaded
  document.addEventListener('DOMContentLoaded', loadHTMLComponents);
  
  
  window.onload = function () {
    window.scrollTo(0, 0);
      window.onscroll = function () {
      var header_navbar = document.querySelector(".navbar");
      var sticky = header_navbar.offsetTop;
      if (window.pageYOffset > sticky) {
        header_navbar.classList.add("sticky");
      } else {
        header_navbar.classList.remove("sticky");
      };
  };
  };

  // Scroll Trigger Register in Gsap
  gsap.registerPlugin(ScrollTrigger);

  const cards = gsap.utils.toArray(".work-block-card");
  const spacer = 50; // Space Between Cards
  
  cards.forEach((card, index) => {
    ScrollTrigger.create({
      trigger: card,
      start: `top-=${index * spacer} top`, 
      endTrigger: '.work-button', 
      end: `bottom bottom+=${250 + (cards.length * spacer)}`, 
      pin: true,
      pinSpacing: false,
      // markers: true,
      id: 'card-pin',
      invalidateOnRefresh: true,
    });
  });

  let prjImages = document.querySelectorAll(".work-image");

  prjImages.forEach((img) => {
    let cursor = img.querySelector(".view-cursur");
    let cursorHeight = cursor.offsetHeight;

    img.addEventListener("mousemove", function(e) {

        // Get the bounding rectangle of the image
        const rect = img.getBoundingClientRect();
  
        let offSetX = cursorHeight/2 ;
        let offSetY = cursorHeight/2 ;
        
        // Calculate the cursor's position relative to the image
        let x = e.clientX - rect.left - offSetX  + "px";
        let y = e.clientY - rect.top - offSetY + "px";
        
        // Update the cursor position
        cursor.style.left = x;
        cursor.style.top = y;
        cursor.style.opacity = "1"; // Make sure to show the cursor
  
        console.log(x, y)
    });
    
    img.addEventListener("mouseleave", function() {
        cursor.style.opacity = "0"; // Hide the cursor when leaving the image
    });
  })


    function CreateEachSpanOfText() {
    var str = 'As a passionate UI/UX designer, I transform concepts into captivating digital experiences. With a keen eye for detail and a knack for intuitive design, I craft high-fidelity mockups and seamless layouts that resonate with users. My expertise in cross-browser development, ensures that my designs are polished and production-ready across all platforms.';
    var split = str.split("");

    let aboutHeading = document.querySelectorAll(".ab-heading-content");
    aboutHeading.forEach((heading) => {
        heading.innerHTML = split.map(letter => `<span class="ab-heading-char">${letter}</span>`).join('');
    })
    }
    CreateEachSpanOfText()

    let abTxtTL = gsap.timeline({
        scrollTrigger: {
            trigger: ".about-section",
            pin: true,
            start: 'top top+=100',
            end: '+=3000',
            scrub: 1,
            // markers: true,
        }
    })

    abTxtTL.to(".ab-heading-outer .ab-heading-char", {
        opacity:1,
        scale: 1,
        stagger: .2
    })


    const lenis = new Lenis()

    lenis.on('scroll', (e) => {
    console.log(e)
    })

    function raf(time) {
    lenis.raf(time)
    requestAnimationFrame(raf)
    }

    requestAnimationFrame(raf)
  


  

