Holberton Global Campus
Aug 19, 2025
Holberton School is a coding school that started in Silicon Valley and now has campuses around the world. I built one website for the whole network: the method, the foundation year, five specialization tracks and 35 campus cities. It has one strong look, a single red, a white seahorse and a lot of motion.
One template, many pages
Every page is a stack of shared sections in a different order, and the content lives in data files instead of components. The five tracks use one component with different data, so adding a track means writing one file. For a network that keeps opening campuses, that matters more than any single animation.
A red curtain between pages
Moving between pages is part of the brand. On every route change, a GSAP timeline scales a full screen layer of red down from the top, fades the seahorse in at the centre, then lifts the red away as the new page fades in. The whole thing takes 0.8 seconds with a 0.15 second hold on the red, long enough to feel like a beat and short enough not to slow you down. It lives in the route template, so every page gets it for free.
A menu you can feel
One round button opens a full red screen with six numbered links that drop in one after another and leave in reverse. Each link is drawn twice, letter by letter. On hover the top copy rolls up while the bottom one rolls in, and the other links fade back.
The menu finishes closing before the route changes, so its exit and the page curtain play one after the other. When they overlapped it just looked messy.
Heroes that move
Every inner page opens with a big condensed heading split into letters that rise from below, tilted back on a springy ease. Under it runs an endless strip of campus photos. On hover it slows from one pass every 25 seconds to one every 75. Changing a running animation's speed usually makes it jump, so the new speed picks up from exactly where the strip is.
Telling the school's story
After the hero, an accordion speaks to each kind of visitor, and a band of numbers counts up once it's on screen, not before, so you actually see it happen. Each of the 35 campus cities has a small magnetic hover made with GSAP.
Words from partners
Testimonials come in one at a time. A red panel shrinks away to show the photo, and the quote, split into words with SplitType, slides up word by word. When you switch, both exits finish before the next one comes in, so they never overlap.
Built to hold up
Every section has its own sizes, from small phones to big screens. Images are served as AVIF and WebP, and CI runs linting, unit, end to end, Lighthouse and security checks.
