Personal Portfolio

A static résumé PDF and a generic one-pager portfolio don't prove anything about how someone actually builds software — anyone can list "React" and "Next.js" as skills. I wanted a portfolio that was itself the strongest engineering sample: real APIs and real data pipelines behind every feature, not screenshots of imagined ones.

Designed and built the entire site solo, end to end — architecture, UI, animation, backend glue, and every word of content. Structured every section (About, Work, Tools, Blog, Now) around a data-first pattern: content lives in dedicated src/data/*.js modules and flows through small src/lib/* helpers into presentation components, so nothing is hardcoded twice or drifts out of sync. Then, wherever a static mock would have been the easier road, built the real thing instead — a live GitHub contributions API in place of a pre-baked image, a Groq-hosted LLM for résumé tailoring in place of canned text, a Google Apps Script backend in place of a contact form that goes nowhere.

A production site — this one — spanning 8+ routes, a 30+ utility tools hub, and a full case-study framework applied to every project including itself, with interactive systems (sound, tilt, custom cursor, scroll-linked animation) tuned for restraint over gimmick. Shipped and iterated on continuously since mid-July 2026.

• Live GitHub contribution heatmap — a self-built tile grid (not a screenshot) matching GitHub's real color scale, with per-day hover tooltips, sourced from a public contributions API.
• AI résumé tailoring — a Groq-hosted LLM, called from a server-side Next.js route, rewrites and reprioritizes résumé content against a pasted job description under strict "never invent facts" guardrails.
• Multi-template résumé builder — live HTML preview, PDF export via @react-pdf/renderer, and client-side PDF text extraction (pdfjs-dist) so an existing résumé can be re-tailored, not just retyped.
• Tools directory of 30+ utilities with a dependency-free, typo-tolerant fuzzy search and a multi-select tag filter.
• This case-study framework — reusable Problem / Approach / Architecture / Result blocks with an animated request-flow diagram generated from each project's real stack.
• Contact pipeline with zero third-party form service — posts to a Google Apps Script Web App that appends a row to a Sheet, e-mails a notification, and enriches each submission with IP geolocation plus UTM/device metadata.
• Form primitives built from scratch — a spring-animated text-caret input, a searchable country-code phone field, and an autogrow textarea, none pulled from a UI kit.
• A site-wide sensory layer — cursor-follow card tilt, a Web Audio interaction-sound system, and a universal press animation, wired through one shared pattern instead of per-component code.
• WebGL ambient effects (an interactive orb, light rays) and a custom animated scrollbar, kept deliberately subtle so they support the content instead of competing with it.
• SEO done properly — per-page metadata, generated OpenGraph images, JSON-LD Person/WebSite structured data, a sitemap, and an RSS feed for the blog.
• Self-instrumented analytics — a lightweight visitor tracker (device, locale, referrer, engagement) writing to the same Sheets backend, with no third-party analytics script.