Current Portfolio
(2025)
A strategic migration from Next.js to Astro, embracing island architecture for optimal performance while preserving rich React-powered interactions
This portfolio represents more than a showcase of my work—it's a testament to continuous improvement and architectural decision-making. Originally built with Next.js, I strategically migrated the entire codebase to Astro to leverage its island architecture and superior static site performance. The migration preserved all existing React components and animations while dramatically reducing JavaScript bundle sizes. Deployed on Cloudflare Pages, the site now loads faster than ever while maintaining the rich interactivity that makes a portfolio memorable.
The Migration Decision
After building and maintaining my portfolio with Next.js, I recognized an opportunity to improve performance without sacrificing functionality. Astro's island architecture offered the perfect solution: static HTML by default with selective hydration only where interactivity is needed. This meant my hero animations, smooth scrolling, and interactive project pages could remain fully functional while eliminating unnecessary JavaScript from static content.
The decision wasn't about abandoning React—it was about using it more strategically. Astro allowed me to keep all my React components (Framer Motion animations, GSAP scroll effects, Lenis smooth scrolling) while wrapping them in a framework optimized for content-focused sites.
Architecture & Implementation
The migration involved converting Next.js pages to Astro's file-based routing, transforming layout components into Astro layouts, and carefully applying client directives to control hydration. Components requiring browser APIs use `client:only="react"`, while scroll-triggered animations use `client:visible` to defer loading until needed.
I leveraged Tailwind CSS 4's new Vite plugin integration for faster builds and smaller CSS output. The animation stack—Framer Motion for component transitions, GSAP with ScrollTrigger for scroll-based effects, and Lenis for buttery-smooth scrolling—works seamlessly within Astro's partial hydration model. Each technology loads only when its component enters the viewport.
Deployment Evolution
Moving from GitHub Pages to Cloudflare Pages marked another significant improvement. Cloudflare's edge network provides faster global delivery, automatic SSL, and seamless Git integration for continuous deployment. The build process is straightforward: Astro generates a static `dist` folder that Cloudflare serves directly from its CDN, resulting in sub-second page loads worldwide.
Results & Reflection
The migration delivered measurable improvements: significantly smaller JavaScript bundles, faster Time to Interactive, and improved Core Web Vitals scores—all while maintaining the exact same user experience. Visitors still enjoy smooth animations, engaging hover effects, and seamless navigation, but the underlying delivery is now far more efficient.
This project reinforced a crucial lesson: the best technology choice depends on the use case. Next.js excels for dynamic applications, but for a content-focused portfolio, Astro's approach of shipping minimal JavaScript by default proved superior. The experience deepened my understanding of modern web architecture and the trade-offs between different rendering strategies.
