This Portfolio Website
Engineering-first portfolio built with Next.js and system thinking
Problem & Context
The Challenge
Existing portfolio positioned me as a creative developer rather than a systems engineer. Needed to signal production ownership, architecture thinking, and engineering depth within 5 seconds.
Context
Transitioning from Application Support Engineer role to full-stack/systems engineering positions. Portfolio is the first credibility filter for recruiters and senior engineers.
System Overview
Built from scratch with Next.js 16 App Router, server-side rendering for SEO, animated system diagrams with Three.js, case study architecture with reusable components, and deployed on Vercel edge network.
Architecture
Server-rendered Next.js application with static generation for performance, client-side hydration for interactivity, and component-based architecture for maintainability.
Visual Evidence
Next.js Portfolio Architecture: Edge CDN, App Router with RSC, component layer, data/API layer, serving multiple device clients
Tech Stack
Key Engineering Decisions
Framework: Next.js vs Astro vs SvelteKit
Need SSR for SEO, but also rich client-side animations
Chose Next.js 16 with App Router for RSC, streaming SSR, and mature ecosystem (Three.js, Framer Motion)
Heavier bundle than Astro but better DX and hiring signal
Content Strategy: CMS vs Hardcoded
Case studies are long-form, structured content
Started with TypeScript data structures for iteration speed. Plan to migrate to MDX for rich formatting.
Less content flexibility now, but zero CMS complexity
Results & Impact
Lighthouse Performance
Time to Interactive
Bundle Size
Failures & Learnings
Hero section messaging is THE critical element - iterate here first
System diagrams communicate architecture thinking faster than words
GitHub stars do not equal credibility - depth beats breadth
Responsive design is table stakes - mobile traffic is 60%+
SEO fundamentals (meta tags, semantic HTML, performance) are non-negotiable