AS

Personal Portfolio Website

My personal portfolio and blog built with Astro, featuring a clean minimal design, fast performance, and optimal developer experience.

View Source Live Demo
Astro TypeScript Tailwind CSS Portfolio

This is my personal portfolio and blog website — a space where I showcase my projects, share my thoughts on software development, and document my learning journey.

Why I Built This

I wanted a platform that I fully own and control. While LinkedIn and other platforms are great for networking, having my own website gives me complete freedom over how I present myself and my work. Plus, it was a great opportunity to learn Astro and modern static site generation.

Features

  • Content Collections: Type-safe content management using Astro’s Content Collections with Zod validation
  • Fast Performance: Static site generation with minimal JavaScript for optimal load times
  • Dark Mode: Built-in theme toggle with system preference detection
  • Search: Integrated FlexSearch for fast content search across posts and projects
  • Responsive Design: Mobile-first approach with Tailwind CSS
  • Type Safety: Full TypeScript support throughout the codebase

Technical Stack

  • Framework: Astro 5.x
  • Language: TypeScript
  • Styling: Tailwind CSS 4
  • Content: MDX for blog posts and projects
  • Search: FlexSearch for client-side search
  • Icons: Font Awesome 6 via astro-icon
  • Deployment: Vercel with a custom domain

Design Philosophy

I believe in clean, minimal design that puts content first. This site follows the principles of simplicity, readability, and performance. The warm accent color and Satoshi font give it a distinctive yet professional look.

What I Learned

Building this site taught me a lot about:

  • Modern static site generation with Astro
  • Content modeling and validation with Zod
  • Implementing search functionality with FlexSearch
  • Connecting Vercel deployments to GitHub
  • The importance of accessibility and semantic HTML
Back to Projects