This Portfolio — Next.js & TypeScript

I wanted a portfolio that doesn't just showcase my work but demonstrates my development capabilities. Instead of using a WordPress template, I built this from scratch using the latest web technologies to prove I can do more than just WordPress.

Static Export Requirement: The site is hosted on GitHub Pages which only supports static files. Next.js dynamic features (server components, API routes) had to be adapted for static export.

Dynamic Routes with Static Export: Blog posts, category pages, and tag pages all use dynamic routing. Each needed `generateStaticParams` to pre-render at build time.

Performance First: The site needed to be the fastest portfolio on the internet. Every byte counts — no bloated libraries, no unnecessary animations.

macOS Design Language: Recreating macOS UI elements (dock, window chrome, glass-morphism) in CSS/React required careful attention to detail and custom component development.

Built with Next.js 15 App Router, TypeScript for type safety, Tailwind CSS for styling, and Framer Motion for animations. Custom components include: glossy dock with magnification, macOS window wrapper, glass-morphism cards, animated counters, and scroll progress indicator. Static export generates 72 pre-rendered pages. Implemented comprehensive SEO with JSON-LD schema, OG tags, and semantic HTML. Added copy protection and custom macOS-style cursors for a polished feel.

Performance:
- Lighthouse Performance: 100/100
- First Load JS: 102 KB (shared)
- 72 static pages pre-rendered at build time
- Fastest possible TTFB (static HTML from CDN)

Features:
- 10 blog posts with dynamic routing
- Category and tag filtering pages
- Real-time view counter
- macOS-inspired UI with dock, windows, and glass effects
- Full dark theme with custom gradient background
- Responsive across all devices
- SEO optimized with structured data

Technical Stack:
Next.js 15 · TypeScript · Tailwind CSS · Framer Motion · GitHub Pages · Vercel