Front-end Web Development
A complete redesign of a marketing consulting's website using React, CSS, Gatsby, and GraphQL.
- https://github.com/colinnguyen95/LG-React-Gatsbyjs-2019
- Visit the site at: LG Marketing V2
I took the initiative to redesign the company's website to increase performance and better suit their branding. The original site initially only received a Google Optimization score of 24/100 YIKES. The newly improved site I built has received a 98/100!
I first used a design toolkit called Sketch and the client loved the mockup so much they asked me to turn it into a functioning website they can use to replace their old site.
This project displays:
- Gatsbyjs (a static site generator) for Speed, Security, and Performance.
- Image Resizing and Optimization - Gatsby Images and Graphql
- UI Elements and Styling - React, HTML, CSS
Early Stages..
At first (2 years ago) I built the site from scratch using only HTML, CSS, and jQuery. I then deployed the site using a static site generator called Jekyll and hosted on GitHub Pages. The client was content, but wanted the site to load images faster and wanted the site to act like more modern sites i.e not fully refreshing on every click of an element.
What I wish I learned sooner..
Gatsby and React to the rescue! It was a huge relief and time saver being able to build and reuse components. The neatest part about using React is how it takes a snapshot of its own DOM to only update specific parts of the actual DOM. In my old site, if I wanted to update a p tag, I'd have to update all the other hundreds of elements on the page. But with React only that one p tag would get updated, increasing perfomance and speed. Seeing elemnts on the page change without the whole page refreshing created a better use experience.
Also, rather than having multiple sizes of the same images to speed up performance, Gatsby did all the heavy and tedious work for me with the Gatsby-Image plugin. I did have to learn GraphQL to make use of the plugin, but now my site allows for a better user experience since images are now lazy loaded instead of slowly loading from top to bottom. I love the nature of React and how it uses the virtual dom to only re-render elements that needs to be changed without refreshing the entire page.
What's next?
The client has now asked me to create a Content Mangement System element to the website. To do this, I'll use Contentful and GraphQL to allow the clients to add dynamic data outside of the site that can be updated by the nontechnical members on the team.
