Professional Portfolio Website
Modern, SEO-optimized portfolio built with Next.js 16, featuring Server Components, dark/light theme, project gallery with lightbox, ISR caching, enterprise-grade contact form, and comprehensive analytics.
Overview
A production-ready portfolio website showcasing full-stack development expertise, built with Next.js 16 App Router and React 19. Features Server Components for optimal performance, dark/light theme with OS detection and persistence, project image gallery with fullscreen lightbox and keyboard navigation, YouTube video embeds for project demos, ISR caching for blog integration, and enterprise-grade security (reCAPTCHA v3 + Redis rate limiting). Implements comprehensive SEO with JSON-LD structured data, achieving Lighthouse scores of 91/100/100/100 (Performance/Accessibility/SEO/Best Practices).
Technologies & Tools
Key Features
- 1Next.js 16 App Router with Server Components for optimal performance (zero client JS for static pages)
- 2ISR (Incremental Static Regeneration) for C# Corner RSS feed with 7-day revalidation and JSON fallback
- 3Enterprise-grade contact form with Resend API, Google reCAPTCHA v3, and Upstash Redis rate limiting (3/10min)
- 4Comprehensive SEO: Metadata API, JSON-LD structured data, dynamic sitemap, Open Graph, Twitter Cards
- 5Triple analytics stack: Vercel Analytics + Speed Insights + Google Tag Manager for comprehensive tracking
- 6Dark/Light theme system with next-themes, OS preference detection, and persistent user choice (localStorage)
Challenges & Solutions
Server Components vs Client Components Strategy
Challenge: Needed to maximize performance by using Server Components by default while maintaining interactivity for animations and forms. Initial implementation had unnecessary "use client" directives causing larger bundle sizes.
Solution: Adopted Server Component-first architecture: static pages (about, projects list) render as Server Components with zero client JS. Only contact form, navigation, and animated sections marked "use client". This reduced initial bundle by ~40% while maintaining smooth UX with Framer Motion animations.
Color System Bug - Yellow Tint Artifacts
Challenge: Initial implementation used hsl() functions with RGB color variables (e.g., hsl(var(--color-background))), causing yellow/brown tint artifacts across borders and backgrounds. This violated design system consistency.
Solution: Identified root cause: Tailwind config defined colors as RGB tuples (226 232 240) but components used hsl() wrapper. Fixed by enforcing rgb() usage everywhere: rgb(var(--color-background)). Created documentation rule: "ALWAYS use rgb() with CSS variables" to prevent regression. Result: Perfect color rendering matching design system.
ISR Caching for External RSS Feed
Challenge: C# Corner blog articles needed to stay fresh without impacting performance. Direct RSS fetching on every page load was slow (~2-3s) and unreliable if external service went down.
Solution: Implemented 3-tier fallback strategy: (1) ISR with 7-day revalidation for automatic weekly updates, (2) Static JSON fallback in public/data/ for RSS downtime, (3) Graceful empty state if both fail. Created update-articles-fallback.mjs script for manual/automated fallback updates. Result: <1s load time, 99.9% uptime, zero stale content.
Project Information
Timeline
Started: Oct 2025
Last updated: Nov 2025
Role
Developer
Project Metrics
91
Lighthouse Performance
100
Accessibility
100
SEO Score
100
Best Practices