Problem
Most portfolio sites either look like templates or feel like tech demos. Neither serves the actual goal: giving recruiters fast, high-signal proof of scope, ownership, and engineering judgment.
Constraints
- Static output only. No server runtime, predictable hosting
- Minimal JavaScript. Animations via CSS, not JS frameworks
- Content validated at build time via strict schema
- Must be easy to add new projects without custom page work
- Solo-maintained with low operational overhead
Approach
Built with Astro as a static site generator with MDX for flexible project write-ups. Content collections enforce a strict schema (title, summary, role, stack, status, year) so every project entry is consistent and complete.
The UI uses glassmorphism design language with CSS-driven scroll animations, gradient accents, and frosted-glass cards. The career timeline visualizes the journey from finance to full-stack development, giving recruiters the full narrative at a glance.
Key decisions
- Astro over Next.js. Static generation with zero client-side JS by default. The site loads instantly.
- Content collections over CMS. Build-time validation and Git-versioned content keeps things simple and auditable.
- CSS animations over JS libraries. Intersection Observer for scroll triggers, CSS transitions for everything else. No animation library bloat.
- Hand-crafted design without a design system. Glassmorphism, gradient text, and micro-interactions prove frontend ability without framework overhead.
Outcome
A fast, visually distinctive portfolio that tells the story of a builder who ships real products. Not another developer template.