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

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

项目概况

特性

• 📱 响应式布局：适配各种设备尺寸，从手机到桌面

• 🖼️ 照片墙：展示珍贵回忆的照片墙组件

• 📝 里程碑时间线：记录重要时刻的时间线组件

• 🎵 背景音乐：集成背景音乐播放器，增强氛围

• 🎨 丰富动画：使用Framer Motion实现的丰富动画效果

• 🔒 图片保护：支持设置密码保护重要照片

主要使用技术：

React + TypeScript + Emotion + Framer Motion

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

界面预览

[gallery link="file" size="medium" ids="8101,8103,8099,8102,8104,8105,8098"]

功能说明

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

预览站点