Three runtime-switchable themes: Minimal, Terminal, Elegant, with the selection saved in localStorage
AstroPortfolioBlog
portfolio (vineethkrishnan) — Astro Portfolio Template
By vineethkrishnan
An Astro-based personal portfolio and blog template with three runtime-switchable themes (Minimal, Terminal, Elegant), an MDX content collection for the blog, and Playwright end-to-end and visual regression tests.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-08View source
What stands out
A quick read of the recorded project description.
Blog uses Astro Content Collections and MDX, with complete body typography styles
Project and skill data are centralized in src/data, making it easy to replace with personal content
Playwright tests cover end-to-end flows and visual regression, with screenshot baselines maintained per theme
GitHub Actions workflows include build, type checking, tests, release, commit message validation, and security scanning
Template Details
This is a personal portfolio website template from GitHub user vineethkrishnan, released under the MIT license. The site is built with Astro, styled with Tailwind CSS and CSS custom properties, and manages blog content as MDX via @astrojs/mdx. The page structure includes Hero, About, Skills, Projects, Experience, GitHub Activity, Blog, and Contact sections; project and skill data live in the src/data directory, making it easy to replace with personal content.
The theme system is the template's main feature: three visual styles—Minimal, Terminal, and Elegant—can be switched at runtime and persisted via localStorage, each with corresponding effects (such as scanlines for the terminal style, glass cards for the elegant style, and shadow lift for the minimal style). The blog uses Astro Content Collections and provides complete body typography styles.
For testing, the repository includes end-to-end tests and visual regression tests written with Playwright, along with GitHub Actions workflows covering build, type checking, E2E, visual regression, as well as release, commit message validation, and security scanning. The README states Cloudflare Pages as the deployment target, but the actual deployment configuration and account information must be prepared by the user.
Usage limitations: third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses; the code's MIT license does not cover these assets. External services such as domains and hosting may incur costs. The repository has few stars, is a personal project, and provides no promises regarding performance, accessibility, or production suitability.
AstroPortfolioBlog
Is it right for your project?
Use Cases
- Building a personal portfolio website to showcase skills, projects, and work experience
- Maintaining an MDX-format technical blog within the same site
- Personal sites that need multiple visual styles and allow visitors to switch themes
- Example projects for configuring end-to-end and visual regression tests for a front-end site
Suitable For
- Developers familiar with Astro and Tailwind CSS who want to quickly start a personal site
- Users who need a combined portfolio and blog personal site and are willing to replace the sample content
- Developers interested in front-end testing and CI workflows who want a Playwright configuration reference
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, run npm install, then npm run dev to start the local development server
- 2
Build output goes to ./dist; use npm run preview to preview the production build locally
- 3
Test commands include npm test, npm run test:e2e, npm run test:visual, and npm run test:update-snapshots to update visual baselines
- 4
The deployment target is Cloudflare Pages; you must prepare your own account and project configuration. External services such as domains and hosting may incur costs
- 5
Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses; the MIT license covers only the code in this version
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version of a public repository under the MIT license; the free scope is the code in this version and does not mean external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercialize, and distribute the code in this version for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses; they cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
- The release workflow deploys via Cloudflare Pages when pushing to main; users must prepare their own Cloudflare account and project configuration, and external services such as hosting and domains may incur costs.
- CI/CD depends on external services GitHub Actions and Cloudflare Pages; you must configure the corresponding accounts and permissions yourself.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
| **Release** | Push to main | release-please + Cloudflare Pages deploy |
Original README
https://github.com/vineethkrishnan/portfolio/blob/main/LICENSEhttps://github.com/vineethkrishnan/portfolio/blob/main/README.md| CI/CD | GitHub Actions → Cloudflare Pages |
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-08. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 88 / 100
- Technologies
- Astro
- Website type
- Portfolio · Blog
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-10-08
- Screenshot last checked
- 2026-10-08
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-09
Inspect the recorded source material
SHA-256: cca76236dd9793e649400034f5551a96305fb5644a183bfdc809085cd63cebb4
2026-10-08T18:22:01.962Z
Source file / repository<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
Explore similar templates
Compare previews and descriptions within the same stack and category.
astrowind
AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.
Astro · Blog
astro-paper
AstroPaper is a minimal, responsive, accessible, and SEO-friendly Astro blog theme. Articles are stored as Markdown/MDX in src/content/posts/, with subdirectories affecting URLs.
Astro · Blog
fuwari
Fuwari is a static blog template built with Astro and Tailwind CSS for personal blogs. It manages posts as Markdown files in src/content/posts/, with frontmatter for title, date, description, cover, tags, categories, draft status, and language.
Astro · Blog
Firefly
Firefly is a clean personal blog theme forked from Astro and Fuwari, offering four background modes, single/double sidebar and list/grid layouts, Pagefind client-side full-text search, and a six-language UI.
Astro · Blog
astro-theme-cactus
Astro Cactus is an Astro-based blog and portfolio theme that uses Markdown/MDX content collections to manage posts, notes, and tags, with frontmatter type-checked by a schema.
Astro · Portfolio
astrofy
Astrofy is a free and open-source personal portfolio website template built with Astro and TailwindCSS, with built-in blog, CV timeline, project showcase, store, and RSS feed modules.
Astro · Portfolio