Mayowa

ayowa

All projects
Client Website BuildQ2 2025

KMJ Catering & Events

A fully animated single-page marketing website for a Nigerian catering and event planning brand, built with Tailwind CSS and vanilla JavaScript.

Category
Frontend
Timeline
Q2 2025
Stack
HTML5CSS3Tailwind CSSVanilla JavaScriptFont Awesome+2 more
Overview — read the full write-up

KMJ Catering & Events is a responsive, single-page marketing website built for a premium Nigerian catering and event planning business. The site showcases the client's services, signature menu, photo gallery, and customer testimonials through a polished UI featuring a hero image carousel, scroll-reveal animations, and an EmailJS-powered contact form — all with zero JavaScript framework dependencies.

Screenshots

The product in action

Screenshot 1 of 4

KMJ Catering & Events screenshot 1
Case study

The story in three parts

01 — The Challenge

No Online Presence to Drive Bookings

KMJ Catering & Events had an established local reputation but no professional web presence to showcase their services, attract new clients, or capture event bookings online.
Read more

02 — The Strategy

Build them and Online presence in the form of a Website

Built as a single HTML file with a companion script, the site leverages Tailwind CSS via CDN for rapid, utility-first styling and vanilla JavaScript for all interactivity. EmailJS was integrated for instant serverless contact form delivery without a backend.
Read more

03 — The Impact

Polished, Production-Ready Site in Two Files

The entire site ships as just two files — index.html and script.js — with no build step required. Seven fully animated sections cover every business need: hero, services, menu, gallery, testimonials, about, and contact. Dark mode, a responsive mobile menu, and smooth-scroll navigation ensure a seamless experience across all devices and screen sizes.
Read more
Architecture

Frontend Architecture

CDN Stack & Serverless Form Delivery

HTML5 Markup → Tailwind CSS CDN → Vanilla JS IntersectionObserver → EmailJS API

UI & Styling System

Tailwind CSS is loaded from CDN with a custom config extending the brand palette (primary pink, secondary purple, accent orange) and typography (Poppins + Playfair Display via Google Fonts).

Animations & Interactivity

All animations are handled by vanilla JavaScript with no libraries. A hero background carousel crossfades four images every 5 seconds with clickable dot indicators. The testimonials carousel supports prev/next navigation and auto-advances every 4 seconds.

Contact Form & Email Delivery

The contact form submissions are sent directly from the browser to a pre-configured EmailJS template, delivering full booking enquiry details — name, email, phone, event type, and message — straight to the client's inbox with no server required.

Takeaways

Lessons & trade-offs

Vanilla JS vs. a UI Framework

Choosing vanilla JavaScript over React or Vue was a deliberate trade-off for this project. For a static marketing site with a modest interaction surface, a framework would have added build tooling complexity and bundle overhead with no real benefit.

zero-dependency

Start a project

Want something like this built?

KMJ Catering & Events is one example of how I work — from architecture to shipped product. If you have a problem that needs this kind of thinking, let’s talk.