script.js

// ========================================
// Scroll Reveal Animation
// ========================================
const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// Observe all sections
document.querySelectorAll('.section').forEach(section => {
    observer.observe(section);
});

// ========================================
// Smooth scroll for navigation links
// ========================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// ========================================
// Parallax effect for floating shapes
// ========================================
let ticking = false;

function updateParallax() {
    const scrolled = window.pageYOffset;
    const shapes = document.querySelectorAll('.shape');
    
    shapes.forEach((shape, index) => {
        const speed = 0.05 * (index + 1);
        const yPos = -(scrolled * speed);
        shape.style.transform = `translateY(${yPos}px)`;
    });
    
    ticking = false;
}

window.addEventListener('scroll', () => {
    if (!ticking) {
        requestAnimationFrame(updateParallax);
        ticking = true;
    }
});

// ========================================
// Interactive cursor effect (optional)
// ========================================
const cursor = document.createElement('div');
cursor.classList.add('custom-cursor');
document.body.appendChild(cursor);

const cursorStyles = document.createElement('style');
cursorStyles.textContent = `
    .custom-cursor {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 107, 53, 0.5);
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        transition: transform 0.1s ease, opacity 0.3s ease;
        transform: translate(-50%, -50%);
        opacity: 0;
    }
    
    .custom-cursor.visible {
        opacity: 1;
    }
    
    .custom-cursor.hover {
        transform: translate(-50%, -50%) scale(1.5);
        border-color: rgba(255, 107, 53, 0.8);
    }
    
    @media (max-width: 768px) {
        .custom-cursor {
            display: none;
        }
    }
`;
document.head.appendChild(cursorStyles);

document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
    cursor.classList.add('visible');
});

document.addEventListener('mouseleave', () => {
    cursor.classList.remove('visible');
});

// Add hover effect on interactive elements
const interactiveElements = document.querySelectorAll('a, button, .btn, .project-card, .skill-tag');
interactiveElements.forEach(el => {
    el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
    el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
});

// ========================================
// Typing effect for hero subtitle (optional)
// ========================================
const titles = ['开发者', '创造者', '探索者'];
let titleIndex = 0;
let charIndex = 0;
let isDeleting = false;
const heroTitle = document.querySelector('.hero-title');
const originalText = heroTitle.textContent;

function typeEffect() {
    // Skip on mobile for better performance
    if (window.innerWidth < 768) return;
    
    const currentTitle = titles[titleIndex];
    
    if (isDeleting) {
        charIndex--;
    } else {
        charIndex++;
    }
    
    const displayText = titles.map((title, i) => {
        if (i === titleIndex) {
            return title.substring(0, charIndex);
        }
        return i < titleIndex ? title : '';
    }).filter(t => t).join(' / ');
    
    // Commenting out the typing effect to preserve the original design
    // Uncomment the line below to enable typing animation
    // heroTitle.textContent = displayText + ' / ...';
    
    let timeout = isDeleting ? 50 : 100;
    
    if (!isDeleting && charIndex === currentTitle.length) {
        timeout = 2000;
        isDeleting = true;
    } else if (isDeleting && charIndex === 0) {
        isDeleting = false;
        titleIndex = (titleIndex + 1) % titles.length;
        timeout = 500;
    }
    
    // setTimeout(typeEffect, timeout);
}

// Start typing effect after page load
// window.addEventListener('load', () => setTimeout(typeEffect, 2000));

console.log('🚀 Welcome to Lew Chen\'s portfolio!');
console.log('💡 Built with passion and code.');