script.js

// Main JavaScript functionality
document.addEventListener('DOMContentLoaded', () => {
    // Animation for section headers
    const sectionHeaders = document.querySelectorAll('section h2');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fadeInUp');
            }
        });
    }, { threshold: 0.1 });
    
    sectionHeaders.forEach(header => {
        observer.observe(header);
    });

    // Tooltips for technology icons
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', showTooltip);
        el.addEventListener('mouseleave', hideTooltip);
    });

    function showTooltip(e) {
        const tooltip = document.createElement('div');
        tooltip.className = 'absolute bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-50';
        tooltip.textContent = e.target.dataset.tooltip;
        document.body.appendChild(tooltip);
        
        const rect = e.target.getBoundingClientRect();
        tooltip.style.top = `${rect.top - 30}px`;
        tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
        
        e.target.dataset.tooltipId = tooltip;
    }

    function hideTooltip(e) {
        if (e.target.dataset.tooltipId) {
            document.body.removeChild(e.target.dataset.tooltipId);
            delete e.target.dataset.tooltipId;
        }
    }
});

// Add custom animation classes to Tailwind
if (typeof tailwind !== 'undefined') {
    tailwind.config = {
        ...tailwind.config,
        theme: {
            ...tailwind.config.theme,
            extend: {
                ...tailwind.config.theme.extend,
                animation: {
                    fadeInUp: 'fadeInUp 0.5s ease-out forwards'
                },
                keyframes: {
                    fadeInUp: {
                        '0%': { opacity: 0, transform: 'translateY(20px)' },
                        '100%': { opacity: 1, transform: 'translateY(0)' }
                    }
                }
            }
        }
    };
}