Submitted over 3 years ago

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

accessibility, motion, react-router, sass/scss, typescript

Yuko Horita•645

@Sloth247

A solution to the Space tourism multi-page website challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Yuko Horita'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