2023 to 2026 · Rebuild · Landing rewrite
CICLO
A 2023 Gulp, Webpack and SCSS landing page rewritten from nothing on Next 16, with a fullpage engine of my own in place of the library.
- Next.js 16
- React 19
- FSD
- CSS Modules
- Vitest
- files, the largest exactly 100 lines
- 141
- per-screen animation modules
- 12
- image weight, roughly
- 2.8 MB to 0.5 MB
- fullpage libraries left
- 0
What I walked into
A 2023 landing page on Gulp, Webpack and SCSS, built on a fullpage library, where a single legacy animation placeholder made every screen enter identically.
The images weighed 2.8 MB, and the page’s signature behaviour belonged to a third-party library.
What I changed, and why
A fullpage engine of my own
Wrappers carry data-fp-state, and slides move on translate3d(0, ±100%, 0) with the original 0.7s cubic-bezier(0.55, 0.085, 0, 0.99).
The slide scrolls before the page does
A slide only switches once its inner content has been scrolled to the edge.
Twelve entrances instead of one
Twelve per-screen animation modules replaced the single legacy placeholder.
A hundred-line ceiling
Feature-Sliced Design across 141 files, and the largest of them is exactly 100 lines.
I extracted the behaviour instead of porting the build.
Where it landed
The landing runs on Next 16 without the fullpage library, keeping the original easing and a slide switch that waits for the inner content.
Images went from 2.8 MB to roughly 0.5 MB, and across 141 files the largest is exactly 100 lines.