给宝宝一周岁的生日纪念册，已开源

一个精美的响应式宝宝周年纪念网站，集成了照片墙、里程碑时间线、背景音乐和动画效果，为重要的人创造特别的生日惊喜。
支持 vercel 一键部署。

项目概况

特性

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

主要使用技术：

React + TypeScript + Emotion + Framer Motion

开源版本没有后端服务而自用版本增加了API服务来对相册页面进行权限控制，所以自用版本还使用了Node.js Express 。

界面预览

功能说明

1. 全页面适配移动端
2. 首页头部背景气泡动效，页面气球也有动效
3. 全局音乐播放控件
4. 相册支持滑动切换照片
5. 成长历程动画特效

🚀 快速开始

前提条件

– 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

5.构建生产版本

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';

预览站点

前往查看