DEV Community

loading...
Cover image for Wallis Family Mediation (previously Wallis Consultancy)

Wallis Family Mediation (previously Wallis Consultancy)

jameswallis profile image James Wallis Originally published at wallis.dev Updated on ・3 min read

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.

Wallis Family Mediation home page


The home page

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.

The about Mike page


The about Mike page

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:

  1. Introducing the project
  2. Setting up Tailwind CSS, Google Fonts and React Icons with Next.js
  3. Using EmailJS to run the contact form
  4. Adding SEO and Image Optimisation
  5. Deploying a Next.js static site onto GitHub Pages but honestly just use Vercel (they're both free)

Wallis Family Mediation contact form submission


The contact form submission using EmailJS

The source code for Wallis Family Mediation (Wallis Consultancy) is available on GitHub.

Visit wallisfamilymediation.co.uk

Discussion (0)

pic
Editor guide