JG & JR Langridge

If you've read through my other portfolio pieces you'll have realised by now I work with Greg at Good Looking Design a lot so it'll be no surprise to you that this project was also created in collaboration with him too.

This was the first website for a commercial client that I felt safe using a more modern approach to web development and using the JAMStack. I couldn't completely leave WordPress behind, it was better for this site to continue using it for the CMS, but I did initially consider using one of the more API driven CMS's like Strapi or Sanity.

The site's front end is built with Nuxt.js. I like Vue and I had previous experience using it with Dreamcast Years earlier. One of my favourite parts about it is that we can navigate between pages without flashes (I'm a simple man). Another benefit however is that we can run static site generation so each page exists on the server and is rendered initially before the JavaScript kicks in to take over. Because of this the front end is hosted on Netlify independently of the back end which resides on shared hosting still.

Because Nuxt is based on Vue I was able to import my hotspots module I made for VW-T into the site with ease for case studies and I also implemented a version of a before and after slider for showing the improvements made to buildings. The site also has lots of UI animations in place to make it a bit more dynamic and lively.

The back end CMS is WordPress with the front end disabled and allowing only API calls to get the data. It's still Dockerised so I can keep it version controlled and deploy it easily and this means it can be hosted on a standard shared host still.


Tech used: Dockerised Headless WordPress (Bedrock with custom REST API endpoints), Sass, Nuxt.js


Visit the site

Screenshots

The site home page displaying a large image and bold title
The site home page displaying a large image and bold title
An example of the Vue before / after slider I made for displaying the difference in a property
An example of the Vue before / after slider I made for displaying the difference in a property