Momentiv

Momentiv is my partner's marketing consulting company. She needed a website to display her services, contact information, and also publish blog articles and she also wanted it to look really good.

After looking into the free tiers of the major CMSs, I realized they were all lacking key features at the free-tier. Also, once you're on a platform, it's pretty difficult to switch. I decided to try my hand at NextJS and Contentful. And that's when I fell in love. I had pretty much a functioning site after a week of working a couple hours each day. Pages were built dynamically from the data in Contentful. It was then time to add blocks and content types so she could control the content of her site, styled the way she envisioned. For the most part this went well, until I started on the Hero.

She wanted an awesome looking Hero with a 3D animation that moves around the page as you scroll. Building the full site in 3D (using ThreeJS for instance) was somewhat out of the question for performance reasons and risk to SEO. So it had to be a mix of 3D and standard web. To do this I had found Spline. We could build the object in their interface, make it look pretty, and it integrated well into the ecosystem. When rubber hit the road however I ran into a big issue when it came to controlling the objects position. Their API/SDK allows you to set the objects positioning. However the coordinates' scaling was completely off. It didn't match the browser. I tested in pure ThreeJS and it worked the way I wanted, but through Spline it just wouldn't work. I reported the bug to them but no word back. After weeks wasted debugging and trying to find a way, the project went on hold.

Months later, I picked it back up and decided simplifying was how we were going to get through this. Out with the complex 3D animation and back to basics. She picked a few different sites for information and I got to work. Within a couple weeks I had all the building blocks in place, everything rough styled and function. Metadata, sitemap, robots, etc all working. Added CookieYes for rich cookie consent instead of the Accept/Decline I had mashed up in 30 minutes. In this pass through I also implemented a blog that could be filtered and related posts on the detail pages.

An issue I had encountered in the first pass was running into query complexity limits with Contentful. A lot of the content is embedded into one another. This means levels within levels and hitting that limit is almost guaranteed. To get around this, I refactored to fetch to content recursively instead, so any embedded content it fetched when needed instead of one mega query. If this was loaded on the fly I would be worried about performance for this, but luckily with NextJS it's all fetched at build time.

And that's the current state! Still waiting to find a moment to finalize the styling across all sizes and add in some fancy in/out animations when scrolling. Also in the pipeline is adding multi-lingual support though it's all planned out and should go smoothly.