Planet Info Site - NextJS / TailwindCSS / Framer / Typescript

What are you most proud of, and what would you do differently next time?

Completing the project as close to possible to design, solving issues that i encountered.

What challenges did you encounter, and how did you overcome them?

Applying dynamic colors with tailwind. Due to the way tailwind works it does not recognise class names created dynamically ie bg-%{color}. I solved this by creating object with 'planet name' : ['style1', 'style2]. then i would check if this object contains planetName and apply styles from the object.

Creating multipage website. This has website has 8 pages using html starter files, rather than creating 8 separate routes for website i desided to use nextjs dynamic routes to create pages. To do that i had to create planetData.json file with all relevant planet data. Dynamic routes checks if there is a planet and then returns planet. As there is no homepage i used next navigation redirect to 'earth' in main page.

What specific areas of your project would you like help with?

I was unable to come up with a way to to hide structure from internal structure and surface from geology section based on viewed device.