先搭地基
创建仓库、配置 Pages、规划页面结构
万丈高楼平地起。在写任何特效之前，先把仓库建好、文件结构规划清楚。这页做完，你就有了一个可以在浏览器里打开的空白页面。
在 GitHub 上新建一个名为 你的用户名.github.io 的仓库，建立三个文件：
你的用户名.github.io/
├── index.html ← 页面结构
├── style.css ← 样式与动画
└── script.js ← 交互逻辑
在 index.html 中规划好这些区域——后续每个任务都会往对应区域里填东西：
#hero— 首页英雄区（打字机动画会放在这里）#about— 关于我（选修 A 的技能条/雷达图）#projects— 我的项目（Part 1 的核心：动态卡片 + 筛选）#hobbies— 兴趣爱好<footer>— 页脚
用户名.github.io。这样 GitHub Pages 会自动部署到 https://用户名.github.io。其他命名需要在 Settings → Pages 里手动配置。
日夜模式切换
☀️ / 🌙 点击按钮，页面在浅色与深色之间平滑过渡
地基搭好了，现在给网站注入第一个"活"的效果。想象一下：晚上十一点，你打开自己的网站，白底黑字刺得眼睛疼。如果有个按钮让整站变成深色主题，是不是舒服多了？
要实现的效果：导航栏右上角放一个太阳 ☀️ 图标。点击后，背景平滑过渡到 #121212，文字变浅色，图标变成月亮 🌙。再点一次，切回浅色。整个过程不是瞬间切换，而是 0.3 秒的渐变。
思路拆解：
- 用 CSS 变量定义两套颜色，
body.dark-theme覆盖变量值 - 按钮点击时
classList.toggle('dark-theme')切换类名 - CSS
transition让颜色变化是渐变的，不是瞬间的 - 图标随主题一起切换（太阳 ↔ 月亮）
这个任务覆盖的 DOM 基础——选元素、监听事件、切换类名——后面的打字机动画还会用到。
从 API 到卡片
用 fetch 拉取 GitHub 仓库数据，用 class 动态渲染项目卡片
两个动画效果搞定了，网站"活"起来了。但有个问题：项目列表还是你手动写在 HTML 里的。每次在 GitHub 上建新仓库，还得手动去改代码。能不能让项目列表自动和 GitHub 同步？
这就是模块二要做的事——你将第一次调用真实的 Web API，把拿到的数据用 OOP 封装成组件，再渲染到页面上。整个过程分两步：
- 异步请求：用
async/await+try...catch获取 GitHub API 数据 - 组件化渲染：创建
class ProjectCard，每个仓库一个实例，调用.render()生成卡片
API 地址：
GET https://api.github.com/users/{username}/repos.then() 链式调用——这是培养现代异步编程习惯。
动态技能条
滚动到可视区域时，技能条从 0% 平滑生长到目标百分比
大多数人写"关于我"，就是一段自我介绍文字，一眼扫过就忘了。如果把技能用条形图展示出来，而且是在用户滚动到那个区域时才"长出来"，效果就好得多。
要实现的效果：
- 初始状态所有技能条宽度为 0%
- 当技能条区域首次滚动进入视口时，动画生长到预设百分比
- 滚动离开再回来，动画不重复
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
observer.unobserve(entry.target); // 只触发一次！
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.skill-bar')
.forEach(bar => observer.observe(bar));threshold: 0.5 = 元素有 50% 进入视口才触发。unobserve 确保只触发一次，不会来回滚动时反复播放。
练习知识点：IntersectionObserver、threshold、unobserve、CSS @keyframes
技能雷达图
用 Chart.js 绘制多维度技能雷达图
技能条只能一个维度一个维度地看。雷达图能同时展示多个维度，一眼看出你的"能力六边形"。Chart.js 是最流行的前端图表库之一，引入一个 CDN 脚本就能用。
<!-- 引入 Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="skillRadar"></canvas>new Chart(document.getElementById('skillRadar'), {
type: 'radar',
data: {
labels: ['编程', '设计', '沟通', '算法', '团队协作', '英语'],
datasets: [{
label: '我的技能',
data: [85, 70, 80, 75, 90, 65],
backgroundColor: 'rgba(208, 101, 25, 0.2)',
borderColor: 'rgba(208, 101, 25, 0.8)',
}]
},
options: {
scales: {
r: { beginAtZero: true, max: 100 }
}
}
});把 labels 和 data 换成你自己的维度和分值就行。配色用了和教程主题一致的橙色。
互动式时间轴
垂直时间轴 + 交错节点 + 悬停展开详情
文字介绍看多了会累。如果你用一条时间轴把人生关键节点串起来，访客会更有代入感——他们不是在读简历，而是在翻你的故事。
要实现的效果：
- 页面中央一条垂直贯穿线（用 CSS 伪元素
::before绘制） - 轴线左右交错排列圆点节点（
nth-child(odd/even)） - 鼠标悬停：节点放大或发光 + 显示简短描述卡片
- 点击节点：展开详细内容区域，再次点击收起
/* 时间轴中线 */
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--primary-color);
}练习知识点：CSS 伪元素（::before、::after）、nth-child 奇偶交错、事件委托
粒子星空背景
用 Canvas 实现星空粒子 + 鼠标引力效果
前面的选修让网站"有内容"，接下来的彩蛋让网站"有灵魂"。这些小功能不需要大而全，但要有质感——给访客一个"哇"的瞬间。至少选做 1 项。
你见过那些背景是星空的网站吗？鼠标一滑，星星被"吸"过去，松开又散回来。这种效果用 <canvas> + requestAnimationFrame 就能实现。关键是理解动画循环：每帧清空画布 → 更新粒子位置 → 重新绘制。
要实现的效果：
- 整个页面背景为
<canvas>画布 - 画布上随机分布闪烁的"星星"粒子
- 鼠标移动时，周围产生更密集的"星云"
- 附近星星受引力影响，产生穿梭感
/* 核心动画循环 */
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
const dx = mouse.x - p.x;
const dy = mouse.y - p.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 150) {
p.x += dx * 0.01; // 被鼠标吸引
p.y += dy * 0.01;
}
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
});
requestAnimationFrame(animate);
}练习知识点：Canvas API、坐标计算、requestAnimationFrame