Professional Portfolio Website
SEO-optimized portfolio built with Next.js 16, featuring Server Components, a dark/light theme, a project gallery with lightbox, ISR caching, a secure contact form, and analytics.
Overview
A portfolio website built with Next.js 16 App Router and React 19. It uses Server Components for performance, a dark/light theme with OS detection and persistence, a project image gallery with fullscreen lightbox and keyboard navigation, YouTube embeds for demos, ISR caching for the blog, and a secure contact form (reCAPTCHA v3 + Redis rate limiting). SEO runs on JSON-LD structured data, with 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
- 3Secure contact form with Resend API, Google reCAPTCHA v3, and Upstash Redis rate limiting (3/10min)
- 4SEO: Metadata API, JSON-LD structured data, dynamic sitemap, Open Graph, Twitter Cards
- 5Analytics stack: Vercel Analytics + Speed Insights + Google Tag Manager
- 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