Submitted almost 3 years ago

Animated, accessible, SEO friendly, performant NextJS solution

accessibility, lighthouse, next, sass/scss, motion

Leon Pahole•480

@leonpahole

A solution to the Space tourism multi-page website challenge

Preview Code

Solution retrospective

Things I've done in this project that I haven't done before:

Used Lighthouse during development to find early optimizations
Used prefers-reduced-motion media query
Separated each destination / crew member / technology into a separate page for the purposes of SEO
Used meta description tags
Used Framer motion
Used Next.js font optimization feature to optimally load fonts

My goal was to make the site performant, SEO friendly, accessible and responsive. My main struggle was deciding how the content should behave on wide screens - Figma only shows screens with optimal widths. How do you usually handle this if the designer is not available?

Any feedback is much appreciated.

Code

Please log in to post a comment

Community feedback

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