Tech-Home

KO | EN

gitlite — search

#javascript #python #ai #typescript #llm #android #rust #docker #nodejs #awesome-list #security #mcp #openai #open-source

(★ 26)

🌈 一款好看的科技感个人主页

Tech-Home Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# LQBBYの主页

**一个有科技感的个人主页**

</div>

---

## 预览

## 简介

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

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

> 在线预览：[zy.lqbby.com](https://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        # 通用弹窗
```

## 快速开始

```bash
# 克隆
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 行：

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

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

## 技术栈

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

## 致谢

灵感源自 [dmego/home.github.io](https://github.com/dmego/home.github.io)。

---

**如果对你有所帮助，欢迎 Star ⭐**

Made with ❤️ by [LQBBY](https://www.lqbby.com/)

</div>

Tech-Home

Tech-Home Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Tech-Home

Tech-Home Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README