Holberton Tunis
May 26, 2025
Holberton School Tunis teaches software engineering through projects instead of lectures, and wanted a website as bold as that idea. I rebuilt it as one long animated page: a giant wordmark up front, two strict typefaces, one red, and campus photos that pull you into the story as you scroll.
A first frame worth waiting for
The page opens on the Holberton seahorse with a short animated entrance that covers the moment the fonts and hero photo are loading, then hands over to the real page. Lenis drives every scroll effect below from one smooth scroll, so the motion feels the same all the way down.
The name as the hero
The hero is the word Holberton across the screen above a campus photo. It all runs on one GSAP timeline. A counter climbs to 100, then the hero opens with a clip-path wipe on a custom ease while the section scales up, the photo settles from twice its size, and the letters rise into place one after another.
The letters are 0.1 seconds apart, slow enough to read as a wave. The counter is there so the wait has a visible end.
Two typefaces and one red
The rebrand comes down to a few strict rules: one display face, one text face, a soft grey background and a single red for whatever matters. Every content block follows the same pattern of label, heading, text and photo, and each section title shows a red call to join on hover.
Campus life, zooming in
A zoom parallax gallery shows the school instead of describing it. Eight photos sit in a collage inside a section three screens tall with a pinned frame, and each one scales at its own speed with the scroll, from 4 to 9 times its size. The extra height gives the zoom room to happen slowly, so it feels like walking into the campus.
The programme, laid out plainly
Two cards set out the two years side by side, with their length, diploma level and entry requirements. A row of buttons changes the message for learners, career switchers, businesses and parents.
Specializations as an index
The five specializations read like a numbered index. Hover a row and its black and white image turns to colour, the title goes red, and a one line description fades in. Colour only on hover keeps the page calm and makes the row you're pointing at stand out. Further down, an interactive floor plan shows each room on hover, and a strip of past cohorts you can drag turns each photo to colour with a short glitch.
