# Rico Portfolio - 设计师个人作品集网站
一个基于 Astro 构建的现代化、高性能设计师个人作品集网站模板。采用复古蓝色主题，支持暗色模式，具有精美的动画效果和优秀的用户体验。
## ✨ 特性
- 🚀 **基于 Astro** - 快速、轻量级的静态站点生成器
- 🎨 **现代化设计** - 复古蓝色主题，支持暗色/亮色模式切换
- 📱 **完全响应式** - 适配各种设备尺寸
- 🎭 **精美动画** - 使用 AOS 和自定义动画效果
- 📝 **博客系统** - 支持 MDX 格式的博客文章
- 🎯 **作品展示** - 优雅的作品集展示页面
- 🔍 **SEO 优化** - 内置 SEO 和社交媒体标签
- ⚡ **性能优化** - 图片优化、代码分割、懒加载
- 🌐 **国际化支持** - 易于扩展多语言支持
## 🛠️ 技术栈
- **框架**: [Astro](https://astro.build) 5.15.4 (兼容 v6)
- **样式**: [Tailwind CSS](https://tailwindcss.com) 4.1.14
- **动画**: [AOS](https://michalsnik.github.io/aos/)
- **物理引擎**: [Matter.js](https://brm.io/matter-js/)
- **内容管理**: MDX
- **类型检查**: TypeScript
## 📦 安装
### 使用包管理器
```bash
# 使用 pnpm (推荐)
pnpm install
# 使用 npm
npm install
# 使用 yarn
yarn install
```
### 环境变量配置
复制 `.env.example` 文件为 `.env` 并填写相应的配置：
```bash
cp .env.example .env
```
编辑 `.env` 文件，填入你的配置：
```env
# 站点 URL（可选，但有默认值 https://your-domain.com）
# 首次部署可以不设置，但建议尽快设置正确的域名以优化 SEO
PUBLIC_SITE_URL=https://your-domain.com
# 分析工具（可选）
PUBLIC_GA4_ID=your-google-analytics-id
PUBLIC_UMAMI_ID=your-umami-id
```
> **注意**：`PUBLIC_SITE_URL` 如果没有设置，会使用默认值 `https://your-domain.com`。虽然不会报错，但建议在部署后尽快设置正确的域名，以确保 sitemap、RSS feed 和 SEO 元标签正常工作。
## 🚀 开发
```bash
# 启动开发服务器
npm run dev
# 或
pnpm dev
# 访问 http://localhost:4321
```
## 📦 构建
```bash
# 构建生产版本
npm run build
# 预览构建结果
npm run preview
```
## 📁 项目结构
```
├── public/ # 静态资源
│ ├── assets/ # 图片、视频等资源
│ └── favicon.png # 网站图标
├── src/
│ ├── assets/ # 源代码资源
│ ├── collections/ # 数据集合（作品、经历等）
│ ├── components/ # Astro 组件
│ │ ├── cards/ # 卡片组件
│ │ ├── sections/ # 页面区块组件
│ │ ├── ui/ # UI 组件
│ │ └── widgets/ # 小部件
│ ├── config/ # 配置文件
│ ├── content/ # MDX 博客内容
│ ├── layouts/ # 布局组件
│ ├── pages/ # 页面路由
│ ├── scripts/ # 脚本文件
│ └── styles/ # 样式文件
├── astro.config.mjs # Astro 配置
├── tailwind.config.mjs # Tailwind 配置
└── package.json # 项目依赖
```
## 🎨 自定义配置
### 修改网站信息
编辑 `src/config/site.js` 文件，修改网站的基本信息：
```javascript
export const siteConfig = {
title: "Your Portfolio",
author: "Your Name",
url: "https://your-domain.com",
// ... 更多配置
};
```
### 修改主题颜色
编辑 `src/styles/global.css` 文件中的 CSS 变量：
```css
@theme {
--color-primary: #2d6dc3;
--color-primary-dark: #3b7bd9;
/* ... 更多颜色变量 */
}
```
### 添加作品
在 `src/collections/works.json` 中添加你的作品信息。
### 添加博客文章
在 `src/content/post/` 目录下创建新的 MDX 文件。项目使用 Astro v5 Content Layer API 和 `glob` 加载器来管理内容集合，确保与 Astro v6 兼容。
**注意**：此模板已完全升级到 Astro v5.15 标准，并兼容 Astro v6：
- ✅ 使用新的 Content Layer API (`glob` 加载器)
- ✅ 使用 `entry.id` 替代已弃用的 `entry.slug`
- ✅ 使用 `render(entry)` 替代已弃用的 `entry.render()`
- ✅ 使用 `import.meta.env` 替代 `process.env`
- ✅ 使用 `import.meta.glob()` 替代已弃用的 `Astro.glob()`
- ✅ 所有 `getStaticPaths()` 的 params 都是字符串类型（v6 要求）
## 使用素材
- **Programming Sticker**: [Figma rogramming-sticker-1-0](https://www.figma.com/community/file/1392100849031958853/programming-sticker-1-0)
- **Bento Cards**：[Figma Bento Cards](https://www.figma.com/community/file/1231184483170475120)
- **Social Cards**: [Figma Bento 2.5d](https://www.figma.com/community/file/1232620929235403629/bento-2-5d-widgets)
## 📧 联系方式
- **作者**: Ricoui
- **博客**: [ricoui.com](https://github.com/ricocc)
- **邮箱**: hello@ricoui.com
- **Twitter**: [@ricouii](https://x.com/ricouii)
- **GitHub**: [@ricocc](https://github.com/ricocc)
## 💡 其他产品
- **Rico Blog** - 开源 : [https://github.com/ricocc/public-portfolio-site](https://github.com/ricocc/public-portfolio-site)
- **OG Gallery**: [ricoog.com](https://ricoog.com/)
## 🙏 致谢
- [Astro](https://astro.build) - 优秀的静态站点生成器
- [Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架
## 📝 更新日志
### 最新更新 (2024)
- **升级到 Astro 5.15.4** - 完全符合 Astro v5.15 标准，兼容 Astro v6
- **内容集合升级** - 使用新的 Content Layer API，移除了所有旧版 API
- **API 现代化** - 所有已弃用的 API 已更新为最新标准
- **性能优化** - 优化了构建和运行时性能
查看 [CHANGELOG.md](CHANGELOG.md) 了解完整版本更新历史。
## 关于作者
我是Rico，网页/UI设计师，热衷于做些有趣和创意的作品。拥有 UI/UX 设计工作经验，目前专注于网页设计和视觉落地，以及开发项目探索。我平时在博客Rico's Blog更新内容。也可以关注我的小红书 [@Rico的设计漫想](https://www.xiaohongshu.com/user/profile/5f2b6903000000000101f51f) 和 推特 [@ricouii](https://x.com/ricouii).
或者添加我的微信，交个朋友
## 💜 支持作者
如果觉得有所帮助的话，一点点支持就可以大大激励创作者的热情，感谢！
---
⭐ 如果这个项目对你有帮助，请给一个 Star！