Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Space tourism website | React, React Router, Framer Motion, TS, Sass

#accessibility#framer-motion#react-router#sass/scss#typescript

@Sloth247

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! I spent reasonable time on this project, as I first tried with Remix however framer motion does not work well with it, so I changed it to React and it finally worked correctly.

I added "id" to data.json file to make it easy to consume it in url. Using useLocation and useSearchParams gave me deeper understanding of React Router.

Considering accessibility, I also used the reducedMotion prop from framer motion.

  • One thing that I could not acheiving was to set motion on <Link> tag. I want to know how people can acheive interactive link or button to animate, I guess I needed to enclose <Link> with <div>.

Any feedbacks are welcome.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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