development
EMRC Website Rebranding
Techno-economic, Regulatory and Financial services platform for Energy and Utility Businesses
Role
Full-Stack Dev
Year
2024
Category
development
Tech Stack
The Problem
EMRC (Energy Markets and Rates Consultants) is a leading energy consultancy in Nigeria, producing regulatory research, hosting webinars, publishing podcasts, and advising on energy market policy. Their previous website was a static HTML site — no CMS, no ISR, and no way for the communications team to publish anything without a developer. The rebrand was an opportunity to fix all of that and give EMRC a digital presence that matched their standing in the sector.
The Execution
I rebuilt the site with Next.js 15 and TypeScript, using ISR for content-heavy sections so updates pushed through the CMS go live within seconds without triggering a full rebuild. The design system is built on Shadcn UI and Radix primitives, giving the communications team 80+ consistent, accessible components that can be assembled into new pages without writing CSS. Animations are handled by a combination of GSAP for scroll-triggered sequences and Framer Motion for component-level transitions. The PDF library uses a virtualized list to decouple DOM size from dataset size — only visible document entries are rendered at any time, keeping the Publications page fast regardless of archive size. Contact and consultation request forms use Nodemailer on the server side, with Next.js Server Actions handling form submissions progressively.
ISR-Powered Content Platform
Insights, project updates, and news pages use Incremental Static Regeneration with short revalidation windows. The marketing team publishes through the CMS and changes appear on the live site in under 10 seconds — no developer involvement, no rebuild.
Integrated Podcast & Webinar System
The site hosts a full podcast catalogue with an in-browser audio player and a webinar archive. Both are driven by the same content API, with episode pages generated statically at build time and updated via ISR.
Virtualized PDF Document Library
A 3,000-entry regulatory document archive rendered with a virtualized list. The Publications page loads in under 1.5 seconds regardless of archive size because only the documents visible in the viewport are in the DOM.
80+ Component Design System
Built on Shadcn UI and Radix primitives, the component library covers every content pattern on the site — hero sections, feature grids, testimonial carousels, form elements, and data tables — all consistently styled and accessible.
Impact
Technical Notes
The animation architecture required careful coordination between GSAP and Framer Motion. I used GSAP ScrollTrigger for section-level entrance animations because it gives precise control over scroll positions and timeline sequencing. Framer Motion handles component-level animations — page transitions, modal entrances, hover states — because its React integration is cleaner for component-scoped motion. Running both libraries on the same page without conflicts required isolating their respective animation targets and ensuring neither was trying to animate the same elements. The rule I settled on: GSAP owns anything tied to scroll position, Framer Motion owns everything driven by React state.