Technology Stack
Engineering Highlights
Cinematic Hero
A 1700+ line custom GSAP ScrollTrigger intro featuring WebGL mesh gradient shader background, metric counters, and text masking.
SEO Pipeline
Build-time prerendering script, dynamic JSON-LD injection, RSS + JSON feed outputs, IndexNow automation, and Edge-computed OG image API.
First-Party Analytics
Custom-built analytics tracking anonymous visitor IDs, 30-min idle sessions, scroll depth milestones, and UTM parameter identity stitching in Supabase.
AI Chat & Matcher
Vercel AI SDK pipeline mapping queries to portfolio database facts, coupled with a PDF parsing job description matcher.
Terminal Easter Egg
Full in-app developer console (Ctrl + `) with commands for portfolio navigation, projects lookup, blogs search, and custom sound effects.
Accessibility & Performance
100% responsive, skip-to-content focus, reduced-motion triggers, esbuild console stripping in prod, and manual Rollup code-splitting chunks.
Design Principles
The user interface is designed with a dark-first aesthetic, supporting five swappable accent presets (cobalt, emerald, amber, rose, and violet). The presets are stored in localStorage and applied via an inline script before the first paint to prevent styling flash.
For visual proofing, stock images have been completely avoided. Avatars are generated programmatically using initials, and social cards are generated on-the-fly at Edge runtimes as SVG buffers using a custom API route.
The codebase maintains complete compliance with WCAG contrast ratios, supports a global prefers-reduced-motion kill-switch, and has every interactive element assigned a unique testing ID for automated Playwright E2E browser verification.
Private Repository Notice
While this specific portfolio repository is private, the architecture and implementation details are shared here to document engineering quality and approaches.