Professional Portfolio Website
Modern, SEO-optimized portfolio built with Next.js 16, featuring Server Components, 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. Implements Server Components for optimal performance, ISR caching for blog integration, and enterprise-grade security features including reCAPTCHA v3 and Redis-based rate limiting. Achieved A- grade (92/100) in multi-perspective analysis covering recruiter, hiring manager, and developer viewpoints.
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
- 6Custom RGB color system with Tailwind CSS v4, WCAG AAA compliance (slate-900 primary, slate-700 secondary)
- 7Framer Motion animations with scroll-triggered reveals and staggered children effects
- 8Type-safe data architecture with TypeScript strict mode and centralized types (85+ skills, 12+ projects)
- 9Responsive design with mobile-first approach and accessible navigation (semantic HTML, ARIA labels)
- 10Smart skills display with DRY architecture: 14 core skills + 65+ complementary skills grouped in 11 categories
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.
Enterprise-Grade Contact Form Security
Challenge: Basic contact forms are spam magnets. Needed production-ready security (bot protection, rate limiting) while keeping development workflow simple without API keys.
Solution: Built environment-aware security system: (1) Google reCAPTCHA v3 (invisible, score-based ≥0.5) for bot detection, (2) Upstash Redis sliding window rate limiter (3 req/10min per IP), (3) Resend API for professional email delivery with HTML templates. Key innovation: Automatic security bypass in development mode with console warnings. Production enforcement via environment detection. Result: Zero spam, enterprise-grade security, developer-friendly.
SEO Optimization for Developer Portfolio
Challenge: Portfolio needed to rank well for "senior full stack developer", ".NET Angular developer", and specific tech keywords while showcasing projects effectively to recruiters and hiring managers.
Solution: Implemented comprehensive SEO strategy: (1) Next.js Metadata API with unique titles/descriptions per page, (2) JSON-LD structured data (Person, Website, ProfilePage schemas) for rich snippets, (3) Dynamic sitemap with priorities (homepage: 1.0, projects: 0.9, contact: 0.6), (4) Open Graph + Twitter Cards for social sharing, (5) Semantic HTML with proper heading hierarchy. Result: Grade A- (92/100) in portfolio analysis, optimized for recruiter scanning and search engine indexing.
Project Information
Timeline
Oct 2025 - Present
Role
Developer
Project Metrics
A-
Performance Grade
8
Pages
92/100
SEO Score
<1s
Load Time