Splitex is a portal for an industrial equipment manufacturer. The frontend I inherited was live and functional: animations, maps, and sliders were already in place. However, all of it was packed into two files, `main.css` and `main.js`, and couldn't scale any further in that state.
First, I modularized the codebase: styles into SCSS modules, logic into TypeScript. I initially tried migrating the build setup to Vite, but it clashed with how Bitrix serves static assets, so I rebuilt the pipeline around Gulp. The output consists of two bundles—a shared one and one for the homepage—each with its own controller: it initializes only the code required for the current page, ensuring an error in one module doesn't bring down the rest.
Most of the time went not into the refactoring itself, but into animations. A section that expands fullscreen on scroll and turns into a list, an inertia carousel with edge resistance, and a slide-out footer with Lottie. Everything was built on GSAP, requiring solid performance under browser zoom and arbitrary window resizing. I initially implemented smooth scrolling with ScrollSmoother since GSAP was already in the stack, but it put noticeable strain on the page and conflicted with ScrollTrigger, so I replaced it with Lenis.
Performance became a dedicated effort, and not just on the frontend. Desktop PageSpeed scores rose from 69 to 89, and CSS shrank from 1.2 MB to 143 KB. Part of that weight reduction wasn't just dead CSS cleanup: prior to the Gulp switch, images were being forcibly converted into base64. The rest came down to markup fixes, lazy loading, optimized network waterfalls, and establishing asset guidelines with the backend developer regarding image formats and target file sizes. While implementing full `<picture>` support wasn't feasible, images started arriving properly optimized.
In the end, little remained of the original codebase: clean SCSS and TypeScript compiled into two bundles.