北辰导航 - 个人导航页

项目简介

基于 立即下载 开源项目进行二创，在保留原有优秀设计骨架的基础上，对细节进行了大量补充和优化。

功能特性

• 打字机标题效果（北辰导航）

• 搜索框（支持百度搜索 / URL 直接跳转）

• 导航卡片（实用工具、我的项目、技术栈）

• 时间卡片：玻璃拟态设计，显示时/分/秒 + 日期（含中文星期）+ 时段 + 每日提示语

• 一言 API 打字机效果：逐字打出 -> 停留 -> 逐字删除 -> 换下一句，无限循环

• 左侧边栏：头像框 + 标签 + 时间线

• 蜘蛛网 canvas 背景

• 樱花飘落 canvas 动画

• 点击粒子特效

• 暗色模式切换

• 滚动进度环（右下角，> 300px 显示，点击回顶）

  技术栈

• 纯 HTML + CSS + JS，无外部框架依赖

• 玻璃拟态（Glassmorphism）设计风格

• Canvas 动画（蜘蛛网、樱花飘落、点击粒子）

• 一言 API 实时获取语录

  目录结构

release/
├── index.html          # 主页面
├── static/
│   ├── css/
│   │   └── style.css   # 样式文件
│   ├── js/
│   │   └── script.js   # 脚本文件
│   ├── img/
│   │   ├── avatar.png  # 头像
│   │   ├── logo4.png   # 头像框
│   │   ├── reward.jpg  # 赞助二维码
│   │   ├── wechat.jpg  # 微信二维码
│   │   ├── i1.png      # 项目展示图
│   │   └── i2.png      # 项目展示图
│   └── svg/
│       ├── skillPc.svg # 技术栈 PC 版
│       └── skillWap.svg# 技术栈移动版

二创改动说明（相比原项目）

在原项目 立即下载 的基础上：

1. 时间组件全面重构，新增秒数显示和日期（含中文星期）
2. 一言 API 从静态显示改为打字机效果（逐字打出 + 逐字删除 + 循环切换）
3. 头像框不再被裁剪遮挡
4. 蜘蛛网背景优化，消除闪烁

5. 整体排版和间距微调，视觉更协调

   部署教程

项目为纯静态文件，无需后端和数据库，部署到任何静态服务即可。

方式一：本地 Python （推荐零基础）

确保电脑已安装 Python，在项目根目录下执行：

python3 -m http.server 8000

浏览器打开 http://localhost:8000 即可访问。

方式二：Vercel 免费部署（推荐）

1. 将项目上传到 GitHub 仓库
2. 打开 立即下载 注册登录
3. 点击 "New Project" -> 导入你的 GitHub 仓库
4. 无需任何配置，直接点 Deploy
5. 几十秒后即可获得一个 你的项目名.vercel.app 的免费域名

方式三：Netlify 免费部署

1. 将项目上传到 GitHub 仓库
2. 打开 立即下载 注册登录
3. 点击 "Add new site" -> "Import an existing project"
4. 选择 GitHub 仓库，直接点 Deploy
5. 获得 你的项目名.netlify.app 免费域名

方式四：GitHub Pages

1. 将项目上传到 GitHub 仓库
2. 进入仓库 Settings -> Pages
3. Source 选择 "Deploy from a branch"，分支选 main，目录选 root
4. 保存后获得 用户名.github.io/仓库名 免费域名

方式五：Cloudflare Pages（推荐，国内访问更快）

1. 将项目上传到 GitHub 仓库
2. 打开 立即下载 注册登录
3. 左侧菜单进入 Workers & Pages -> 创建 -> Pages
4. 连接 GitHub，选择项目仓库，直接点"开始设置"
5. 构建命令留空，输出目录填 /，点保存并部署
6. 获得 你的项目名.pages.dev 免费域名

方式六：宝塔面板 / 虚拟主机

1. 购买国内虚拟主机或云服务器安装宝塔面板
2. 创建网站，将项目文件上传到网站根目录
3. 绑定域名，访问即可
   下载地址:立即下载
   预览地址:立即下载