Design and build process
I started in Figma to shape the UI direction and created a custom hero video loop using Stellenbosch reference imagery. Once I had a better idea of the visual system I was going to use, I built the platform in Next.js with Tailwind, which made it easy to keep components consistent while still customising the experience.
Tech stack and architecture
- Framework: Next.js 16
- Styling: Tailwind CSS
- Internationalisation: next-intl (English, Afrikaans, isiXhosa)
Scope delivered
- Home, About, Research, Programmes, Contact, staff pages, and alumni/student information sections.
- Undergraduate and postgraduate programme route structures.
- Mobile-optimised layouts and transitions across all key templates.
Highlights
- Glassmorphism UI system for consistent, modern visual identity.
- Smooth section and page transitions for polished UX.
- Full locale-aware routing and translation support for three languages.
- SEO groundwork including sitemap, robots, and metadata strategy.
- Interactive terminal easter egg with command simulation and CS-themed content.
Headless CMS status
Drupal is wired up as a headless CMS through JSON:API, with the integration layer ready to pull module content directly. Given the hackathon timeline, translations are still living in JSON files rather than Drupal — populating content properly takes real time — but the architecture is built to flip over to fully dynamic, Drupal-backed content the moment that's done.
Getting the design direction right up front made the entire process faster and more cohesive. I managed to get it all done within a weekend, and about two weeks later, I got awarded first-place at the hackathon awards ceremony. It was a great experience and was really inspired by all the amazing other submissions.
Reflection