Olympia Gym Fitness Center

How it works

Most of the engineering here went into keeping a heavy 3D scene fast.

• Made the 3D scene lazy-load only once a visitor scrolls near it, so it never slows down the initial page load.
• Converted photos to WebP for consistent quality at a smaller file size.
• Compressed the hero video from 8MB down to about 1.4MB with no visible quality loss.
• Set the 3D model to auto-rotate on touch devices instead of requiring a drag gesture, so it never fights normal scrolling.

Why I built it

3D and video-heavy websites usually load slowly on mobile and fight with normal scroll gestures on touch devices, which was a real risk for a gym site that needed to look premium without frustrating visitors.

How I approached it

I lazy-loaded the Three.js scene, aggressively compressed video and images, and swapped drag-to-rotate for auto-rotate on touch so the 3D centerpiece never gets in the way of a smooth, fast-loading page.