Portfolio Website Architecture
The minimalist personal portfolio you are currently browsing — engineered from the ground up with vanilla HTML5, CSS3, JavaScript, an Express backend, and live GitHub sync.
Purpose & Design Philosophy
Most personal portfolios today rely on heavy modern frameworks (React, Next.js, large CSS libraries) that introduce hundreds of kilobytes of runtime bundle overhead. The goal for this site was to demonstrate what clean, purposeful engineering can achieve with raw Web Standards: zero dependencies on the frontend, lightning-fast rendering speeds, and modern glassmorphism aesthetics.
Core Modules
System Dark / Light Engine
Instant color-token swapping using CSS custom variables with zero render flash and local storage state persistence.
Live GitHub Telemetry
Asynchronous sync with the GitHub REST API that dynamically showcases real stars, forks, and the latest commit without server build triggers.
Full Admin Dashboard
Protected administration control center backed by Express & MongoDB with rate limiting, password hashing, and project management.
Interactive AI Assistant
Custom client-side chatbot providing automated, contextual answers regarding skills, background, and project experience.
Engineering Challenges & Solutions
Challenge 1: Flash of Unstyled Theme (FOUT)
Dynamic theme loading can cause a jarring white flash on dark-mode reload. Solved by injecting an inline pre-render script before DOM parse that reads local storage and immediate system prefers-color-scheme, applying data-theme instantly.
Challenge 2: Floating Cutout Alignment & Responsive Silhouette
Replacing traditional rigid rectangular avatar cards with an unconstrained full-body cutout required precise CSS mask-image linear gradients, dynamic negative margin compensations, and clamp typography to ensure fluid layout across devices from 320px phones to 4K monitors.