---

预览

简介

找了很多个人主页都不是很符合自己的理想，所以自己写了一个有科技感的个人主页。希望大家喜欢。

v2.0 从零重写——原本是一个 162KB CSS + 100KB JS 的单体 HTML 文件，所有代码混在一起、5 个 CDN 依赖、零构建流程。重写后采用 Vite + 原生 ES Module，核心代码不到 150 行，构建产物仅 6KB gzip，所有外部依赖全部移除或者设为可选。

在线预览：zy.lqbby.com

v2.0 改动对比

指标	旧版	新版	提升
CSS 体积	162 KB	4.5 KB	97%
JS 体积	~100 KB	8.6 KB	91%
构建产物 (gzip)	—	6.1 KB	—
CDN 依赖	5 个	0 个	100%
文件数	1 个 HTML	9 个模块	可维护
构建工具	无	Vite 6	现代
Lighthouse	~60	~100	67%

功能

模块	说明
3D 头像翻页	CSS perspective + rotate3d 实现怀表式翻盖效果，点击切换 QQ 头像 / 自定义 GIF
点阵数字时钟	7x10 点阵显示 HH:MM:SS，数字变化时触发粒子爆炸特效（彩色圆点飞散 + 重力下落 + 反弹）
Hitokoto 一言	随机显示一句优美文字，API 请求失败时静默降级为默认文案
实时天气	和风天气 widget，左上角固定显示。需自行申请 API Key，未配置时模块不渲染
星空背景	纯 CSS radial-gradient 实现三层星空，每层不同速度视差滚动
导航链接	六个彩色按钮（博客 / 网盘 / 导航 / 签到 / 壁纸 / 青龙API），hover 同色 LED 光晕
移动端适配	响应式布局，480px 断点下自动缩小头像和按钮间距

项目结构

tech-home/
├── index.html              # HTML 入口
├── package.json            # 依赖 & 脚本
├── vite.config.js          # Vite 构建配置
├── public/
│   ├── favicon.ico
│   └── images/
│       ├── kj.webp         # 背景图
│       ├── kl.gif          # 头像翻转背面
│       ├── weixin.png      # 微信扫码图
│       ├── apple-touch-icon.png
│       └── screenshot.webp # README 截图
└── src/
    ├── main.js             # 启动入口，挂载所有组件
    ├── styles/
    │   └── main.css        # 全局样式
    └── components/
        ├── Avatar.js       # 3D 头像翻页
        ├── Clock.js        # 点阵数字时钟（原版算法）
        ├── Hitokoto.js     # 一言 API
        ├── Weather.js      # 和风天气（可选）
        ├── NavLinks.js     # 主导航按钮组
        ├── SocialLinks.js  # 社交链接 + 微信弹窗
        └── Modal.js        # 通用弹窗

快速开始

# 克隆
git clone https://github.com/lqbby/Tech-Home.git
cd Tech-Home
安装依赖
npm install
开发（热更新）
npm run dev
构建生产版本
npm run build

npm run build 输出到 dist/ 目录，部署到任意静态服务器或 CDN 即可。

天气 API 配置

编辑 src/components/Weather.js 第 1 行：

const QWEATHER_KEY = ''  // 填入你的和风天气 Key

不填 Key 时天气模块自动隐藏，不影响其他功能。

技术栈

• Vite 6 — 构建工具，开发 HMR + 生产 esbuild 压缩
• 原生 ES Module — 零运行时依赖，无 jQuery、无框架
• CSS3 — 星空背景、3D 翻转、LED 光晕均用纯 CSS 实现
• Canvas 2D — 点阵时钟粒子系统
• Hitokoto API — 一言
• 和风天气 API — 天气（可选）

致谢

灵感源自 dmego/home.github.io。

---