Astro作品集

minimalist-dragon — Astro 作品集模板

作者 slydragonn

基于 Astro 的单页作品集模板，由 Navbar、Footer、ProjectCard、SkillCard、Button、Title 等组件拼装，适合快速搭建个人项目与技能展示页。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

Astro 单页作品集结构，入口为 src/pages/index.astro

内置 Navbar、Footer、ProjectCard、SkillCard、Button、Title 组件

ProjectCard 与 SkillCard 分别用于展示项目与技能条目

public 目录预置 favicon、dragon.png 及多个 SVG 图标

README 提供 clone、install、run 命令与静态托管部署说明

仓库采用 MIT 许可，允许修改、商用与分发

模板详细介绍

Minimalist Dragon 是一个用 Astro 构建的单页作品集模板，仓库描述为 Minimalist Portfolio，并注明基于同作者的 Minimalist Portfolio 项目。页面结构由 src/pages/index.astro 承载，配合 src/layouts/Layout.astro 与 src/components 下的 Navbar、Footer、ProjectCard、SkillCard、Button、Title 等组件组成，公共资源放在 public 目录，包含 favicon、dragon.png 以及 design、email、external-link、database、server 等 SVG 图标。

模板提供可复用的组件调用示例：Button 接收 message、icon、link；Title 接收 text；SkillCard 接收 title、description、icon；ProjectCard 接收 title、description、link。README 说明可通过 git clone 获取代码，npm install 安装依赖，npm run dev 本地运行，并可部署到 Vercel、Netlify、GitHub Pages 等静态托管服务。

限制方面，资料未说明样式细节、响应式断点、内容管理方式或构建产物配置，仅能确认其为单页结构；演示图片、字体、图标等第三方素材的许可需单独核对，代码本身采用 MIT 许可。

Astro作品集

适合你的项目吗？

适用场景

个人开发者搭建单页作品集，集中展示项目与技能
作为 Astro 组件化练习的起点，替换 ProjectCard、SkillCard 内容
部署到 Vercel、Netlify 或 GitHub Pages 作为静态站点
在已有 Astro 项目中复用 Button、Title 等基础组件

适合人群

需要轻量单页作品集、不要求多页面路由的开发者
熟悉或愿意使用 Astro 组件与 npm 工作流的用户
希望直接修改组件示例来填充自己项目与技能信息的人
计划使用静态托管服务发布个人页面的用户

上手与定制指南

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

1
使用 git clone https://github.com/slydragonn/minimalist-dragon.git 获取代码
2
执行 npm install 安装依赖，再运行 npm run dev 启动本地开发
3
页面内容与组件调用集中在 src/pages/index.astro 及 src/components 下
4
部署前需自行核对 public 中图片、图标及演示素材的许可
5
可部署到 Vercel、Netlify、GitHub Pages 等静态托管服务

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

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

查看原文依据

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

https://github.com/slydragonn/minimalist-dragon/blob/main/LICENSE https://github.com/slydragonn/minimalist-dragon/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 60 / 100
技术栈: Astro
网站类型: 作品集

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2024-09-04
截图检查日期: 2026-10-02

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: dd45e066cf120c6d4499914b0bd5c19eea9af6c7b738253a5844e745f42404a9

2026-10-02T16:53:05.683Z

来源文件 / 仓库

# Minimalist Dragon - Portfolio Template

Single page portfolio made with [Astro](https://astro.build/) and based on [Minimalist Portfolio](https://github.com/slydragonn/minimalist-portfolio)


## Clone:
```
git clone https://github.com/slydragonn/minimalist-dragon.git
```

## Install:

```
npm install
```

## Run:
```
npm run dev
```

## Project Struture
```
├── src/
│   ├── components/
│   │   ├── Button.astro
│   │   ├── Footer.astro
│   │   ├── Navbar.astro
│   │   ├── ProjectCard.astro
│   │   ├── SkillCard.astro
│   │   └── Title.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
├── public/
│   ├── favicon.svg
│   ├── design.svg
│   ├── dragon.png
│   ├── email.svg
│   ├── external-link.svg
│   ├── database.svg
│   └── server.svg
├── astro.config.mjs
├── package.json
├── .gitignore
├── README.md
└── tsconfig.json
```

## Components

**Button:**
```
<Button
    message='Latest Posts'
    icon='/external-link.svg'
    link='#'
/>
```

**Title:**
```
<Title 
    text='Skills & Technologies'
/>
```

**SkillCard:**
```
<SkillCard 
	title='Frontend Development'
	description='Developing websites with JavaScript and the best Frameworks like React, Vue, and Astro'
	icon='/design.svg'
/>
```

**ProjectCard:**
```
<ProjectCard 
	title='My Project #1'
	description='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
	link='#'
/>
```

## Deploy
You can deploy this site on your favorite static hosting service such as Vercel, Netlify, GitHub Pages, etc.

反馈内容错误