Responsive landing page with graph animation using React & Framer

Solution retrospective
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
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on ThaBeanBoy's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord