Executive Summary
Standard developer portfolio websites are static, quickly become outdated as projects evolve, and fail to demonstrate real-time engineering capabilities or active system monitoring.
Portfolio v2 functions as an active operating system: syncing live repository stats from GitHub, executing client health checks, serving an AI publishing feed, and offering interactive 3D graphics.
Core Capabilities & System Highlights
Live Repository Stats Sync
Fetches stars, forks, languages, and last push timestamps dynamically from GitHub REST APIs.
Three.js 3D Background Canvas
Interactive WebGL 3D particle starfields and interactive geometry tuned for 60fps performance.
Dynamic Dark/Light Glassmorphism
Tailwind CSS v4 custom variables providing seamless theme switching with CSS backdrop filters.
System Architecture & Specs
Next.js 16 & Three.js Canvas
Sub-second page transitions, dynamic WebGL canvas, and responsive mobile navigation drawers.
GitHub REST API & Prisma Cache
Cached repository metrics ensuring 0ms page loads with background refresh logic.
Key Engineering Trade-offs & Operational Notes
Portfolio, publishing feed, project sync, and monitoring share one codebase.
Projects update automatically based on public GitHub repository activity.
Navigation and layout density are optimized for small mobile viewports first.
Tech Stack & Role Matrix
Every library and framework in Portfolio v2 Engine was chosen with intentional architectural trade-offs to balance speed, type safety, security, and scalability.
| Technology | Category | System Role | Performance Rationale |
|---|---|---|---|
| Next.js 16 | Framework | Core Portfolio Web Framework | Turbopack compilation and fast Server Component rendering. |
| TailwindCSS v4 | UI Library | Design Token Utility Engine | Offers modern CSS variables and ultra-fast styling. |
| TypeScript | Language | Full System Typing | Ensures type safety across components and GitHub API payloads. |
Live Preview & Showcase
Metrics & Reliability
Lighthouse Performance
Optimized assets and server rendering
Frame Rate
Smooth WebGL canvas rendering on modern GPUs
Sync Speed
GitHub Webhook & API synchronization