生日纪念册 (Birthday Memory Album)

一个精美的响应式生日纪念网站，使用React、TypeScript和Emotion开发，集成了照片墙、里程碑时间线、背景音乐和动画效果，为重要的人创造特别的生日惊喜。

English | 中文

• 🌟 精美设计：现代化UI设计，流畅的动画效果
• 📱 响应式布局：适配各种设备尺寸，从手机到桌面
• 🖼️ 照片墙：展示珍贵回忆的照片墙组件
• 📝 里程碑时间线：记录重要时刻的时间线组件
• 🎵 背景音乐：集成背景音乐播放器，增强氛围
• 🎨 丰富动画：使用Framer Motion实现的丰富动画效果
• 🔒 图片保护：支持设置密码保护重要照片

带后端演示 不带后端Vercel演示

• 前端框架: React 18
• 语言: TypeScript
• 路由: React Router v7
• 样式方案: Emotion
• 动画库: Framer Motion
• 构建工具: Create React App + CRACO
• 其他库:
  • React Confetti
  • React Intersection Observer
  • React Icons

选择以下任一平台，点击一键部署按钮，即可无服务器快速部署应用：

• Node.js 16.x 或更高版本
• npm

1. 克隆仓库

git clone https://github.com/lylares/zaneart.git
cd zaneart

2. 安装依赖

npm install

3. 启动开发服务器

npm start

4. 打开浏览器访问 http://localhost:3000

npm run build

src/
├── assets/       # 静态资源文件
├── components/   # React组件
│   ├── About.tsx             # 关于页面组件
│   ├── ErrorBoundary.tsx     # 错误边界组件
│   ├── Footer.tsx            # 页脚组件
│   ├── Gallery.tsx           # 照片墙组件
│   ├── Header.tsx            # 头部导航组件
│   ├── Intro.tsx             # 介绍页面组件
│   ├── Milestones.tsx        # 里程碑时间线组件
│   └── Navigation.tsx        # 导航菜单组件
├── config/       # 配置文件
├── styles/       # 全局样式定义
├── App.tsx       # 应用程序主组件
└── index.tsx     # 应用程序入口点

1. 编辑 src/components/Intro.tsx 修改介绍内容
2. 编辑 src/components/Gallery.tsx 添加或修改照片
3. 编辑 src/components/Milestones.tsx 修改里程碑事件
4. 在 src/styles/GlobalStyles.tsx 中自定义主题颜色和样式变量

在 App.tsx 中修改音频URL:

const audioUrl = '你的音频文件URL';

MIT © [lylares]

• 感谢所有使用到的开源库的作者

欢迎任何形式的贡献，包括但不限于:

1. 报告错误
2. 提交改进建议
3. 提交代码贡献
4. 改进文档

请先提交issue讨论您想要改变的内容。