script.js

document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('.skill-bar').forEach(barContainer => {
        const progressDiv = barContainer.querySelector('.progress');
        const skillNameDt = barContainer.querySelector('dt');

        if (progressDiv && skillNameDt) {
            const percentValue = progressDiv.getAttribute('data-width');
           
            skillNameDt.setAttribute('data-percent', percentValue); 
        }
    });

   
    const isInViewport = (element) => {
        const rect = element.getBoundingClientRect();
        return (
            rect.top < (window.innerHeight || document.documentElement.clientHeight) && 
            rect.bottom > 0
        );
    };

    // --- 1. Skills Bar Animation Logic 
    const skillBars = document.querySelectorAll('.skills-container .progress');
    
    const animateSkills = () => {
        skillBars.forEach(progress => {
            const width = progress.getAttribute('data-width');
            
            if (isInViewport(progress)) {
                progress.style.width = width;
            }
        });
    };

    
    animateSkills();
    window.addEventListener('scroll', animateSkills);


    // --- 2. Portfolio Filter Logic 
const filterButtons = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
const transitionDuration = 500; 

filterButtons.forEach(button => {
    button.addEventListener('click', () => {
        const filter = button.getAttribute('data-filter');


        filterButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        
        galleryItems.forEach(item => {
            if (!item.classList.contains('hide')) { // Only hide if visible
                item.classList.add('hide'); 
                
                setTimeout(() => {
                    if (item.classList.contains('hide')) {
                        item.style.display = 'none';
                    }
                }, transitionDuration); 
            }
        });
        
       
        setTimeout(() => {
            galleryItems.forEach(item => {
                const categories = item.getAttribute('data-category');

                if (filter === 'all' || categories.includes(filter)) {
                    
                    item.style.display = 'block';

                    
                    setTimeout(() => {
                        item.classList.remove('hide'); 
                    }, 50); 
                }
            });
        }, transitionDuration); 
    });
});


    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    const slides = document.querySelectorAll('.testimonial-carousel article.testimonial-slide');
    let currentIndex = 0;

    const updateCarousel = () => {
        slides.forEach((slide, index) => {
            slide.classList.remove('active');
    
            if (index === currentIndex) {
                slide.classList.add('active');
            }
        });
    };

    if (prevBtn && nextBtn && slides.length > 0) {
        prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex > 0) ? currentIndex - 1 : slides.length - 1;
            updateCarousel();
        });

        nextBtn.addEventListener('click', () => {
            currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
            updateCarousel();
        });
    }


    // --- 4. Menu Toggle for Mobile Nav ---
    const menuToggle = document.getElementById('menu-toggle');
    const navbar = document.querySelector('.navbar');
    const navLinks = document.querySelectorAll('.navbar a'); // New selector for all links

    if (menuToggle && navbar) {
        menuToggle.addEventListener('click', () => {
            // Toggles the mobile menu visibility
            navbar.classList.toggle('active'); 
            
            // Toggles the icon from hamburger to X
            const icon = menuToggle.querySelector('i');
            icon.classList.toggle('fa-times');
            icon.classList.toggle('fa-bars');
        });

        // Close menu AND Highlight Active Link when a link is clicked
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                
                // 1. Remove the 'active' class from all links
                navLinks.forEach(item => item.classList.remove('active'));
                
                // 2. Add the 'active' class to the clicked link
                link.classList.add('active');
                
                // 3. Close menu (for mobile UX)
                navbar.classList.remove('active');
                const icon = menuToggle.querySelector('i');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            });
        });
    

        
        document.querySelectorAll('.navbar a').forEach(link => {
            link.addEventListener('click', () => {
                navbar.classList.remove('active');
                const icon = menuToggle.querySelector('i');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            });
        });
    }

    
    const backToTopBtn = document.getElementById('backToTopBtn');
    
    if (backToTopBtn) {
        // Show button when scrolling down
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.style.display = 'block';
            } else {
                backToTopBtn.style.display = 'none';
            }
        });

        // Scroll to top when clicked
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
});