🚀 Engineering a High-Performance Portfolio System

Stack: Next.js · SSR · Lighthouse 100

The Challenge

Traditional React portfolios suffer from bloated JavaScript bundles, leading to high Total Blocking Time (TBT) and poor Largest Contentful Paint (LCP). For a Systems Engineer, a slow site is a bad résumé. This project was built to prove that a feature-rich CMS can still achieve sub-second performance.

---

🛠 Architectural Strategy

1. Performance Profiling & Main-Thread Optimization

Using the Chrome DevTools Performance Tab, I identified "Evaluate Script" tasks as the primary cause of high TBT.

• Solution: Implemented Dynamic Routing and selective Component Hydration.
• Result: Reduced initial JavaScript payload by 40%, moving heavy interactive elements off the critical rendering path.

2. Edge-Computing & Security with jose

To avoid the latency of traditional session databases, I implemented Edge Authentication.

• Stateless Auth: jose for JWT verification directly inside Next.js Middleware — no database round-trip on every request.
• Secure Protocols: Admin access governed by HTTP-only secure cookies, verified at the network edge. Unauthorized requests never reach the server infrastructure.

3. SEO & Semantic Discovery

Visibility is as important as performance. This system automates the full technical SEO pipeline: