Astro作品集

projects-portfolio-template — Astro 作品集模板

作者 masoudsoleymani

基于 Astro 的响应式作品集模板，内容集中在 /data 目录，内置多套配色主题，适合展示项目与经历。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

内容集中在 /data 目录，便于集中替换站点文案与项目数据

内置 default、strategic、innovator、executive 四套配色主题，在 src/config.ts 中切换

响应式设计，覆盖手机、平板与桌面端

包含 Open Graph 与语义化 HTML 的 SEO 相关设置

采用静态优先架构，构建产物输出到 ./dist/

MIT 许可，允许免费使用、修改、商用和分发代码

模板详细介绍

这是一个用 Astro 构建的响应式作品集模板，用于展示项目与个人经历。模板把站点文案与项目数据集中放在 /data 目录，README 说明可通过编辑 data/site.ts 更新首屏、关于、经历卡片、项目归档页与联系方式等内容，示例图片放在 /public 目录中替换。

主题方面，模板内置多套配色方案，在 src/config.ts 中修改 baseTheme 变量即可切换，可选值包括 default、strategic、innovator、executive。项目结构分为 public 静态资源、data 数据文件、src 下的组件、布局、页面与全局样式，以及 astro.config.mjs 和 tsconfig.json 配置文件。

使用前需安装 Node.js v22.12.0 或更高版本，依次执行 npm install、npm run dev 启动本地开发服务器，构建产物输出到 ./dist/。模板采用 MIT 许可，允许免费使用、修改、商用和分发代码，但演示图片、字体、图标等第三方素材需按各自许可单独核对，域名、托管等外部服务可能另外收费。

Astro作品集

适合你的项目吗？

适用场景

搭建个人项目作品集页面，展示精选项目与经历卡片
为开发者或设计师提供可快速替换内容的静态站点起点
需要多套配色方案快速调整站点视觉风格的场景
部署到 Netlify 等静态托管平台的个人站点

适合人群

希望用 Astro 搭建个人作品集的开发者
需要集中管理站点文案与项目数据的用户
偏好静态站点、准备自行部署到托管平台的人
接受 MIT 许可并会自行核对第三方素材授权的人

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node.js v22.12.0 或更高版本
2
克隆仓库后执行 npm install 安装依赖，npm run dev 启动本地开发服务器（默认 localhost:4321）
3
编辑 data/site.ts 更新首屏、关于、经历卡片、项目归档页与联系方式等内容
4
替换 /public 中的示例图片，包括精选项目卡片图片与 favicon/logo
5
在 src/config.ts 中修改 baseTheme 变量切换配色主题

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/masoudsoleymani/projects-portfolio-template/blob/main/LICENSE https://github.com/masoudsoleymani/projects-portfolio-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: Astro Themes
资料与维护参考分: 资料较完整 · 83 / 100
技术栈: Astro
网站类型: 作品集

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-05-29
截图检查日期: 2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: ba747ff5207bc43fb32c00fd2a73032fc8b8b98bae0a8a4f2ead722d8037fa40

2026-10-03T06:43:42.834Z

来源文件 / 仓库

# Projects Portfolio Template

A responsive Astro starter portfolio template designed to be easy to customize as a reusable template.

![Astro](https://img.shields.io/badge/Astro-6.x-FF5D01?logo=astro&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.x-38B2AC?logo=tailwindcss&logoColor=white)
![License](https://img.shields.io/badge/License-MIT-green)

## ✨ Features
- **Centralized Data:** All content in `/data/` for easy customization
- **Built-in Themes**: Choose a costum theme color palettes from a single config file.
- **Fully Responsive:** Optimized for mobile, tablet, and desktop.
- **Performance:** Optimized for perfect Lighthouse scores.
- **SEO Ready:** Open Graph and semantic HTML
- **Fast** — Static-first architecture

## 🚀 Getting Started
Make sure you have **Node.js** v22.12.0 or higher installed on your machine.

1. Click **Use this template** on this repository.
2. Choose **Create a new repository**.
3. Clone your new repository: `git clone <your-repo-url>`
4. Navigate to your repo: `cd <your-repo-name>`
5. Install dependencies: `npm install`
6. Start development server: `npm run dev`
7. Update your content in `/data`
8. Deploy on your preferred platform

### Replace Content

Edit **`data/site.ts`** to update:

- Hero section texts
- About section texts
- experience cards content 
- Archive projects page content
- Contact links

### Replace Images

Replace the sample images in **`/public`** with your own:

- Featured projects cards images
- Favicon/logo

### 🎨 Theme Switching
This template comes with multiple built-in color palettes. To change the theme of your portfolio, 
open `src/config.ts` and update the `baseTheme` variable to one of the available options:
`'default', 'strategic', 'innovator', 'executive'`

## 📁 Project Structure
```
├── public/              # Static assets
├── data/                # jsON files for project data
├── src/
│   ├── components/      # Reusable Astro components
│   ├── layouts/         # Layout templates with Meta tags
│   ├── pages/           # Site routes (index.astro)
│   └── styles/          # global css styles
│   └── config.ts        # Global site configuration
├── astro.config.mjs     # Astro configuration
└── tsconfig.json        # Typescript configuration
```

## 🛠 Commands 

| Command                   | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `npm install`             | Installs dependencies                            |
| `npm run dev`             | Starts local dev server at `localhost:4321`      |
| `npm run build`           | Build your production site to `./dist/`          |
| `npm run preview`         | Preview your build locally, before deploying     |
| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI                     |

## 🤝 Contributions
Please read the [Contributing Guide](CONTRIBUTING.md) before opening a PR.

## 📝 License
This project is licensed under the [MIT License](LICENSE). You are free to use, modify, and distribute this template.

反馈内容错误