What was built.
The problem.
The WordPress developer portfolio space has a problem. Every portfolio looks the same — a page builder theme, a grid of screenshots, a contact form. There's no craft, no personality, no evidence that the person behind it actually thinks deeply about what they build. The challenge was threefold. First, build something that visually competes with the best agency and design studio websites in the world — not just the best WordPress developer portfolios. Second, demonstrate genuine technical depth by using a modern headless architecture that most WordPress developers have never touched. Third, do both of those things without sacrificing the content management flexibility that makes WordPress worth using in the first place. The secondary challenge was time and tooling. This entire site — every component, every animation, every API call — was built collaboratively with Claude as an AI development partner, pushing the question of how far a self-taught developer can go when they combine genuine craft instincts with the right tools.
How it was solved.
The architecture separates concerns cleanly. WordPress runs as a pure headless CMS — no theme, no frontend rendering, no page builder. It handles content authoring, media management, and data storage through a custom plugin that registers the Work CPT, exposes all fields via the REST API, and provides a native gallery meta box without requiring ACF. The Next.js 14 frontend handles everything the user sees. The design system was built from scratch using three typefaces — Cormorant Garamond for editorial serif weight, DM Serif Display for display headlines, and DM Mono for precision interface text. The colour palette is deliberately minimal: near-black #0d0d0b, warm off-white #f5f4f0, electric blue #1a56db, and terminal green #28c840 for availability indicators. The animation layer uses GSAP throughout — ScrollTrigger for scroll-based reveals, custom RAF-based marquee animation, context-aware cursor that detects dark and light backgrounds and inverts automatically, cinematic text entrance animations, and hover interactions on every interactive element. The site is fully responsive across mobile, tablet, and desktop using a custom useBreakpoint hook that solves the hydration mismatch problem common in SSR React applications. Pages built: Home, Work archive, Case study template, About with timeline, Blog archive with dynamic category filtering, Blog post with reading progress bar and auto-generated table of contents, and Contact with animated form and FAQ accordion.
What it achieved.
A portfolio that looks and feels like it was built by someone who genuinely cares about the craft — not someone who installed a theme and called it done. Technically: headless WordPress architecture with Next.js 14 App Router, TypeScript throughout, GSAP animation system, responsive across all breakpoints, custom cursor with background detection, dynamic blog category filtering, auto-generated table of contents from post headings, native WordPress gallery meta box with no plugin dependencies, reading time calculated from word count, author data pulled live from WordPress user profiles. Creatively: an editorial design language that sits comfortably alongside agency and design studio portfolios, not just developer portfolios. Every typographic decision, every spacing value, every animation curve was considered. This is not just a portfolio. It is a demonstration of what becomes possible when a self-taught WordPress developer commits to learning the full stack — from PHP plugin development and REST API architecture through to React component design, GSAP animation, and production-grade Next.js deployment.
Built by
Matthew Proudfoot
WordPress Developer and Conductor at Monkey & River, based in Cape Town, South Africa. He builds websites, and leads development teams.
