# yuchensite

**Repository Path**: chenfeitech/yuchensite

## Basic Information

- **Project Name**: yuchensite
- **Description**: No description available
- **Primary Language**: HTML
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-24
- **Last Updated**: 2026-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 宇辰的星际站

一个纯静态的个人主页：HTML + CSS + JavaScript，**无构建、无依赖、无第三方请求**，三个文件约 20KB，双击 `index.html` 就能打开。

主题是「宇宙 + 音乐」：星空画布、漂浮行星、滚动浮现，配色为深海军蓝 + 青 / 紫 / 金。

## 目录

```
index.html           页面结构（语义化 + 无障碍标注）
style.css            全部样式（含响应式、打印、降低动效适配）
script.js            星空画布、导航高亮、滚动浮现
favicon.svg          站点图标（矢量）
apple-touch-icon.png iOS 添加到主屏幕图标（180×180）
icon-192.png         安卓/PWA 图标
icon-512.png         安卓/PWA 图标
og-cover.png         社交分享封面（1200×630）
manifest.webmanifest PWA 清单（添加到主屏幕）
robots.txt           爬虫规则
sitemap.xml          站点地图
404.html             自定义 404 页面
```

## 本地预览

```bash
python3 -m http.server 8000
# 打开 http://localhost:8000
```

## 部署（Gitee Pages）

1. 推送到 `gitee.com/chenfeitech/yuchensite`
2. 仓库页面 → 服务 → Gitee Pages → 分支 `master`、部署目录 `/` → 启动
3. 访问分配到的地址。若与 `https://chenfeitech.gitee.io/yuchensite/` 不同，需同步修改 5 处：
   `index.html` 的 `canonical`、`og:url`、`og:image`，以及 `robots.txt`、`sitemap.xml` 中的域名。

如果是纯静态部署，GitHub Pages、Cloudflare Pages、Netlify 也都可以直接用，无需额外配置。

## 维护说明

- **新增作品**：复制 `.work-card` 结构即可，栅格会自动排布。
- **修改文案**：全部中文文案集中在 `index.html`，没有模板引擎。
- **换主题色**：三个主色 `#7ee8fa`（青）、`#a78bfa`（紫）、`#ffd86e`（金）出现在 `style.css` 顶部若干处，可整体替换。
- **页脚年份**：由 `script.js` 自动取当前年，无需每年手改。
- **不要**在 HTML 里直接写 `class="reveal"`：这个类由脚本运行时添加，脚本失效时内容才会默认可见。
- **交互**：滚动时导航高亮当前版块（`aria-current`）、超过一屏出现回顶部火箭、首屏行星与内容有轻微视差、卡片同排错峰入场。视差与滚动动画都遵循 `prefers-reduced-motion`。
- **占位卡**：`.work-card.is-placeholder` 表示「建设中」，换真实内容时去掉这个类并删掉 `<span class="badge">` 即可。

## 无障碍与适配

- 手机（≤420px）保留完整导航；≤520px 隐藏装饰行星，避免压住文字
- 支持 `prefers-reduced-motion`（关闭星空与浮动动画）
- 支持打印 / 另存 PDF（自动转为白底黑字）
- 导航、卡片、时间线均有 `:focus-visible` 焦点样式
- 装饰性 emoji 全部 `aria-hidden`，读屏不会念图标名

## 内容与隐私

本站仅用于个人展示，不收集访问数据、不加载任何统计脚本。

页面使用昵称「宇辰」，未公开真实姓名、学校全称与具体年级。若后续想公开更多信息，请先与家长确认；不建议上传本人正脸照片或能辨认校服的演出照。