https://github.com/phurin-git/femt-space-tourism-website

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.
https://github.com/phurin-git/femt-space-tourism-website

frontend-mentor

Last synced: about 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/phurin-git/femt-space-tourism-website
• Owner: phurin-git
• Created: 2024-08-09T05:26:43.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-07T08:14:23.000Z (4 months ago)
• Last Synced: 2024-09-07T09:28:43.549Z (4 months ago)
• Topics: frontend-mentor
• Language: TypeScript
• Homepage: https://phurin-git.github.io/femt-space-tourism-website/
• Size: 4.8 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Space tourism website solution

This is a solution to the [Space tourism website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

- [My process](#my-process)

  - [Built with](#built-with)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## 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

![iPhone 12 Pro](./screenshots/screenshot_iphone12pro_390x844.jpeg)

![iPad](./screenshots/screenshot_ipad_768x1024.jpeg)

![Macbook Pro](./screenshots/screenshot_macbookpro_1440x900.jpeg)

## My process

### Built with

- [Vite](https://vitejs.dev/) - Frontend Tooling

- [React](https://react.dev/) - The library for web and native user interfaces

- [React Router DOM](https://reactrouter.com/en/main) - Client Side Routing

- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework packed with classes

- [TypeScript](https://www.typescriptlang.org/) - JavaScript with syntax for types

- [Framer Motion](https://www.framer.com/motion/) - A production-ready motion library for React

## Author

- Frontend Mentor - [@phurin-git](https://www.frontendmentor.io/profile/phurin-git)

## Acknowledgments

- [@senta](https://codepen.io/senta) - [Dissolve Effect](https://codepen.io/senta/pen/XENWwo)

- [Hengjie](https://stackoverflow.com/users/914986/hengjie?tab=profile) - [CSS3 background image transition](https://stackoverflow.com/questions/9483364/css3-background-image-transition)

- [givanse](https://stackoverflow.com/users/7852/givanse) - [Detect a finger swipe through JavaScript on the iPhone and Android](https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android?newreg=159063c9dc2841c7b9786191044ea1e0)

- [@ErickKS](https://github.com/ErickKS) - [Guide for vite react app with router deploy on gitpage](https://github.com/ErickKS/vite-react-router)

- [Paul Serban](https://paulserban.eu/) - [Deploy Vite React with React Router App to GitHub Pages](https://paulserban.eu/blog/post/deploy-vite-react-with-react-router-app-to-github-pages/)