A modern, high-performance personal portfolio website built with Astro 5 and Tailwind CSS 4. Featuring a glassmorphism bento-grid design, zero-JavaScript default performance, and extensive accessibility optimizations.
- High Performance: Built with Astro 5 static site generation. Zero client-side JS by default.
- Modern Design: Glassmorphism UI, bento-grid layout, and subtle animated mesh gradients.
- Dark Mode First: Optimized for dark themes with deeply integrated Tailwind v4 variables.
- Accessibility: WCAG 2.1 AA compliant colors and semantic HTML.
- SEO Optimized: Meta tags, Open Graph, Twitter Cards, and JSON-LD structured data included.
- Type-Safe: Fully typed with TypeScript for reliable content management.
- Framework: Astro 5
- Styling: Tailwind CSS 4
- Deployment: GitHub Pages (Standard Workflow)
- Icons: Simple Icons (via SVG paths) & Lucide
Want to create your own version? Follow these steps:
Click the Fork button at the top right of this repository to create your own copy. You can rename it to your own domain (e.g., yourname.com) during or after forking.
git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAMEnpm installnpm run devVisit http://localhost:4321 to see your site.
This template is designed to be easily customizable via data files. You don't need to touch the complex Astro components for basic changes.
- Site Config: Edit
src/data/site.ts- Change name, title, description, social links, and main images.
- Experience: Edit
src/data/experience.tsto add your job history. - Education: Edit
src/data/education.tsfor degrees and certifications. - Skills: Edit
src/data/skills.tsto manage your tech stack proficiency. - Images: Replace
src/assets/gobi.png(profile) andpublic/img/Sign.png(signature) with your own.
To create a production build:
npm run buildThis project comes with a ready-to-use GitHub Actions Workflow in .github/workflows/deploy.yml that automatically deploys to GitHub Pages on every push to main.