Why I built this
Every developer needs a home on the internet. I wanted a clean, fast, personal space to showcase my work and experience — something that reflects how I think about design and engineering without relying on a template. Building it from scratch gave me full control over the look, feel, and performance.
How it’s built
The site is a static site powered by Astro 6 with React 19 for interactive components and Framer Motion for animations. Styling is handled by Tailwind CSS v4 with custom theme tokens for a consistent dark-theme design system.
Stack choices
- Astro was the natural choice — it ships zero JavaScript by default and only hydrates the components that need interactivity. For a portfolio site, that means near-instant page loads.
- React + Framer Motion handles the interactive pieces: staggered fade-in animations, shimmer effects, and hover states that make the site feel alive without being distracting.
- MDX content collections power the project pages. Each project is a Markdown file with frontmatter metadata, which means adding new projects is as simple as dropping in a new
.mdxfile. - Tailwind CSS v4 via the Vite plugin (not PostCSS) keeps styles colocated and consistent, with custom theme tokens for the accent green and surface colors.
Design
The design is intentionally minimal — dark background, green accent, clean typography with Inter. The goal was to let the content breathe while still having enough personality to stand out. Custom CSS animations like the shimmer sweep on the hero and the arrow hover effect on links add subtle polish.
SEO & performance
Every page includes structured data (JSON-LD), OpenGraph and Twitter meta tags, and a generated sitemap. The site is statically built and deployed to Vercel, so it scores well on Core Web Vitals out of the box.
Key features
- Static output — no server needed, fast everywhere
- MDX-powered projects — write content in Markdown, render with full component support
- Framer Motion animations — staggered entrances, ambient glow, interactive hover states
- Dark theme design system — consistent tokens for colors, spacing, and typography
- Accessible — skip-to-content links, proper ARIA labels, focus ring styles
- Vercel Analytics — lightweight, privacy-friendly analytics built in