A modern, performant personal portfolio and blog built with Astro, showcasing projects, professional experience, and technical writing.
- Blog System - Markdown-based technical blog with reading progress, table of contents, and estimated reading time
- Project Showcase - Portfolio with featured images, tech stacks, and live/repository links
- Professional Timeline - Interactive career and education history
- Slide Presentations - Built-in markdown-based presentation system
- Static Site Generation - Lightning-fast performance with Astro's SSG
- PDF Resume Generation - Dynamic PDF creation from content data
- Enhanced Markdown - Support for math equations (KaTeX), diagrams (Mermaid), and syntax highlighting
- Responsive Design - Mobile-first approach with tailored layouts
- Type Safety - TypeScript with content collection schemas
- Framework: Astro 5.11.1
- UI: React 19.1.0
- Styling: Tailwind CSS v4
- Components: Radix UI primitives
- Fonts: Geist Sans & Mono
- Language: TypeScript
# Install dependencies
yarn install
# Start development server
yarn dev
# Build for production
yarn build
# Preview production build
yarn preview
src/
├── components/ # Reusable UI components
├── content/ # Markdown content collections
│ ├── blog/ # Blog posts
│ ├── projects/ # Portfolio projects
│ └── slides/ # Presentations
├── layouts/ # Page layouts
├── pages/ # File-based routing
└── styles/ # Global styles
Command | Description |
---|---|
yarn dev |
Start development server |
yarn build |
Build for production |
yarn preview |
Preview production build |
yarn check |
Run type checking |
Add content by creating markdown files in the appropriate directories:
- Blog posts:
src/content/blog/[slug].md
- Projects:
src/content/projects/[slug].md
- Slides:
src/content/slides/[slug].md
Each content type has a defined schema in src/content/config.ts
.
Site metadata and personal information can be updated in:
src/lib/personalInfo.ts
- Personal details and skills
This project is a personal portfolio website. Feel free to use it as inspiration for your own portfolio.