3D Designer Portfolio Website

Context

A one-page personal site built for a UI/UX and graphic designer to show work and list design products. It is built on React, TypeScript, Vite, Three.js, and GSAP, with a 3D character, scroll animations, a work list, a shop list, and contact links.

The Hard Part

A designer needed one place to show work, list design products, and let visitors get in touch, and the site had to feel creative and memorable, in line with UI and UX work. Heavy 3D and animation also had to load without leaving visitors on a blank page.

What I Built

• One-page React and TypeScript site with lazy-loaded sections, a loading context, vendor code split into chunks, and a loading screen that finishes only after the 3D model has loaded
• Three.js character with glTF and DRACO loading and lighting, using an encrypted model decrypted in the browser with the Web Crypto API
• Intro, typing, and blink animations, and a head that turns to follow the mouse or touch
• Scroll-driven camera and character movement, smooth scrolling, and text-split animations with GSAP ScrollTrigger and ScrollSmoother
• The site's pinned Work section that scrolls sideways and lists 6 projects, and the site's Shop section with 9 products that link to an outside store
• Tech stack scene with physics spheres that react to the pointer on desktop, using React Three Fiber and Rapier with ambient occlusion
• Custom animated cursor and magnetic social icons, plus About, What I Do, and Career sections and contact links

The Build

Measured Results

Tech Stack