All Projects
Developer Portfolio
Animation-driven personal portfolio and blog built with Astro, Tailwind CSS, and GSAP
Overview
A statically-generated developer portfolio website that showcases projects, technical skills, work experience, and a Markdown-powered blog. Built with Astro 5 for fast static output, styled with Tailwind CSS v4 and DaisyUI, and enhanced with GSAP scroll-triggered animations and Lenis smooth scrolling. Deployed automatically to GitHub Pages via a Bun-based CI/CD pipeline.
Problem & Solution
The Problem
Generic portfolio templates lack personality and performance. Most are either over-engineered SPAs that hurt load times, or static HTML pages with no interactivity. A developer portfolio needs to be fast, visually engaging, easy to maintain, and simple to extend with new projects and blog posts.
The Solution
Built a static site with Astro 5 that ships zero JavaScript by default and hydrates only the interactive React islands that need it. Projects are defined as typed data objects for easy updates, blog posts are authored in Markdown with syntax highlighting, and GSAP handles scroll-driven motion design without compromising performance.
Tech Stack
Astro's island architecture ships zero client JS by default and only hydrates interactive components, keeping the portfolio fast while still supporting React where needed.
Used for interactive UI primitives (buttons, cards) via shadcn/ui, hydrated as Astro islands only where interactivity is required.
Provides the utility-first styling system and the dark-mode 'forest' theme, keeping the design consistent without writing custom CSS.
Powers the scroll-triggered reveal animations and the sequenced hero entrance timeline, giving the site a polished motion design layer.
Adds smooth inertial scrolling synced with GSAP's ticker for a buttery scroll experience across the entire site.
Bun handles dependency installation and builds. A GitHub Actions workflow deploys the static output to GitHub Pages on every push to main.
Key Features
- Data-driven project gallery with typed project definitions and featured filtering
- Markdown blog with Astro Content Collections and Shiki syntax highlighting
- GSAP scroll-triggered reveal animations with directional variants (left, right, up, down)
- Sequenced hero entrance timeline animation
- Lenis smooth scrolling integrated with GSAP ticker
- SEO-ready with Open Graph and Twitter Card meta tags per page
- Responsive sidebar navigation with DaisyUI forest theme
- Automated CI/CD deployment to GitHub Pages via GitHub Actions
- Reading time estimation for blog posts
Challenges & Learnings
Coordinating GSAP with Astro page transitions
Astro's client-side navigation fires astro:page-load events that require re-initialising GSAP timelines and ScrollTrigger instances. Lenis also needs to be destroyed and recreated on each navigation to avoid stale scroll state.
Balancing zero-JS defaults with interactive islands
Astro ships no JavaScript by default, so React components like shadcn/ui buttons and cards need explicit hydration directives. Deciding which components need client-side interactivity versus static rendering required careful scoping.
Respecting reduced motion preferences
All GSAP animations check prefers-reduced-motion before running, ensuring the site remains accessible to users who have motion sensitivity without maintaining a separate animation-free codebase.