/space-tourism

Frontend Mentor - Space tourism website solution

Primary LanguageJavaScript

Frontend Mentor - Space tourism website solution

This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for each of the website's pages depending on their device's screen size
  • See hover states for all interactive elements on the page
  • View each page and be able to toggle between the tabs to see new information

Screenshot

Links

Built with

  • React
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Framer-motion

What I learned

Dynamic imports in react

const imgSrc = await import(some_path).default

dynamic variable in react based on break point

const mediaQuery = "(min-width: 52em)"
const imgSrc = await import(`${images[window.matchMedia(mediaQuery).matches ? 'portrait' : 'landscape']}/* @vite-ignore */`);

Author