Rico Portfolio - Designer Portfolio Website

中文文档 | English

A modern, high-performance designer portfolio website template built with Astro. Features a retro blue theme, dark mode support, beautiful animations, and excellent user experience.

Deploy

One-click deploy this starter to Tencent EdgeOne Pages (installs, builds, and serves dist/ automatically).

Preview

✨ Features

• 🚀 Built with Astro - Fast and lightweight static site generator
• 🎨 Modern Design - Retro blue theme with dark/light mode toggle
• 📱 Fully Responsive - Adapts to all device sizes
• 🎭 Beautiful Animations - Using AOS and custom animation effects
• 📝 Blog System - Supports MDX format blog posts
• 🎯 Portfolio Showcase - Elegant portfolio showcase pages
• 🔍 SEO Optimized - Built-in SEO and social media tags
• ⚡ Performance Optimized - Image optimization, code splitting, lazy loading
• 🌐 i18n Support - Easy to extend for multi-language support

🛠️ Tech Stack

• Framework: Astro 5.15.4 (v6 compatible)
• Styling: Tailwind CSS 4.1.14
• Animations: AOS
• Physics Engine: Matter.js
• Content Management: MDX
• Type Checking: TypeScript

📦 Installation

Using Package Manager

# Using pnpm (recommended)
pnpm install

# Using npm
npm install

# Using yarn
yarn install

Environment Variables Configuration

Copy .env.example to .env and fill in the corresponding configuration:

cp .env.example .env

Edit the .env file and fill in your configuration:

# Site URL (optional, but has default value https://your-domain.com)
# You can skip this on first deployment, but it's recommended to set the correct domain as soon as possible to optimize SEO
PUBLIC_SITE_URL=https://your-domain.com

# Analytics (optional)
PUBLIC_GA4_ID=your-google-analytics-id
PUBLIC_UMAMI_ID=your-umami-id

Note: If PUBLIC_SITE_URL is not set, it will use the default value https://your-domain.com. While it won't cause errors, it's recommended to set the correct domain after deployment to ensure sitemap, RSS feed, and SEO meta tags work properly.

🚀 Development

# Start development server
npm run dev
# or
pnpm dev

# Visit http://localhost:4321

📦 Build

# Build for production
npm run build

# Preview build result
npm run preview

📁 Project Structure

├── public/              # Static assets
│   ├── assets/         # Images, videos, etc.
│   └── favicon.png     # Site favicon
├── src/
│   ├── assets/         # Source assets
│   ├── collections/    # Data collections (works, experiences, etc.)
│   ├── components/     # Astro components
│   │   ├── cards/      # Card components
│   │   ├── sections/   # Section components
│   │   ├── ui/         # UI components
│   │   └── widgets/    # Widgets
│   ├── config/         # Configuration files
│   ├── content/        # MDX blog content
│   ├── layouts/        # Layout components
│   ├── pages/          # Page routes
│   ├── scripts/        # Script files
│   └── styles/         # Style files
├── astro.config.mjs    # Astro configuration
├── tailwind.config.mjs # Tailwind configuration
└── package.json        # Project dependencies

🎨 Customization

Modify Site Information

Edit the src/config/site.js file to modify the site's basic information:

export const siteConfig = {
  title: "Your Portfolio",
  author: "Your Name",
  url: "https://your-domain.com",
  // ... more configuration
};

Modify Theme Colors

Edit the CSS variables in the src/styles/global.css file:

@theme {
  --color-primary: #2d6dc3;
  --color-primary-dark: #3b7bd9;
  /* ... more color variables */
}

Add Works

Add your work information in src/collections/works.json.

Add Blog Posts

Create new MDX files in the src/content/post/ directory. The project uses Astro v5 Content Layer API with glob loader for content collections, ensuring compatibility with Astro v6.

Note: This template has been fully upgraded to Astro v5.15 standards and is compatible with Astro v6:

• ✅ Uses new Content Layer API (glob loader)
• ✅ Uses entry.id instead of deprecated entry.slug
• ✅ Uses render(entry) instead of deprecated entry.render()
• ✅ Uses import.meta.env instead of process.env
• ✅ Uses import.meta.glob() instead of deprecated Astro.glob()
• ✅ All getStaticPaths() params are string type (v6 requirement)

Figma Assets

• Programming Sticker: Figma rogramming-sticker-1-0
• Bento Cards：Figma Bento Cards
• Social Cards: Figma Bento 2.5d

📧 Contact

• Author: Ricoui
• Blog: ricoui.com
• Email: [email protected]
• Twitter: @ricouii
• GitHub: @ricocc

💡 Other Products

• Rico Blog - Open Source: https://github.com/ricocc/public-portfolio-site

• OG Gallery: ricoog.com

🙏 Acknowledgments

• Astro - Excellent static site generator
• Tailwind CSS - Utility-first CSS framework
• All developers who contributed to this project

About the Author

I'm Rico, a web/UI designer passionate about creating fun and creative work. I have experience in UI/UX design and am currently focused on web design, visual implementation, and exploring development projects. I regularly update my blog on Rico's Blog. You can also follow me on Xiaohongshu @Rico的设计漫想 和 X @ricouii.

Or add me on WeChat—let’s be friends.

💜 Support the Author

If you’ve found this helpful, even a small contribution can greatly encourage creators. Thank you!

📝 Changelog

Latest Updates (2024)

• Upgraded to Astro 5.15.4 - Fully compliant with Astro v5.15 standards and compatible with Astro v6
• Content Collections Upgrade - Using new Content Layer API, all legacy APIs removed
• API Modernization - All deprecated APIs updated to latest standards
• Performance Optimization - Optimized build and runtime performance

⭐ If this project helps you, please give it a Star!