Portfolio Website
You're looking at it! After building my initial portfolio with Next.js, I rebuilt it with Astro to take advantage of its content-first architecture and superior static site generation. This migration was driven by Astro's perfect fit for a portfolio site - zero JavaScript by default, excellent performance, and a built-in content collections system ideal for blog posts. The rebuild demonstrates my willingness to choose the right tool for the job. While Next.js is excellent for dynamic applications, Astro's approach to static content delivery and its minimal JavaScript footprint made it the better choice for a portfolio and blog.
Key Features
- ▸ Static site generation with Astro for optimal performance and SEO
- ▸ Content Collections system for type-safe blog post management
- ▸ Responsive design with fluid typography and layouts
- ▸ Carefully crafted animations using CSS transitions
- ▸ Dark mode with system preference detection
- ▸ Zero JavaScript by default with selective hydration where needed
- ▸ Accessibility features including proper ARIA labels and keyboard navigation
- ▸ MDX support for rich, interactive blog content
Technical Architecture
Frontend
Built with Astro's static site generation for optimal performance. Implemented WCAG-compliant accessible design patterns. Created reusable components with TypeScript for type safety. Leveraged Astro's partial hydration for interactive elements.
Backend
Utilized Astro's Content Collections API for type-safe content management. Implemented efficient asset optimization and delivery. Markdown and MDX processing for blog posts.
Infrastructure
Deployed on Vercel with automatic previews for all changes. Set up proper meta tags and SEO optimization for all pages. Optimized build process for fast static site generation.