IME FTUI

Built for the students who inherit it.

Twelve divisions share the same page structure with different content. Without a framework, that's twelve near-duplicate HTML files drifting apart, unless the site is designed around it. The exam-prep archive was bigger still: 147 study documents across 45 subjects and four academic years, and next year's committee had to be able to add more.

A student organization has no budget, no hosting stack and no build tooling: plain files only. The maintainers who inherit the repository are not developers, so content had to be editable as data, not markup. And the redesign brief still asked for a site that looks and moves like a designed product, not a homework page.

Framework ideas, invented in vanilla.

• A
  One template, twelve division pages

  A single HTML file plus one JavaScript data module with a fixed schema per division; the selected division travels via local storage. With no router and no build step, this is what avoids twelve copy-pasted pages drifting out of sync.

• B
  The archive as one data file

  147 study documents across 45 subjects and four academic years render into a three-level animated accordion. Updating the archive means editing one data file, which is exactly what a rotating committee of non-developers can do.

• C
  A hand-rolled motion system

  Scroll-triggered reveals, separate mobile and desktop entrance timelines across seven pages, and an interactive inline-SVG logo that doubles as navigation, all anime.js over the plain DOM.

• D
  Framework-free UI components

  An animated hamburger nav with a re-entrancy lock, a photo lightbox with wrap-around, expanding e-book cards, an expanding search box and a custom 404, each written from scratch.

• E
  Responsive CSS for real devices

  CSS Grid and Flexbox with 41 media queries, including max-height breakpoints for short landscape screens, and the palette held in CSS custom properties.

The bugs frameworks hide.

• The re-entrancy lock. Rapid taps on the hamburger animation can't desync its open and close state: the kind of bug a framework quietly absorbs and vanilla JavaScript makes you actually solve.
• Manual discipline. 9,381 hand-written lines with zero tooling: formatting, structure and consistency were all held by hand.
• Part of a bigger role. The site was built inside a senior-staff year that also included training 14 staff members in web development, video editing and design; the codebase doubled as teaching material.

Still builds, years later.

The site shipped as the organization's official 2021 website, with all twelve division pages and the archive running off data files a successor could edit. The interaction and code are the work shown here; the logo artwork, copy and photos were supplied by the organization.

The GitHub Pages mirror still builds and runs unchanged years later; there are zero dependencies to rot. The same ideas (data-driven templating, motion systems, maintainability for whoever comes next) later reappear in framework form in Noosa and PGA ITS.