Skip to main content
Back to Blog

Building My Portfolio Website

#astro #react #portfolio #webdev

Why I Built This

After years of working on enterprise payment systems and e-commerce platforms, I realized I didn’t have a proper online presence showcasing my work. Most of my projects were behind NDAs or internal tools, making it hard to demonstrate my skills to potential collaborators and employers.

So I decided to build something that reflects both my technical abilities and design sensibilities.

The Tech Stack

I chose a modern stack that prioritizes performance and developer experience:

  • Astro 5 for static site generation with island architecture
  • React 19 for interactive components where needed
  • TypeScript for type safety throughout
  • Tailwind CSS 4 for rapid styling with design tokens
  • GSAP + ScrollTrigger for smooth scroll-driven animations
  • Lenis for buttery smooth scrolling
  • Framer Motion for the split-flap text effect on the hero

Why Astro?

Coming from a React background, I initially considered Next.js. But for a portfolio site that’s mostly static content, Astro’s approach made more sense:

  1. Zero JS by default - only ship JavaScript where it’s needed
  2. Island architecture - keep interactive parts isolated
  3. Content collections - type-safe markdown for blog posts
  4. Fast builds - sub-second hot reload

Design Decisions

The design draws inspiration from editorial layouts and brutalist web design:

  • Dark monochrome palette with orange accent (oklch(0.7 0.2 45))
  • Bebas Neue for headlines, bold and unapologetic
  • IBM Plex family for body text, readable and technical
  • Asymmetric grid layouts to break the monotony
  • Subtle noise texture for tactile depth

The Animation Philosophy

I believe animations should enhance, not distract. Each animation serves a purpose:

  • Scroll-triggered reveals so content appears as you discover it
  • Hover states for immediate feedback on interactive elements
  • The split-flap effect for a memorable first impression

All animations respect prefers-reduced-motion for accessibility.

What I Learned

Building this portfolio reinforced some important lessons:

  1. Start simple, iterate - my first design was overengineered
  2. Performance matters - every kilobyte counts
  3. Ship it - done is better than perfect

What’s Next

This is version 1.0. I plan to:

  • Add case studies for select projects
  • Implement dark/light theme toggle
  • Build a contact form with Resend for email delivery
  • Integrate Cal.com for easy meeting scheduling
  • Add more blog posts about my technical journey

Thanks for stopping by. Feel free to reach out if you’d like to collaborate or just chat about web development.