body {
        background-color: #f5f5f5;
        line-height: 1.6;
        animation: fadeIn 1s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 头部样式 */
    header {
        background-color: #2c3e50;
        color: white;
        text-align: center;
        padding: 80px 0;
    }

    .avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-bottom: 20px;
        border: 3px solid white;
        animation: scaleIn 1s ease-out forwards;
        transition: transform 0.3s ease;
    }

    @keyframes scaleIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    /* 导航栏 */
    nav {
        background-color: #34495e;
        padding: 15px;
        position: sticky;
        top: 0;
        transition: top 0.3s ease;
        z-index: 100;
    }

    nav a {
        color: white;
        text-decoration: none;
        margin: 0 20px;
        transition: color 0.3s;
    }

    nav a:hover {
        color: #3498db;
    }

    /* 内容区块 */
    section {
        background-color: white;
        padding: 40px;
        margin: 20px 0;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
        will-change: transform, opacity;
    }

    section.visible {
        opacity: 1;
        transform: translateY(0);
    }

    section:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    h2 {
        color: #2c3e50;
        border-bottom: 2px solid #3498db;
        padding-bottom: 10px;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
    }

    /* 技能进度条 */
    .skill-bar {
        background-color: #eee;
        border-radius: 5px;
        margin: 15px 0;
    }

    .skill-level {
        background-color: #3498db;
        color: white;
        padding: 5px;
        border-radius: 5px;
        text-align: right;
        width: 0 !important;
        transition: width 1.5s ease-out 0.3s;
    }

    /* 联系方式 */
    .contact-list {
        list-style: none;
        padding: 0;
    }

    .contact-list li {
        margin: 10px 0;
        transition: transform 0.3s ease;
    }

    footer {
        background-color: #2c3e50;
        color: white;
        text-align: center;
        padding: 20px;
        margin-top: 40px;
    }

    /* 头像悬停动画 */
    .avatar:hover {
        transform: rotate(360deg) scale(1.1);
    }

    /* 联系信息悬停效果 */
    .contact-list li:hover {
        transform: translateX(10px);
    }
</style>

<nav class="container">
    <a href="#about">关于我</a>
    <a href="#skills">专业技能</a>
    <a href="#experience">项目经验</a>
    <a href="#contact">联系我</a>
</nav>

<main class="container">
    <section id="about">
        <h2>关于我</h2>
        <p>我是拥有5年开发经验的全栈工程师，擅长使用JavaScript生态系统进行Web开发。热爱技术分享和开源社区，持续关注前沿技术发展。</p>
        <h3>教育背景</h3>
        <p>XX大学 计算机科学与技术 硕士（2016-2019）</p>
    </section>

    <section id="skills">
        <h2>专业技能</h2>
        <div class="skill-bar">
            <div class="skill-level" style="width: 90%">JavaScript 90%</div>
        </div>
        <div class="skill-bar">
            <div class="skill-level" style="width: 85%">React 85%</div>
        </div>
        <div class="skill-bar">
            <div class="skill-level" style="width: 80%">Node.js 80%</div>
        </div>
    </section>

    <section id="experience">
        <h2>项目经验</h2>
        <h3>电商平台开发（2022）</h3>
        <p>使用React + Node.js开发的全栈电商平台，实现商品管理、支付接口对接等功能。</p>
        <h3>在线教育系统（2021）</h3>
        <p>基于微服务架构开发的在线学习平台，支持视频直播和实时互动功能。</p>
    </section>

    <section id="contact">
        <h2>联系方式</h2>
        <ul class="contact-list">
            <li>📧 Email: zhangsan@example.com</li>
            <li>📱 微信: ZhangSan_Dev</li>
            <li>💼 LinkedIn: linkedin.com/in/zhangsan</li>
            <li>🐙 GitHub: github.com/zhangsandev</li>
        </ul>
    </section>
</main>

<footer>
    <p>© 2024 张三 保留所有权利</p>
</footer>

<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 打字机效果
        const titleText = "张三";
        let index = 0;
        
        function typeWriter() {
            if (index < titleText.length) {
                document.getElementById('typing-title').textContent += titleText.charAt(index);
                index++;
                setTimeout(typeWriter, 150);
            }
        }
        typeWriter();

        // 滚动监听
        window.addEventListener('scroll', () => {
            // 区块入场动画
            document.querySelectorAll('section').forEach(section => {
                const sectionTop = section.getBoundingClientRect().top;
                if (sectionTop < window.innerHeight * 0.8) {
                    section.classList.add('visible');
                }
            });

            // 导航栏隐藏/显示
            const nav = document.querySelector('nav');
            if (window.scrollY > 100) {
                nav.style.top = '-60px';
            } else {
                nav.style.top = '0';
            }
        });

        // 初始化技能条宽度
        document.querySelectorAll('.skill-level').forEach(bar => {
            康斯特靶点=酒吧.风格.宽度;
            风格.宽度=目标二;
        });

        // 平滑滚动
        document.querySelectorAll('nav a').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                (c)康斯特靶点=链接;
                document.querySelector(targetId).scrollIntoView({
                    行为:"平滑"
                });
            });
        });

        // 标题悬停效果
        document.querySelectorAll('h2').forEach(title => {
            title.addEventListener('mouseover', () => {
                title.style.transform = 'rotateZ(-2deg)';
            });
            title.addEventListener('mouseout', () => {
                title.style.transform = 'rotateZ(0)';
            });
        });
    });
</script>