diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000..aceead7
Binary files /dev/null and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index 0a82644..3efc791 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,365 +1,906 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Zengtudor - 个人简历</title>
-    <style>
-        :root {
-            --bg-color: #f4f4f4;
-            --card-bg-color: #ffffff;
-            --text-color: #333333;
-            --link-color: #007BFF;
-            --link-hover-color: #0056b3;
-            --divider-color: #e8e8e8;
-            --progress-bg-color: #e9ecef;
-            --progress-bar-color: #007BFF;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            margin: 0;
-            padding: 0;
-            scroll-behavior: smooth;
-        }
-
-        .card {
-            background-color: var(--card-bg-color);
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            margin: 50px auto;
-            max-width: 85%;
-            padding: 30px;
-            transition: box-shadow 0.3s ease;
-        }
-
-        .card:hover {
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-        }
-
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 30px;
-        }
-
-        .avatar {
-            border-radius: 50%;
-            width: 120px;
-            height: 120px;
-            object-fit: cover;
-            transition: transform 0.3s ease;
-        }
-
-        .avatar:hover {
-            transform: scale(1.1);
-        }
-
-        .name-contact {
-            flex-grow: 1;
-            margin-left: 20px;
-        }
-
-        .name {
-            font-size: 32px;
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
-
-        .position {
-            font-size: 18px;
-            color: #666;
-            margin-bottom: 10px;
-        }
-
-        .contact {
-            font-size: 16px;
-            line-height: 1.6;
-        }
-
-        .contact a {
-            color: var(--link-color);
-            text-decoration: none;
-            margin-right: 15px;
-            transition: color 0.3s ease;
-        }
-
-        .contact a:hover {
-            color: var(--link-hover-color);
-        }
-
-        .intro {
-            font-family: 'Dancing Script', cursive;
-            position: relative;
-            padding-left: 20px;
-            margin-bottom: 30px;
-        }
-
-        .intro::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 3px;
-            background-color: var(--link-color);
-        }
-
-        .section {
-            margin-bottom: 30px;
-            position: relative;
-        }
-
-        .section:not(:last-child)::after {
-            content: '';
-            position: absolute;
-            bottom: -15px;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background-color: var(--divider-color);
-        }
-
-        .section h2 {
-            font-size: 24px;
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-        }
-
-        .timeline-item {
-            margin-bottom: 20px;
-        }
-
-        .timeline-item h3 {
-            font-size: 20px;
-            margin-bottom: 5px;
-        }
-
-        .timeline-item p {
-            margin: 0;
-            line-height: 1.6;
-        }
-
-        .progress-bar {
-            background-color: var(--progress-bg-color);
-            border-radius: 5px;
-            height: 20px;
-            margin-bottom: 15px;
-            position: relative;
-        }
-
-        .progress {
-            background-color: var(--progress-bar-color);
-            border-radius: 5px;
-            height: 100%;
-            text-align: left;
-            padding-left: 10px;
-            color: white;
-            font-size: 14px;
-        }
-
-        .radar-chart {
-            width: 100%;
-            height: 230px;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
+    <title>Zengtudor | 个人作品集</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#165DFF',
+                        secondary: '#FF7D00',
+                        dark: '#1D2129',
+                        light: '#F2F3F5',
+                        'gray-deep': '#4E5969',
+                        'gray-light': '#C9CDD4'
+                    },
+                    fontFamily: {
+                        inter: ['Inter', 'system-ui', 'sans-serif'],
+                    },
+                }
             }
-            to {
-                opacity: 1;
-                transform: translateY(0);
+        }
+    </script>
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .content-auto {
+                content-visibility: auto;
+            }
+            .text-shadow {
+                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            .animate-float {
+                animation: float 3s ease-in-out infinite;
+            }
+            .card-hover {
+                transition: all 0.3s ease;
+            }
+            .card-hover:hover {
+                transform: translateY(-8px);
+                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            }
+            .nav-scrolled {
+                @apply bg-white bg-opacity-95 shadow-md;
             }
         }
 
-        .fade-in {
-            animation: fadeIn 1s ease-out;
-        }
-
-        .skills-container {
-            display: flex;
-            gap: 20px;
-        }
-
-        .progress-container {
-            flex: 1;
-        }
-
-        .radar-container {
-            flex: 1;
-        }
-
-        .footer-contact {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-            margin-top: 30px;
-        }
-
-        .footer-contact a {
-            color: var(--link-color);
-            font-size: 24px;
-            transition: color 0.3s ease;
-        }
-
-        .footer-contact a:hover {
-            color: var(--link-hover-color);
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
         }
     </style>
-    <link href="https://fonts.googleapis.com/css2?family=Dancing Script&display=swap" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 </head>
+<body class="font-inter bg-light text-dark antialiased">
+    <!-- 导航栏 -->
+    <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 py-4">
+        <div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
+            <a href="#hero" class="text-2xl font-bold text-primary flex items-center space-x-2">
+                <span class="fa fa-code"></span>
+                <span>Zengtudor</span>
+            </a>
+            
+            <!-- 桌面导航 -->
+            <nav class="hidden md:flex space-x-8">
+                <a href="#about" class="text-dark hover:text-primary transition-colors font-medium">关于我</a>
+                <a href="#education" class="text-dark hover:text-primary transition-colors font-medium">教育背景</a>
+                <a href="#skills" class="text-dark hover:text-primary transition-colors font-medium">专业技能</a>
+                <a href="#projects" class="text-dark hover:text-primary transition-colors font-medium">项目经验</a>
+                <a href="#awards" class="text-dark hover:text-primary transition-colors font-medium">获奖信息</a>
+                <a href="#contact" class="text-dark hover:text-primary transition-colors font-medium">联系我</a>
+            </nav>
+            
+            <!-- 移动端菜单按钮 -->
+            <button id="menu-toggle" class="md:hidden text-dark focus:outline-none">
+                <span class="fa fa-bars text-2xl"></span>
+            </button>
+        </div>
+        
+        <!-- 移动端导航菜单 -->
+        <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg absolute w-full py-4 px-4 mt-2">
+            <nav class="flex flex-col space-y-4">
+                <a href="#about" class="text-dark hover:text-primary transition-colors font-medium py-2">关于我</a>
+                <a href="#education" class="text-dark hover:text-primary transition-colors font-medium py-2">教育背景</a>
+                <a href="#skills" class="text-dark hover:text-primary transition-colors font-medium py-2">专业技能</a>
+                <a href="#projects" class="text-dark hover:text-primary transition-colors font-medium py-2">项目经验</a>
+                <a href="#awards" class="text-dark hover:text-primary transition-colors font-medium py-2">获奖信息</a>
+                <a href="#contact" class="text-dark hover:text-primary transition-colors font-medium py-2">联系我</a>
+            </nav>
+        </div>
+    </header>
 
-<body>
-    <div class="card">
-        <div class="header">
-            <img class="avatar" src="https://picsum.photos/200/200" alt="Zengtudor">
-            <div class="name-contact">
-                <div class="name">Zengtudor</div>
-                <div class="position">算法竞赛与全栈开发学习者</div>
-                <div class="contact">
-                    <a href="mailto:2917946698@qq.com"><i class="fa-solid fa-envelope"></i> 2917946698@qq.com</a>
-                    <a href="mailto:Zengtudor@outlook.com"><i class="fa-solid fa-envelope"></i> Zengtudor@outlook.com</a>
-                    <a href="https://gitcode.com/Zengtudor"><i class="fa-brands fa-github"></i> GitCode</a>
-                    <a href="https://blog.zziyu.cn/"><i class="fa-brands fa-blogger"></i> 个人博客</a>
-                    <a href="https://git.zziyu.cn/"><i class="fa-brands fa-gitlab"></i> 代码库</a>
+    <!-- 英雄区域 -->
+    <section id="hero" class="min-h-screen flex items-center pt-20 bg-gradient-to-br from-primary/5 to-light">
+        <div class="container mx-auto px-4 md:px-6 py-16 md:py-24">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0">
+                    <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-4">
+                        你好，我是 <span class="text-primary">Zengtudor</span>
+                    </h1>
+                    <p class="text-[clamp(1.1rem,2vw,1.3rem)] text-gray-deep mb-8 max-w-lg">
+                        热爱计算机科学的高中生，专注于C++算法竞赛与全栈开发，追求技术创新
+                    </p>
+                    <div class="flex flex-wrap gap-4">
+                        <a href="#projects" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
+                            查看我的项目
+                        </a>
+                        <a href="#contact" class="bg-white hover:bg-gray-50 text-primary border border-primary font-medium py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all transform hover:-translate-y-1">
+                            联系我
+                        </a>
+                    </div>
+                    <div class="flex space-x-6 mt-10">
+                        <a href="https://gitcode.com/Zengtudor" target="_blank" class="text-dark hover:text-primary transition-colors">
+                            <span class="fa-brands fa-github text-2xl"></span>
+                        </a>
+                        <a href="https://blog.zziyu.cn/" target="_blank" class="text-dark hover:text-primary transition-colors">
+                            <span class="fa fa-globe text-2xl"></span>
+                        </a>
+                        <a href="https://git.zziyu.cn/" target="_blank" class="text-dark hover:text-primary transition-colors">
+                            <span class="fa fa-code-fork text-2xl"></span>
+                        </a>
+                        <a href="mailto:Zengtudor@outlook.com" target="_blank" class="text-dark hover:text-primary transition-colors">
+                            <span class="fa fa-envelope text-2xl"></span>
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center">
+                    <div class="relative">
+                        <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-primary/10 flex items-center justify-center animate-float">
+                            <img src="https://picsum.photos/400/400" alt="Zengtudor" class="w-56 h-56 md:w-72 md:h-72 rounded-full object-cover border-4 border-white shadow-xl">
+                        </div>
+                        <div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg card-hover">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+                                    <span class="fa fa-code text-primary text-xl"></span>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-deep">已完成项目</p>
+                                    <p class="text-lg font-bold">10+</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="absolute -top-4 -left-4 bg-white p-4 rounded-lg shadow-lg card-hover">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center">
+                                    <span class="fa fa-trophy text-secondary text-xl"></span>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-deep">获奖经历</p>
+                                    <p class="text-lg font-bold">8+</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="intro fade-in">
-            <p>我是Zengtudor，一名热爱计算机科学的高中生。专注于C++算法竞赛与全栈开发，熟悉现代C++编程范式，掌握Node.js、Vue、C#和Python等多种技术栈。对生物信息工程项目有深入研究，曾实现40倍并行加速优化。热衷于探索计算机科学的各个领域，追求技术的极致与创新。如有有偿程序开发需求，欢迎联系我。</p>
-        </div>
-        <div class="section fade-in">
-            <h2>教育背景</h2>
-            <div class="timeline-item">
-                <h3>高中在读</h3>
-                <p>2024 - 至今</p>
-                <ul>
-                    <li>参与学校科技创新社团，主导多个编程项目开发。</li>
-                </ul>
+    </section>
+
+    <!-- 关于我 -->
+    <section id="about" class="py-20 bg-white">
+        <div class="container mx-auto px-4 md:px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">关于我</h2>
+                <div class="w-20 h-1 bg-primary mx-auto"></div>
             </div>
-        </div>
-        <div class="section fade-in">
-            <h2>获奖信息</h2>
-            <div class="timeline-item">
-                <h3>国家级竞赛</h3>
-                <ul>
-                    <li>[2023] CSP-J（入门级）二等奖</li>
-                    <li>[2024] CSP-S（提高级）三等奖</li>
-                    <li>[2024] NOIP（全国青少年信息学奥林匹克联赛）三等奖</li>
-                    <li>蓝桥杯省赛一等奖</li>
-                </ul>
-            </div>
-            <div class="timeline-item">
-                <h3>其他荣誉</h3>
-                <ul>
-                    <li>深圳科创明日之星称号</li>
-                </ul>
-            </div>
-        </div>
-        <div class="section fade-in">
-            <h2>专业技能</h2>
-            <div class="skills-container">
-                <div class="progress-container">
-                    <div class="progress-bar">
-                        <div class="progress" style="width: 95%;">C++ 算法竞赛 - 95%</div>
-                    </div>
-                    <div class="progress-bar">
-                        <div class="progress" style="width: 85%;">现代 C++ 编程 - 85%</div>
-                    </div>
-                    <div class="progress-bar">
-                        <div class="progress" style="width: 80%;">Node.js & Vue 开发 - 80%</div>
-                    </div>
-                    <div class="progress-bar">
-                        <div class="progress" style="width: 75%;">Python 与数据处理 - 75%</div>
-                    </div>
-                    <div class="progress-bar">
-                        <div class="progress" style="width: 70%;">Docker 与容器化部署 - 70%</div>
-                    </div>
-                    <div class="progress-bar">
-                        <div class="progress" style="width: 65%;">嵌入式系统开发 - 65%</div>
+            
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h3 class="text-2xl font-bold mb-6">热爱技术的全栈开发者</h3>
+                    <p class="text-gray-deep mb-6 leading-relaxed">
+                        我是一名热爱计算机科学的高中生，目前专注于C++算法竞赛与全栈开发。我对技术充满热情，不断探索和学习新的知识与技能。
+                    </p>
+                    <p class="text-gray-deep mb-6 leading-relaxed">
+                        熟悉现代C++编程范式，掌握Node.js、Vue、C#、Python等技术栈。擅长生物信息工程优化、桌面应用开发、Web全栈技术及大模型应用。
+                    </p>
+                    <p class="text-gray-deep mb-8 leading-relaxed">
+                        曾实现生物信息算法40倍并行加速，具备数据驱动框架、SSR渲染、大模型本地部署等项目经验。追求技术创新，提供有偿程序开发服务。
+                    </p>
+                    
+                    <div class="grid grid-cols-2 gap-4 mb-8">
+                        <div class="flex items-center">
+                            <span class="fa fa-envelope text-primary mr-3"></span>
+                            <span>Zengtudor@outlook.com</span>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="fa fa-graduation-cap text-primary mr-3"></span>
+                            <span>高中在读</span>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="fa fa-code text-primary mr-3"></span>
+                            <span>全栈开发</span>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="fa fa-map-marker text-primary mr-3"></span>
+                            <span>深圳</span>
+                        </div>
                     </div>
+                    
+                    <a href="#contact" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
+                        联系我
+                    </a>
                 </div>
-                <div class="radar-container">
-                    <canvas class="radar-chart" id="radarChart"></canvas>
+                
+                <div class="relative">
+                    <div class="bg-primary/5 rounded-2xl p-6">
+                        <div class="grid grid-cols-2 gap-6">
+                            <div class="bg-white rounded-xl p-6 shadow-md card-hover">
+                                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
+                                    <span class="fa fa-code text-primary text-xl"></span>
+                                </div>
+                                <h4 class="font-bold text-lg mb-2">算法优化</h4>
+                                <p class="text-gray-deep">曾实现生物信息算法40倍并行加速</p>
+                            </div>
+                            
+                            <div class="bg-white rounded-xl p-6 shadow-md card-hover">
+                                <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-4">
+                                    <span class="fa fa-desktop text-secondary text-xl"></span>
+                                </div>
+                                <h4 class="font-bold text-lg mb-2">桌面应用</h4>
+                                <p class="text-gray-deep">开发高性能跨平台桌面应用框架</p>
+                            </div>
+                            
+                            <div class="bg-white rounded-xl p-6 shadow-md card-hover">
+                                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
+                                    <span class="fa fa-globe text-primary text-xl"></span>
+                                </div>
+                                <h4 class="font-bold text-lg mb-2">Web全栈</h4>
+                                <p class="text-gray-deep">精通Vue.js、Node.js等全栈技术</p>
+                            </div>
+                            
+                            <div class="bg-white rounded-xl p-6 shadow-md card-hover">
+                                <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-4">
+                                    <span class="fa fa-robot text-secondary text-xl"></span>
+                                </div>
+                                <h4 class="font-bold text-lg mb-2">大模型应用</h4>
+                                <p class="text-gray-deep">完成大语言模型的本地部署与优化</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 装饰元素 -->
+                    <div class="absolute -top-4 -right-4 w-20 h-20 bg-primary/10 rounded-lg -z-10"></div>
+                    <div class="absolute -bottom-4 -left-4 w-20 h-20 bg-secondary/10 rounded-lg -z-10"></div>
                 </div>
             </div>
-            <script>
-                const ctx = document.getElementById('radarChart').getContext('2d');
-                const myRadarChart = new Chart(ctx, {
-                    type: 'radar',
-                    data: {
-                        labels: ['C++ 算法', '现代 C++', 'Web 开发', '数据处理', '系统部署', '嵌入式开发'],
-                        datasets: [{
-                            label: '技能水平',
-                            data: [95, 85, 80, 75, 70, 65],
-                            backgroundColor: 'rgba(0, 123, 255, 0.2)',
-                            borderColor: 'rgba(0, 123, 255, 1)',
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        scales: {
-                            r: {
-                                min: 0,
-                                max: 100
-                            }
-                        }
+        </div>
+    </section>
+
+    <!-- 教育背景 -->
+    <section id="education" class="py-20 bg-gray-50">
+        <div class="container mx-auto px-4 md:px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">教育背景</h2>
+                <div class="w-20 h-1 bg-primary mx-auto"></div>
+            </div>
+            
+            <div class="relative">
+                <!-- 时间线 -->
+                <div class="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-primary/20 transform md:-translate-x-1/2"></div>
+                
+                <!-- 教育经历 -->
+                <div class="space-y-12">
+                    <!-- 当前教育 -->
+                    <div class="relative">
+                        <div class="absolute left-0 md:left-1/2 top-0 w-4 h-4 bg-primary rounded-full transform md:-translate-x-1/2 -translate-y-2"></div>
+                        
+                        <div class="md:flex md:justify-between">
+                            <div class="md:w-5/12 mb-6 md:mb-0 md:pr-8 md:text-right">
+                                <span class="inline-block bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium mb-2">2024 - 至今</span>
+                                <h3 class="text-xl font-bold mb-2">高中在读</h3>
+                                <p class="text-gray-deep">参与学校科技创新社团，主导多个编程项目开发。</p>
+                            </div>
+                            
+                            <div class="md:w-5/12 md:pl-8">
+                                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
+                                    <div class="flex items-center mb-4">
+                                        <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4">
+                                            <span class="fa fa-graduation-cap text-primary text-xl"></span>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-lg">科技创新项目</h4>
+                                            <p class="text-gray-deep text-sm">主导多个编程项目开发</p>
+                                        </div>
+                                    </div>
+                                    <p class="text-gray-deep">
+                                        在学校科技创新社团中，我主导了多个编程项目的开发，包括生物信息学算法优化、桌面应用框架设计等，积累了丰富的项目经验。
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 专业技能 -->
+    <section id="skills" class="py-20 bg-white">
+        <div class="container mx-auto px-4 md:px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">专业技能</h2>
+                <div class="w-20 h-1 bg-primary mx-auto"></div>
+            </div>
+            
+            <div class="grid md:grid-cols-2 gap-12">
+                <!-- 编程语言 -->
+                <div>
+                    <h3 class="text-xl font-bold mb-6 flex items-center">
+                        <span class="fa fa-code text-primary mr-3"></span>
+                        编程语言
+                    </h3>
+                    
+                    <div class="space-y-6">
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">C++（算法竞赛、现代编程）</span>
+                                <span>95%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-primary rounded-full" style="width: 95%"></div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">Node.js & Vue</span>
+                                <span>80%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-primary rounded-full" style="width: 80%"></div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">Python（数据处理）</span>
+                                <span>75%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-primary rounded-full" style="width: 75%"></div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">C#</span>
+                                <span>70%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-primary rounded-full" style="width: 70%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 技术工具 -->
+                <div>
+                    <h3 class="text-xl font-bold mb-6 flex items-center">
+                        <span class="fa fa-toolbox text-primary mr-3"></span>
+                        技术工具
+                    </h3>
+                    
+                    <div class="space-y-6">
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">Docker（容器化部署）</span>
+                                <span>70%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-secondary rounded-full" style="width: 70%"></div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">嵌入式开发</span>
+                                <span>65%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-secondary rounded-full" style="width: 65%"></div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">WebView2</span>
+                                <span>75%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-secondary rounded-full" style="width: 75%"></div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">Git</span>
+                                <span>85%</span>
+                            </div>
+                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-secondary rounded-full" style="width: 85%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 技术方向 -->
+            <div class="mt-16">
+                <h3 class="text-xl font-bold mb-8 text-center">技术方向</h3>
+                
+                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                    <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
+                        <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
+                            <span class="fa fa-bolt text-primary text-xl"></span>
+                        </div>
+                        <h4 class="font-medium">算法优化</h4>
+                    </div>
+                    
+                    <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
+                        <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
+                            <span class="fa fa-database text-primary text-xl"></span>
+                        </div>
+                        <h4 class="font-medium">数据驱动开发</h4>
+                    </div>
+                    
+                    <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
+                        <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
+                            <span class="fa fa-server text-primary text-xl"></span>
+                        </div>
+                        <h4 class="font-medium">SSR渲染</h4>
+                    </div>
+                    
+                    <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
+                        <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
+                            <span class="fa fa-robot text-primary text-xl"></span>
+                        </div>
+                        <h4 class="font-medium">大模型本地部署</h4>
+                    </div>
+                    
+                    <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
+                        <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
+                            <span class="fa fa-cogs text-primary text-xl"></span>
+                        </div>
+                        <h4 class="font-medium">自动化工作流</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 项目经验 -->
+    <section id="projects" class="py-20 bg-gradient-to-br from-primary/5 to-light">
+        <div class="container mx-auto px-4 md:px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">项目经验</h2>
+                <div class="w-20 h-1 bg-primary mx-auto"></div>
+            </div>
+            
+            <div class="space-y-12">
+                <!-- 项目1 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="md:flex">
+                        <div class="md:w-1/2">
+                            <img src="https://picsum.photos/800/600?random=1" alt="生物信息工程项目优化" class="w-full h-full object-cover">
+                        </div>
+                        <div class="md:w-1/2 p-8">
+                            <div class="flex justify-between items-start mb-4">
+                                <h3 class="text-2xl font-bold">生物信息工程项目优化</h3>
+                                <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2023 - 2024</span>
+                            </div>
+                            <p class="text-gray-deep mb-6">
+                                对生物信息学序列比对算法进行并行优化，通过多线程和向量化技术实现40倍性能提升。使用C++17/20重构代码，引入智能指针、并行算法和协程，提升代码质量。开发自动化测试框架确保代码稳定性。
+                            </p>
+                            <div class="flex flex-wrap gap-2 mb-6">
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">C++</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">多线程</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">并行优化</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">生物信息学</span>
+                            </div>
+                            <div class="flex gap-4">
+                                <a href="https://git.zziyu.cn/Zengtudor/DNASequence" class="text-primary hover:text-primary/80 font-medium flex items-center">
+                                    <span class="fa fa-github mr-2"></span>
+                                    查看代码
+                                </a>
+                                <a href="https://git.zziyu.cn/Zengtudor/DNASequence" class="text-secondary hover:text-secondary/80 font-medium flex items-center">
+                                    <span class="fa fa-external-link-alt mr-2"></span>
+                                    了解更多
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 项目2 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="md:flex">
+                        <div class="md:w-1/2">
+                            <img src="https://picsum.photos/800/600?random=2" alt="基于C++与WebView的数据驱动框架桌面程序" class="w-full h-full object-cover">
+                        </div>
+                        <div class="md:w-1/2 p-8">
+                            <div class="flex justify-between items-start mb-4">
+                                <h3 class="text-2xl font-bold">基于C++与WebView的数据驱动框架桌面程序</h3>
+                                <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2024</span>
+                            </div>
+                            <p class="text-gray-deep mb-6">
+                                设计C++与WebView2结合的跨平台桌面应用框架，实现数据双向绑定与事件驱动。开发高性能JSON解析模块与插件系统，支持动态扩展功能模块。
+                            </p>
+                            <div class="flex flex-wrap gap-2 mb-6">
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">C++</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">WebView2</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">桌面应用</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">跨平台</span>
+                            </div>
+                            <div class="flex gap-4">
+                                <a href="https://git.zziyu.cn/Zengtudor/EnvEditorWebview" class="text-primary hover:text-primary/80 font-medium flex items-center">
+                                    <span class="fa fa-github mr-2"></span>
+                                    查看代码
+                                </a>
+                                <a href="https://git.zziyu.cn/Zengtudor/EnvEditorWebview" class="text-secondary hover:text-secondary/80 font-medium flex items-center">
+                                    <span class="fa fa-external-link-alt mr-2"></span>
+                                    了解更多
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 项目3 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="md:flex">
+                        <div class="md:w-1/2">
+                            <img src="https://picsum.photos/800/600?random=3" alt="笔顺码字典开发" class="w-full h-full object-cover">
+                        </div>
+                        <div class="md:w-1/2 p-8">
+                            <div class="flex justify-between items-start mb-4">
+                                <h3 class="text-2xl font-bold">笔顺码字典开发</h3>
+                                <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2024</span>
+                            </div>
+                            <p class="text-gray-deep mb-6">
+                                使用Vue.js数据驱动开发模式构建前端应用，结合Vite和Pinia实现高效状态管理。集成SSR（服务器端渲染）技术，提升页面加载速度和搜索引擎优化效果。设计组件化UI库，实现笔顺查询、汉字教学等功能模块。
+                            </p>
+                            <div class="flex flex-wrap gap-2 mb-6">
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">Vue.js</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">Vite</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">Pinia</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">SSR</span>
+                            </div>
+                            <div class="flex gap-4">
+                                <a href="https://git.zziyu.cn/Zengtudor/DataFront" class="text-primary hover:text-primary/80 font-medium flex items-center">
+                                    <span class="fa fa-github mr-2"></span>
+                                    查看代码
+                                </a>
+                                <a href="https://git.zziyu.cn/Zengtudor/DataFront" class="text-secondary hover:text-secondary/80 font-medium flex items-center">
+                                    <span class="fa fa-external-link-alt mr-2"></span>
+                                    了解更多
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 项目4 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="md:flex">
+                        <div class="md:w-1/2">
+                            <img src="https://picsum.photos/800/600?random=4" alt="大模型本地部署与向量知识库联动" class="w-full h-full object-cover">
+                        </div>
+                        <div class="md:w-1/2 p-8">
+                            <div class="flex justify-between items-start mb-4">
+                                <h3 class="text-2xl font-bold">大模型本地部署与向量知识库联动</h3>
+                                <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2024</span>
+                            </div>
+                            <p class="text-gray-deep mb-6">
+                                完成Llama等大语言模型的本地部署与量化优化，提升推理效率。构建向量知识库系统，支持文档解析、向量化索引及相似度检索。开发自动化工作流引擎，实现数据预处理、模型调用与结果输出全流程管理。
+                            </p>
+                            <div class="flex flex-wrap gap-2 mb-6">
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">大语言模型</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">向量知识库</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">Python</span>
+                                <span class="bg-gray-100 text-gray-deep px-3 py-1 rounded-full text-sm">自动化</span>
+                            </div>
+                            <div class="flex gap-4">
+                                <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
+                                    <span class="fa fa-github mr-2"></span>
+                                    查看代码
+                                </a>
+                                <a href="#" class="text-secondary hover:text-secondary/80 font-medium flex items-center">
+                                    <span class="fa fa-external-link-alt mr-2"></span>
+                                    了解更多
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 获奖信息 -->
+    <section id="awards" class="py-20 bg-white">
+        <div class="container mx-auto px-4 md:px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">获奖信息</h2>
+                <div class="w-20 h-1 bg-primary mx-auto"></div>
+            </div>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- 奖项1 -->
+                <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100 card-hover">
+                    <div class="flex items-center mb-4">
+                        <div class="w-14 h-14 rounded-full bg-primary/20 flex items-center justify-center mr-4">
+                            <span class="fa fa-trophy text-primary text-2xl"></span>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-xl">国家级竞赛</h3>
+                            <p class="text-gray-deep">2023 - 2024</p>
+                        </div>
+                    </div>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <span class="fa fa-circle text-primary text-xs mt-2 mr-2"></span>
+                            <span class="text-gray-deep">2023年 CSP-J（入门级）二等奖</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="fa fa-circle text-primary text-xs mt-2 mr-2"></span>
+                            <span class="text-gray-deep">2024年 CSP-S（提高级）三等奖</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="fa fa-circle text-primary text-xs mt-2 mr-2"></span>
+                            <span class="text-gray-deep">2024年 NOIP（全国青少年信息学奥林匹克联赛）三等奖</span>
+                        </li>
+                    </ul>
+                </div>
+                
+                <!-- 奖项2 -->
+                <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100 card-hover">
+                    <div class="flex items-center mb-4">
+                        <div class="w-14 h-14 rounded-full bg-secondary/20 flex items-center justify-center mr-4">
+                            <span class="fa fa-medal text-secondary text-2xl"></span>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-xl">其他荣誉</h3>
+                            <p class="text-gray-deep">2024</p>
+                        </div>
+                    </div>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <span class="fa fa-circle text-secondary text-xs mt-2 mr-2"></span>
+                            <span class="text-gray-deep">深圳科创明日之星称号</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="fa fa-circle text-secondary text-xs mt-2 mr-2"></span>
+                            <span class="text-gray-deep">学校科创之星</span>
+                        </li>
+
+                    </ul>
+                </div>
+                
+                <!-- 奖项3 -->
+                <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100 card-hover">
+                    <div class="flex items-center mb-4">
+                        <div class="w-14 h-14 rounded-full bg-primary/20 flex items-center justify-center mr-4">
+                            <span class="fa fa-award text-primary text-2xl"></span>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-xl">项目奖项</h3>
+                            <p class="text-gray-deep">2023 - 2024</p>
+                        </div>
+                    </div>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <span class="fa fa-circle text-primary text-xs mt-2 mr-2"></span>
+                            <span class="text-gray-deep">蓝桥杯省赛一等奖</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 联系我 -->
+    <section id="contact" class="py-20 bg-gradient-to-br from-primary/5 to-light">
+        <div class="container mx-auto px-4 md:px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">联系我</h2>
+                <div class="w-20 h-1 bg-primary mx-auto"></div>
+            </div>
+            
+            <div class="md:flex md:justify-between">
+                <div class="md:w-5/12 mb-12 md:mb-0">
+                    <h3 class="text-2xl font-bold mb-6">联系方式</h3>
+                    <p class="text-gray-deep mb-8">
+                        如果你对我的项目感兴趣，或者有任何问题，欢迎通过以下方式联系我。我会尽快回复你的消息。
+                    </p>
+                    
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4">
+                                <span class="fa fa-envelope text-primary text-xl"></span>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-lg mb-1">邮箱</h4>
+                                <a href="mailto:2917946698@qq.com" class="text-gray-deep hover:text-primary transition-colors">2917946698@qq.com</a>
+                                <br>
+                                <a href="mailto:Zengtudor@outlook.com" class="text-gray-deep hover:text-primary transition-colors">Zengtudor@outlook.com</a>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4">
+                                <span class="fa fa-code-fork text-primary text-xl"></span>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-lg mb-1">代码库</h4>
+                                <a href="https://gitcode.com/Zengtudor" target="_blank" class="text-gray-deep hover:text-primary transition-colors">GitCode</a>
+                                <br>
+                                <a href="https://git.zziyu.cn/" target="_blank" class="text-gray-deep hover:text-primary transition-colors">个人代码库</a>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4">
+                                <span class="fa fa-globe text-primary text-xl"></span>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-lg mb-1">个人博客</h4>
+                                <a href="https://blog.zziyu.cn/" target="_blank" class="text-gray-deep hover:text-primary transition-colors">https://blog.zziyu.cn/</a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-10">
+                        <h4 class="font-medium text-lg mb-4">关注我</h4>
+                        <div class="flex space-x-4">
+                            <a href="https://gitcode.com/Zengtudor" target="_blank" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white hover:bg-primary transition-colors">
+                                <span class="fa-brands fa-github"></span>
+                            </a>
+                            <a href="#" target="_blank" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white hover:bg-primary transition-colors">
+                                <span class="fa-brands fa-twitter"></span>
+                            </a>
+                            <a href="#" target="_blank" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white hover:bg-primary transition-colors">
+                                <span class="fa-brands fa-linkedin"></span>
+                            </a>
+                            <a href="#" target="_blank" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white hover:bg-primary transition-colors">
+                                <span class="fa-brands fa-instagram"></span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="md:w-5/12">
+                    <div class="bg-white p-8 rounded-xl shadow-lg">
+                        <h3 class="text-2xl font-bold mb-6">发送消息(暂不可用请直接邮件联系)</h3>
+                        <form>
+                            <div class="mb-6">
+                                <label for="name" class="block text-gray-deep mb-2">姓名</label>
+                                <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入你的姓名">
+                            </div>
+                            
+                            <div class="mb-6">
+                                <label for="email" class="block text-gray-deep mb-2">邮箱</label>
+                                <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入你的邮箱">
+                            </div>
+                            
+                            <div class="mb-6">
+                                <label for="subject" class="block text-gray-deep mb-2">主题</label>
+                                <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入消息主题">
+                            </div>
+                            
+                            <div class="mb-6">
+                                <label for="message" class="block text-gray-deep mb-2">消息内容</label>
+                                <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入你的消息内容"></textarea>
+                            </div>
+                            
+                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
+                                发送消息
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="bg-dark text-white py-12">
+        <div class="container mx-auto px-4 md:px-6">
+            <div class="md:flex md:justify-between md:items-center">
+                <div class="mb-6 md:mb-0">
+                    <a href="#hero" class="text-2xl font-bold flex items-center space-x-2">
+                        <span class="fa fa-code"></span>
+                        <span>Zengtudor</span>
+                    </a>
+                    <p class="text-gray-light mt-2">热爱计算机科学的高中生开发者</p>
+                </div>
+                
+                <div class="md:flex md:space-x-12">
+                    <div class="mb-6 md:mb-0">
+                        <h4 class="text-lg font-medium mb-4">快速链接</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#about" class="text-gray-light hover:text-white transition-colors">关于我</a></li>
+                            <li><a href="#education" class="text-gray-light hover:text-white transition-colors">教育背景</a></li>
+                            <li><a href="#skills" class="text-gray-light hover:text-white transition-colors">专业技能</a></li>
+                            <li><a href="#projects" class="text-gray-light hover:text-white transition-colors">项目经验</a></li>
+                            <li><a href="#awards" class="text-gray-light hover:text-white transition-colors">获奖信息</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div>
+                        <h4 class="text-lg font-medium mb-4">联系方式</h4>
+                        <ul class="space-y-2">
+                            <li class="flex items-center">
+                                <span class="fa fa-envelope text-primary mr-2"></span>
+                                <a href="mailto:Zengtudor@outlook.com" class="text-gray-light hover:text-white transition-colors">Zengtudor@outlook.com</a>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="fa fa-code-fork text-primary mr-2"></span>
+                                <a href="https://gitcode.com/Zengtudor" target="_blank" class="text-gray-light hover:text-white transition-colors">GitCode</a>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="fa fa-globe text-primary mr-2"></span>
+                                <a href="https://blog.zziyu.cn/" target="_blank" class="text-gray-light hover:text-white transition-colors">个人博客</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row md:justify-between md:items-center">
+                <p class="text-gray-light text-sm">© 2024 Zengtudor. 保留所有权利。</p>
+                <div class="mt-4 md:mt-0">
+                    <a href="#" class="text-gray-light hover:text-white transition-colors mr-4">隐私政策</a>
+                    <a href="#" class="text-gray-light hover:text-white transition-colors">服务条款</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script>
+        // 导航栏滚动效果
+        const navbar = document.getElementById('navbar');
+        const menuToggle = document.getElementById('menu-toggle');
+        const mobileMenu = document.getElementById('mobile-menu');
+        
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 50) {
+                navbar.classList.add('nav-scrolled');
+            } else {
+                navbar.classList.remove('nav-scrolled');
+            }
+        });
+        
+        // 移动端菜单切换
+        menuToggle.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        
+        // 平滑滚动
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    
+                    // 关闭移动菜单
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+        
+        // 页面加载动画
+        document.addEventListener('DOMContentLoaded', () => {
+            const animateOnScroll = () => {
+                const elements = document.querySelectorAll('.card-hover');
+                
+                elements.forEach(element => {
+                    const elementPosition = element.getBoundingClientRect().top;
+                    const screenPosition = window.innerHeight / 1.3;
+                    
+                    if (elementPosition < screenPosition) {
+                        element.classList.add('animate-fadeIn');
                     }
                 });
-            </script>
-        </div>
-        <div class="section fade-in">
-            <h2>项目经验</h2>
-            <div class="timeline-item">
-                <h3>生物信息工程项目优化</h3>
-                <p>2023 - 2024</p>
-                <ul>
-                    <li>对生物信息学序列比对算法进行并行优化，通过多线程和向量化技术实现了40倍的性能提升。</li>
-                    <li>使用现代C++（C++17/20）重构原有代码，引入智能指针、并行算法和协程等特性，提高代码质量和可维护性。</li>
-                    <li>开发了自动化测试框架，确保优化后的代码保持正确性和稳定性。</li>
-                </ul>
-            </div>
-            <div class="timeline-item">
-                <h3>基于C++与webview的数据驱动框架桌面程序</h3>
-                <p>2024</p>
-                <ul>
-                    <li>使用C++结合WebView技术开发跨平台桌面应用框架，实现数据模型与界面的双向绑定。</li>
-                    <li>设计模块化架构，支持插件式功能扩展，提升系统灵活性和可维护性。</li>
-                </ul>
-            </div>
-            <div class="timeline-item">
-                <h3>为《笔顺码字典》使用Vue的数据驱动与SSR渲染开发信息化查询平台</h3>
-                <p>2024</p>
-                <ul>
-                    <li>采用Vue.js构建数据驱动的前端应用，实现组件化开发和状态管理。</li>
-                    <li>集成SSR（服务器端渲染）技术，提升页面加载速度和搜索引擎优化效果。</li>
-                </ul>
-            </div>
-            <div class="timeline-item">
-                <h3>大模型本地部署与向量知识库联动与工作流程序开发</h3>
-                <p>2024</p>
-                <ul>
-                    <li>在本地环境部署开源大语言模型，结合FAISS实现向量知识库的高效检索与联动。</li>
-                    <li>设计自动化工作流程序，实现数据预处理、模型推理到结果输出的全流程管理。</li>
-                </ul>
-            </div>
-        </div>
-        <div class="footer-contact">
-            <a href="mailto:2917946698@qq.com"><i class="fa-solid fa-envelope"></i></a>
-            <a href="mailto:Zengtudor@outlook.com"><i class="fa-solid fa-envelope"></i></a>
-            <a href="https://gitcode.com/Zengtudor"><i class="fa-brands fa-github"></i></a>
-            <a href="https://blog.zziyu.cn/"><i class="fa-brands fa-blogger"></i></a>
-            <a href="https://git.zziyu.cn/"><i class="fa-brands fa-gitlab"></i></a>
-        </div>
-    </div>
+            };
+            
+            window.addEventListener('scroll', animateOnScroll);
+            animateOnScroll(); // 初始加载时执行一次
+        });
+    </script>
 </body>
-
-</html>    
\ No newline at end of file
+</html>
+    
\ No newline at end of file
