blog
Case — A Case-Study-First Portfolio Theme for Astro
A case-study-first portfolio theme for Astro. Designed for professionals who want to showcase their thinking, decisions, and real impact—not just screenshots and tech stacks.
Why Case?
Most portfolio themes focus on listing projects with screenshots and bullet points. Case takes a different approach: it treats every project as a case study with a structured narrative—problem, constraints, approach, key decisions, and measurable outcomes.
This lets you demonstrate not just what you built, but how you think. Hiring managers and clients see your decision-making process, trade-offs you considered, and the real impact of your work. You stand out by showing depth, not just breadth.
Demo
Light Mode |
Dark Mode |
Features
Case Studies Over Screenshots
Document your engineering thinking with structured project narratives.
- Problem → Solution framework: Context, constraints, approach, and measurable impact
- Decision documentation: Trade-offs, alternatives, and reasoning behind key choices
- Quantified outcomes: Performance improvements, team impact, and business results
- Strategic highlighting: Feature your strongest work on the homepage
Built-in Decision Records
Document architectural decisions with full context and alternatives.
- Problem statement and background context
- Options considered with trade-off analysis
- Chosen approach with reasoning
- Outcomes and learnings
- Tag-based organization and filtering
Content Types for Technical Portfolios
Purpose-built collections for engineering professionals.
- Projects — Deep-dive case studies with structured narratives
- Decisions — ADR-style technical decision logs
- Journey — Career milestones, transitions, and key learnings
- Writing — Technical articles with auto-generated TOC
- Speaking — Talks, podcasts, and workshop materials
- Tools — Tech stack and development environment
- Testimonials — Peer and client recommendations
Quick Start
1. Create a new project
npm create astro@latest -- --template erlandv/case
2. Configure your site
cp .env.example .env
# Edit .env with your information
3. Start development
npm run dev
Your site is now running at http://localhost:4321
Documentation
Full documentation is available in the docs/ folder:
Getting Started
- Installation — Prerequisites and setup
- Quick Start — See results in 5 minutes
- Project Structure — Understand the codebase
Configuration
- Configuration — Environment variables, navigation, favicons
Content
- Content Guide — All content types and schemas
- Templates — Copy-paste templates for quick content creation
- Images — Image handling and optimization
- Content Strategy — Best practices for featured content
Customization
- Styling — Colors, typography, spacing, breakpoints
- Components — Modifying and creating components
- Advanced — Layouts, new content collections
Deployment
- Deployment — Build and deploy to various platforms
- Post-Deployment — Verification checklist
Reference
- Troubleshooting — Common issues and solutions
License
Case Theme is free for personal and commercial use under the MIT License. Attribution is not required, but a link back to this repository is always appreciated if you find the theme useful.