script.js

document.addEventListener('DOMContentLoaded', () => {
    // DOM element selections
    const skateboarder = document.getElementById('skateboarder');
    const imageUpload = document.getElementById('imageUpload');
    const title = document.querySelector('h1');
    const mainContainer = document.querySelector('.container');
    const cvContainer = document.getElementById('cv-container');
    const backButton = document.querySelector('.back-button');
    const flipButton = document.getElementById('flipButton');
    
    // State variables
    let clickCount = 0;
    let clickTimer;

    // Image upload handler
    imageUpload.addEventListener('change', function(e) {
        const file = e.target.files[0];
        const reader = new FileReader();
        
        reader.onload = function(e) {
            skateboarder.style.backgroundImage = `url('${e.target.result}')`;
        };
        
        reader.readAsDataURL(file);
    });

    // Flip button handler
    flipButton.addEventListener('click', startAnimation);

    function startAnimation() {
        // Make image fully transparent
        skateboarder.classList.add('transparent');
        
        // Move image to screen side
        setTimeout(() => {
            skateboarder.classList.add('start-position');
        }, 500);

        // Gradually reappear before flip
        setTimeout(() => {
            skateboarder.classList.remove('transparent');
            skateboarder.classList.add('fade-in');
        }, 1500);

        // Add flip animation
        setTimeout(() => {
            skateboarder.classList.add('animate');
        }, 2000);
    }

    // Animation end handler
    skateboarder.addEventListener('animationend', () => {
        // Reset all classes
        skateboarder.classList.remove('start-position', 'animate', 'transparent', 'fade-in');
    });

    // Title click handler for CV toggle
    title.addEventListener('click', () => {
        clickCount++;
        
        clearTimeout(clickTimer);
        clickTimer = setTimeout(() => {
            if (clickCount >= 5) {
                // Toggle CV view
                mainContainer.style.display = 'none';
                cvContainer.style.display = 'block';
            }
            clickCount = 0;
        }, 1000);
    });

    // Back button handler
    backButton.addEventListener('click', () => {
        mainContainer.style.display = 'block';
        cvContainer.style.display = 'none';
    });
});