Case Study: egekaya.dev Portfolio Website

• Fast by default with aggressive image optimization and minimal JS
• Accessible navigation and content that reads well on mobile
• Writing‑first blog and case studies with consistent typography
• Delightful extras like a subtle Three.js background and a Konami retro mode

Next.js App Router with React 19

The site uses Next.js 16 App Router for file‑system routes, streaming, and metadata per page. React 19 upgrades enable smaller bundle sizes and better concurrent rendering.

Tailwind CSS v4 + prose‑enhanced typography

Tailwind v4 powers a compact, token‑driven design system. I added a lightweight prose‑enhanced utility for consistent spacing, headings, and blue underlined links across long‑form content.

Three.js background via r3f

A GPU‑light background is rendered with @react-three/fiber and @react-three/drei, deferred off the main content for zero CLS. It gracefully degrades on low‑end devices.

Konami retro mode

A small client hook listens for the Konami code and toggles a retro theme with a Web Audio API beep. Styles live in globals.css and don’t affect core performance.

Navigation across routes with anchors

The navbar is aware of current route vs. home and performs smooth in‑page scroll or cross‑route navigation to #about, #projects, etc., avoiding double scroll handlers.

OG images with next/og

Dynamic Open Graph images are generated via next/og with careful flex sizing to prevent rendering overflows.

Analytics

Vercel Analytics and Speed Insights provide privacy‑respecting telemetry. Google Analytics can be toggled with @next/third-parties if needed.

Initial Challenges

The first Lighthouse audit revealed significant performance issues despite using Next.js. Mobile performance scored only 58/100 with a 5.7s LCP - far from production-ready.

Optimization Journey: 58 → 100/100

1. Sitemap Crisis (SEO Fix)

The sitemap was using hash fragments (/#about, /#tech-stack) which search engines ignore. Fixed by removing hash entries and only including actual pages.

2. Image Optimization (Biggest Impact)

• Converted 1.3MB PNG profile image to 81KB WebP (94% reduction)
• Maintained imperceptible visual quality at 90% compression
• Improved LCP by ~2 seconds

3. Deferred Three.js Loading (Bundle Reduction)

• Three.js bundle (865KB) was blocking initial render for 292ms
• Implemented smart deferral: CSS gradients show immediately, Three.js loads after 100ms
• Reduced initial bundle from 865KB to ~250KB (71% reduction)

4. Code Splitting Easter Eggs

• Moved retro mode CSS (136 lines) to dynamically loaded file
• Loads only when Konami code is activated
• Reduced initial CSS by 35%

5. Framer Motion Optimization

• Deferred animation initialization using initial: false pattern
• Content appears immediately, animations enable on next tick
• Reduced element render delay from 3,270ms to 1,300ms (60% improvement)

6. Accessibility Improvements

• Added descriptive aria-label to case study links
• Fixed semantic HTML structure for screen readers
• Achieved 100/100 accessibility score

7. Security Headers

• Added HSTS with includeSubDomains and preload
• Implemented X-Frame-Options, X-Content-Type-Options
• Configured Referrer-Policy and Permissions-Policy

Final Results

Mobile Performance:

• Performance: 58 → 87/100 (+29 points)
• FCP: 2.7s → 1.0s (63% faster)
• LCP: 5.7s → 2.4s (58% faster)
• TBT: 470ms → 400ms (15% faster)
• Speed Index: 5.7s → 2.9s (49% faster)

Desktop Performance: Perfect 100/100

• FCP: 0.3s | LCP: 0.5s | TBT: 50ms | CLS: 0.001

All Other Metrics: 100/100

• Accessibility: 100/100
• Best Practices: 100/100
• SEO: 100/100

Technical Implementation

• Optimized images with next/image and WebP format
• Dynamic imports for heavy libraries (Three.js, retro CSS)
• Smart animation deferral with Framer Motion
• Semantic landmarks and correct heading order
• WCAG AA compliance for focus states and color contrast
• Comprehensive security headers in Next.js config

Read the full technical breakdown in the detailed blog post.

• Home hero with responsive image sizing and mobile‑first spacing (no navbar overlap)
• Projects grid with case study first, code second
• Blog and case study pages using the same typographic system
• Testimonials placeholder flow with a compliant “coming soon” experience
• Konami retro mode and a subtle, performant Three.js background

• Small UX fixes matter: Anchor navigation and mobile spacing improved perceived quality a lot.
• Keep effects optional: Three.js and Konami add personality without hurting performance.
• Content over frameworks: Typography and link consistency improved readability more than new tech.