Learning to Earth is a website dedicated to informing yourself about current environmental issues and how to help with them. Not only will you have articles and texts, but also images, videos, and links to further increase your knowledge.
Check it out here!
This project was built using the following technologies:
- Next.js
- React.js
- Tailwind CSS
- Vercel
- Spline
- Framer Motion
Next.js was used to allow the website to have a very good performance and SEO. It includes components such as the next/image component which optimises images on the fly to fetch them at the correct size and make good use of bandwith. It also includes the next/head component which allows server side rendering of the html's <head> section.
React is like the backbone of this application because it allowed the use of components and reusable code, as well as a cleaner application overall. It also allowed the use of other third-party libraries such as TailwindCSS and Framer Motion. Without react this project would have taken a ton of more effort, time, and probably wouldn't have been this amazing.
TailwindCSS was used to quickly create reusable styling that can be applied to every element without touching pure css. I chose this because I really hate css and it's just so messed up.
Vercel is the hosting platform where it is deployed. Vercel is specifically designed for Next.js applications and thus allows even better performance. Vercel also allows for git deployements, which means I push my code to github and it auto-deploys.
Spline was used to create the 3D earth model that appears in the homepage of the application.
Framer Motion is what allowed me to have cool animations and fadeins throughout the whole page. It doesn't do much for functionality but does a lot for the user experience of making the site look more vivid and alive.
© Daniel Medina