P—08 Case study · Web & apps
Personal Portfolio
Role
Frontend Developer
Status
active
Started
May 2026
Last activity
Nov 2026
Stack
10 technologies
Overview
Version two of my portfolio, rebuilt from scratch around a camera viewfinder theme. The hero name is a variable font that reacts to the pointer, and a lens over it runs a small WebGL shader and tags the letters with confidence scores like a detection model. Projects sit on a horizontal rail grouped by domain, with an index view for scanning, and every project has a case study generated from the same data.
The content is data, not code. Projects and updates live in JSON files that a build script validates and turns into pages. A weekly GitHub Action reads activity from my repositories and another applies the edits I request, so the site stays current without hand-editing. Fields I change by hand are never overwritten by the automation.
It is a static export on Cloudflare Pages. Motion runs on GSAP and Lenis, animations pause when they leave the screen, and a reduced-motion setting in the menu turns the effects down.
Outcomes
Home page first-load JS
Servers: a static export
Content automation workflows
Libraries dropped from v1
Impact
- 01Rebuilt the site from scratch as a Next.js 15 static export with a camera viewfinder design, replacing the first version's template layout.
- 02Generated every case study, update and the recent-work list from validated JSON that GitHub Actions keep in sync with my repositories.
- 03Kept first-load JavaScript on the home page to about 220 kB and dropped six libraries the first version shipped.
- 04Drew the Figmenta internship as a measured n8n-style pipeline map, and the résumé as an X-ray scan that links each section to the site.
Features
01
Kinetic name and inference lens
The hero name is a variable font whose weight and width follow the pointer. A lens over it runs a WebGL shader and tags letters with confidence scores, like a detection model.
02
Work rail and index
Projects scroll sideways in groups by domain, flagships first. An index view lists every project with a preview, and switching views keeps your place.
03
Generated case studies
Each project page comes from its JSON record: overview, outcomes, features, architecture, stack and a development log of dated updates.
04
Content automation
A weekly GitHub Action reads repository activity and writes updates, and another applies requested edits. A build step validates every record, and hand-edited fields are never overwritten.
05
Command palette and section ruler
Ctrl K or ⌘K jumps to any section or project. A ruler on the right marks the sections, and the nav pill shows where you are.
06
Résumé X-ray
The About section shows the real résumé page. A scan bar reveals a blueprint underneath that maps each résumé section to the part of the site that covers it.
07
Light on the machine
Diagram animations pause off screen, smooth scrolling stops when you stop, and screenshots are served as AVIF or WebP at the size the layout needs.
Architecture
Next.js 15 with the App Router, exported as static HTML and deployed on Cloudflare Pages. There is no server: every page is built ahead of time. Content lives in content/projects and content/updates as JSON. scripts/content/build.mjs validates each record against a schema, works out each project's status and latest update, and writes the data the pages import. Two GitHub Actions write to these files: a weekly sync that reads activity from my repositories, and an apply workflow for edits I request. Each field records who wrote it with a hash, so the automation skips anything changed by hand. The interface is React 19 with Tailwind CSS and SCSS tokens. GSAP drives scroll-linked motion (ScrollTrigger pins for the flagship stage and the work rail, SplitText, DrawSVG, Flip), and Lenis smooths scrolling only while you scroll. The hero lens is a small WebGL shader. A build step uses sharp to write AVIF and WebP copies of every screenshot, and the pages pick the right width with srcset.
Stack
Development log
· Release
MPGA v2: the portfolio rebuilt from scratch
Rebuilt the whole site around a camera viewfinder theme: a kinetic name with an inference lens, a work rail grouped by domain, generated case studies, a pipeline map of the Figmenta internship and a résumé X-ray. Content now comes from validated JSON that GitHub Actions keep current, and animations pause when they leave the screen.
· Started
Portfolio Refactoring, MPGA (Make Portfolio Great Again)
Implemented horizontally scrollable live-project timelines and refactored the experience section. Big updates to about section and also added recent internship experience.