orlando-Blackline

Built the frontend from the ground up using React (Vite) and Tailwind CSS to keep the styling extremely utility-
driven and maintainable. The main goal here was capturing that high-end, luxury aesthetic without sacrificing
performance, especially since we have heavy media assets like the hero video.

For the animations, I went with GSAP (ScrollTrigger specifically). It handles the scroll-linked animations for
the fleet and destination cards way better than standard CSS transitions.

A few technical hurdles we tackled:

• Mobile Scroll Jank: Initially ran into a nasty bug where the browser’s native address bar hiding (the 100vh
issue on iOS/Android) was fighting with GSAP’s scroll scrubbing, causing the page to freeze up when changing
swipe directions. Fixed this by pulling overflow-x off the body, moving it to a clip on the root wrapper, and
completely disabling heavy GSAP scrubs strictly on touch devices. Mobile uses pure native scrolling now while
keeping the entry animations.
• Booking Integration: The booking panel is an iframe pulled from their backend service. Since iframes can be
clunky on mobile, I mounted it inside a fixed 100dvh overlay that slides in from the right, preventing it from
breaking the main page’s layout or hijacking the scroll momentum.
• Asset Optimization: Ripped out a bunch of redundant tracking scripts and compressed the hero assets so the
initial paint time is fast even on 4G.