Personal Portfolio Site

A full-stack portfolio site built from scratch to showcase my projects and skills. The frontend is built with Next.js App Router and TypeScript, styled with Tailwind CSS 4. Content is managed through Payload CMS with a MongoDB database, deployed on Railway with Cloudflare R2 for media storage.

The site features an interactive PixiJS WebGL canvas background with animated bubbles that react to cursor proximity. The animation runs entirely on the GPU via sprite batching, handling potentially hundreds or thousands of bubbles at consistent performance across display refresh rates.

The projects page includes a tag-based filter system with animated transitions using Motion. Each project has a detail page with rich text content rendered via Payload's Lexical editor.

Accessibility was a consideration throughout, with semantic HTML, screen reader labels, keyboard navigation, and responsive design with a mobile hamburger menu ensuring the site is usable across devices and assistive technologies.