
Lead Engineer | UI/UX Architect
The Challenge
Fixing a Broken Brand
TEDxSabonGari is an independently organized TED event in Zaria, Nigeria. They had high-profile speakers and a strong theme, but their digital presence was failing. The existing site was a broken HTML template with spelling errors ("Spekers"), empty placeholders, and no mobile optimization. It damaged the event's credibility. The organizing team is non-technical. They needed a way to constantly update speaker lists, schedules, and ticket details. Giving them direct access to the code was a risk, but keeping me as the sole updater created a bottleneck.

The Solution
A Custom System for a Non-Technical Team
I scrapped the old template and built a custom platform using Next.js 16. I focused on solving two specific problems: content management and visual consistency.
1. The "Sandbox" Architecture
The team needed to edit text without breaking the layout. I separated the data from the user interface. I moved all variable content (speakers, ticket prices, FAQs) into a single, strict-type data file. The frontend components map this data automatically. The marketing team simply edits text in this one file via GitHub. This triggers an automatic rebuild on Vercel. They can fix typos or add sponsors in minutes without touching a single line of HTML.

2. Automated Design Control
The team often provides photos with different lighting and quality. This usually makes a website look messy. I implemented a masonry grid layout to handle different image aspect ratios. I engineered a CSS grayscale filter that automatically applies to all speaker headshots. This forces disparate images to look uniform and professional. The color reveals only on hover, adding a polished interactive element.
The Result
Professional Standard & High Performance. Restored Credibility: The site now functions as a flagship platform that matches international TEDx standards. Safe Content Management: The non-technical team manages daily updates independently without breaking the UI. Visual Uniformity: The automated image filters ensure the site looks consistent regardless of the assets the team uploads.

The Result
A True Digital Transformation
- ✓Restored credibility with a flagship platform matching international TEDx standards
- ✓Safe content management allowing non-technical team to update independently
- ✓Visual uniformity through automated image filters for consistent branding
- ✓High performance with optimized Next.js architecture