Astro作品集

yisus.dev — Astro 作品集模板

作者 YisusOnDev

基于 Astro 与 Tailwind CSS 的赛博朋克风格个人作品集模板，支持英语和西班牙语双语，内容由 JSON 数据驱动。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

Astro 静态生成，配合 Tailwind CSS 实现赛博朋克视觉风格

02

英语与西班牙语双语支持，翻译文本集中在 src/i18n 的 JSON 文件中

03

项目、分类、经历、技能均由 src/data 下的 JSON 文件驱动

04

项目展示支持分类筛选、图片模态框以及演示和仓库链接

05

包含 Hero、社交链接、经历时间线、技能列表和邮件联系表单等区块

06

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

模板详细介绍

yisus.dev 是开发者 YisusTM_01 的个人作品集网站，使用 Astro 构建，样式基于 Tailwind CSS，并包含 TypeScript 与 pnpm 相关配置。页面采用赛博朋克视觉风格，以渐变和霓虹效果为主，配色以 cyan-400、blue-400、purple-400、pink-400 搭配黑与 gray-900 背景。

网站内容分为 Hero 自我介绍、社交链接、项目展示、职业经历时间线、技能列表和邮件联系表单几个部分。项目展示支持按分类筛选、弹出图片模态框，并显示所用技术以及演示与仓库链接。经历部分以时间线形式呈现 Freelancer、Content Creator、Developer 等条目。

多语言通过 src/i18n 下的 es.json 与 en.json 实现，页面路由为 [locale].astro。项目、分类、经历和技能数据分别存放在 src/data 下的 projects.json、categories.json、experience.json 和 skills.json 中，修改内容不需要改动页面结构。图片可放在 public/images 下并在 JSON 中引用文件名，也可直接使用外部 URL。

使用前需要自行准备域名与托管环境，并核对演示图片、字体、图标等第三方素材的许可；代码本身采用 MIT 许可。

Astro作品集

适合你的项目吗？

适用场景

  • 搭建个人开发者作品集网站，集中展示项目、经历与技能
  • 需要一个支持英语和西班牙语切换的静态个人站点
  • 希望通过修改 JSON 文件而非页面代码来更新作品集内容
  • 作为 Astro 与 Tailwind CSS 组合的参考项目，用于学习数据驱动页面结构

适合人群

  • 希望快速搭建个人作品集的开发者
  • 需要多语言个人站点的自由职业者或内容创作者
  • 偏好 JSON 数据驱动、便于维护内容的静态站点用户
  • 对赛博朋克视觉风格感兴趣的 Astro 使用者

上手与定制指南

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

  1. 1

    使用 pnpm install 安装依赖，pnpm dev 启动本地开发服务器（默认 localhost:4321）

  2. 2

    通过 pnpm build 构建生产版本到 ./dist/，pnpm preview 在本地预览构建结果

  3. 3

    项目、分类、经历和技能内容在 src/data 下的 JSON 文件中维护

  4. 4

    翻译文本在 src/i18n/es.json 与 src/i18n/en.json 中修改

  5. 5

    图片可放入 public/images 并在 JSON 中引用文件名，或直接填写外部 URL

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

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

Permission is hereby granted, free of charge

许可证原文
https://github.com/YisusOnDev/yisus.dev/blob/main/LICENSEhttps://github.com/YisusOnDev/yisus.dev/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 83 / 100
技术栈
Astro
网站类型
作品集
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2025-11-11
截图检查日期
2026-10-12

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: 0a539cb6a09317d0e995bcf9db83bd3723ed15b4fef239b9dd4c072d90f812c2

2026-10-12T21:13:17.588Z

来源文件 / 仓库
# YisusTM_01 - Personal Portfolio

A modern cyberpunk personal portfolio developed with **Astro** and **Tailwind CSS**. A dynamic website with project sections, experience, social links, and technical skills.

## ✨ Features

- 🎨 Modern cyberpunk design with gradients and neon effects
- 🚀 Ultra-fast with Astro (static generation)
- 📱 Fully responsive (mobile and desktop)
- 🌍 Multi-language support (Spanish and English)
- 💼 Dynamic project showcase with categories
- 🎭 Interactive image modal
- 📊 Professional experience timeline
- 🔗 Integrated social links
- ⚡ SEO optimized
- 🎯 Project filtering by category

## 🛠️ Technologies

- **[Astro](https://astro.build/)** - Modern web framework
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[TypeScript](https://www.typescriptlang.org/)** - Typed JavaScript
- **[pnpm](https://pnpm.io/)** - Fast package manager

## 📁 Project Structure

```text
/
├── public/
│   ├── images/              # Static images
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ProjectCard.astro       # Project card with modal
│   │   └── SocialLink.astro        # Social link
│   ├── data/
│   │   ├── projects.json           # Projects and categories
│   │   ├── categories.json         # Project categories
│   │   ├── experience.json         # Professional experience
│   │   └── skills.json             # Technical skills
│   ├── i18n/
│   │   ├── es.json                 # Spanish translations
│   │   └── en.json                 # English translations
│   ├── layouts/
│   │   └── Layout.astro            # Base layout
│   ├── pages/
│   │   └── [locale].astro          # Multi-language main page
│   └── styles/
│       └── global.css              # Global styles
├── astro.config.mjs
├── tsconfig.json
└── package.json
```

## 🧞 Commands

| Command                | Action                                              |
| :--------------------- | :-------------------------------------------------- |
| `pnpm install`         | Install dependencies                              |
| `pnpm dev`             | Start development server at `localhost:4321`      |
| `pnpm build`           | Build for production to `./dist/`                 |
| `pnpm preview`         | Preview build locally                             |
| `pnpm astro ...`       | Run Astro CLI commands                            |

## 🎨 Sections

### 1. Hero
Personal presentation with profile image and description.

### 2. Social Links
Links to social networks (GitHub, Twitch, Twitter, Instagram, Discord).

### 3. Projects
- Dynamic project showcase
- Filter by categories
- Interactive image modal
- Technology information
- Links to live demo and repository

### 4. Experience
Visual timeline of professional experience with:
- Freelancer
- Content Creator
- Developer

### 5. Skills
List of technical skills sorted alphabetically.

### 6. Contact
Direct contact form via email.

## 📝 Customization

### Dynamic Data
All data is stored in JSON files in `src/data/`:

- **projects.json**: Add/edit your projects
- **categories.json**: Define project categories
- **experience.json**: Your professional experience
- **skills.json**: Your technical skills

### Translations
Edit `src/i18n/` to change text:
- `es.json` - Spanish
- `en.json` - English

### Images
- Place project images in `public/images/`
- Reference locally in projects.json: `"image": "imagename.jpg"`
- Or use direct URLs: `"image": "https://..."`

### Styles
Design uses Tailwind CSS. Main colors:
- Primary: `cyan-400` / `blue-400`
- Secondary: `purple-400` / `pink-400`
- Background: `black` / `gray-900`

## 📄 License

This project is under the MIT License.

---

Developed by **YisusTM_01**

[GitHub](https://github.com/YisusOnDev) • [Twitch](https://twitch.tv/YisusTM_01) • [Twitter](https://x.com/YisusTM_01)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

astro-theme-cactus

astro-theme-cactus

A simple Astro theme. Use it to create your blog or website.

Astro · 作品集

astrofy

astrofy

Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCS…

Astro · 作品集

astro-nano

astro-nano

Astro Nano is a static, minimalist, lightweight, lightning fast portfolio and blog.

Astro · 作品集

astro-erudite

astro-erudite

An opinionated, unstyled static blogging template built with Astro and native CSS.

Astro · 作品集

astro-sphere

astro-sphere

Astro Sphere is a static, minimalist, lightweight, lightning fast portfolio and blog.

Astro · 作品集

astro-micro

astro-micro

Blog theme for Astro with search and comments built-in. Zero frameworks.

Astro · 作品集