csoumya14 / space-tourism

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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

• Solution URL: Solution URL
• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• Typescript - Javascript with syntax for types
• Next.js - React framework
• Styled Components - For styles

What I learned

• I learned how to create pages, shared layouts inside the App Router in Nextjs 13 .
• How to use multiple fonts styling in nextjs 13 with css variables.
• How to make a reusable and accessible tab component.

Some code that I am proud of

&[aria-current="page"] {
    border-bottom: 2px solid;
    border-color: ${(props) => props.theme.palette.primary.lightBlue};
  }

<Image
  src={imageSrc}
  fill
  id={`tab-${tabsPrefix}-tabImage-${tab}`}
  alt={altText}
  style={{
    objectFit: "contain",
  }}
/>

Continued development

I would like to add animation to the project in the future.

Useful resources

• [Use different font styles in nextjs13]https://medium.com/@a.pirus/simplifying-multiple-fonts-styling-in-next-js-13-with-css-variables-cb57e9707693)
• Create a hamburger menu with styled components
• Build an accessible tab component in react

Author

• Website - Soumya Chalakkal
• Frontend Mentor - @csoumya14