使用VSCode开发少儿编程项目：个人网站

最新推荐文章于 2025-12-18 18:11:50 发布

原创最新推荐文章于 2025-12-18 18:11:50 发布 · 1.8k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ide #编辑器 #青少年编程 #前端

少儿编程同时被 3 个专栏收录

134 篇文章

订阅专栏

Python

116 篇文章

订阅专栏

VS插件

113 篇文章

订阅专栏

使用VSCode开发少儿编程项目：个人网站

我将为您创建一个美观、交互性强的个人网站，适合在VSCode中开发。这个项目将展示HTML、CSS和JavaScript的基础知识，同时提供丰富的视觉效果和互动体验。

项目概述

这个个人网站将包含以下部分：

响应式导航栏
英雄介绍区域
关于我部分
技能展示
项目作品集
联系表单
页脚信息

项目结构

my-personal-website/
│
├── index.html
├── style.css
├── script.js
├── images/
│   ├── profile.jpg
│   ├── project1.jpg
│   └── ...
└── README.md

代码实现

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav id="navbar">
        <div class="nav-container">
            <div class="logo">
                <a href="#home">我的空间</a>
            </div>
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link">首页</a></li>
                <li><a href="#about" class="nav-link">关于我</a></li>
                <li><a href="#skills" class="nav-link">我的技能</a></li>
                <li><a href="#projects" class="nav-link">我的项目</a></li>
                <li><a href="#contact" class="nav-link">联系我</a></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <!-- 首页/英雄区域 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <div class="hero-text">
                <h1>你好，我是<span class="highlight">小明</span></h1>
                <p>一名热爱编程的小学生</p>
                <div class="hero-buttons">
                    <a href="#projects" class="btn primary">查看我的作品</a>
                    <a href="#contact" class="btn secondary">联系我</a>
                </div>
            </div>
            <div class="hero-image">
                <div class="profile-card">
                    <div class="profile-img"></div>
                    <div class="profile-info">
                        <h3>小明</h3>
                        <p>小小程序员</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="scroll-indicator">
            <span>向下滚动</span>
            <i class="fas fa-chevron-down"></i>
        </div>
    </section>

    <!-- 关于我部分 -->
    <section id="about" class="about">
        <div class="container">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>你好！我是一名五年级的小学生，对编程和科技充满热情。我喜欢用代码创造有趣的东西，解决实际问题。</p>
                    <p>除了编程，我还喜欢阅读、绘画和探索大自然。我相信科技可以让世界变得更美好！</p>
                    <div class="interests">
                        <h3>我的兴趣</h3>
                        <div class="interest-tags">
                            <span class="tag">编程</span>
                            <span class="tag">机器人</span>
                            <span class="tag">科学实验</span>
                            <span class="tag">阅读</span>
                            <span class="tag">绘画</span>
                            <span class="tag">乐高</span>
                        </div>
                    </div>
                </div>
                <div class="about-stats">
                    <div class="stat">
                        <h3>50+</h3>
                        <p>编程项目</p>
                    </div>
                    <div class="stat">
                        <h3>3</h3>
                        <p>编程语言</p>
                    </div>
                    <div class="stat">
                        <h3>2</h3>
                        <p>年编程经验</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技能部分 -->
    <section id="skills" class="skills">
        <div class="container">
            <h2 class="section-title">我的技能</h2>
            <div class="skills-grid">
                <div class="skill-category">
                    <h3>编程语言</h3>
                    <div class="skill-list">
                        <div class="skill-item">
                            <span class="skill-name">Scratch</span>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="90"></div>
                            </div>
                            <span class="skill-percent">90%</span>
                        </div>
                        <div class="skill-item">
                            <span class="skill-name">Python</span>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="75"></div>
                            </div>
                            <span class="skill-percent">75%</span>
                        </div>
                        <div class="skill-item">
                            <span class="skill-name">HTML/CSS</span>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="80"></div>
                            </div>
                            <span class="skill-percent">80%</span>
                        </div>
                    </div>
                </div>
                <div class="skill-category">
                    <h3>其他技能</h3>
                    <div class="skill-list">
                        <div class="skill-item">
                            <span class="skill-name">解决问题</span>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="85"></div>
                            </div>
                            <span class="skill-percent">85%</span>
                        </div>
                        <div class="skill-item">
                            <span class="skill-name">团队合作</span>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="88"></div>
                            </div>
                            <span class="skill-percent">88%</span>
                        </div>
                        <div class="skill-item">
                            <span class="skill-name">创造力</span>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="95"></div>
                            </div>
                            <span class="skill-percent">95%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目部分 -->
    <section id="projects" class="projects">
        <div class="container">
            <h2 class="section-title">我的项目</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-overlay">
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                                <a href="#" class="project-link"><i class="fab fa-github"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="project-info">
                        <h3>太空冒险游戏</h3>
                        <p>使用Scratch创建的太空射击游戏，包含多个关卡和BOSS战。</p>
                        <div class="project-tags">
                            <span class="project-tag">Scratch</span>
                            <span class="project-tag">游戏</span>
                        </div>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-overlay">
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                                <a href="#" class="project-link"><i class="fab fa-github"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="project-info">
                        <h3>数学测验程序</h3>
                        <p>使用Python编写的数学测验程序，可以随机生成题目并计算分数。</p>
                        <div class="project-tags">
                            <span class="project-tag">Python</span>
                            <span class="project-tag">教育</span>
                        </div>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-overlay">
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                                <a href="#" class="project-link"><i class="fab fa-github"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="project-info">
                        <h3>天气预报应用</h3>
                        <p>使用HTML/CSS/JavaScript创建的简单天气预报应用。</p>
                        <div class="project-tags">
                            <span class="project-tag">HTML/CSS</span>
                            <span class="project-tag">JavaScript</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系表单 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title">联系我</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>让我们保持联系</h3>
                    <p>如果你对我的项目感兴趣，或者想和我一起合作，欢迎联系我！</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <span>xiaoming@example.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <span>+86 123 4567 8900</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>北京市朝阳区</span>
                        </div>
                    </div>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-qq"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                    </div>
                </div>
                <form class="contact-form" id="contactForm">
                    <div class="form-group">
                        <input type="text" id="name" placeholder="你的姓名" required>
                    </div>
                    <div class="form-group">
                        <input type="email" id="email" placeholder="你的邮箱" required>
                    </div>
                    <div class="form-group">
                        <input type="text" id="subject" placeholder="主题" required>
                    </div>
                    <div class="form-group">
                        <textarea id="message" rows="5" placeholder="你的消息" required></textarea>
                    </div>
                    <button type="submit" class="btn primary">发送消息</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-text">
                    <p>&copy; 2023 小明. 保留所有权利.</p>
                </div>
                <div class="footer-links">
                    <a href="#home" class="footer-link">返回顶部</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

style.css

/* 基础样式 */
:root {
    --primary-color: #4e54c8;
    --secondary-color: #8f94fb;
    --accent-color: #ff6b6b;
    --dark-color: #333;
    --light-color: #f8f9fa;
    --gray-color: #6c757d;
    --white: #fff;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--white);
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn.primary {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: var(--white);
}

.btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(78, 84, 200, 0.3);
}

.btn.secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn.secondary:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* 导航栏 */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow);
    z-index: 1000;
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
}

.nav-link {
    padding: 10px 20px;
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition);
}

.nav-link:hover::after {
    width: 80%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--dark-color);
    margin: 3px 0;
    transition: var(--transition);
}

/* 英雄区域 */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,128L48,138.7C96,149,192,171,288,170.7C384,171,480,149,576,138.7C672,128,768,128,864,138.7C960,149,1056,171,1152,170.7C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-text h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.highlight {
    color: var(--accent-color);
}

.hero-text p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex-shrink: 0;
}

.profile-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--accent-color), #ffa726);
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.profile-img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

.profile-info h3 {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.profile-info p {
    opacity: 0.8;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* 关于我部分 */
.about {
    background-color: var(--light-color);
}

.about-content {
    display: flex;
    gap: 50px;
    align-items: center;
}

.about-text {
    flex: 1;
}

.about-text p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.interests {
    margin-top: 30px;
}

.interests h3 {
    margin-bottom: 15px;
}

.interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.about-stats {
    display: flex;
    gap: 30px;
    flex: 0 0 auto;
}

.stat {
    text-align: center;
}

.stat h3 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat p {
    color: var(--gray-color);
}

/* 技能部分 */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}

.skill-category h3 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

.skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.skill-name {
    flex: 0 0 120px;
    font-weight: 500;
}

.skill-bar {
    flex: 1;
    height: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 15px;
}

.skill-progress {
    height: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    border-radius: 5px;
    width: 0;
    transition: width 1.5s ease;
}

.skill-percent {
    flex: 0 0 40px;
    text-align: right;
    font-weight: 500;
}

/* 项目部分 */
.projects {
    background-color: var(--light-color);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-card {
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.project-img {
    height: 200px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    position: relative;
    overflow: hidden;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-links {
    display: flex;
    gap: 15px;
}

.project-link {
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.project-link:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.project-info {
    padding: 20px;
}

.project-info h3 {
    margin-bottom: 10px;
    color: var(--dark-color);
}

.project-info p {
    color: var(--gray-color);
    margin-bottom: 15px;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-tag {
    background-color: var(--light-color);
    color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* 联系部分 */
.contact-content {
    display: flex;
    gap: 50px;
}

.contact-info {
    flex: 1;
}

.contact-info h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.contact-info p {
    margin-bottom: 30px;
    color: var(--gray-color);
}

.contact-details {
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.contact-item i {
    width: 30px;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 40px;
    height: 40px;
    background-color: var(--light-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.social-link:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
}

.contact-form {
    flex: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(78, 84, 200, 0.2);
}

/* 页脚 */
.footer {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 30px 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-link {
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.footer-link:hover {
    color: var(--accent-color);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        right: -100%;
        flex-direction: column;
        background-color: var(--white);
        width: 80%;
        height: 100vh;
        text-align: center;
        transition: var(--transition);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        display: block;
        padding: 20px;
        border-bottom: 1px solid #eee;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .about-content {
        flex-direction: column;
    }

    .about-stats {
        width: 100%;
        justify-content: space-around;
    }

    .contact-content {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

script.js

// 当DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    const navLinks = document.querySelectorAll('.nav-link');
    
    // 滚动时改变导航栏样式
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.98)';
            navbar.style.boxShadow = '0 4px 10px rgba(0, 0, 0, 0.1)';
        } else {
            navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
            navbar.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        }
    });
    
    // 移动端菜单切换
    hamburger.addEventListener('click', function() {
        hamburger.classList.toggle('active');
        navMenu.classList.toggle('active');
    });
    
    // 点击导航链接后关闭移动端菜单
    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            hamburger.classList.remove('active');
            navMenu.classList.remove('active');
        });
    });
    
    // 技能进度条动画
    const skillProgressBars = document.querySelectorAll('.skill-progress');
    
    function animateSkillBars() {
        skillProgressBars.forEach(bar => {
            const width = bar.getAttribute('data-width');
            bar.style.width = width + '%';
        });
    }
    
    // 使用Intersection Observer API来检测技能部分是否在视口中
    const skillsSection = document.getElementById('skills');
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.3
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateSkillBars();
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    observer.observe(skillsSection);
    
    // 联系表单提交
    const contactForm = document.getElementById('contactForm');
    
    contactForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const subject = document.getElementById('subject').value;
        const message = document.getElementById('message').value;
        
        // 这里可以添加表单验证
        
        // 模拟发送表单数据
        console.log('表单提交:', { name, email, subject, message });
        
        // 显示成功消息
        alert('感谢你的消息！我会尽快回复你。');
        
        // 重置表单
        contactForm.reset();
    });
    
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 70,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // 添加滚动时的淡入效果
    const fadeElements = document.querySelectorAll('.project-card, .skill-category, .about-text, .contact-info');
    
    const fadeObserver = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = 1;
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, { threshold: 0.1 });
    
    fadeElements.forEach(element => {
        element.style.opacity = 0;
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        fadeObserver.observe(element);
    });
    
    // 添加打字机效果到英雄区域的文本
    const heroTitle = document.querySelector('.hero-text h1');
    const originalText = heroTitle.innerHTML;
    
    // 清除原始内容
    heroTitle.innerHTML = '';
    
    // 打字机效果函数
    function typeWriter(element, text, speed = 100) {
        let i = 0;
        element.innerHTML = '';
        
        function type() {
            if (i < text.length) {
                element.innerHTML += text.charAt(i);
                i++;
                setTimeout(type, speed);
            }
        }
        
        type();
    }
    
    // 在页面加载后开始打字机效果
    setTimeout(() => {
        typeWriter(heroTitle, originalText, 80);
    }, 500);
});

如何在VSCode中运行

在VSCode中创建一个新文件夹，例如"my-personal-website"
在文件夹中创建三个文件：
- index.html
- style.css
- script.js
将上面的代码分别复制到对应的文件中
安装"Live Server"扩展：
- 打开VSCode扩展市场
- 搜索"Live Server"并安装
- 安装后，在index.html文件上右键选择"Open with Live Server"
网站将在默认浏览器中打开

自定义指南

学生可以根据自己的信息自定义网站：

更改个人信息：
- 在HTML中更新姓名、介绍、联系方式等
- 在CSS中更改颜色主题（修改:root中的颜色变量）
添加真实项目：
- 替换项目部分的内容
- 添加真实的项目截图
添加个人照片：
- 准备一张个人照片，命名为profile.jpg
- 放在images文件夹中
- 在CSS中更新.profile-img的背景图片
添加社交媒体链接：
- 在联系部分更新真实的社交媒体链接