Portfolio Platform

Overview

A portfolio is usually a page. This one is a product: the public site you are reading, the API that feeds it, and the admin that edits it are three parts of one codebase. The front end is Next.js 16 and React 19 in TypeScript, styled from a token layer in which every colour, radius, shadow and easing is declared once and every text colour is measured for WCAG contrast. Content - projects, case-study blocks, experience, skills, settings and media - lives in PostgreSQL behind a Spring Boot API, and a Next.js admin panel edits it. A save in the admin revalidates only the public pages that show that content, so an edit is live in seconds without a rebuild when the site runs against the API, and a static export captures the same pages for a host like Netlify when it does not. Every card, chip and section on this site is a component from that system, and this page is one of its outputs.

Engineering highlights

• Design tokens as the styling contract: colour, radius, shadow and easing are declared once, and each text colour carries its measured contrast ratio rather than an eyeballed one
• Admin edits reach the public pages through tag-scoped cache invalidation, so a saved project revalidates the project pages and nothing else
• A media pipeline with upload, checksum de-duplication and required alt text, behind one storage interface with local-disk, S3 and Cloudinary providers
• Lighthouse 100 for accessibility, best practices and SEO on every public page, checked with axe as well as by hand
• Vitest and Playwright on the front end, Spring Boot integration tests against PostgreSQL on the API
• Ships as a static export on Netlify with images through the Netlify Image CDN, while the API and database stay private