个人主页
文章摘要
|
3 年前写的破主页，我全重写了 —— Tech-Home v2.0 从零重构
2022 年的时候随手写了个个人主页，那时候啥也不懂，把 HTML、CSS、JS 全塞进一个文件里就扔上去了。前两天翻出来看，代码又臭又长——162KB 的 CSS、100KB 的 JS 揉在一个 HTML 里，还挂了 5 个 CDN，压根没有构建流程。说实话，之前的版本就是一坨垃圾。
于是趁着周末，我把整个项目从零重写了一遍，这就是现在的 Tech-Home v2.0。
重写前后对比
| 指标 | 旧版（2022） | 新版 v2.0 | 提升 |
|---|---|---|---|
| CSS 体积 | 162 KB | 4.5 KB | ↓ 97% |
| JS 体积 | ~100 KB | 8.6 KB | ↓ 91% |
| 构建产物 (gzip) | — | 6.1 KB | 极速 |
| CDN 依赖 | 5 个 | 0 个 | ↓ 100% |
| 构建工具 | 无 | Vite 6 | 现代化 |
| Lighthouse | ~60 | ~100 | ↑ 67% |
核心代码不到 150 行，构建产物只有 6KB gzip，所有外部依赖要么移除、要么做成可选。
有哪些功能
- 3D 头像翻页：CSS
perspective+rotate3d做出怀表式翻盖效果，点一下在 QQ 头像和自定义 GIF 间切换。 - 点阵数字时钟：7×10 点阵显示
HH:MM:SS，数字跳变时触发粒子爆炸（彩色圆点飞散 + 重力下落 + 反弹），Canvas 2D 实现。 - Hitokoto 一言：随机一句优美文字，接口挂了也能静默降级成默认文案。
- 实时天气：和风天气 widget，左上角常驻；不填 Key 就自动隐藏，不拖后腿。
- 星空背景：纯 CSS
radial-gradient三层视差星空，每层不同滚动速度。 - 导航按钮：六个彩色按钮（博客 / 网盘 / 导航 / 签到 / 壁纸 / 青龙 API），hover 同色 LED 光晕。
- 移动端适配：480px 断点自动缩小头像和按钮间距。
技术栈
- Vite 6 —— 开发 HMR + 生产 esbuild 压缩
- 原生 ES Module —— 零运行时框架，无 jQuery
- CSS3 —— 星空、3D 翻转、LED 光晕全用纯 CSS
- Canvas 2D —— 点阵时钟粒子系统
- Hitokoto / 和风天气 API —— 一言与天气（天气为可选）
怎么跑起来
# 克隆仓库
git clone https://github.com/lqbby/Tech-Home.git
cd Tech-Home
# 安装依赖
npm install
# 本地开发（热更新）
npm run dev
# 构建生产版本，输出到 dist/
npm run build
天气想接的话，编辑 src/components/Weather.js 第一行填和风天气 Key 即可；不填也不影响其他功能。dist/ 直接丢到任意静态服务器或 CDN 就能上线。
仓库 & 预览
- 🌟 GitHub：https://github.com/lqbby/Tech-Home
- 🔗 在线预览：https://zy.lqbby.com
如果你也在找一款干净、轻量、有科技感的个人主页，欢迎试试 Tech-Home，觉得不错点个 Star ⭐。也欢迎提 Issue 和 PR～