# hundred-year-echo

**Repository Path**: K4Ricky2Win/hundred-year-echo

## Basic Information

- **Project Name**: hundred-year-echo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: https://100ye.irky.dev/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-23
- **Last Updated**: 2026-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🏛️ 百年回响 (Hundred-Year Echo)

> 一个人，用三十余年，给一座城市画了一张蓝图。

纪念张謇逝世一百周年（1926-2026）交互式文博网页设计。

**设计/开发**：张子熠 (能达中学)  
**指导老师**：周晓敏

---

## ✨ 核心特色

- **沉浸式交互叙事**：基于 GSAP 构建丝滑的滚动与转场动画，以"两幕叙事"结构讲述张謇与南通城的百年故事。
- **第一幕 — 城市蓝图**：交互式 SVG 手绘地图 + 时间轴双向联动，探索 7 个张謇留下的城市坐标。
- **第二幕 — 百年回响**：实业、教育、建筑、体育四章翻页式叙事，展现一座城市对一个人的回答。
- **原创视听设计**：核心音效及部分视觉元素为纯原创设计，致力于提供身临其境的探索体验。
- **动态海报生成**：支持将探索感悟一键渲染生成专属的高清纪念海报，可保存至相册或分享至微信。

---

## 💻 技术栈

| 类型 | 技术 |
|------|------|
| 框架 | Next.js 15 (App Router) |
| 语言 | TypeScript |
| 样式 | Tailwind CSS |
| 动画 | GSAP (ScrollTrigger) |
| 音效 | Web Audio API |
| 海报 | html-to-image |
| 部署 | Static Export (EdgeOne Pages) |

---

## 🚀 本地运行

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 生产构建
npm run build
```

构建产物在 `out/` 目录，可直接部署到任意静态托管服务。

---

## ⚖️ 声明

本作品为学生公益性学习设计项目。**核心音效与视觉素材为原创设计**。部分史料及底图源自公开文献与网络，仅供教育与文化交流使用，不作商业用途。