Introduction

During the beginning of the 2025, One of my co-worker and close friend, Mr. Sem Bola and his finance got married. Due to the size of his guest list, a traditional printed invitation wouldn't be practical or personal enough. Wanting something more unique and scalable, he decided to go with a digital invitation website — and asked for my help to build it.

The project had a tight deadline: less than 7 days from start to finish.

The goal was simple — deliver a beautiful, fast-loading site that mirrors the content of a traditional invitation. Most guests would view it on their smartphones, so it had to be mobile-first and responsive across all devices. Bola also had a few visual preferences and had already designed the layout and animations himself.

Challenges

The design looked fantastic at first glance — but technically, it was packed with GIF animations. As anyone who cares about performance knows, GIFs are terrible for page load and responsiveness, especially on mobile. To fix this, I converted every animation frame into optimized .webp images and manually recreated the animations using CSS. That began a three-day CSS animation headache.

Flower Animations

One of the most prominent elements was a series of animated flowers. I split the animation into three reusable assets: BigFlower, SmallFlower, and Flower. The animation itself was a simple transform to simulate a swaying motion. The difficult part was syncing the animations on the left and right sides and positioning them perfectly across all devices. TailwindCSS made this bearable — without it, my CSS would have been a nightmare of media queries.

Heavy Image Usage

Another issue was the heavy use of image assets — almost everything, from pillars to background shapes, was an image. I originally planned to recreate some of these elements purely in CSS to save on load time, but time constraints forced me to abandon that. Instead, I optimized all images by converting them to .webp. This helped reduce large assets (some over 3MB) down to under 900KB — a big win, but initial load time was still a concern.

Conclusion

Despite the tight deadline, and after a lot of back-and-forth with Mr. Bola, we reached a result that both of us were proud of. The final site looked great, loaded reasonably fast, and fulfilled its purpose.

More importantly, I walked away with a deeper understanding of Next.js, CSS animation, and web performance optimization — lessons I'll definitely bring into future projects.