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.
Near-perfect rating across Performance, SEO, and Best Practices.
Zero external runtime dependencies blocking the critical render path.
Engineered purely with standard DOM APIs, CSS tokens, and vanilla ES modules.
Decoupled requestAnimationFrame interpolation with zero render stutter.
Engineering Philosophy
Modern web development frequently suffers from massive framework overhead and bloated bundler pipelines for simple marketing sites. This portfolio was created under the discipline of modern vanilla standards: utilizing native CSS variables, fluid clamping typography, native custom cursor physics, and semantic markup to deliver near-instant loading times.
System Flow & Service Boundaries
Key Implementations
Lerp Cursor Interpolation
Dual ring-and-dot custom cursor with linear interpolation (LERP), hover scale transformations, and intelligent touch detection fallback.
Persistent Theme Engine
Seamless zero-flash dark/light mode toggle with localStorage cache and OS-level prefers-color-scheme listener.
Dynamic CMS Backend
Decoupled backend API running on Render that manages visible project records, contact mailers, and admin toggles.
Zero Framework Footprint
No heavy bundler dependencies, transpilers, or virtual DOM overhead — just pure, hyper-optimized standard web APIs.
Technical Implementation: Cursor LERP Engine
Achieving buttery 60 FPS cursor motion requires decoupled tracking: the inner dot tracks coordinates immediately while the outer trailing ring smoothly catches up via linear interpolation:
// Smooth Linear Interpolation (LERP)
let rx = 0, ry = 0, mx = 0, my = 0;
document.addEventListener('mousemove', (e) => {
mx = e.clientX;
my = e.clientY;
dot.style.left = mx + 'px';
dot.style.top = my + 'px';
}, { passive: true });
(function lerp() {
rx += (mx - rx) * 0.12;
ry += (my - ry) * 0.12;
ring.style.left = rx + 'px';
ring.style.top = ry + 'px';
requestAnimationFrame(lerp);
})();Engineering Challenges & Solutions
Challenge 1: Flash of Unstyled Theme (FOUT)
In dark/light mode toggles, rendering before localStorage resolution creates an eye-straining white flicker on load. Solved by inlining theme detection in the document <head> before CSS rendering, guaranteeing zero theme flashing.
Challenge 2: Synchronous Cursor Visibility
When clicking internal links into case study sub-pages, asynchronous script execution could cause the native cursor to briefly appear before hiding. Fixed by bundling synchronous cursor mounting directly into `case-nav.js` with instant stylesheet binding.