◆ QUEST LOG / MCB — THE ARCHIVE

A living museum for nine generations

2026Creative direction + buildNext.js (App Router)TypeScriptTailwind v4GSAP · Lenis · Framer Motion

Student organizations lose their history every time a board graduates. This site makes forgetting impossible.

01The brief

Modelling Club BINUS has existed since 2017 — runway shows, editorial shoots, pageantry, hundreds of members across six campuses. But its memory lived in scattered drives and the heads of whoever happened to be on the board that year. As General President, I watched how much context evaporates in every handover.

That term wasn’t only the archive. I pitched and closed over IDR 100 million in corporate sponsorships (Wardah, TikTok Shop, Tokopedia, and Paragon Corp, among others), grew Greater Jakarta recruitment registrants from 70 to 230 through a rebranding and promotion push, and launched an in-house talent agency so members could land paid job offers. The archive is what I built to make sure none of that work disappears at the next handover.

So the site isn’t a landing page. It’s an archive: every generation gets a permanent chapter, every leader a profile, every show a page. Recruitment is a side effect of showing the legacy well.

02The concept

One idea drives everything: a living museum. Nine yearly chapters (2018–2026), each with its own theme, story, stats, milestones, and accent color. A legacy hall of past boards. A gallery, booklet shelf, and video archive. The visual language borrows from fashion editorial — generous whitespace, restrained type, one accent per era.

FIGURE SLOThomepage hero + a yearly chapter page

Placeholder: screenshots of the archive (coming soon) — or just visit it live.

03The system — content as data

The part I’m proudest of is invisible: nothing about the club is hardcoded. All content lives in plain JSON files — members, events, achievements, and one file per generation. The org chart, timeline, and legacy hall adapt to whatever structure a year defines.

Adding a new generation is an annual ritual, not a development project: copy last year’s JSON, fill in the chapter, build.
47 fully static pages generated from those files — fast, free to host, nothing to maintain.
This is data modeling applied to people: deciding the schema for a “generation” was the same discipline as declaring the grain of a fact table.

04The craft

Motion carries the museum feel: Lenis smooth scrolling, GSAP ScrollTrigger reveals, Framer Motion transitions — all tuned to stay subtle and respect reduced-motion preferences. Photography renders as branded placeholder plates until real shoots are delivered, so the site never looks broken while it waits for content.

Why it belongs in a data portfolio: the hard problem wasn’t the animation — it was designing a content schema flexible enough for ten different board structures and simple enough for a non-technical successor to edit. That’s an information architecture problem wearing a fashion-week outfit.

05What I learned

Build for the person who maintains it after you leave. Every decision — JSON over a CMS, static output over a server, placeholder plates over broken images — came from asking what the 2027 board can realistically handle. Systems outlive their builders; good ones are designed for that from day one.