Wallis Family Mediation is a mediation company run solely by Mike Wallis, a retired senior banker and was a Magistrate for 20 years. Before he moved into mediation, Mike's company was known as Wallis Consultancy, a financial claims management company which he ran from his home.
Task
The original Wallis Consultancy website was made in around 2010. Mike wanted me to revamp and update his website to bring it to the standard of his competitors, and to provide a better user experience which in turn would generate him more business. After discussing design with him, it was apparent that he wanted the website to be clear, well laid out and easy to maintain. In addition, he wanted to be able to edit and create pages so that he wouldn't need to rely on me to make changes - a pain-point with his old website.
I conducted some research on other competitor's websites and after receiving the consent to proceed with the design from Mike, I began work on the project. Originally I rebuilt the Wallis Consultancy website over the summer of 2016 using HTML, CSS and Bootstrap 3, but in 2020, I rewrote it from scratch once again using cutting-edge technologies such as Next.js and Tailwind CSS. I documented my process recreating Wallis Consultancy as a modern Next.js static site as a series of articles on my blog.
Technical Details
The website for Wallis Family Mediation is written using the React framework Next.js, which enables functionality such as generating static websites, and Tailwind CSS for styling. Combining these technologies allowed me to build the website efficiently whilst maintaining a well-written React app. Each page of the website is dynamically created at build time from Markdown files using Next.js dynamic routes and the getStaticPaths function. In addition, I used two external Next.js plugins called next-seo and next-optimized-images to ensure that the website has good SEO and all images are compressed and resized to make the page load time as fast as possible. The contact form is powered by EmailJS and uses reCaptcha to stop spam mail. Finally, I added Netlify CMS so that Mike can make his own changes to the website. Netlify CMS uses Markdown files so it integrates seamlessly with the existing Markdown pages utilised.
If you want to learn more about how I developed Wallis Consultancy, take a look at the following articles:
- Introducing the project
- Setting up Tailwind CSS, Google Fonts and React Icons with Next.js
- Using EmailJS to run the contact form
- Adding SEO and Image Optimisation
- Deploying a Next.js static site onto GitHub Pages but honestly just use Vercel (they're both free)
The source code for Wallis Family Mediation (Wallis Consultancy) is available on GitHub.
Top comments (0)