三套可运行时切换的主题：Minimal、Terminal、Elegant，选择结果保存在 localStorage
Astro作品集博客
portfolio (vineethkrishnan) — Astro 作品集模板
作者 vineethkrishnan
基于 Astro 的个人作品集与博客模板，内置 Minimal、Terminal、Elegant 三套可运行时切换的主题，博客使用 MDX 内容集合，并配有 Playwright 端到端与视觉回归测试。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-08查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
博客使用 Astro Content Collections 与 MDX，带完整正文排版样式
项目与技能数据集中在 src/data，便于替换为个人内容
Playwright 测试覆盖端到端流程与视觉回归，并按主题维护截图基线
GitHub Actions 工作流包含构建、类型检查、测试、发布、提交信息校验与安全扫描
模板详细介绍
这是一个个人作品集网站模板，仓库来自 GitHub 用户 vineethkrishnan，采用 MIT 许可。站点以 Astro 构建，样式使用 Tailwind CSS 与 CSS 自定义属性，博客内容通过 @astrojs/mdx 以 MDX 形式管理。页面结构包含 Hero、About、Skills、Projects、Experience、GitHub Activity、Blog、Contact 等区块，项目与技能数据存放在 src/data 目录，便于替换为个人内容。
主题系统是该模板的主要特点：Minimal、Terminal、Elegant 三套视觉风格可在运行时切换，并通过 localStorage 持久化，各主题带有对应的效果（如终端风格的扫描线、优雅风格的玻璃卡片、极简风格的阴影抬升）。博客部分使用 Astro Content Collections，提供完整的正文排版样式。
测试方面，仓库包含 Playwright 编写的端到端测试与视觉回归测试，并配有 GitHub Actions 工作流，覆盖构建、类型检查、E2E、视觉回归，以及发布、提交信息校验和安全扫描。README 中标注部署目标为 Cloudflare Pages，但实际部署配置与账号信息需使用者自行准备。
使用限制：模板的演示图片、字体、图标等第三方素材需按各自许可单独核对，代码的 MIT 许可不覆盖这些素材；域名、托管等外部服务可能产生费用。仓库星标数较少，属于个人项目，未提供关于性能、可访问性或生产环境适用性的承诺。
Astro作品集博客
适合你的项目吗？
适用场景
- 搭建个人作品集网站，展示技能、项目与工作经历
- 在同一站点内维护 MDX 格式的技术博客
- 需要多种视觉风格并可让访客切换主题的个人站点
- 希望为前端站点配置端到端与视觉回归测试的示例项目
适合人群
- 熟悉 Astro 与 Tailwind CSS、希望快速起步个人站点的开发者
- 需要作品集与博客合一的个人站点，并愿意替换示例内容的使用者
- 关注前端测试与 CI 流程、希望参考 Playwright 配置的开发者
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后执行 npm install，再运行 npm run dev 在本地启动开发服务器
- 2
构建产物输出到 ./dist，可用 npm run preview 在本地预览生产构建
- 3
测试命令包括 npm test、npm run test:e2e、npm run test:visual，以及更新视觉基线的 npm run test:update-snapshots
- 4
部署目标为 Cloudflare Pages，需自行准备账号与项目配置；域名、托管等外部服务可能产生费用
- 5
演示图片、字体、图标等第三方素材需按各自许可单独核对，MIT 许可仅覆盖该版本代码
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 发布工作流在推送到 main 时通过 Cloudflare Pages 部署，使用者需自行准备 Cloudflare 账号与项目配置，托管与域名等外部服务可能产生费用。
- CI/CD 依赖 GitHub Actions 与 Cloudflare Pages 外部服务，需自行配置相应账号与权限。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
| **Release** | Push to main | release-please + Cloudflare Pages deploy |
README 原文
https://github.com/vineethkrishnan/portfolio/blob/main/LICENSEhttps://github.com/vineethkrishnan/portfolio/blob/main/README.md| CI/CD | GitHub Actions → Cloudflare Pages |
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-08。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 88 / 100
- 技术栈
- Astro
- 网站类型
- 作品集 · 博客
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-10-08
- 截图检查日期
- 2026-10-08
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-09
查看当时使用的来源资料
SHA-256: cca76236dd9793e649400034f5551a96305fb5644a183bfdc809085cd63cebb4
2026-10-08T18:22:01.962Z
来源文件 / 仓库<p align="center">
<strong>vineethnk.in</strong><br>
<em>Personal portfolio with 3 switchable themes, MDX blog, and full test coverage.</em>
</p>
<p align="center">
<a href="https://astro.build/"><img src="https://img.shields.io/badge/Astro-6-ff5d01?logo=astro&logoColor=white" alt="Astro 6"></a>
<a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-5.9-3178c6?logo=typescript&logoColor=white" alt="TypeScript"></a>
<a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind_CSS-4-06b6d4?logo=tailwindcss&logoColor=white" alt="Tailwind CSS 4"></a>
<a href="https://playwright.dev/"><img src="https://img.shields.io/badge/Playwright-85_tests-2ead33?logo=playwright&logoColor=white" alt="Playwright"></a>
<a href="https://pages.cloudflare.com/"><img src="https://img.shields.io/badge/Cloudflare_Pages-deployed-f38020?logo=cloudflarepages&logoColor=white" alt="Cloudflare Pages"></a>
<a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow" alt="MIT License"></a>
</p>
---
## Themes
Three visually distinct themes, switchable at runtime and persisted in localStorage:
| Minimal | Terminal | Elegant |
|---------|----------|---------|
| Clean white, warm amber accents, serif typography, dot grid background | Dark CRT aesthetic, green neon, monospace, scanlines, `$ whoami` prompt | Deep navy, violet-to-pink gradients, glass morphism, gradient borders |
## Features
- **3 switchable themes** — Minimal Light, Dark Terminal, Modern Elegant
- **MDX blog** — Astro Content Collections with full prose styling
- **Dynamic data** — years of experience calculated from 2012 start year
- **Scroll animations** — intersection observer fade-in with staggered delays
- **Scroll progress bar** — gradient progress indicator in the navbar
- **Responsive** — mobile-first with hamburger menu and adaptive layouts
- **SEO ready** — Open Graph, Twitter cards, sitemap, semantic HTML
- **Theme-specific effects** — CRT scanlines (terminal), glass cards (elegant), shadow lift (minimal)
## Sections
Hero · About · Skills · Projects · Experience · GitHub Activity · Blog · Contact
## Tech Stack
| Layer | Technology |
|-------|-----------|
| Framework | [Astro 6](https://astro.build/) |
| Styling | [Tailwind CSS 4](https://tailwindcss.com/) + CSS custom properties |
| Blog | MDX via `@astrojs/mdx` |
| Testing | [Playwright](https://playwright.dev/) — 61 E2E + 24 visual regression |
| CI/CD | GitHub Actions → Cloudflare Pages |
| Release | [release-please](https://github.com/googleapis/release-please) |
## Quick Start
```bash
git clone https://github.com/vineethkrishnan/portfolio.git && cd portfolio
npm install
npm run dev # http://localhost:4321
```
## Commands
| Command | Action |
|---------|--------|
| `npm run dev` | Start dev server at `localhost:4321` |
| `npm run build` | Build production site to `./dist/` |
| `npm run preview` | Preview production build locally |
| `npm test` | Run all Playwright tests (E2E + visual) |
| `npm run test:e2e` | Run E2E tests only |
| `npm run test:visual` | Run visual regression tests only |
| `npm run test:update-snapshots` | Update visual regression baselines |
## Project Structure
```
src/
├── components/ # Astro components (Hero, About, Skills, etc.)
├── content/
│ └── blog/ # MDX blog posts
├── data/ # Projects and skills data
├── layouts/ # Base and blog layouts
├── pages/
│ ├── index.astro # Homepage
│ └── blog/ # Blog listing and post pages
└── styles/
└── global.css # Theme system + utilities
tests/
├── e2e/ # Navigation, themes, sections, blog
└── visual/ # Screenshot comparisons per theme
```
## CI/CD Pipeline
| Workflow | Trigger | Jobs |
|----------|---------|------|
| **CI** | Push + PR | Build, Type Check, E2E Tests, Visual Regression |
| **Release** | Push to main | release-please + Cloudflare Pages deploy |
| **Commit Lint** | PR | Validate PR title (conventional commits) |
| **Security** | Push + PR + weekly | CodeQL, Dependency Review, Trivy |
## License
[MIT](LICENSE) © Vineeth N K
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
astrowind
⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.
Astro · 博客
astro-paper
A minimal, accessible and SEO-friendly Astro blog theme.
Astro · 博客
fuwari
✨A static blog template built with Astro.
Astro · 博客
Firefly
Firefly 是一款基于 Astro 的静态博客主题，由 CuteLeaf 在 saicaca 的 Fuwari 模板基础上二次开发，主打清新美观的视觉风格。
Astro · 博客
astro-theme-cactus
A simple Astro theme. Use it to create your blog or website.
Astro · 作品集
astrofy
Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCS…
Astro · 作品集