script.js

// 移动端导航菜单切换
const mobileMenu = document.getElementById('mobile-menu');
const navMenu = document.querySelector('.nav-menu');

mobileMenu.addEventListener('click', () => {
    mobileMenu.classList.toggle('active');
    navMenu.classList.toggle('active');
});

// 点击导航链接时关闭移动端菜单
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
        mobileMenu.classList.remove('active');
        navMenu.classList.remove('active');
    });
});

// 平滑滚动到指定部分
function smoothScroll(target) {
    const element = document.querySelector(target);
    const offsetTop = element.offsetTop - 70; // 减去导航栏高度
    
    window.scrollTo({
        top: offsetTop,
        behavior: 'smooth'
    });
}

// 为所有导航链接添加平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = this.getAttribute('href');
        smoothScroll(target);
    });
});

// 导航栏滚动效果
window.addEventListener('scroll', () => {
    const navbar = document.querySelector('.navbar');
    if (window.scrollY > 50) {
        navbar.style.background = 'rgba(255, 255, 255, 0.98)';
        navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.15)';
    } else {
        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
        navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
    }
});

// 滚动动画观察器
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

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

// 观察需要动画的元素
document.addEventListener('DOMContentLoaded', () => {
    const animatedElements = document.querySelectorAll(
        '.about-content, .skill-category, .project-card, .contact-content'
    );
    
    animatedElements.forEach(el => {
        observer.observe(el);
    });
});

// 技能标签悬停效果
document.querySelectorAll('.skill-item').forEach(item => {
    item.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.05) rotate(2deg)';
    });
    
    item.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1) rotate(0deg)';
    });
});

// 项目卡片悬停效果增强
document.querySelectorAll('.project-card').forEach(card => {
    card.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-10px) scale(1.02)';
    });
    
    card.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0) scale(1)';
    });
});

// 统计数字动画
function animateCounter(element, target, duration = 2000) {
    let start = 0;
    const increment = target / (duration / 16);
    
    const timer = setInterval(() => {
        start += increment;
        if (start >= target) {
            element.textContent = target + '+';
            clearInterval(timer);
        } else {
            element.textContent = Math.floor(start) + '+';
        }
    }, 16);
}

// 当统计部分进入视口时开始动画
const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const stats = entry.target.querySelectorAll('.stat h3');
            stats.forEach((stat, index) => {
                const targets = [500, 100, 5]; // 对应的目标数字
                setTimeout(() => {
                    animateCounter(stat, targets[index]);
                }, index * 200);
            });
            statsObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.5 });

const aboutStats = document.querySelector('.about-stats');
if (aboutStats) {
    statsObserver.observe(aboutStats);
}

// 代码动画效果增强
function typeWriter(element, text, speed = 50) {
    let i = 0;
    element.textContent = '';
    
    function type() {
        if (i < text.length) {
            element.textContent += text.charAt(i);
            i++;
            setTimeout(type, speed);
        }
    }
    
    type();
}

// 当代码块进入视口时开始打字动画
const codeObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const codeLines = entry.target.querySelectorAll('.code-line');
            const texts = [
                'fn main() {',
                '    println!("Hello, World!");',
                '}'
            ];
            
            codeLines.forEach((line, index) => {
                setTimeout(() => {
                    typeWriter(line, texts[index], 100);
                }, index * 800);
            });
            
            codeObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.5 });

const codeAnimation = document.querySelector('.code-animation');
if (codeAnimation) {
    codeObserver.observe(codeAnimation);
}

// 主题切换功能（可选）
function createThemeToggle() {
    const themeToggle = document.createElement('button');
    themeToggle.innerHTML = '🌙';
    themeToggle.className = 'theme-toggle';
    themeToggle.style.cssText = `
        position: fixed;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        z-index: 1000;
    `;
    
    themeToggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-theme');
        themeToggle.innerHTML = document.body.classList.contains('dark-theme') ? '☀️' : '🌙';
    });
    
    document.body.appendChild(themeToggle);
}

// 添加暗色主题样式
function addDarkThemeStyles() {
    const darkThemeCSS = `
        .dark-theme {
            --bg-color: #1a1a1a;
            --text-color: #e0e0e0;
            --card-bg: #2d2d2d;
            --border-color: #404040;
        }
        
        .dark-theme body {
            background-color: var(--bg-color);
            color: var(--text-color);
        }
        
        .dark-theme .navbar {
            background: rgba(45, 45, 45, 0.95);
        }
        
        .dark-theme .nav-link {
            color: var(--text-color);
        }
        
        .dark-theme .about,
        .dark-theme .projects {
            background: var(--bg-color);
        }
        
        .dark-theme .skill-category,
        .dark-theme .project-card {
            background: var(--card-bg);
            border-color: var(--border-color);
        }
        
        .dark-theme .section-title {
            color: var(--text-color);
        }
    `;
    
    const style = document.createElement('style');
    style.textContent = darkThemeCSS;
    document.head.appendChild(style);
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    // 添加暗色主题样式
    addDarkThemeStyles();
    
    // 创建主题切换按钮
    createThemeToggle();
    
    // 添加页面加载动画
    document.body.style.opacity = '0';
    setTimeout(() => {
        document.body.style.transition = 'opacity 0.5s ease';
        document.body.style.opacity = '1';
    }, 100);
});

// 鼠标跟随效果（可选）
function createMouseFollower() {
    const follower = document.createElement('div');
    follower.className = 'mouse-follower';
    follower.style.cssText = `
        position: fixed;
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transition: transform 0.1s ease;
        opacity: 0;
    `;
    
    document.body.appendChild(follower);
    
    document.addEventListener('mousemove', (e) => {
        follower.style.left = e.clientX - 10 + 'px';
        follower.style.top = e.clientY - 10 + 'px';
        follower.style.opacity = '0.6';
    });
    
    document.addEventListener('mouseleave', () => {
        follower.style.opacity = '0';
    });
}

// 性能优化：节流函数
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

// 优化滚动事件
window.addEventListener('scroll', throttle(() => {
    // 滚动相关的代码
}, 16));

// 错误处理
window.addEventListener('error', (e) => {
    console.error('页面错误:', e.error);
});

// 页面可见性API
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        document.title = '👋 回来看看吧 - Chord';
    } else {
        document.title = 'Chord - 个人网站';
    }
});

console.log('🚀 个人网站已加载完成！');
console.log('💻 欢迎查看我的项目和技能展示');