Responsive landing page with graph animation using React & Framer

This was a really good start with Gatsby Js, I learned the basics. I was disappointed with the fact that I didn't work a lot with images. Gatsby has a few plugins that optimise images, & I really wanted to experience that. The only image I had to work with was the logo image, but the plugins don't support SVG images. I just put the logo image in the static directory.

What I enjoyed most about Gatsby is the fact that it's an SSG (Static Site Generator). This really boosts SEO performance compared to React projects. This happens because React performs client-side rendering.

During development, I went through one of the most traumatic events in my web development career, NPM Peer dependencies. I learned that modules can depend on each other, but due to different versions, this can result in peer dependency errors. Never in my life have I appreciated Git & GitHub. Although I didn't resolve the issues, (I just moved back to the previous commit), this really exposed me to some of the inner workings of NPM.

Live Site - https://frontendmentorexpenseschartcom.gatsbyjs.io/

Hosting - https://www.gatsbyjs.com/products/cloud/

Repo - https://github.com/ThaBeanBoy/Front-End-Mentor-Expenses-Chart-Component

Front End Mentor - https://www.frontendmentor.io/home

Challenge - https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt/hub/expenses-chart-component-pRP0otU6Pw

Framer Motion - https://www.framer.com/motion/

My Github Account - https://github.com/ThaBeanBoy

Linkedin - https://www.linkedin.com/in/gibbs-chipoyera-0948b9193/

Instagram - https://www.instagram.com/tiin_giib_chiip/

#googlefonts #webdeveloper - #webdevelopment - #webdev #webdesign

• #uidesign
• #design - #ui #figma