vorpax/portfolio

Fork 0

Files

ricocc 4cf082c589 Update Astro v5.15.4

2025-11-08 16:20:26 +08:00

6.8 KiB

Raw Blame History

Rico Portfolio - 设计师个人作品集网站

一个基于 Astro 构建的现代化、高性能设计师个人作品集网站模板。采用复古蓝色主题，支持暗色模式，具有精美的动画效果和优秀的用户体验。

✨ 特性

🚀 基于 Astro - 快速、轻量级的静态站点生成器
🎨 现代化设计 - 复古蓝色主题，支持暗色/亮色模式切换
📱 完全响应式 - 适配各种设备尺寸
🎭 精美动画 - 使用 AOS 和自定义动画效果
📝 博客系统 - 支持 MDX 格式的博客文章
🎯 作品展示 - 优雅的作品集展示页面
🔍 SEO 优化 - 内置 SEO 和社交媒体标签
⚡ 性能优化 - 图片优化、代码分割、懒加载
🌐 国际化支持 - 易于扩展多语言支持

🛠️ 技术栈

框架: Astro 5.15.4 (兼容 v6)
样式: Tailwind CSS 4.1.14
动画: AOS
物理引擎: Matter.js
内容管理: MDX
类型检查: TypeScript

📦 安装

使用包管理器


# 使用 pnpm (推荐)
pnpm install


# 使用 npm
npm install


# 使用 yarn
yarn install

环境变量配置

复制 .env.example 文件为 .env 并填写相应的配置：

cp .env.example .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 元标签正常工作。

🚀 开发

# 启动开发服务器
npm run dev
# 或
pnpm dev

# 访问 http://localhost:4321

📦 构建

# 构建生产版本
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 文件，修改网站的基本信息：

export const siteConfig = {
  title: "Your Portfolio",
  author: "Your Name",
  url: "https://your-domain.com",
  // ... 更多配置
};

修改主题颜色

编辑 src/styles/global.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
Bento Cards：Figma Bento Cards
Social Cards: Figma Bento 2.5d

📧 联系方式

作者: Ricoui
博客: ricoui.com
邮箱: hello@ricoui.com
Twitter: @ricouii
GitHub: @ricocc

💡 其他产品

Rico Blog - 开源 : https://github.com/ricocc/public-portfolio-site
OG Gallery: ricoog.com

🙏 致谢

Astro - 优秀的静态站点生成器
Tailwind CSS - 实用优先的 CSS 框架

📝 更新日志

关于作者

我是Rico，网页/UI设计师，热衷于做些有趣和创意的作品。拥有 UI/UX 设计工作经验，目前专注于网页设计和视觉落地，以及开发项目探索。我平时在博客Rico's Blog更新内容。也可以关注我的小红书 @Rico的设计漫想和推特 @ricouii.

或者添加我的微信，交个朋友

💜 支持作者

如果觉得有所帮助的话，一点点支持就可以大大激励创作者的热情，感谢！

⭐ 如果这个项目对你有帮助，请给一个 Star！

6.8 KiB Raw Blame History Unescape Escape