Case Study - Rebuilding the Classic Gymnastics website

I redid the Classic Gymnastics website in Next.js to improving website performance and adjust the styling to be more inline with modern standards.

Date
Client
Classic Gymnastics
Roles
Designer,
Developer
Tech
Remix,
Tailwind CSS,
Radix UI

The Challenge

Classic Gymnastics was using Webflow for their initial website build, but they didn't like the idea of having to pay for a CMS (they don't need one) and the lack of control over the website. Their site was also a single landing page with slightly too much content on the one page (a bit overwhelming for site visitors).

I suggested that I could do a rebuild of the site using a modern frontend framework that would improve performance, and I could also take the opportunity to redesign the website to be more inline with modern standards. Plus, hosting it on my own infrastructure would mean that they wouldn't have to pay for a separate hosting service (they get it pretty much free through my own Vercel account).

My Approach

In a meeting with the client I just schaffolded out the main page structure-they were adding in some pages. We discussed everything to keep in the current website and roughly how they wanted things to look (branding and colour scheme to remain the same, etc).

The website was super simple, so I just put in a few hours to build out a 'template' that I could tweak while in a meeting with them (no need for a full design stage beforehand as we wanted to keep things cheap and quick).

There is no need for a CMS as the website's content doesn't need to change and there was only one 'integration' with the client's booking system (a simple redirect to an external booking page).

I used Next.js for the frontend and tailwindcss for styling. I also used the shadcn/ui library for rapid prototyping.

The Outcome

The website was launched in a couple of days (from initial meeting to live) and the client was very happy with the results. The site scores much better on Google lighthouse than before too. I've kept the design very clean and minimalistic and have separated out the content of the website into separate pages (great for SEO and user experience).

Limitations

The only real limitation was that the client currently cannot change small copy on the website without my help. This is something I am currently working on by making my own tiny open source CMS that I can host on my own infrastructure (and provide to my clients for free).

The client did request that the site navigation for 'classes' and 'contact' both be pointing to sections within the landing page. I usually prefer that links in the navigation all be for different pages, but we both made the call that this doesn't particularly detract from the user experience in this case.

More case studies

Moving from Wix to Shopify | Rebuilding Resellerstore

I helped Reseller finish their website design that was originally done with Wix a while back. Now their business is expanding and they want to launch an e-commerce store, which I advised was best done on Shopify.

Read More

Revitalizing the Modern Coffee House Website

I designed and developed a website for a ROME, a boutique gym in Sydney. The site is fully responsive and has a clean, modern design and incorporates multiple integrations with the gym's mobile app and booking system.

Read More

Building an Open Source Image Optimizer for Remix.js

This case study details how a custom image optimization library for Remix was developed, inspired by Next.js's '<Image />' component, to provide a robust and flexible solution for both traditional and serverless environments.

Read More