# xuyufeisite

**Repository Path**: chenfeitech/xuyufeisite

## Basic Information

- **Project Name**: xuyufeisite
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-17
- **Last Updated**: 2026-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 许宇霏个人网站

一个纯静态的个人小站，记录许宇霏（Fay）的自我介绍、爱好、绘画/科技作品和成长足迹。没有构建步骤，也没有外部 CDN 依赖。

## 页面

| 页面 | 内容 |
| --- | --- |
| `index.html` | 首页：星空首屏、关于我、爱好、作品、成长时间线 |
| `gallery.html` | 画册：缩略图、左右切换、键盘 ←→、手机滑动、灯箱放大 |
| `hobby.html` | 爱好详情：图标导航、小档案 |
| `growth.html` | 成长足迹：时间线详情、小鸭子视频 |
| `404.html` | 找不到页面时的提示页 |

## 目录结构

```
xuyufeisite/
├── index.html / gallery.html / hobby.html / growth.html / 404.html
├── style.css            # 全站基础样式
├── gallery.css          # 画册/子页样式
├── hobby.css            # 爱好页补充样式
├── growth.css           # 成长页补充样式
├── script.js            # 星空 canvas、导航、朗读、滚动出现
├── gallery.js           # 画册交互
├── hobby.js / growth.js # 子页轮播数据与交互
├── tools/
│   └── optimize_images.py  # 从原图重新生成 imgs/opt
└── imgs/
    ├── draw/ tech/ award/   # 原始作品照片
    ├── opt/                 # 480/640/960 WebP、JPG 回退、200px 缩略图
    ├── voice/about_me.mp3   # “关于我”朗读
    ├── duck-1.mp4 / duck-2.mp4
    ├── duck-1-poster.jpg / duck-2-poster.jpg
    ├── favicon.svg / favicon-32.png / apple-touch-icon.png
    └── og-cover.jpg         # 社交分享封面（1200×630）
```

## 本地预览

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

直接双击 `index.html` 也能看，但用本地服务器更接近线上环境。

## 已做的优化

- **图片**：作品图输出 480/640/960 三档 WebP + JPG 回退，卡片用 `picture` + `srcset`，缩略图单独 200px；`loading="lazy"`、`decoding="async"`、固定宽高避免布局抖动。
- **音频**：朗读 MP3 不再在页面加载时预下载，第一次点“听一段朗读”才创建 `Audio`。
- **视频**：`preload="none"` + 海报；两段视频压缩到约 1.4MB（原 2.5MB），时间线里并排展示。
- **动效**：星空 canvas 按 `devicePixelRatio` 渲染，滚出视口/切到后台时暂停；支持 `prefers-reduced-motion`（关闭雨滴和星星闪烁）。
- **可访问性**：单 `<h1>`、`main`/`skip-link`、卡片改为真实链接、键盘焦点样式、画册灯箱 `role="dialog"` + 焦点管理 + 滚动锁、`aria-live` 更新标题、`aria-current` 标记缩略图。
- **移动端**：导航不再隐藏；作品/爱好在手机上排两列（≤359px 回退单列）；锚点跳转增加 `scroll-margin-top`，不会被固定导航遮住。
- **SEO/分享**：每页有 `description`、Open Graph、favicon、`theme-color`，并生成 1200×630 分享封面。
- **工程**：移除未使用的重复图片和 `.DS_Store`，新增 `.gitignore`、404 页和图片生成脚本。

## 资源优化命令

图片（需要 Pillow）：

```bash
python3 tools/optimize_images.py
```

视频压缩（原始视频可从 Git 历史找回；ffmpeg）：

```bash
ffmpeg -i 原视频.mp4 -map_metadata -1 \
  -vf "fps=24,scale=406:720:flags=lanczos" \
  -c:v libx264 -profile:v main -level 3.1 -preset slow -crf 30 \
  -pix_fmt yuv420p -movflags +faststart \
  -c:a aac -b:a 48k -ac 1 imgs/duck-1.mp4

ffmpeg -ss 7.5 -i imgs/duck-1.mp4 -frames:v 1 -q:v 4 imgs/duck-1-poster.jpg
```

朗读音频由 `gen_voice.py` 用 Qwen3-TTS（预设女声）生成，页面文案写的是“听一段朗读”，避免被误认为是真人录音。

## 部署

仓库本身是纯静态文件，可以直接放到 GitHub Pages、Cloudflare Pages、Vercel 或 Netlify。Gitee Pages 的默认地址目前打不开，如果继续用 Gitee Pages，需要手动开启/重新部署。

部署到正式域名后建议：

- 把每页的 `og:image` 从相对路径改成绝对地址（`https://你的域名/imgs/og-cover.jpg`）；
- 可选补充 `og:url` 和 `canonical`；
- 开启 HTTPS；
- 修改 CSS/JS 后，把 HTML 里 `?v=20261028` 的版本号一起更新，避免访客用到旧缓存。

## 隐私提醒

页面和 Git 仓库目前是公开的，其中包含孩子的姓名、学校、城区、家庭视频。如果打算公开分享，建议先决定公开范围：

- 把“蛇口育才二小”改为“深圳南山区某小学”，去掉具体住址/城区；
- 视频裁掉家中环境，或只保留小鸭子特写；
- 或改成需要口令访问 / 不公开索引。

注意 Git 历史也会保留旧内容；彻底删除需要重写历史。

## 浏览器支持

现代版本的 Chrome、Edge、Firefox、Safari（支持 WebP、`aspect-ratio`、`prefers-reduced-motion`）。

## 许可证

MIT License