我的个人主页：从想法到实现#

整体风格#

我追求的是简洁而不简单的风格。整体采用深色主题为主，搭配明亮的蓝色作为点缀，营造出一种科技感与人文气息并存的氛围。同时支持浅色主题切换，满足不同场景下的阅读需求。

页面结构#

整个页面分为四个主要部分：

1. Hero 区域 — 第一印象，包含头像、自我介绍和动态一言
2. About 区域 — Bento 风格的信息卡片展示
3. Timeline 区域 — 个人成长时间线
4. Projects 区域 — 项目作品列表

1. 鼠标跟随揭示效果#

Hero 区域最引人注目的效果就是鼠标跟随的”聚光灯”揭示效果。当鼠标在页面上移动时，会揭示出一个英文版本的自我介绍层。

实现原理是使用 CSS 的 clip-path 属性：

1
heroSection.addEventListener('mousemove', (e) => {
2
    const rect = heroSection.getBoundingClientRect();
3
    const x = e.clientX - rect.left;
4
    const y = e.clientY - rect.top;
5
    revealLayer.style.transition = 'none';
6
    revealLayer.style.clipPath = `circle(150px at ${x}px ${y}px)`;
7
});

这个效果给页面增添了一份探索的乐趣，仿佛在黑暗中用手电筒照亮隐藏的惊喜。

2. Bento 网格布局#

About 区域采用了当下流行的 Bento 风格布局——将信息组织在大小不一的卡片中，既有秩序感又不失灵动。

布局结构分为上下两行：

• 上行：左侧是个人信息卡（头像、社交链接、标签），右侧是数据统计和互动卡片
• 下行：三个特色卡片并排展示——Bug Collector、技术栈、Code Poet

每张卡片都有微妙的悬停效果：

• 3D 倾斜跟随鼠标移动
• 边框高亮发光
• 阴影加深

1
.bento-card:hover {
2
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 60px rgba(88, 166, 255, 0.06);
3
    border-color: var(--accent-color);
4
}

3. 滚动动画系统#

页面中的几乎所有元素都配备了精心设计的滚动显现动画：

• 淡入上浮：卡片和文字从下方浮现
• 左右滑入：项目列表交替从左右两侧进入
• 模糊清晰：元素从模糊状态逐渐变得清晰
• 视差滚动：Hero 区域内容随滚动产生视差效果

这些动画通过 IntersectionObserver 实现，只在元素进入视口时触发，既保证了性能，又增添了浏览时的仪式感。

1
const revealObserver = new IntersectionObserver((entries) => {
2
    entries.forEach(entry => {
3
        if (entry.isIntersecting) {
4
            entry.target.classList.add('visible');
5
        }
6
    });
7
}, { threshold: 0.12 });

4. 时间线设计#

Timeline 区域记录了我从早期接触技术到现在的成长历程。设计要点包括：

• 左侧竖线：贯穿整个时间线的渐变线条
• 节点标记：每个年份对应一个圆点，当前年份高亮显示
• 月份标签：使用蓝色标签区分不同时间段
• 内容层级：清晰的标题-内容结构

时间线的底部还有一句格言：“一条时间线，装不下那些深夜的崩溃和天亮后的不甘”——这是对成长过程最真实的注解。

5. 趣味交互细节#

1
confetti({
2
    particleCount: 150,
3
    spread: 360,
4
    startVelocity: 30,
5
    origin: { x, y }
6
});

6. 主题切换#

支持深色/浅色主题切换，切换按钮位于导航栏右侧。主题偏好会保存到 localStorage，下次访问时自动应用。

1
const savedTheme = localStorage.getItem('theme');
2
if (savedTheme === 'light') {
3
    html.setAttribute('data-theme', 'light');
4
}