Infinite Canvas Portfolio
Spatial portfolio with infinite scrollable canvas, WebGL shader effects via OGL, and Framer Motion page transitions.
An experimental portfolio that breaks away from traditional vertical scrolling. Projects exist on an infinite 2D canvas that users navigate freely — panning, zooming, and discovering work spatially rather than linearly. WebGL effects rendered through the OGL library add depth with custom shaders on hover, while Framer Motion handles smooth state transitions between the canvas view and individual project pages. For Gold Coast web design professionals looking to showcase cutting-edge technical skills and creative problem-solving, this portfolio approach demonstrates mastery of modern web technologies including Next.js for server-side rendering, OGL for lightweight 3D graphics, and Framer Motion for fluid animations — all working seamlessly together to create an experience that stands apart from conventional portfolio designs.
Next.js + OGL + Framer Motion
Spatial Design Exploration.
A Next.js application using OGL for lightweight WebGL rendering and Framer Motion for layout animations, creating an infinite canvas where portfolio pieces exist in 2D space. This architecture demonstrates how Gold Coast web development has evolved beyond traditional layouts — combining server-side rendering for SEO performance with cutting-edge client-side graphics APIs to deliver an experience that's both search-engine friendly and visually stunning. The canvas initialization uses Next.js Image Optimization to pre-generate responsive versions of all project thumbnails, ensuring that even at various zoom levels, users see perfectly sized imagery. Framer Motion's layout animations synchronize with the canvas state, so when transitioning to a project detail page, the selected thumbnail smoothly expands into the full project view without losing visual continuity. This attention to motion and state management is what separates premium custom web design from template-driven approaches.
Project Overview
Rethinking portfolio navigation as spatial exploration.
Traditional portfolios force linear consumption. This project explored what happens when you give visitors full spatial freedom — placing projects on an infinite canvas and letting them navigate by dragging, scrolling, or using keyboard shortcuts. OGL was chosen over Three.js for its minimal footprint, handling custom fragment shaders that distort project thumbnails on hover and create depth-of-field effects based on zoom level. Framer Motion manages the transition between the macro canvas view and focused project detail pages with shared layout animations. The result feels closer to navigating a design tool than browsing a website. As a Gold Coast web designer and full-stack developer with over a decade of experience, I've always believed that user experience goes beyond aesthetic polish — it extends to how people interact with and navigate your digital space. The Infinite Canvas Portfolio represents a shift in thinking about portfolio design. Instead of the traditional vertical scroll or gallery grid that most Gold Coast web design studios use, this approach puts the user in control of discovery. Projects aren't presented in a predetermined sequence; they exist in 2D space where relationships between work can be expressed spatially, and users can zoom in and out to get different perspectives on your body of work. The technical implementation showcases modern web capabilities. Next.js provides the framework for fast static generation and incremental static regeneration of project pages, while OGL handles WebGL rendering with minimal overhead — critical for maintaining smooth 60fps interactions even on lower-end devices. The shader system creates depth through visual distortion: when you hover over a project, the fragment shader applies a lens-like warping effect that makes the thumbnail appear to recede or protrude based on proximity to your cursor. Zoom out and the scene applies depth-of-field effects where distant projects blur slightly, creating genuine visual hierarchy through depth rather than just size. This is professional-grade 3D interaction, built entirely in the browser without requiring heavy Three.js libraries.