├── .gitignore ├── README.md ├── netlify.toml ├── package-lock.json ├── package.json ├── src ├── assets │ ├── images │ │ ├── background-stars.svg │ │ ├── favicon.png │ │ ├── planet-earth-geology.png │ │ ├── planet-earth-internal.svg │ │ ├── planet-earth.svg │ │ ├── planet-jupiter-geology.png │ │ ├── planet-jupiter-internal.svg │ │ ├── planet-jupiter.svg │ │ ├── planet-mars-geology.png │ │ ├── planet-mars-internal.svg │ │ ├── planet-mars.svg │ │ ├── planet-mercury-geology.png │ │ ├── planet-mercury-internal.svg │ │ ├── planet-mercury.svg │ │ ├── planet-neptune-geology.png │ │ ├── planet-neptune-internal.svg │ │ ├── planet-neptune.svg │ │ ├── planet-saturn-geology.png │ │ ├── planet-saturn-internal.svg │ │ ├── planet-saturn.svg │ │ ├── planet-uranus-geology.png │ │ ├── planet-uranus-internal.svg │ │ ├── planet-uranus.svg │ │ ├── planet-venus-geology.png │ │ ├── planet-venus-internal.svg │ │ ├── planet-venus.svg │ │ └── sun.png │ └── preview.jpg ├── components │ ├── App │ │ └── App.js │ ├── Icon │ │ └── Icon.js │ ├── KeyVisual │ │ ├── KeyVisual.js │ │ ├── KeyVisualStyles.js │ │ ├── PlanetSwitch.js │ │ ├── asteroidsBackground.js │ │ └── data.js │ ├── Navbar │ │ ├── NavDesktop │ │ │ ├── NavDesktop.js │ │ │ └── NavDesktopStyles.js │ │ ├── NavMobile │ │ │ ├── ItemControler.js │ │ │ ├── NavMobile.js │ │ │ └── NavMobileStyles.js │ │ ├── Navbar.js │ │ ├── NavbarStyles.js │ │ ├── data.js │ │ └── useToggleMenu.js │ ├── PlanetSection │ │ ├── Illustration │ │ │ ├── Illustration.js │ │ │ └── IllustrationStyles.js │ │ ├── Info │ │ │ ├── Info.js │ │ │ └── InfoStyles.js │ │ ├── Intro │ │ │ ├── Intro.js │ │ │ └── IntroStyles.js │ │ ├── PlanetSection.js │ │ ├── PlanetSectionStyles.js │ │ ├── Tabs │ │ │ ├── Tabs.js │ │ │ └── TabsStyles.js │ │ └── useReplaceInfo.js │ ├── Provider │ │ ├── Provider.js │ │ └── theme.js │ └── Wrapper │ │ ├── Wrapper.js │ │ ├── WrapperStyles.js │ │ └── starsBackground.js ├── index.html ├── index.js ├── pages │ ├── Earth │ │ ├── Earth.js │ │ └── data.js │ ├── Jupiter │ │ ├── Jupiter.js │ │ └── data.js │ ├── Mars │ │ ├── Mars.js │ │ └── data.js │ ├── Mercury │ │ ├── Mercury.js │ │ └── data.js │ ├── Neptune │ │ ├── Neptune.js │ │ └── data.js │ ├── Saturn │ │ ├── Saturn.js │ │ └── data.js │ ├── Uranus │ │ ├── Uranus.js │ │ └── data.js │ └── Venus │ │ ├── Venus.js │ │ └── data.js └── selection.json └── webpack.mix.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Figma design files 2 | *.fig 3 | 4 | # Avoid your project being littered with annoying .DS_Store files! 5 | .DS_Store 6 | 7 | #Avoid accidental Node modules upload 8 | node_modules/ 9 | 10 | #Avoid accidental prettier settings upload 11 | .prettierrc.json 12 | 13 | #Avoid accidental dist folder upload 14 | dist/ 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Planets fact site 2 | 3 | ![Design preview for the Planets fact site coding challenge](./src/assets/preview.jpg) 4 | 5 | ## Table of contents 6 | 7 | - [Overview](#overview) 8 | - [Intro](#intro) 9 | - [The challenge](#the-challenge) 10 | - [Links](#links) 11 | - [My process](#my-process) 12 | - [Built with](#built-with) 13 | - [Features](#features) 14 | - [Setup](#setup) 15 | - [Useful resources](#useful-resources) 16 | 17 | ## Overview 18 | 19 | ### Intro 20 | 21 | Hello! This is my solution to [Planets fact site - Frontend Mentor](https://www.frontendmentor.io/challenges/planets-fact-site-gazqN8w_f). This is my second project build with **_React JS_**. This time I had the opportunity to try _styled-components_. It is a very powerful tool, but I believe it takes time to learn good practices and organize the code. Right now, I have the feeling that my styles are chaotic but I'm looking forward to correct it and use styled-components to its full potential. In order not to stick to design, I decided to recreate the animated solar system as the home page. Additionally, I added transitions while the subpage/route change. 22 | 23 | ⭐**Featured solution in [Vol. 58 of the Frontend Mentor Newsletter](https://mailchi.mp/8323f0e23e37/frontend-mentor-newsletter-vol-58?e=212d9dcf83).** 24 | 25 | ### The challenge 26 | 27 | > Your challenge is to build out this 8-page planets fact site and get it looking as close to the design as possible. 28 | > 29 | > You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. 30 | > 31 | > If you choose to use a JS-heavy approach, we provide a local `data.json` file for the planets. This means you'll be able to pull the data from there instead of using the separate `.html` files. 32 | > 33 | > Your users should be able to: 34 | > 35 | > - View the optimal layout for the app depending on their device's screen size 36 | > - See hover states for all interactive elements on the page 37 | > - View each planet page and toggle between "Overview", "Internal Structure", and "Surface Geology" 38 | 39 | ### Links 40 | 41 | - [LIVE PREVIEW](https://planets-tediko.netlify.app/) to check my solution. 42 | - [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 43 | 44 | ## My process 45 | 46 | ### Built with 47 | 48 | - ReactJS 49 | - Webpack 50 | - Styled-components 51 | - Mobile first 52 | - Semantic HTML5 markup 53 | - JavaScript 54 | - Flexbox 55 | - Grid 56 | - Framer Motion API 57 | 58 | ### Features 59 | 60 | - I used **_ReactJS_** library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. 61 | - I tried to write a project using **_styled-components_** library. Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page. Also allows you to write plain CSS in your components without worrying about class name collisions. 62 | - The first time I used **_Prettier_**. Prettier is an opinionated code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style. 63 | - To animate the pages transitions and mobile-menu animations I used **_Framer Motion API_**. Framer Motion is an open source, production-ready library that's designed for creating creative animations. 64 | - Added `counter()` function for my _pseudo-elements_ content in _Tab button_. **CSS counters** let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. 65 | - The **_solar system_** was recreated from this great [Codepen](https://codepen.io/kowlor/pen/ZYYQoy) created by _Malik Dellidj_. It's all based on div rotation with _pseudo-elements_ inside that contains the images of the planets. 66 | - Implemented **_defer_** to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done. 67 | - Implemented `prefers-reduced-motion` CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief. 68 | - `:focus-visible` pseudo class. This selector only indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device. It isn't supported by Safari yet, but there is simple [workaround](https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press). 69 | - Tried to create more accessible mobile navigation. Used the `aria-expanded` and `aria-controls` attributes. 70 | - To create this project I used webpack. More specifically i used `laravel mix` which is a wrapper for webpack and targets the 80% usecase. 71 | 72 | ## Setup 73 | 74 | To run this project, clone it and install it locally using npm: 75 | 76 | ``` 77 | $ git clone git@github.com:tediko/planets-fact.git 78 | $ cd planets-fact 79 | $ npm install 80 | ``` 81 | 82 | Use npm to build and compile assets in a local environment: 83 | 84 | ``` 85 | $ npm run build 86 | ``` 87 | 88 | Watch assets for changes and rebuild your bundle each time you update a file with: 89 | 90 | ``` 91 | $ npm run mix-watch 92 | or 93 | $ npx mix watch 94 | ``` 95 | 96 | ## Useful resources 97 | 98 | - [DOCS - ReactJS](https://reactjs.org/) 99 | - [VIDEO - ReactJS tutorial by The Net Ninja](https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d) 100 | - [LINK - Styled-components](https://styled-components.com/) 101 | - [LINK - Prettier](https://prettier.io/) 102 | - [LINK - Framer Motion API](https://www.framer.com/api/motion/) 103 | - [VIDEO - CSS Counters](https://youtu.be/0gayskscLY4?t=355) 104 | - [DOCS - CSS Counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) 105 | - [LINK - Solar system](https://codepen.io/kowlor/pen/ZYYQoy) 106 | - [LINK - async/defer](https://flaviocopes.com/javascript-async-defer/#the-position-matters) 107 | - [LINK - webpack](https://laravel-mix.com/docs/6.0/what-is-mix) 108 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | # The following redirect is intended for use with most SPA's that handles routing internally. 2 | [[redirects]] 3 | from = "/*" 4 | to = "/index.html" 5 | status = 200 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "planets-fact", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "npx mix", 8 | "mix-watch": "npx mix watch" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/tediko/planets-fact.git" 13 | }, 14 | "keywords": [], 15 | "author": "Dawid Weber", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/tediko/planets-fact/issues" 19 | }, 20 | "homepage": "https://github.com/tediko/planets-fact#readme", 21 | "devDependencies": { 22 | "laravel-mix": "^6.0.25", 23 | "prettier": "2.3.2" 24 | }, 25 | "dependencies": { 26 | "@babel/preset-react": "^7.14.5", 27 | "framer-motion": "^4.1.17", 28 | "react": "^17.0.2", 29 | "react-dom": "^17.0.2", 30 | "react-icomoon": "^2.3.5", 31 | "react-router-dom": "^5.2.0", 32 | "styled-components": "^5.3.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/assets/images/background-stars.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/favicon.png -------------------------------------------------------------------------------- /src/assets/images/planet-earth-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-earth-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-earth-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-earth.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-jupiter-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-jupiter-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-jupiter-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-jupiter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-mars-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-mars-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-mars-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-mars.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-mercury-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-mercury-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-mercury-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-mercury.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-neptune-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-neptune-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-neptune-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-neptune.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-saturn-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-saturn-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-saturn-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-saturn.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-uranus-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-uranus-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-uranus-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-uranus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-venus-geology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/planet-venus-geology.png -------------------------------------------------------------------------------- /src/assets/images/planet-venus-internal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/planet-venus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/images/sun.png -------------------------------------------------------------------------------- /src/assets/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tediko/planets-fact/7d4e41663d1df8353bf4bc5aec61e904dc5cd2ad/src/assets/preview.jpg -------------------------------------------------------------------------------- /src/components/App/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Switch, Route, useLocation } from 'react-router-dom'; 3 | import { AnimatePresence } from 'framer-motion'; 4 | import Provider from '../Provider/Provider'; 5 | import Wrapper from '../Wrapper/Wrapper'; 6 | import Navbar from '../Navbar/Navbar'; 7 | import Mercury from '../../pages/Mercury/Mercury'; 8 | import Venus from '../../pages/Venus/Venus'; 9 | import Earth from '../../pages/Earth/Earth'; 10 | import Mars from '../../pages/Mars/Mars'; 11 | import Jupiter from '../../pages/Jupiter/Jupiter'; 12 | import Saturn from '../../pages/Saturn/Saturn'; 13 | import Uranus from '../../pages/Uranus/Uranus'; 14 | import Neptune from '../../pages/Neptune/Neptune'; 15 | import KeyVisual from '../KeyVisual/KeyVisual'; 16 | 17 | const App = () => { 18 | const location = useLocation(); 19 | const [activePlanet, setActivePlanet] = useState('/'); 20 | 21 | return ( 22 | 23 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | ); 63 | }; 64 | 65 | export default App; 66 | -------------------------------------------------------------------------------- /src/components/Icon/Icon.js: -------------------------------------------------------------------------------- 1 | import IcoMoon from 'react-icomoon'; 2 | import iconSet from '../../selection.json'; 3 | 4 | const Icon = ({ name, size, color, customStyle }) => { 5 | return ( 6 | 14 | ); 15 | }; 16 | 17 | export default Icon; 18 | -------------------------------------------------------------------------------- /src/components/KeyVisual/KeyVisual.js: -------------------------------------------------------------------------------- 1 | import { Container, Sun, AsteroidsBelt } from './KeyVisualStyles'; 2 | import { planets } from './data'; 3 | import PlanetSwitch from './PlanetSwitch'; 4 | 5 | const KeyVisual = ({ activePlanet }) => { 6 | const containerVariants = { 7 | hidden: { 8 | opacity: 0, 9 | scale: 6, 10 | rotate: '-40deg', 11 | }, 12 | visible: { 13 | opacity: 1, 14 | scale: 1, 15 | rotate: 0, 16 | transition: { delay: 1, duration: 3 }, 17 | }, 18 | exit: { 19 | opacity: 0, 20 | scale: 0.95, 21 | rotate: '-10deg', 22 | transition: { duration: 1 }, 23 | }, 24 | }; 25 | 26 | return ( 27 | 33 | 34 | {planets.map((planet) => ( 35 | 40 | ))} 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default KeyVisual; 47 | -------------------------------------------------------------------------------- /src/components/KeyVisual/KeyVisualStyles.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { motion } from 'framer-motion'; 3 | import { asteroidsBackground } from './asteroidsBackground'; 4 | import sunImage from '../../assets/images/sun.png'; 5 | import mercuryImage from '../../assets/images/planet-mercury.svg'; 6 | import venusImage from '../../assets/images/planet-venus.svg'; 7 | import earthImage from '../../assets/images/planet-earth.svg'; 8 | import marsImage from '../../assets/images/planet-mars.svg'; 9 | import jupiterImage from '../../assets/images/planet-jupiter.svg'; 10 | import saturnImage from '../../assets/images/planet-saturn.svg'; 11 | import uranusImage from '../../assets/images/planet-uranus.svg'; 12 | import neptuneImage from '../../assets/images/planet-neptune.svg'; 13 | import { NavLink } from 'react-router-dom'; 14 | 15 | export const Container = styled(motion.div)` 16 | position: relative; 17 | min-height: 100vh; 18 | `; 19 | 20 | export const Planet = styled(NavLink)` 21 | position: absolute; 22 | top: 50%; 23 | left: 50%; 24 | border: 1px solid rgba(102, 166, 229, 0.12); 25 | border-radius: 1000px; 26 | transform: translate(-50%, -50%); 27 | transition: border 300ms ease; 28 | 29 | &::before { 30 | position: absolute; 31 | content: ''; 32 | left: 50%; 33 | transform: translate(-50%, -50%); 34 | border-radius: 100px; 35 | transition: transform 300ms ease; 36 | } 37 | 38 | @keyframes orbit { 39 | 0% { 40 | transform: translate(-50%, -50%) rotate(0deg); 41 | } 42 | 100% { 43 | transform: translate(-50%, -50%) rotate(-360deg); 44 | } 45 | } 46 | 47 | @media (min-width: 768px) { 48 | &:hover { 49 | border: 1px solid ${(props) => props.$planetColor}; 50 | 51 | &::before { 52 | transform: scale(1.5) translate(-50%, -50%); 53 | } 54 | } 55 | 56 | &:focus { 57 | outline: none; 58 | } 59 | 60 | &:focus-visible { 61 | border: 1px solid ${(props) => props.$planetColor}; 62 | 63 | &::before { 64 | transform: scale(1.5) translate(-50%, -50%); 65 | } 66 | } 67 | 68 | ${(props) => 69 | props.$isActive 70 | ? css` 71 | border: 1px solid ${(props) => props.$planetColor}; 72 | &::before { 73 | transform: scale(1.5) translate(-50%, -50%); 74 | } 75 | ` 76 | : ''}; 77 | } 78 | `; 79 | 80 | export const Sun = styled.div` 81 | position: absolute; 82 | top: 50%; 83 | left: 50%; 84 | height: 80px; 85 | width: 80px; 86 | border-radius: 1000px; 87 | background-image: url(${sunImage}); 88 | background-size: cover; 89 | box-shadow: 0 0 10px 2px rgba(255, 107, 0, 0.4), 90 | 0 0 22px 11px rgba(255, 203, 0, 0.13); 91 | transform: translate(-50%, -50%); 92 | `; 93 | 94 | export const Mercury = styled(Planet)` 95 | width: 100px; 96 | height: 100px; 97 | animation: orbit 7.1867343561s linear infinite; 98 | z-index: 100; 99 | 100 | &::before { 101 | height: 8px; 102 | width: 8px; 103 | background-image: url(${mercuryImage}); 104 | background-size: cover; 105 | } 106 | `; 107 | 108 | export const Venus = styled(Planet)` 109 | width: 130px; 110 | height: 130px; 111 | animation: orbit 18.4555338265s linear infinite; 112 | z-index: 99; 113 | 114 | &::before { 115 | height: 15px; 116 | width: 15px; 117 | background-image: url(${venusImage}); 118 | background-size: cover; 119 | } 120 | `; 121 | 122 | export const Earth = styled(Planet)` 123 | width: 175px; 124 | height: 175px; 125 | animation: orbit 30s linear infinite; 126 | z-index: 98; 127 | 128 | &::before { 129 | width: 16px; 130 | height: 16px; 131 | background-image: url(${earthImage}); 132 | background-size: cover; 133 | } 134 | `; 135 | 136 | export const Mars = styled(Planet)` 137 | width: 220px; 138 | height: 220px; 139 | animation: orbit 56.4261314589s linear infinite; 140 | z-index: 97; 141 | 142 | &::before { 143 | width: 12px; 144 | height: 12px; 145 | background-image: url(${marsImage}); 146 | background-size: cover; 147 | } 148 | `; 149 | 150 | export const Jupiter = styled(Planet)` 151 | width: 370px; 152 | height: 370px; 153 | animation: orbit 355.7228171013s linear infinite; 154 | z-index: 96; 155 | 156 | &::before { 157 | width: 36px; 158 | height: 36px; 159 | background-image: url(${jupiterImage}); 160 | background-size: cover; 161 | } 162 | `; 163 | 164 | export const Saturn = styled(Planet)` 165 | width: 470px; 166 | height: 470px; 167 | animation: orbit 882.6952471456s linear infinite; 168 | z-index: 95; 169 | 170 | &::before { 171 | width: 55px; 172 | height: 40px; 173 | background-image: url(${saturnImage}); 174 | background-size: contain; 175 | background-position: center; 176 | background-repeat: no-repeat; 177 | } 178 | `; 179 | 180 | export const Uranus = styled(Planet)` 181 | width: 550px; 182 | height: 550px; 183 | animation: orbit 2512.4001967933s linear infinite; 184 | z-index: 94; 185 | 186 | &::before { 187 | width: 20px; 188 | height: 20px; 189 | background-image: url(${uranusImage}); 190 | background-size: cover; 191 | } 192 | `; 193 | 194 | export const Neptune = styled(Planet)` 195 | width: 660px; 196 | height: 660px; 197 | animation: orbit 4911.7838624549s linear infinite; 198 | z-index: 93; 199 | 200 | &::before { 201 | width: 20px; 202 | height: 20px; 203 | background-image: url(${neptuneImage}); 204 | background-size: cover; 205 | } 206 | `; 207 | 208 | export const AsteroidsBelt = styled.div` 209 | position: absolute; 210 | top: 50%; 211 | left: 50%; 212 | border: 1px solid rgba(102, 166, 229, 0.12); 213 | border-radius: 1000px; 214 | transform: translate(-50%, -50%); 215 | 216 | height: 330px; 217 | width: 330px; 218 | opacity: 0.7; 219 | border-color: transparent; 220 | overflow: hidden; 221 | animation: orbit 179.9558282773s linear infinite; 222 | 223 | &::before { 224 | position: absolute; 225 | content: ''; 226 | left: 50%; 227 | transform: translate(-50%, -50%); 228 | top: 50%; 229 | height: 210px; 230 | width: 210px; 231 | background: transparent; 232 | border-radius: 140px !important; 233 | box-shadow: ${asteroidsBackground}; 234 | } 235 | 236 | @keyframes orbit { 237 | 0% { 238 | transform: translate(-50%, -50%) rotate(0deg); 239 | } 240 | 100% { 241 | transform: translate(-50%, -50%) rotate(-360deg); 242 | } 243 | } 244 | `; 245 | -------------------------------------------------------------------------------- /src/components/KeyVisual/PlanetSwitch.js: -------------------------------------------------------------------------------- 1 | import { 2 | Mercury, 3 | Venus, 4 | Earth, 5 | Mars, 6 | Jupiter, 7 | Saturn, 8 | Uranus, 9 | Neptune, 10 | } from './KeyVisualStyles'; 11 | 12 | const PlanetSwitch = ({ data, activePlanet }) => { 13 | const planetSwitch = () => { 14 | switch (data.name) { 15 | case 'Mercury': 16 | return ( 17 | 23 | ); 24 | case 'Venus': 25 | return ( 26 | 32 | ); 33 | case 'Earth': 34 | return ( 35 | 41 | ); 42 | case 'Mars': 43 | return ( 44 | 50 | ); 51 | case 'Jupiter': 52 | return ( 53 | 59 | ); 60 | case 'Saturn': 61 | return ( 62 | 68 | ); 69 | case 'Uranus': 70 | return ( 71 | 77 | ); 78 | case 'Neptune': 79 | return ( 80 | 86 | ); 87 | } 88 | }; 89 | return <>{planetSwitch()}; 90 | }; 91 | 92 | export default PlanetSwitch; 93 | -------------------------------------------------------------------------------- /src/components/KeyVisual/asteroidsBackground.js: -------------------------------------------------------------------------------- 1 | export const asteroidsBackground = `-111px -119px 0 -104px rgba(255, 255, 255, 0.098), 2 | 119px -14px 0 -104px rgba(255, 255, 255, 0.336), 3 | -90px 64px 0 -104px rgba(255, 255, 255, 0.607), 4 | 17px -108px 0 -104px rgba(255, 255, 255, 0.418), 5 | 91px -91px 0 -104px rgba(255, 255, 255, 0.159), 6 | 69px 66px 0 -104px rgba(255, 255, 255, 0.769), 7 | -120px -83px 0 -104px rgba(255, 255, 255, 0.088), 8 | 28px -6px 0 -104px rgba(255, 255, 255, 0.291), 9 | 129px 102px 0 -104px rgba(255, 255, 255, 0.586), 10 | -133px 53px 0 -104px rgba(255, 255, 255, 0.26), 11 | -77px -28px 0 -104px rgba(255, 255, 255, 0.124), 12 | -96px -117px 0 -104px rgba(255, 255, 255, 0.19), 13 | 108px -66px 0 -104px rgba(255, 255, 255, 0.377), 14 | 130px -137px 0 -104px rgba(255, 255, 255, 0.489), 15 | 119px 125px 0 -104px rgba(255, 255, 255, 0.131), 16 | 63px 47px 0 -104px rgba(255, 255, 255, 0.765), 17 | -40px -121px 0 -104px rgba(255, 255, 255, 0.809), 18 | 85px 13px 0 -104px rgba(255, 255, 255, 0.577), 19 | 19px 37px 0 -104px rgba(255, 255, 255, 0.893), 20 | -45px -142px 0 -104px rgba(255, 255, 255, 0.989), 21 | 84px -115px 0 -104px rgba(255, 255, 255, 0.792), 22 | 3px -107px 0 -104px rgba(255, 255, 255, 0.763), 23 | -75px 70px 0 -104px rgba(255, 255, 255, 0.36), 24 | -115px -72px 0 -104px rgba(255, 255, 255, 0.368), 25 | -130px -99px 0 -104px rgba(255, 255, 255, 0.456), 26 | 94px -95px 0 -104px rgba(255, 255, 255, 0.398), 27 | -87px -139px 0 -104px rgba(255, 255, 255, 0.383), 28 | -19px 15px 0 -104px rgba(255, 255, 255, 0.229), 29 | -36px 15px 0 -104px rgba(255, 255, 255, 0.66), 30 | 145px 142px 0 -104px rgba(255, 255, 255, 0.778), 31 | -121px -129px 0 -104px rgba(255, 255, 255, 0.13), 32 | 67px 90px 0 -104px rgba(255, 255, 255, 0.849), 33 | 140px 141px 0 -104px rgba(255, 255, 255, 0.599), 34 | -31px 27px 0 -104px rgba(255, 255, 255, 0.68), 35 | 72px -27px 0 -104px rgba(255, 255, 255, 0.982), 36 | 64px -78px 0 -104px rgba(255, 255, 255, 0.89), 37 | -107px 27px 0 -104px rgba(255, 255, 255, 0.476), 38 | 57px -35px 0 -104px rgba(255, 255, 255, 0.544), 39 | -6px 73px 0 -104px rgba(255, 255, 255, 0.185), 40 | 108px 134px 0 -104px rgba(255, 255, 255, 0.024), 41 | -143px -111px 0 -104px rgba(255, 255, 255, 0.464), 42 | 27px 135px 0 -104px rgba(255, 255, 255, 0.342), 43 | 118px -25px 0 -104px rgba(255, 255, 255, 0.12), 44 | 105px 59px 0 -104px rgba(255, 255, 255, 0.44), 45 | 137px -113px 0 -104px rgba(255, 255, 255, 0.2), 46 | 54px -7px 0 -104px rgba(255, 255, 255, 0.256), 47 | 7px -69px 0 -104px rgba(255, 255, 255, 0.518), 48 | 141px -66px 0 -104px rgba(255, 255, 255, 0.19), 49 | 28px -71px 0 -104px rgba(255, 255, 255, 0.533), 50 | -8px 4px 0 -104px rgba(255, 255, 255, 0.975), 51 | 125px -136px 0 -104px rgba(255, 255, 255, 0.503), 52 | 112px -136px 0 -104px rgba(255, 255, 255, 0.134), 53 | -110px 80px 0 -104px rgba(255, 255, 255, 0.451), 54 | 61px -34px 0 -104px rgba(255, 255, 255, 0.127), 55 | 10px -44px 0 -104px rgba(255, 255, 255, 0.17), 56 | -90px 31px 0 -104px rgba(255, 255, 255, 0.655), 57 | 89px 94px 0 -104px rgba(255, 255, 255, 0.434), 58 | 100px 35px 0 -104px rgba(255, 255, 255, 0.537), 59 | 137px -111px 0 -104px rgba(255, 255, 255, 0.506), 60 | 99px 67px 0 -104px rgba(255, 255, 255, 0.612), 61 | -38px -71px 0 -104px rgba(255, 255, 255, 0.285), 62 | -63px -3px 0 -104px rgba(255, 255, 255, 0.625), 63 | 26px -18px 0 -104px rgba(255, 255, 255, 0.486), 64 | -37px -58px 0 -104px rgba(255, 255, 255, 0.956), 65 | -129px 57px 0 -104px rgba(255, 255, 255, 0.05), 66 | 83px 22px 0 -104px rgba(255, 255, 255, 0.411), 67 | 86px -75px 0 -104px rgba(255, 255, 255, 0.74), 68 | -32px 108px 0 -104px rgba(255, 255, 255, 0.91), 69 | -88px -5px 0 -104px rgba(255, 255, 255, 0.285), 70 | 82px 58px 0 -104px rgba(255, 255, 255, 0.468), 71 | -100px -7px 0 -104px rgba(255, 255, 255, 0.124), 72 | 16px -119px 0 -104px rgba(255, 255, 255, 0.693), 73 | 40px 26px 0 -104px rgba(255, 255, 255, 0.482), 74 | -13px 126px 0 -104px rgba(255, 255, 255, 0.184), 75 | 58px 73px 0 -104px rgba(255, 255, 255, 0.364), 76 | 140px -75px 0 -104px rgba(255, 255, 255, 0.333), 77 | -37px 45px 0 -104px rgba(255, 255, 255, 0.597), 78 | 136px -10px 0 -104px rgba(255, 255, 255, 0.463), 79 | 106px 31px 0 -104px rgba(255, 255, 255, 0.918), 80 | -31px 0px 0 -104px rgba(255, 255, 255, 0.259), 81 | -104px 65px 0 -104px rgba(255, 255, 255, 0.708), 82 | -73px 67px 0 -104px rgba(255, 255, 255, 0.362), 83 | -77px -57px 0 -104px rgba(255, 255, 255, 0.571), 84 | 66px -53px 0 -104px rgba(255, 255, 255, 0.301), 85 | -113px -46px 0 -104px rgba(255, 255, 255, 0.384), 86 | -137px 120px 0 -104px rgba(255, 255, 255, 0.772), 87 | -117px -32px 0 -104px rgba(255, 255, 255, 0.07), 88 | -26px -102px 0 -104px rgba(255, 255, 255, 0.453), 89 | -119px -2px 0 -104px rgba(255, 255, 255, 0.852), 90 | 104px 2px 0 -104px rgba(255, 255, 255, 0.389), 91 | 51px -48px 0 -104px rgba(255, 255, 255, 0.968), 92 | -98px -48px 0 -104px rgba(255, 255, 255, 0.001), 93 | -19px 71px 0 -104px rgba(255, 255, 255, 0.442), 94 | 54px -70px 0 -104px rgba(255, 255, 255, 0.867), 95 | -132px 16px 0 -104px rgba(255, 255, 255, 0.128), 96 | -119px -18px 0 -104px rgba(255, 255, 255, 0.099), 97 | 15px 62px 0 -104px rgba(255, 255, 255, 0.733), 98 | 109px 45px 0 -104px rgba(255, 255, 255, 0.786), 99 | -99px 59px 0 -104px rgba(255, 255, 255, 0.692), 100 | -62px -114px 0 -104px rgba(255, 255, 255, 0.92), 101 | -73px -119px 0 -104px rgba(255, 255, 255, 0.988), 102 | -97px -128px 0 -104px rgba(255, 255, 255, 0.448), 103 | 79px 73px 0 -104px rgba(255, 255, 255, 0.049), 104 | -91px 82px 0 -104px rgba(255, 255, 255, 0.081), 105 | -119px -27px 0 -104px rgba(255, 255, 255, 0.834), 106 | 115px -63px 0 -104px rgba(255, 255, 255, 0.523), 107 | -60px -100px 0 -104px rgba(255, 255, 255, 0.269), 108 | -9px -65px 0 -104px rgba(255, 255, 255, 0.304), 109 | -128px -113px 0 -104px rgba(255, 255, 255, 0.361), 110 | 110px -73px 0 -104px rgba(255, 255, 255, 0.572), 111 | -111px -23px 0 -104px rgba(255, 255, 255, 0.884), 112 | 46px -36px 0 -104px rgba(255, 255, 255, 0.688), 113 | 49px -107px 0 -104px rgba(255, 255, 255, 0.184), 114 | -138px -104px 0 -104px rgba(255, 255, 255, 0.483), 115 | -138px -123px 0 -104px rgba(255, 255, 255, 0.933), 116 | 52px -111px 0 -104px rgba(255, 255, 255, 0.591), 117 | 135px -2px 0 -104px rgba(255, 255, 255, 0.387), 118 | 140px -15px 0 -104px rgba(255, 255, 255, 0.337), 119 | 15px -121px 0 -104px rgba(255, 255, 255, 0.829), 120 | -52px -132px 0 -104px rgba(255, 255, 255, 0.691), 121 | 92px 136px 0 -104px rgba(255, 255, 255, 0.832), 122 | -88px 19px 0 -104px rgba(255, 255, 255, 0.544), 123 | -76px -33px 0 -104px rgba(255, 255, 255, 0.987), 124 | -113px 92px 0 -104px rgba(255, 255, 255, 0.503), 125 | -119px 134px 0 -104px rgba(255, 255, 255, 0.905), 126 | 7px 38px 0 -104px rgba(255, 255, 255, 0.562), 127 | -49px -72px 0 -104px rgba(255, 255, 255, 0.504), 128 | -122px 113px 0 -104px rgba(255, 255, 255, 0.668), 129 | -23px -129px 0 -104px rgba(255, 255, 255, 0.369), 130 | -42px -58px 0 -104px rgba(255, 255, 255, 0.564), 131 | 12px -43px 0 -104px rgba(255, 255, 255, 0.287), 132 | -101px 135px 0 -104px rgba(255, 255, 255, 0.716), 133 | -10px -60px 0 -104px rgba(255, 255, 255, 0.984), 134 | 109px 37px 0 -104px rgba(255, 255, 255, 0.86), 135 | 97px -65px 0 -104px rgba(255, 255, 255, 0.393), 136 | 92px 46px 0 -104px rgba(255, 255, 255, 0.212), 137 | -81px 142px 0 -104px rgba(255, 255, 255, 0.278), 138 | -107px 16px 0 -104px rgba(255, 255, 255, 0.651), 139 | 93px 114px 0 -104px rgba(255, 255, 255, 0.674), 140 | -31px 116px 0 -104px rgba(255, 255, 255, 0.51), 141 | -133px 141px 0 -104px rgba(255, 255, 255, 0.585), 142 | 52px -94px 0 -104px rgba(255, 255, 255, 0.46), 143 | 32px 38px 0 -104px rgba(255, 255, 255, 0.832), 144 | 93px 139px 0 -104px rgba(255, 255, 255, 0.001), 145 | -99px -121px 0 -104px rgba(255, 255, 255, 0.768), 146 | -78px 2px 0 -104px rgba(255, 255, 255, 0.221), 147 | 35px 78px 0 -104px rgba(255, 255, 255, 0.712), 148 | 56px 57px 0 -104px rgba(255, 255, 255, 0.03), 149 | 21px -100px 0 -104px rgba(255, 255, 255, 0.877), 150 | -82px 11px 0 -104px rgba(255, 255, 255, 0.345), 151 | -81px -70px 0 -104px rgba(255, 255, 255, 0.655), 152 | 61px -41px 0 -104px rgba(255, 255, 255, 0.907), 153 | -32px 77px 0 -104px rgba(255, 255, 255, 0.973), 154 | -127px -81px 0 -104px rgba(255, 255, 255, 0.427), 155 | 37px 128px 0 -104px rgba(255, 255, 255, 0.598), 156 | -62px -104px 0 -104px rgba(255, 255, 255, 0.841), 157 | -115px -72px 0 -104px rgba(255, 255, 255, 0.306), 158 | -55px -68px 0 -104px rgba(255, 255, 255, 0.032), 159 | -32px -106px 0 -104px rgba(255, 255, 255, 0.798), 160 | -99px 113px 0 -104px rgba(255, 255, 255, 0.762), 161 | 56px 143px 0 -104px rgba(255, 255, 255, 0.662), 162 | 126px -102px 0 -104px rgba(255, 255, 255, 0.212), 163 | 72px 42px 0 -104px rgba(255, 255, 255, 0.699), 164 | 120px 15px 0 -104px rgba(255, 255, 255, 0.59), 165 | -43px -122px 0 -104px rgba(255, 255, 255, 0.861), 166 | 5px 64px 0 -104px rgba(255, 255, 255, 0.463), 167 | -59px -116px 0 -104px rgba(255, 255, 255, 0.675), 168 | 91px 91px 0 -104px rgba(255, 255, 255, 0.65), 169 | 16px -58px 0 -104px rgba(255, 255, 255, 0.503), 170 | -138px 30px 0 -104px rgba(255, 255, 255, 0.123), 171 | 81px -130px 0 -104px rgba(255, 255, 255, 0.103), 172 | -106px 1px 0 -104px rgba(255, 255, 255, 0.474), 173 | -67px 35px 0 -104px rgba(255, 255, 255, 0.243), 174 | 86px -37px 0 -104px rgba(255, 255, 255, 0.776), 175 | -25px -26px 0 -104px rgba(255, 255, 255, 0.736), 176 | -79px -111px 0 -104px rgba(255, 255, 255, 0.109), 177 | -97px 102px 0 -104px rgba(255, 255, 255, 0.912), 178 | 143px -118px 0 -104px rgba(255, 255, 255, 0.627), 179 | -11px -62px 0 -104px rgba(255, 255, 255, 0.378), 180 | 88px -103px 0 -104px rgba(255, 255, 255, 0.152), 181 | 46px -110px 0 -104px rgba(255, 255, 255, 0.158), 182 | 92px 30px 0 -104px rgba(255, 255, 255, 0.349), 183 | -125px 1px 0 -104px rgba(255, 255, 255, 0.609), 184 | 81px 87px 0 -104px rgba(255, 255, 255, 0.251), 185 | 87px -68px 0 -104px rgba(255, 255, 255, 0.786), 186 | -67px 126px 0 -104px rgba(255, 255, 255, 0.498), 187 | 103px -24px 0 -104px rgba(255, 255, 255, 0.236), 188 | 12px 16px 0 -104px rgba(255, 255, 255, 0.934), 189 | -119px -3px 0 -104px rgba(255, 255, 255, 0.838), 190 | -35px 35px 0 -104px rgba(255, 255, 255, 0.334), 191 | -110px -54px 0 -104px rgba(255, 255, 255, 0.224), 192 | 128px 134px 0 -104px rgba(255, 255, 255, 0.65), 193 | -128px -24px 0 -104px rgba(255, 255, 255, 0.404), 194 | 30px -43px 0 -104px rgba(255, 255, 255, 0.502), 195 | -102px -63px 0 -104px rgba(255, 255, 255, 0.627), 196 | 4px -34px 0 -104px rgba(255, 255, 255, 0.556), 197 | 2px 53px 0 -104px rgba(255, 255, 255, 0.301), 198 | -3px -140px 0 -104px rgba(255, 255, 255, 0.039), 199 | -38px -91px 0 -104px rgba(255, 255, 255, 0.327), 200 | 106px 114px 0 -104px rgba(255, 255, 255, 0.187), 201 | 58px -129px 0 -104px rgba(255, 255, 255, 0.777), 202 | 66px -42px 0 -104px rgba(255, 255, 255, 0.82), 203 | 73px -44px 0 -104px rgba(255, 255, 255, 0.347), 204 | 11px 3px 0 -104px rgba(255, 255, 255, 0.545), 205 | -38px -116px 0 -104px rgba(255, 255, 255, 0.139), 206 | 30px 34px 0 -104px rgba(255, 255, 255, 0.432), 207 | -33px 50px 0 -104px rgba(255, 255, 255, 0.043), 208 | -93px 32px 0 -104px rgba(255, 255, 255, 0.751), 209 | -76px -51px 0 -104px rgba(255, 255, 255, 0.963), 210 | -16px -37px 0 -104px rgba(255, 255, 255, 0.971), 211 | -97px -32px 0 -104px rgba(255, 255, 255, 0.474), 212 | -72px -48px 0 -104px rgba(255, 255, 255, 0.85), 213 | 31px 65px 0 -104px rgba(255, 255, 255, 0.716), 214 | 43px -9px 0 -104px rgba(255, 255, 255, 0.202), 215 | -33px 114px 0 -104px rgba(255, 255, 255, 0.155), 216 | 4px -107px 0 -104px rgba(255, 255, 255, 0.885), 217 | -55px -104px 0 -104px rgba(255, 255, 255, 0.136), 218 | -3px -1px 0 -104px rgba(255, 255, 255, 0.795), 219 | 116px -79px 0 -104px rgba(255, 255, 255, 0.863), 220 | -86px 79px 0 -104px rgba(255, 255, 255, 0.394), 221 | 37px -46px 0 -104px rgba(255, 255, 255, 0.434), 222 | 23px 14px 0 -104px rgba(255, 255, 255, 0.395), 223 | -67px 96px 0 -104px rgba(255, 255, 255, 0.024), 224 | -113px 107px 0 -104px rgba(255, 255, 255, 0.496), 225 | -28px 24px 0 -104px rgba(255, 255, 255, 0.797), 226 | 140px 21px 0 -104px rgba(255, 255, 255, 0.337), 227 | -25px 63px 0 -104px rgba(255, 255, 255, 0.675), 228 | -84px -63px 0 -104px rgba(255, 255, 255, 0.353), 229 | -100px -69px 0 -104px rgba(255, 255, 255, 0.24), 230 | 138px -58px 0 -104px rgba(255, 255, 255, 0.328), 231 | -21px -101px 0 -104px rgba(255, 255, 255, 0.521), 232 | -140px 122px 0 -104px rgba(255, 255, 255, 0.123), 233 | 97px 93px 0 -104px rgba(255, 255, 255, 0.26), 234 | 13px -99px 0 -104px rgba(255, 255, 255, 0.379), 235 | 69px 14px 0 -104px rgba(255, 255, 255, 0.717), 236 | -140px -1px 0 -104px rgba(255, 255, 255, 0.038), 237 | 9px 20px 0 -104px rgba(255, 255, 255, 0.739), 238 | 144px -90px 0 -104px rgba(255, 255, 255, 0.701), 239 | 3px 7px 0 -104px rgba(255, 255, 255, 0.142), 240 | -83px 22px 0 -104px rgba(255, 255, 255, 0.169), 241 | -38px 68px 0 -104px rgba(255, 255, 255, 0.679), 242 | 76px -137px 0 -104px rgba(255, 255, 255, 0.052), 243 | -119px -32px 0 -104px rgba(255, 255, 255, 0.915), 244 | 26px 37px 0 -104px rgba(255, 255, 255, 0.426), 245 | 64px 133px 0 -104px rgba(255, 255, 255, 0.5), 246 | -48px 132px 0 -104px rgba(255, 255, 255, 0.583), 247 | 87px 54px 0 -104px rgba(255, 255, 255, 0.15), 248 | 19px 84px 0 -104px rgba(255, 255, 255, 0.159), 249 | 43px -6px 0 -104px rgba(255, 255, 255, 0.956), 250 | -106px 138px 0 -104px rgba(255, 255, 255, 0.318), 251 | 91px 99px 0 -104px rgba(255, 255, 255, 0.983), 252 | -89px -110px 0 -104px rgba(255, 255, 255, 0.392), 253 | -105px 84px 0 -104px rgba(255, 255, 255, 0.379), 254 | -125px 131px 0 -104px rgba(255, 255, 255, 0.918), 255 | -84px -72px 0 -104px rgba(255, 255, 255, 0.152), 256 | -86px 112px 0 -104px rgba(255, 255, 255, 0.96), 257 | -111px 64px 0 -104px rgba(255, 255, 255, 0.781), 258 | -60px -122px 0 -104px rgba(255, 255, 255, 0.366), 259 | -26px -65px 0 -104px rgba(255, 255, 255, 0.889), 260 | -48px 130px 0 -104px rgba(255, 255, 255, 0.118), 261 | 48px -109px 0 -104px rgba(255, 255, 255, 0.235), 262 | 145px -138px 0 -104px rgba(255, 255, 255, 0.538), 263 | 99px 93px 0 -104px rgba(255, 255, 255, 0.329), 264 | -76px 114px 0 -104px rgba(255, 255, 255, 0.73), 265 | 88px 107px 0 -104px rgba(255, 255, 255, 0.954), 266 | 116px 59px 0 -104px rgba(255, 255, 255, 0.86), 267 | 37px -106px 0 -104px rgba(255, 255, 255, 0.055), 268 | -64px 44px 0 -104px rgba(255, 255, 255, 0.898), 269 | -92px -41px 0 -104px rgba(255, 255, 255, 0.95), 270 | 89px 49px 0 -104px rgba(255, 255, 255, 0.746), 271 | -120px -109px 0 -104px rgba(255, 255, 255, 0.349), 272 | -92px -44px 0 -104px rgba(255, 255, 255, 0.001), 273 | -76px -125px 0 -104px rgba(255, 255, 255, 0.571), 274 | 98px 93px 0 -104px rgba(255, 255, 255, 0.479), 275 | 0px -26px 0 -104px rgba(255, 255, 255, 0.858), 276 | 110px 112px 0 -104px rgba(255, 255, 255, 0.501), 277 | -26px 86px 0 -104px rgba(255, 255, 255, 0.184), 278 | -76px -103px 0 -104px rgba(255, 255, 255, 0.267), 279 | 42px -70px 0 -104px rgba(255, 255, 255, 0.808), 280 | 94px 25px 0 -104px rgba(255, 255, 255, 0.216), 281 | 104px -84px 0 -104px rgba(255, 255, 255, 0.115), 282 | -81px 95px 0 -104px rgba(255, 255, 255, 0.585), 283 | 70px -63px 0 -104px rgba(255, 255, 255, 0.868), 284 | -16px -138px 0 -104px rgba(255, 255, 255, 0.681), 285 | -52px -77px 0 -104px rgba(255, 255, 255, 0.051), 286 | 94px 135px 0 -104px rgba(255, 255, 255, 0.312), 287 | -121px 78px 0 -104px rgba(255, 255, 255, 0.977), 288 | -127px -58px 0 -104px rgba(255, 255, 255, 0.436), 289 | -44px 62px 0 -104px rgba(255, 255, 255, 0.959), 290 | -46px -117px 0 -104px rgba(255, 255, 255, 0.348), 291 | -89px -85px 0 -104px rgba(255, 255, 255, 0.437), 292 | -49px 20px 0 -104px rgba(255, 255, 255, 0.517), 293 | 53px 70px 0 -104px rgba(255, 255, 255, 0.952), 294 | -51px -32px 0 -104px rgba(255, 255, 255, 0.085), 295 | 89px -131px 0 -104px rgba(255, 255, 255, 0.832), 296 | -1px -2px 0 -104px rgba(255, 255, 255, 0.175), 297 | -23px 103px 0 -104px rgba(255, 255, 255, 0.184), 298 | 118px 68px 0 -104px rgba(255, 255, 255, 0.201), 299 | -31px -13px 0 -104px rgba(255, 255, 255, 0.385), 300 | -65px 33px 0 -104px rgba(255, 255, 255, 0.325), 301 | -89px 95px 0 -104px rgba(255, 255, 255, 0.863), 302 | 49px 65px 0 -104px rgba(255, 255, 255, 0.777), 303 | 125px -49px 0 -104px rgba(255, 255, 255, 0.148), 304 | -13px -72px 0 -104px rgba(255, 255, 255, 0.959), 305 | 54px -84px 0 -104px rgba(255, 255, 255, 0.011), 306 | -15px -50px 0 -104px rgba(255, 255, 255, 0.633), 307 | -65px -20px 0 -104px rgba(255, 255, 255, 0.871), 308 | -101px -76px 0 -104px rgba(255, 255, 255, 0.669), 309 | -96px -10px 0 -104px rgba(255, 255, 255, 0.125), 310 | -106px -108px 0 -104px rgba(255, 255, 255, 0.208), 311 | 24px 41px 0 -104px rgba(255, 255, 255, 0.202), 312 | -118px 27px 0 -104px rgba(255, 255, 255, 0.309), 313 | -4px 91px 0 -104px rgba(255, 255, 255, 0.09), 314 | 20px 99px 0 -104px rgba(255, 255, 255, 0.258), 315 | 123px -89px 0 -104px rgba(255, 255, 255, 0.314), 316 | -95px -68px 0 -104px rgba(255, 255, 255, 0.798), 317 | -136px -117px 0 -104px rgba(255, 255, 255, 0.877), 318 | -83px -131px 0 -104px rgba(255, 255, 255, 0.719), 319 | 10px -2px 0 -104px rgba(255, 255, 255, 0.326), 320 | -33px 106px 0 -104px rgba(255, 255, 255, 0.313), 321 | -126px -92px 0 -104px rgba(255, 255, 255, 0.236), 322 | -64px -34px 0 -104px rgba(255, 255, 255, 0.049), 323 | -89px -56px 0 -104px rgba(255, 255, 255, 0.933), 324 | -75px -63px 0 -104px rgba(255, 255, 255, 0.326), 325 | -57px -141px 0 -104px rgba(255, 255, 255, 0.325), 326 | -83px -123px 0 -104px rgba(255, 255, 255, 0.096), 327 | -63px 127px 0 -104px rgba(255, 255, 255, 0.434), 328 | -92px -24px 0 -104px rgba(255, 255, 255, 0.522), 329 | 120px -59px 0 -104px rgba(255, 255, 255, 0.373), 330 | 5px 11px 0 -104px rgba(255, 255, 255, 0.007), 331 | 51px -59px 0 -104px rgba(255, 255, 255, 0.132), 332 | -27px 111px 0 -104px rgba(255, 255, 255, 0.969), 333 | 99px -7px 0 -104px rgba(255, 255, 255, 0.711), 334 | -42px 11px 0 -104px rgba(255, 255, 255, 0.973), 335 | -79px -65px 0 -104px rgba(255, 255, 255, 0.388), 336 | 121px 43px 0 -104px rgba(255, 255, 255, 0.395), 337 | -34px -111px 0 -104px rgba(255, 255, 255, 0.476), 338 | -122px -26px 0 -104px rgba(255, 255, 255, 0.853), 339 | 63px 139px 0 -104px rgba(255, 255, 255, 0.429), 340 | -100px -105px 0 -104px rgba(255, 255, 255, 0.944), 341 | 138px -20px 0 -104px rgba(255, 255, 255, 0.929), 342 | 80px 40px 0 -104px rgba(255, 255, 255, 0.888), 343 | -80px -138px 0 -104px rgba(255, 255, 255, 0.459), 344 | -54px -81px 0 -104px rgba(255, 255, 255, 0.927), 345 | -120px -107px 0 -104px rgba(255, 255, 255, 0.622), 346 | 94px 105px 0 -104px rgba(255, 255, 255, 0.189), 347 | 66px 90px 0 -104px rgba(255, 255, 255, 0.959), 348 | -121px 136px 0 -104px rgba(255, 255, 255, 0.698), 349 | -47px -25px 0 -104px rgba(255, 255, 255, 0.349), 350 | -84px 80px 0 -104px rgba(255, 255, 255, 0.027), 351 | 123px -24px 0 -104px rgba(255, 255, 255, 0.862), 352 | 29px 4px 0 -104px rgba(255, 255, 255, 0.791), 353 | -132px 95px 0 -104px rgba(255, 255, 255, 0.915), 354 | 67px 39px 0 -104px rgba(255, 255, 255, 0.423), 355 | 70px -109px 0 -104px rgba(255, 255, 255, 0.137), 356 | -6px 118px 0 -104px rgba(255, 255, 255, 0.711), 357 | 66px -135px 0 -104px rgba(255, 255, 255, 0.184), 358 | -17px -37px 0 -104px rgba(255, 255, 255, 0.96), 359 | 105px -95px 0 -104px rgba(255, 255, 255, 0.39), 360 | -112px 86px 0 -104px rgba(255, 255, 255, 0.75), 361 | -54px 51px 0 -104px rgba(255, 255, 255, 0.694), 362 | -30px -52px 0 -104px rgba(255, 255, 255, 0.563), 363 | -35px 87px 0 -104px rgba(255, 255, 255, 0.169), 364 | 15px 51px 0 -104px rgba(255, 255, 255, 0.926), 365 | 47px 20px 0 -104px rgba(255, 255, 255, 0.535), 366 | 68px -74px 0 -104px rgba(255, 255, 255, 0.876), 367 | -95px -39px 0 -104px rgba(255, 255, 255, 0.83), 368 | -89px -12px 0 -104px rgba(255, 255, 255, 0.901), 369 | 29px -20px 0 -104px rgba(255, 255, 255, 0.019), 370 | 127px -107px 0 -104px rgba(255, 255, 255, 0.111), 371 | -5px 87px 0 -104px rgba(255, 255, 255, 0.208), 372 | -103px -57px 0 -104px rgba(255, 255, 255, 0.937), 373 | -49px -87px 0 -104px rgba(255, 255, 255, 0.062), 374 | 53px 126px 0 -104px rgba(255, 255, 255, 0.611), 375 | 108px -99px 0 -104px rgba(255, 255, 255, 0.152), 376 | -36px 11px 0 -104px rgba(255, 255, 255, 0.485), 377 | 106px 21px 0 -104px rgba(255, 255, 255, 0.38), 378 | -138px 44px 0 -104px rgba(255, 255, 255, 0.646), 379 | 73px -66px 0 -104px rgba(255, 255, 255, 0.984), 380 | 111px -128px 0 -104px rgba(255, 255, 255, 0.425), 381 | 5px -25px 0 -104px rgba(255, 255, 255, 0.709), 382 | -78px 109px 0 -104px rgba(255, 255, 255, 0.888), 383 | -55px 73px 0 -104px rgba(255, 255, 255, 0.954), 384 | 19px -2px 0 -104px rgba(255, 255, 255, 0.11), 385 | -80px -9px 0 -104px rgba(255, 255, 255, 0.2), 386 | -104px -59px 0 -104px rgba(255, 255, 255, 0.324), 387 | 139px -90px 0 -104px rgba(255, 255, 255, 0.03), 388 | -106px -92px 0 -104px rgba(255, 255, 255, 0.937), 389 | -21px 44px 0 -104px rgba(255, 255, 255, 0.996), 390 | 131px -132px 0 -104px rgba(255, 255, 255, 0.6);`; 391 | -------------------------------------------------------------------------------- /src/components/KeyVisual/data.js: -------------------------------------------------------------------------------- 1 | export const planets = [ 2 | { 3 | id: 0, 4 | name: 'Mercury', 5 | path: '/mercury', 6 | color: 'hsl(196, 83%, 93%)', 7 | sectionColor: 'hsl(194, 48%, 49%)', 8 | }, 9 | { 10 | id: 1, 11 | name: 'Venus', 12 | path: '/venus', 13 | color: 'hsl(39, 88%, 73%)', 14 | sectionColor: 'hsl(33, 82%, 61%)', 15 | }, 16 | { 17 | id: 2, 18 | name: 'Earth', 19 | path: '/earth', 20 | color: 'hsl(238, 99%, 66%)', 21 | sectionColor: 'hsl(263, 67%, 51%)', 22 | }, 23 | { 24 | id: 3, 25 | name: 'Mars', 26 | path: '/mars', 27 | color: 'hsl(12, 100%, 64%)', 28 | sectionColor: 'hsl(10, 63%, 51%)', 29 | }, 30 | { 31 | id: 4, 32 | name: 'Jupiter', 33 | path: '/jupiter', 34 | color: 'hsl(27, 75%, 70%)', 35 | sectionColor: 'hsl(2, 68%, 53%)', 36 | }, 37 | { 38 | id: 5, 39 | name: 'Saturn', 40 | path: '/saturn', 41 | color: 'hsl(40, 96%, 70%)', 42 | sectionColor: 'hsl(17, 73%, 46%)', 43 | }, 44 | { 45 | id: 6, 46 | name: 'Uranus', 47 | path: '/uranus', 48 | color: 'hsl(168, 82%, 67%)', 49 | sectionColor: 'hsl(169, 73%, 44%)', 50 | }, 51 | { 52 | id: 7, 53 | name: 'Neptune', 54 | path: '/neptune', 55 | color: 'hsl(222, 95%, 63%)', 56 | sectionColor: 'hsl(222, 87%, 56%)', 57 | }, 58 | ]; 59 | -------------------------------------------------------------------------------- /src/components/Navbar/NavDesktop/NavDesktop.js: -------------------------------------------------------------------------------- 1 | import { Nav, List, Item, Link } from './NavDesktopStyles'; 2 | import { planets } from '../data'; 3 | 4 | const NavDesktop = ({ pathName, activePlanet, onHover }) => { 5 | return ( 6 | 28 | ); 29 | }; 30 | 31 | export default NavDesktop; 32 | -------------------------------------------------------------------------------- /src/components/Navbar/NavDesktop/NavDesktopStyles.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { NavLink } from 'react-router-dom'; 3 | 4 | export const Nav = styled.nav` 5 | height: 100%; 6 | `; 7 | 8 | export const List = styled.ul` 9 | display: flex; 10 | flex-flow: row; 11 | gap: 32px; 12 | width: 100%; 13 | margin-top: 39px; 14 | 15 | @media (min-width: 1025px) { 16 | margin-top: 0; 17 | height: 100%; 18 | } 19 | `; 20 | 21 | export const Item = styled.li``; 22 | 23 | export const Link = styled(NavLink)` 24 | display: flex; 25 | position: relative; 26 | font-size: 0.6875rem; 27 | font-weight: 600; 28 | letter-spacing: 1px; 29 | line-height: 25px; 30 | text-transform: uppercase; 31 | color: ${(props) => props.theme.colors.whiteAlpha75}; 32 | cursor: pointer; 33 | transition: color 300ms ease; 34 | 35 | &:hover { 36 | color: ${(props) => props.theme.colors.white}; 37 | } 38 | 39 | @media (min-width: 768px) { 40 | &:focus { 41 | outline: none; 42 | } 43 | 44 | &:focus-visible { 45 | outline: 2px dashed ${(props) => props.theme.colors.redLight}; 46 | outline-offset: 3px; 47 | color: ${(props) => props.theme.colors.white}; 48 | } 49 | 50 | ${(props) => 51 | props.$isActive 52 | ? css` 53 | color: ${(props) => props.theme.colors.white}; 54 | ` 55 | : ''} 56 | } 57 | 58 | @media (min-width: 1025px) { 59 | height: 100%; 60 | align-items: center; 61 | margin-top: 5px; 62 | 63 | &::after { 64 | position: absolute; 65 | content: ''; 66 | top: -5px; 67 | left: 0; 68 | width: 100%; 69 | height: 4px; 70 | background-color: ${(props) => props.$bgcolor}; 71 | transform: scaleX(0); 72 | transition: transform 350ms ease; 73 | } 74 | 75 | &:hover { 76 | &::after { 77 | transform: scaleX(1); 78 | } 79 | } 80 | 81 | &:focus { 82 | outline: none; 83 | } 84 | 85 | &:focus-visible { 86 | color: ${(props) => props.theme.colors.white}; 87 | 88 | &::after { 89 | transform: scaleX(1); 90 | } 91 | } 92 | 93 | ${(props) => 94 | props.$isActive 95 | ? css` 96 | &::after { 97 | transform: scaleX(1); 98 | } 99 | ` 100 | : ''} 101 | } 102 | `; 103 | -------------------------------------------------------------------------------- /src/components/Navbar/NavMobile/ItemControler.js: -------------------------------------------------------------------------------- 1 | import { Item, Link } from './NavMobileStyles'; 2 | import Icon from '../../Icon/Icon'; 3 | import { planets } from '../data'; 4 | 5 | const ItemsMobile = ({ restoreToDefault }) => { 6 | return planets.map((planet) => ( 7 | 17 | restoreToDefault()} 21 | > 22 | {planet.name} 23 | 29 | 30 | 31 | )); 32 | }; 33 | 34 | export default ItemsMobile; 35 | -------------------------------------------------------------------------------- /src/components/Navbar/NavMobile/NavMobile.js: -------------------------------------------------------------------------------- 1 | import { AnimatePresence } from 'framer-motion'; 2 | import { useEffect } from 'react'; 3 | import { Nav, Menu, Bars, List } from './NavMobileStyles'; 4 | import Items from './ItemControler'; 5 | import useToggleMenu from '../useToggleMenu'; 6 | 7 | const NavMobile = ({ windowWidth }) => { 8 | const [ 9 | handleToggle, 10 | restoreToDefault, 11 | isOpen, 12 | isExpanded, 13 | tabletBreakpoint, 14 | ] = useToggleMenu(); 15 | 16 | useEffect(() => { 17 | windowWidth >= tabletBreakpoint ? restoreToDefault() : ''; 18 | }, [windowWidth]); 19 | 20 | return ( 21 | 44 | ); 45 | }; 46 | 47 | export default NavMobile; 48 | -------------------------------------------------------------------------------- /src/components/Navbar/NavMobile/NavMobileStyles.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { motion } from 'framer-motion'; 3 | import { NavLink } from 'react-router-dom'; 4 | 5 | export const Nav = styled.nav``; 6 | 7 | export const Menu = styled.button` 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | width: 24px; 12 | height: 17px; 13 | background-color: transparent; 14 | border: none; 15 | cursor: pointer; 16 | `; 17 | 18 | export const Bars = styled.span` 19 | position: relative; 20 | width: 100%; 21 | height: 3px; 22 | background: ${(props) => props.theme.colors.white}; 23 | transition: transform 200ms ease; 24 | 25 | &::before, 26 | &::after { 27 | position: absolute; 28 | content: ''; 29 | top: 0; 30 | left: 0; 31 | width: inherit; 32 | height: inherit; 33 | background-color: inherit; 34 | transition: top 200ms ease 0.12s, transform 200ms ease; 35 | } 36 | 37 | &::before { 38 | top: -6px; 39 | } 40 | 41 | &::after { 42 | top: 6px; 43 | } 44 | 45 | ${(props) => 46 | props.isOpen 47 | ? css` 48 | & { 49 | transform: rotate(45deg); 50 | transition: transform 200ms 0.12s ease; 51 | } 52 | 53 | &::before { 54 | top: 0; 55 | opacity: 0; 56 | transition: top 200ms ease, opacity 200ms ease; 57 | } 58 | 59 | &::after { 60 | top: 0; 61 | transform: rotate(-90deg); 62 | transition: top 200ms ease, transform 200ms ease 0.12s; 63 | } 64 | ` 65 | : ''}; 66 | `; 67 | 68 | export const List = styled(motion.ul)` 69 | position: absolute; 70 | display: flex; 71 | flex-flow: column; 72 | inset: 69px 0 0 0; 73 | padding: 0 24px; 74 | width: 100%; 75 | background: ${(props) => props.theme.colors.black}; 76 | z-index: 999; 77 | `; 78 | 79 | export const Item = styled(motion.li)` 80 | border-bottom: 1px solid ${(props) => props.theme.colors.grayDark}; 81 | `; 82 | 83 | export const Link = styled(NavLink)` 84 | display: flex; 85 | justify-content: space-between; 86 | position: relative; 87 | font-size: 0.9375rem; 88 | font-weight: 600; 89 | letter-spacing: 1.36px; 90 | line-height: 25px; 91 | color: ${(props) => props.theme.colors.white}; 92 | text-transform: uppercase; 93 | padding: 20px 0 20px 44px; 94 | 95 | &::before { 96 | position: absolute; 97 | content: ''; 98 | top: 50%; 99 | left: 0; 100 | width: 20px; 101 | height: 20px; 102 | background-color: ${(props) => props.color}; 103 | border-radius: 50%; 104 | transform: translateY(-55%); 105 | } 106 | `; 107 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { Header, Logo, LogoLink, Container } from './NavbarStyles'; 3 | import NavMobile from './NavMobile/NavMobile'; 4 | import NavDesktop from './NavDesktop/NavDesktop'; 5 | 6 | const Navbar = ({ pathName, activePlanet, onHover }) => { 7 | const [windowWidth, setWindowWidth] = useState(window.innerWidth); 8 | const tabletBreakpoint = 768; 9 | 10 | useEffect(() => { 11 | window.addEventListener('resize', () => 12 | setWindowWidth(window.innerWidth) 13 | ); 14 | }, [windowWidth]); 15 | 16 | const containerVariants = { 17 | hidden: { 18 | opacity: 0, 19 | }, 20 | visible: { 21 | opacity: 1, 22 | transition: { delay: 1.5, duration: 4 }, 23 | }, 24 | exit: { 25 | opacity: 0, 26 | transition: { duration: 1 }, 27 | }, 28 | }; 29 | 30 | return ( 31 |
37 | 38 | 39 | The Planets 40 | 41 | {windowWidth >= tabletBreakpoint ? ( 42 | 47 | ) : ( 48 | 49 | )} 50 | 51 |
52 | ); 53 | }; 54 | 55 | export default Navbar; 56 | -------------------------------------------------------------------------------- /src/components/Navbar/NavbarStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | import { motion } from 'framer-motion'; 4 | 5 | export const Header = styled(motion.header)` 6 | padding: 16px 24px; 7 | border-bottom: 1px solid ${(props) => props.theme.colors.grayDark}; 8 | 9 | @media (min-width: 768px) { 10 | padding: 32px 24px 27px 24px; 11 | } 12 | 13 | @media (min-width: 1025px) { 14 | padding: 0 44px 0 32px; 15 | height: 85px; 16 | } 17 | `; 18 | 19 | export const Container = styled.div` 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | 24 | @media (min-width: 768px) { 25 | flex-flow: column; 26 | } 27 | 28 | @media (min-width: 1025px) { 29 | flex-flow: row; 30 | height: 100%; 31 | max-width: 1440px; 32 | margin: 0 auto; 33 | } 34 | `; 35 | 36 | export const Logo = styled.h1` 37 | all: unset; 38 | `; 39 | 40 | export const LogoLink = styled(Link)` 41 | font-size: 28px; 42 | font-family: ${(props) => props.theme.fonts.secondary}; 43 | color: ${(props) => props.theme.colors.white}; 44 | text-transform: uppercase; 45 | letter-spacing: -1.05px; 46 | 47 | &:focus { 48 | outline: none; 49 | } 50 | 51 | &:focus-visible { 52 | outline: 2px dashed ${(props) => props.theme.colors.redLight}; 53 | outline-offset: 3px; 54 | } 55 | `; 56 | -------------------------------------------------------------------------------- /src/components/Navbar/data.js: -------------------------------------------------------------------------------- 1 | export const planets = [ 2 | { 3 | id: 0, 4 | name: 'Mercury', 5 | path: '/mercury', 6 | color: 'hsl(196, 83%, 93%)', 7 | sectionColor: 'hsl(194, 48%, 49%)', 8 | }, 9 | { 10 | id: 1, 11 | name: 'Venus', 12 | path: '/venus', 13 | color: 'hsl(39, 88%, 73%)', 14 | sectionColor: 'hsl(33, 82%, 61%)', 15 | }, 16 | { 17 | id: 2, 18 | name: 'Earth', 19 | path: '/earth', 20 | color: 'hsl(238, 99%, 66%)', 21 | sectionColor: 'hsl(263, 67%, 51%)', 22 | }, 23 | { 24 | id: 3, 25 | name: 'Mars', 26 | path: '/mars', 27 | color: 'hsl(12, 100%, 64%)', 28 | sectionColor: 'hsl(10, 63%, 51%)', 29 | }, 30 | { 31 | id: 4, 32 | name: 'Jupiter', 33 | path: '/jupiter', 34 | color: 'hsl(27, 75%, 70%)', 35 | sectionColor: 'hsl(2, 68%, 53%)', 36 | }, 37 | { 38 | id: 5, 39 | name: 'Saturn', 40 | path: '/saturn', 41 | color: 'hsl(40, 96%, 70%)', 42 | sectionColor: 'hsl(17, 73%, 46%)', 43 | }, 44 | { 45 | id: 6, 46 | name: 'Uranus', 47 | path: '/uranus', 48 | color: 'hsl(168, 82%, 67%)', 49 | sectionColor: 'hsl(169, 73%, 44%)', 50 | }, 51 | { 52 | id: 7, 53 | name: 'Neptune', 54 | path: '/neptune', 55 | color: 'hsl(222, 95%, 63%)', 56 | sectionColor: 'hsl(222, 87%, 56%)', 57 | }, 58 | ]; 59 | -------------------------------------------------------------------------------- /src/components/Navbar/useToggleMenu.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const useToggleMenu = () => { 4 | const [isOpen, setIsOpen] = useState(false); 5 | const [isExpanded, setIsExpanded] = useState(false); 6 | const [isTransitionend, setIsTransitionend] = useState(true); 7 | let transitionDuration = 1000; 8 | let tabletBreakpoint = 768; 9 | 10 | /** 11 | * Function to toggle showMenu() and closeMenu() depending 12 | * on isOpen state. It doesn't run untill isTransitionend is true. 13 | */ 14 | const handleToggle = () => { 15 | if (!isTransitionend) return false; 16 | !isOpen ? showMenu() : closeMenu(); 17 | }; 18 | 19 | /** 20 | * Function to open menu 21 | */ 22 | const showMenu = () => { 23 | setIsOpen(true); 24 | setIsTransitionend(false); 25 | setIsExpanded(true); 26 | 27 | setTimeout(() => { 28 | setIsTransitionend(true); 29 | }, transitionDuration); 30 | }; 31 | 32 | /** 33 | * Function to close menu 34 | */ 35 | const closeMenu = () => { 36 | setIsTransitionend(false); 37 | setIsOpen(false); 38 | setIsExpanded(false); 39 | 40 | setTimeout(() => { 41 | setIsTransitionend(true); 42 | }, transitionDuration); 43 | }; 44 | 45 | /** 46 | * Function to restore all states to it default values. 47 | */ 48 | const restoreToDefault = () => { 49 | setIsOpen(false); 50 | setIsExpanded(false); 51 | setIsTransitionend(true); 52 | }; 53 | 54 | return [ 55 | handleToggle, 56 | restoreToDefault, 57 | isOpen, 58 | isExpanded, 59 | tabletBreakpoint, 60 | ]; 61 | }; 62 | 63 | export default useToggleMenu; 64 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Illustration/Illustration.js: -------------------------------------------------------------------------------- 1 | import { Illustration, Image } from './IllustrationStyles'; 2 | 3 | const IllustrationContainer = ({ planetData, currentData, isChanging }) => { 4 | const containerVariants = { 5 | hidden: { 6 | opacity: 0, 7 | scale: 0.5, 8 | rotate: '20deg', 9 | x: 200, 10 | }, 11 | visible: { 12 | opacity: 1, 13 | scale: 1, 14 | rotate: 0, 15 | x: 0, 16 | transition: { delay: 1, duration: 1.5 }, 17 | }, 18 | exit: { 19 | opacity: 0, 20 | scale: 0.5, 21 | rotate: '-20deg', 22 | x: -200, 23 | transition: { duration: 1 }, 24 | }, 25 | }; 26 | 27 | return ( 28 | 34 | 42 | 43 | ); 44 | }; 45 | 46 | export default IllustrationContainer; 47 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Illustration/IllustrationStyles.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { motion } from 'framer-motion'; 3 | 4 | export const Illustration = styled(motion.div)` 5 | height: 100vw; 6 | max-height: 304px; 7 | padding: 0 24px; 8 | z-index: 5; 9 | 10 | @media (min-width: 768px) { 11 | grid-area: illustration; 12 | max-height: 460px; 13 | padding: 0; 14 | } 15 | 16 | @media (min-width: 1025px) { 17 | max-height: 754px; 18 | } 19 | `; 20 | 21 | export const Image = styled.div` 22 | position: relative; 23 | background-image: url(${(props) => props.image}); 24 | background-size: 100%; 25 | background-position: center; 26 | background-repeat: no-repeat; 27 | height: 100%; 28 | max-width: ${(props) => props.mobileImgWidth}; 29 | margin: 0 auto; 30 | 31 | &::before { 32 | position: absolute; 33 | content: ''; 34 | top: 50%; 35 | left: 50%; 36 | width: 110px; 37 | height: 150px; 38 | background-repeat: no-repeat; 39 | background-size: contain; 40 | transform: translateX(-50%); 41 | } 42 | 43 | @media (min-width: 768px) { 44 | max-width: ${(props) => props.tabletImgWidth}; 45 | &::before { 46 | top: 55%; 47 | width: 163px; 48 | height: 200px; 49 | } 50 | } 51 | 52 | @media (min-width: 1025px) { 53 | max-width: ${(props) => props.desktopImgWidth}; 54 | 55 | &::before { 56 | top: 66%; 57 | } 58 | } 59 | 60 | ${(props) => 61 | props.geo 62 | ? css` 63 | &::before { 64 | background-image: url(${props.geo}); 65 | } 66 | ` 67 | : ''}; 68 | 69 | ${(props) => 70 | props.isChanging 71 | ? css` 72 | animation: imageSwap 2000ms ease; 73 | ` 74 | : ``}; 75 | 76 | @keyframes imageSwap { 77 | 0% { 78 | opacity: 1; 79 | transform: translateY(0) scale(1) rotate(0); 80 | } 81 | 82 | 50% { 83 | opacity: 0; 84 | transform: translateY(100px) scale(0.5) rotate(180deg); 85 | } 86 | 87 | 100% { 88 | opacity: 1; 89 | transform: translateX(0) scale(1) rotate(0); 90 | } 91 | } 92 | `; 93 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Info/Info.js: -------------------------------------------------------------------------------- 1 | import { Info, Item, Heading, Desc } from './InfoStyles'; 2 | 3 | const InfoContainer = ({ planetData }) => { 4 | const containerVariants = { 5 | hidden: { 6 | opacity: 0, 7 | y: 25, 8 | }, 9 | visible: { 10 | opacity: 1, 11 | y: 0, 12 | transition: { delay: 1.5, duration: 1.5 }, 13 | }, 14 | exit: { 15 | opacity: 0, 16 | y: 25, 17 | transition: { duration: 1 }, 18 | }, 19 | }; 20 | 21 | return ( 22 | 28 | 29 | Rotation Time 30 | {planetData.rotation} 31 | 32 | 33 | Revolution Time 34 | {planetData.revolution} 35 | 36 | 37 | Radius 38 | {planetData.radius} 39 | 40 | 41 | Average temp. 42 | {planetData.temperature} 43 | 44 | 45 | ); 46 | }; 47 | 48 | export default InfoContainer; 49 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Info/InfoStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { motion } from 'framer-motion'; 3 | 4 | export const Info = styled(motion.ul)` 5 | display: flex; 6 | flex-flow: column; 7 | gap: 8px; 8 | padding: 0 24px 48px 24px; 9 | max-width: 600px; 10 | margin: 0 auto; 11 | 12 | @media (min-width: 768px) { 13 | grid-area: info; 14 | flex-flow: row; 15 | justify-content: space-between; 16 | gap: 11px; 17 | padding: 0 0 36px 0; 18 | max-width: unset; 19 | margin: 0; 20 | } 21 | 22 | @media (min-width: 1025px) { 23 | gap: 30px; 24 | } 25 | `; 26 | 27 | export const Item = styled.li` 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | border: 1px solid ${(props) => props.theme.colors.grayDark}; 32 | height: 48px; 33 | padding: 0 24px; 34 | 35 | @media (min-width: 768px) { 36 | flex-flow: column; 37 | align-items: flex-start; 38 | gap: 6px; 39 | height: unset; 40 | padding: 16px 0 19px 15px; 41 | width: 100%; 42 | } 43 | 44 | @media (min-width: 1025px) { 45 | padding: 20px 0 34px 23px; 46 | gap: 8px; 47 | } 48 | `; 49 | 50 | export const Heading = styled.h4` 51 | font-size: 0.5rem; 52 | line-height: 16px; 53 | letter-spacing: 0.046rem; 54 | text-transform: uppercase; 55 | color: ${(props) => props.theme.colors.grayLight}; 56 | 57 | @media (min-width: 1025px) { 58 | font-size: 0.6875rem; 59 | line-height: 25px; 60 | letter-spacing: 0.0625rem; 61 | } 62 | `; 63 | 64 | export const Desc = styled.p` 65 | font-size: 1.25rem; 66 | font-family: ${(props) => props.theme.fonts.secondary}; 67 | line-height: 100%; 68 | letter-spacing: -0.047rem; 69 | text-transform: uppercase; 70 | color: ${(props) => props.theme.colors.white}; 71 | 72 | @media (min-width: 768px) { 73 | font-size: 1.5rem; 74 | letter-spacing: -0.056rem; 75 | } 76 | 77 | @media (min-width: 1025px) { 78 | font-size: 2.5rem; 79 | letter-spacing: -0.09375rem; 80 | } 81 | `; 82 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Intro/Intro.js: -------------------------------------------------------------------------------- 1 | import { Intro, Title, Text, SourceContainer, Span, Link } from './IntroStyles'; 2 | import Icon from '../../Icon/Icon'; 3 | 4 | const IntroContainer = ({ planetData, currentData, isChanging }) => { 5 | const containerVariants = { 6 | hidden: { 7 | opacity: 0, 8 | x: 50, 9 | }, 10 | visible: { 11 | opacity: 1, 12 | x: 0, 13 | transition: { delay: 1.5, duration: 1.5 }, 14 | }, 15 | exit: { 16 | opacity: 0, 17 | x: 50, 18 | transition: { duration: 1 }, 19 | }, 20 | }; 21 | 22 | return ( 23 | 29 | {planetData.name} 30 | 31 | {currentData.content} 32 | 33 | 34 | Source: 35 | 36 | Wikipedia 37 | 38 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default IntroContainer; 45 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Intro/IntroStyles.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { motion } from 'framer-motion'; 3 | 4 | export const Intro = styled(motion.div)` 5 | display: flex; 6 | flex-flow: column; 7 | align-items: center; 8 | padding: 0 24px; 9 | margin-bottom: 28px; 10 | 11 | @media (min-width: 768px) { 12 | grid-area: intro; 13 | align-items: start; 14 | padding: 0; 15 | } 16 | 17 | @media (min-width: 1025px) { 18 | align-self: end; 19 | margin: 60px 0 39px 0; 20 | } 21 | `; 22 | 23 | export const Title = styled.h1` 24 | color: ${(props) => props.theme.colors.white}; 25 | font-size: 2.5rem; 26 | font-family: ${(props) => props.theme.fonts.secondary}; 27 | font-weight: 500; 28 | line-height: 100%; 29 | text-transform: uppercase; 30 | margin-bottom: 16px; 31 | 32 | @media (min-width: 768px) { 33 | font-size: 3rem; 34 | margin-bottom: 24px; 35 | } 36 | 37 | @media (min-width: 1025px) { 38 | font-size: 5rem; 39 | margin-bottom: 34px; 40 | } 41 | `; 42 | 43 | export const Text = styled.p` 44 | font-size: 0.6875rem; 45 | line-height: 22px; 46 | color: ${(props) => props.theme.colors.whiteAlpha75}; 47 | text-align: center; 48 | margin-bottom: 10px; 49 | max-width: 500px; 50 | 51 | ${(props) => 52 | props.isChanging 53 | ? css` 54 | animation: textSwap 2000ms ease; 55 | ` 56 | : ``}; 57 | 58 | @media (min-width: 768px) { 59 | text-align: left; 60 | margin-bottom: 32px; 61 | max-width: unset; 62 | } 63 | 64 | @media (min-width: 1025px) { 65 | font-size: 0.875rem; 66 | line-height: 25px; 67 | margin-bottom: 24px; 68 | } 69 | 70 | @keyframes textSwap { 71 | 0% { 72 | opacity: 1; 73 | transform: scaleY(1); 74 | } 75 | 76 | 50% { 77 | opacity: 0; 78 | transform: scaleY(1.2); 79 | } 80 | 81 | 100% { 82 | opacity: 1; 83 | transform: scaleY(1); 84 | } 85 | } 86 | `; 87 | 88 | export const SourceContainer = styled.div` 89 | display: flex; 90 | gap: 5px; 91 | `; 92 | 93 | export const Span = styled.span` 94 | color: ${(props) => props.theme.colors.grayLight}; 95 | font-size: 0.75rem; 96 | line-height: 25px; 97 | 98 | @media (min-width: 1025px) { 99 | font-size: 0.875rem; 100 | } 101 | `; 102 | 103 | export const Link = styled.a` 104 | display: flex; 105 | align-items: center; 106 | gap: 5px; 107 | font-size: 0.75rem; 108 | font-weight: 600; 109 | line-height: 25px; 110 | text-decoration: underline; 111 | color: ${(props) => props.theme.colors.grayLight}; 112 | 113 | &:focus { 114 | outline: none; 115 | } 116 | 117 | &:focus-visible { 118 | outline: 2px dashed ${(props) => props.planetData.sectionColor}; 119 | outline-offset: 2px; 120 | } 121 | 122 | @media (min-width: 1025px) { 123 | font-size: 0.875rem; 124 | gap: 8px; 125 | } 126 | `; 127 | -------------------------------------------------------------------------------- /src/components/PlanetSection/PlanetSection.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import { Section, Container } from './PlanetSectionStyles'; 3 | import useReplaceInfo from './useReplaceInfo'; 4 | import Tabs from './Tabs/Tabs'; 5 | import Illustration from './Illustration/Illustration'; 6 | import Intro from './Intro/Intro'; 7 | import Info from './Info/Info'; 8 | 9 | const PlanetSection = ({ planetData }) => { 10 | const [handleClick, currentData, currentTab, isChanging] = 11 | useReplaceInfo(planetData); 12 | const [windowWidth, setWindowWidth] = useState(window.innerWidth); 13 | const checkWindowWidth = () => { 14 | setWindowWidth(window.innerWidth); 15 | }; 16 | 17 | useEffect(() => { 18 | window.addEventListener('resize', checkWindowWidth); 19 | 20 | return () => { 21 | window.removeEventListener('resize', checkWindowWidth); 22 | }; 23 | }, []); 24 | 25 | return ( 26 |
27 | 28 | 34 | 39 | 44 | 45 | 46 |
47 | ); 48 | }; 49 | 50 | export default PlanetSection; 51 | -------------------------------------------------------------------------------- /src/components/PlanetSection/PlanetSectionStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Section = styled.section` 4 | @media (min-width: 768px) { 5 | padding: 0 40px; 6 | } 7 | `; 8 | 9 | export const Container = styled.div` 10 | @media (min-width: 768px) { 11 | display: grid; 12 | grid-template-areas: 'illustration illustration' 'intro tabs' 'info info'; 13 | grid-template-columns: 1fr 1fr; 14 | } 15 | 16 | @media (min-width: 1025px) { 17 | grid-template-areas: 'illustration intro' 'illustration tabs' 'info info'; 18 | grid-template-columns: 2.2fr 1fr; 19 | 20 | max-width: 1110px; 21 | margin: 0 auto; 22 | } 23 | `; 24 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Tabs/Tabs.js: -------------------------------------------------------------------------------- 1 | import { Tabs, Tab } from './TabsStyles'; 2 | 3 | const TabsContainer = ({ 4 | planetData, 5 | handleClick, 6 | currentTab, 7 | windowWidth, 8 | }) => { 9 | const containerVariants = { 10 | hidden: { 11 | opacity: 0, 12 | x: 50, 13 | }, 14 | visible: { 15 | opacity: 1, 16 | x: 0, 17 | transition: { delay: 1.5, duration: 1.5 }, 18 | }, 19 | exit: { 20 | opacity: 0, 21 | x: 50, 22 | transition: { duration: 1 }, 23 | }, 24 | }; 25 | 26 | return ( 27 | 33 | 39 | Overview 40 | 41 | 47 | {windowWidth >= 768 ? 'Internal ' : ''}Structure 48 | 49 | 55 | Surface{windowWidth >= 768 ? ' Geology' : ''} 56 | 57 | 58 | ); 59 | }; 60 | 61 | export default TabsContainer; 62 | -------------------------------------------------------------------------------- /src/components/PlanetSection/Tabs/TabsStyles.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { motion } from 'framer-motion'; 3 | 4 | export const Tabs = styled(motion.div)` 5 | display: flex; 6 | border-bottom: 1px solid ${(props) => props.theme.colors.grayDark}; 7 | justify-content: space-between; 8 | padding: 0 24px; 9 | 10 | @media (min-width: 480px) { 11 | justify-content: space-evenly; 12 | } 13 | 14 | @media (min-width: 768px) { 15 | grid-area: tabs; 16 | flex-flow: column; 17 | gap: 16px; 18 | border-bottom: unset; 19 | padding: 0; 20 | width: 100%; 21 | max-width: 281px; 22 | align-self: center; 23 | justify-self: end; 24 | } 25 | 26 | @media (min-width: 1025px) { 27 | max-width: unset; 28 | align-self: start; 29 | } 30 | `; 31 | 32 | export const Tab = styled.button` 33 | position: relative; 34 | display: flex; 35 | font-family: ${(props) => props.theme.fonts.primary}; 36 | font-size: 0.5625rem; 37 | font-weight: 600; 38 | letter-spacing: 0.12rem; 39 | text-transform: uppercase; 40 | background: transparent; 41 | border: none; 42 | padding: 20px 5px; 43 | color: ${(props) => props.theme.colors.grayLight}; 44 | transition: color 350ms ease; 45 | 46 | &::before { 47 | position: absolute; 48 | content: ''; 49 | bottom: -1px; 50 | left: 0; 51 | width: 100%; 52 | height: 4px; 53 | background-color: ${(props) => props.planetData.sectionColor}; 54 | transform-origin: center; 55 | transform: scaleX(0); 56 | transition: transform 350ms ease; 57 | } 58 | 59 | ${(props) => 60 | props.isActive 61 | ? css` 62 | color: ${props.theme.colors.white}; 63 | &::before { 64 | transform: scaleX(1); 65 | } 66 | ` 67 | : ''}; 68 | 69 | @media (min-width: 768px) { 70 | padding: 15px 5px 15px 50px; 71 | border: 1px solid ${(props) => props.theme.colors.grayDark}; 72 | transition: background-color 300ms ease; 73 | cursor: pointer; 74 | color: ${(props) => props.theme.colors.white}; 75 | 76 | &::before { 77 | content: unset; 78 | } 79 | 80 | &::after { 81 | position: absolute; 82 | top: 50%; 83 | left: 20px; 84 | content: '0' counter(tab); 85 | counter-increment: tab; 86 | width: 10px; 87 | height: 10px; 88 | transform: translateY(-60%); 89 | font-family: ${(props) => props.theme.fonts.primary}; 90 | font-size: 0.5625rem; 91 | font-weight: 600; 92 | letter-spacing: 0.12rem; 93 | color: ${(props) => props.theme.colors.whiteAlpha50}; 94 | } 95 | 96 | &:hover { 97 | background-color: ${(props) => props.theme.colors.grayDark}; 98 | } 99 | 100 | &:focus { 101 | outline: none; 102 | } 103 | 104 | &:focus-visible { 105 | outline: 2px dashed ${(props) => props.planetData.sectionColor}; 106 | outline-offset: 2px; 107 | } 108 | 109 | ${(props) => 110 | props.isActive 111 | ? css` 112 | background-color: ${(props) => 113 | props.planetData.sectionColor}; 114 | ` 115 | : ''}; 116 | } 117 | 118 | @media (min-width: 1025px) { 119 | font-size: 0.75rem; 120 | letter-spacing: 0.16rem; 121 | line-height: 25px; 122 | padding: 11px 5px 10px 74px; 123 | 124 | &::after { 125 | left: 28px; 126 | transform: translateY(-120%); 127 | font-size: 0.75rem; 128 | letter-spacing: 0.16rem; 129 | } 130 | } 131 | `; 132 | -------------------------------------------------------------------------------- /src/components/PlanetSection/useReplaceInfo.js: -------------------------------------------------------------------------------- 1 | import { useState, useRef } from 'react'; 2 | 3 | const useDataChange = (data) => { 4 | const [currentData, setCurrentData] = useState(data.overview); 5 | const [isChanging, setIsChanging] = useState(false); 6 | const [currentTab, setCurrentTab] = useState('overview'); 7 | const prevTab = useRef('overview'); 8 | const isTransitionend = useRef(true); 9 | const transitionDuration = 2000; 10 | const halfTransitionDuration = transitionDuration / 2; 11 | 12 | /** 13 | * Function to invoke changeContent() only when given conditions are met. 14 | * @param {Event} event Event from user click on element 15 | */ 16 | const handleClick = (event) => { 17 | let currTab = event.target.dataset.type; 18 | if (!isTransitionend.current || prevTab.current === currTab) 19 | return false; 20 | 21 | changeContent(currTab); 22 | }; 23 | 24 | /** 25 | * Function to change data. 26 | * @param {String} currTab Name of current tab 27 | */ 28 | const changeContent = (currTab) => { 29 | prevTab.current = currTab; 30 | isTransitionend.current = false; 31 | setIsChanging(true); 32 | setCurrentTab(currTab); 33 | 34 | setTimeout(() => { 35 | isTransitionend.current = true; 36 | setIsChanging(false); 37 | }, transitionDuration); 38 | 39 | setTimeout(() => { 40 | setCurrentData(data[currTab]); 41 | }, halfTransitionDuration); 42 | }; 43 | 44 | return [handleClick, currentData, currentTab, isChanging]; 45 | }; 46 | 47 | export default useDataChange; 48 | -------------------------------------------------------------------------------- /src/components/Provider/Provider.js: -------------------------------------------------------------------------------- 1 | import { ThemeProvider, createGlobalStyle } from 'styled-components'; 2 | import { theme } from './theme'; 3 | 4 | const GlobalStyle = createGlobalStyle` 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | html:focus-within { 14 | scroll-behavior: smooth; 15 | } 16 | 17 | ul, 18 | ol { 19 | list-style: none; 20 | } 21 | 22 | @media (prefers-reduced-motion: reduce) { 23 | html:focus-within { 24 | scroll-behavior: auto; 25 | } 26 | 27 | *, 28 | *::before, 29 | *::after { 30 | animation-duration: 0.01ms !important; 31 | animation-iteration-count: 1 !important; 32 | transition-duration: 0.01ms !important; 33 | scroll-behavior: auto !important; 34 | } 35 | } 36 | 37 | html { 38 | font-size: 16px; 39 | } 40 | 41 | body { 42 | font-family: ${theme.fonts.primary}; 43 | font-size: 0.875rem; 44 | counter-reset: tab; 45 | } 46 | 47 | a { 48 | text-decoration: none; 49 | color: inherit; 50 | } 51 | `; 52 | 53 | const Provider = ({ children }) => { 54 | return ( 55 | 56 | 57 | {children} 58 | 59 | ); 60 | }; 61 | 62 | export default Provider; 63 | -------------------------------------------------------------------------------- /src/components/Provider/theme.js: -------------------------------------------------------------------------------- 1 | export const theme = { 2 | colors: { 3 | white: 'hsl(0, 0%, 100%)', 4 | whiteAlpha50: 'hsla(0, 0%, 100%, 0.5)', 5 | whiteAlpha75: 'hsla(0, 0%, 100%, 0.75)', 6 | black: 'hsl(240, 67%, 8%)', 7 | grayDark: 'hsl(240, 17%, 26%)', 8 | grayLight: 'hsl(240, 6%, 54%)', 9 | turquoise: 'hsl(194, 48%, 49%)', 10 | orangeLight: 'hsl(33, 82%, 61%)', 11 | orangeDark: 'hsl(10, 63%, 51%)', 12 | purple: 'hsl(263, 67%, 51%)', 13 | redLight: 'hsl(2, 68%, 53%)', 14 | redDark: 'hsl(17, 73%, 46%)', 15 | green: 'hsl(169, 73%, 44%)', 16 | blue: 'hsl(222, 87%, 56%)', 17 | }, 18 | fonts: { 19 | primary: `'Spartan', sans-serif`, 20 | secondary: `'Antonio', sans-serif`, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/Wrapper/Wrapper.js: -------------------------------------------------------------------------------- 1 | import { Container } from './WrapperStyles'; 2 | 3 | const Wrapper = ({ children }) => { 4 | return {children}; 5 | }; 6 | 7 | export default Wrapper; 8 | -------------------------------------------------------------------------------- /src/components/Wrapper/WrapperStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { starsBackground } from './starsBackground'; 3 | 4 | export const Container = styled.div` 5 | position: relative; 6 | min-height: 100vh; 7 | background-color: ${(props) => props.theme.colors.black}; 8 | overflow: hidden; 9 | 10 | &::after { 11 | content: ''; 12 | position: absolute; 13 | height: 2px; 14 | width: 2px; 15 | top: -2px; 16 | background: white; 17 | box-shadow: ${starsBackground}; 18 | border-radius: 100px; 19 | } 20 | `; 21 | -------------------------------------------------------------------------------- /src/components/Wrapper/starsBackground.js: -------------------------------------------------------------------------------- 1 | export const starsBackground = `250px 557px 0 0px rgba(255, 255, 255, 0.77), 2 | 757px 487px 0 0px rgba(255, 255, 255, 0.943), 3 | 1656px 1149px 0 0px rgba(255, 255, 255, 0.532), 4 | 496px 939px 0 0px rgba(255, 255, 255, 0.672), 5 | 614px 1750px 0 0px rgba(255, 255, 255, 0.961), 6 | 713px 1434px 0 0px rgba(255, 255, 255, 0.013), 7 | 315px 501px 0 0px rgba(255, 255, 255, 0.777), 8 | 1145px 753px 0 0px rgba(255, 255, 255, 0.328), 9 | 1712px 255px 0 0px rgba(255, 255, 255, 0.449), 10 | 466px 206px 0 0px rgba(255, 255, 255, 0.012), 11 | 773px 977px 0 0px rgba(255, 255, 255, 0.937), 12 | 486px 69px 0 0px rgba(255, 255, 255, 0.955), 13 | 1550px 1297px 0 0px rgba(255, 255, 255, 0.222), 14 | 1653px 1527px 0 0px rgba(255, 255, 255, 0.208), 15 | 75px 35px 0 0px rgba(255, 255, 255, 0.785), 16 | 991px 1189px 0 0px rgba(255, 255, 255, 0.35), 17 | 1230px 569px 0 0px rgba(255, 255, 255, 0.445), 18 | 1091px 1437px 0 0px rgba(255, 255, 255, 0.747), 19 | 931px 831px 0 0px rgba(255, 255, 255, 0.51), 20 | 736px 1016px 0 0px rgba(255, 255, 255, 0.948), 21 | 90px 316px 0 0px rgba(255, 255, 255, 0.525), 22 | 893px 1606px 0 0px rgba(255, 255, 255, 0.506), 23 | 1778px 582px 0 0px rgba(255, 255, 255, 0.409), 24 | 1382px 1389px 0 0px rgba(255, 255, 255, 0.402), 25 | 136px 624px 0 0px rgba(255, 255, 255, 0.812), 26 | 698px 682px 0 0px rgba(255, 255, 255, 0.939), 27 | 451px 1116px 0 0px rgba(255, 255, 255, 0.13), 28 | 996px 257px 0 0px rgba(255, 255, 255, 0.443), 29 | 1483px 82px 0 0px rgba(255, 255, 255, 0.096), 30 | 1008px 83px 0 0px rgba(255, 255, 255, 0.773), 31 | 914px 722px 0 0px rgba(255, 255, 255, 0.031), 32 | 792px 681px 0 0px rgba(255, 255, 255, 0.686), 33 | 1303px 1428px 0 0px rgba(255, 255, 255, 0.889), 34 | 1424px 1267px 0 0px rgba(255, 255, 255, 0.697), 35 | 1633px 1208px 0 0px rgba(255, 255, 255, 0.019), 36 | 444px 1351px 0 0px rgba(255, 255, 255, 0.015), 37 | 292px 1045px 0 0px rgba(255, 255, 255, 0.666), 38 | 1395px 152px 0 0px rgba(255, 255, 255, 0.675), 39 | 684px 631px 0 0px rgba(255, 255, 255, 0.445), 40 | 932px 202px 0 0px rgba(255, 255, 255, 0.913), 41 | 1749px 878px 0 0px rgba(255, 255, 255, 0.863), 42 | 940px 460px 0 0px rgba(255, 255, 255, 0.974), 43 | 1389px 805px 0 0px rgba(255, 255, 255, 0.457), 44 | 1443px 385px 0 0px rgba(255, 255, 255, 0.854), 45 | 479px 1268px 0 0px rgba(255, 255, 255, 0.603), 46 | 1040px 986px 0 0px rgba(255, 255, 255, 0.468), 47 | 952px 1137px 0 0px rgba(255, 255, 255, 0.485), 48 | 399px 1726px 0 0px rgba(255, 255, 255, 0.429), 49 | 677px 1707px 0 0px rgba(255, 255, 255, 0.266), 50 | 345px 1548px 0 0px rgba(255, 255, 255, 0.677), 51 | 178px 793px 0 0px rgba(255, 255, 255, 0.176), 52 | 323px 989px 0 0px rgba(255, 255, 255, 0.629), 53 | 1610px 1192px 0 0px rgba(255, 255, 255, 0.811), 54 | 315px 1370px 0 0px rgba(255, 255, 255, 0.486), 55 | 568px 174px 0 0px rgba(255, 255, 255, 0.835), 56 | 369px 245px 0 0px rgba(255, 255, 255, 0.088), 57 | 1129px 1362px 0 0px rgba(255, 255, 255, 0.538), 58 | 1630px 1249px 0 0px rgba(255, 255, 255, 0.806), 59 | 681px 133px 0 0px rgba(255, 255, 255, 0.928), 60 | 548px 717px 0 0px rgba(255, 255, 255, 0.564), 61 | 1170px 833px 0 0px rgba(255, 255, 255, 0.527), 62 | 1329px 1111px 0 0px rgba(255, 255, 255, 0.701), 63 | 150px 1118px 0 0px rgba(255, 255, 255, 0.507), 64 | 65px 1009px 0 0px rgba(255, 255, 255, 0.641), 65 | 1765px 130px 0 0px rgba(255, 255, 255, 0.608), 66 | 1160px 1367px 0 0px rgba(255, 255, 255, 0.037), 67 | 537px 500px 0 0px rgba(255, 255, 255, 0.3), 68 | 1475px 1706px 0 0px rgba(255, 255, 255, 0.535), 69 | 367px 1685px 0 0px rgba(255, 255, 255, 0.533), 70 | 62px 769px 0 0px rgba(255, 255, 255, 0.68), 71 | 806px 1547px 0 0px rgba(255, 255, 255, 0.376), 72 | 860px 1382px 0 0px rgba(255, 255, 255, 0.25), 73 | 1244px 777px 0 0px rgba(255, 255, 255, 0.187), 74 | 154px 765px 0 0px rgba(255, 255, 255, 0.538), 75 | 915px 416px 0 0px rgba(255, 255, 255, 0.559), 76 | 75px 1253px 0 0px rgba(255, 255, 255, 0.374), 77 | 1247px 755px 0 0px rgba(255, 255, 255, 0.189), 78 | 1004px 273px 0 0px rgba(255, 255, 255, 0.315), 79 | 1767px 376px 0 0px rgba(255, 255, 255, 0.728), 80 | 300px 379px 0 0px rgba(255, 255, 255, 0.851), 81 | 774px 410px 0 0px rgba(255, 255, 255, 0.741), 82 | 787px 1048px 0 0px rgba(255, 255, 255, 0.625), 83 | 1313px 1597px 0 0px rgba(255, 255, 255, 0.752), 84 | 1547px 187px 0 0px rgba(255, 255, 255, 0.704), 85 | 1085px 1440px 0 0px rgba(255, 255, 255, 0.812), 86 | 1382px 1595px 0 0px rgba(255, 255, 255, 0.302), 87 | 1111px 1331px 0 0px rgba(255, 255, 255, 0.352), 88 | 1528px 173px 0 0px rgba(255, 255, 255, 0.343), 89 | 791px 671px 0 0px rgba(255, 255, 255, 0.505), 90 | 1378px 831px 0 0px rgba(255, 255, 255, 0.987), 91 | 1758px 910px 0 0px rgba(255, 255, 255, 0.793), 92 | 1501px 105px 0 0px rgba(255, 255, 255, 0.435), 93 | 468px 1029px 0 0px rgba(255, 255, 255, 0.679), 94 | 768px 675px 0 0px rgba(255, 255, 255, 0.336), 95 | 963px 794px 0 0px rgba(255, 255, 255, 0.723), 96 | 270px 457px 0 0px rgba(255, 255, 255, 0.958), 97 | 301px 1396px 0 0px rgba(255, 255, 255, 0.413), 98 | 109px 101px 0 0px rgba(255, 255, 255, 0.034), 99 | 505px 277px 0 0px rgba(255, 255, 255, 0.276), 100 | 1791px 191px 0 0px rgba(255, 255, 255, 0.904), 101 | 1429px 201px 0 0px rgba(255, 255, 255, 0.838), 102 | 467px 619px 0 0px rgba(255, 255, 255, 0.24), 103 | 1332px 67px 0 0px rgba(255, 255, 255, 0.161), 104 | 1665px 744px 0 0px rgba(255, 255, 255, 0.436), 105 | 162px 1645px 0 0px rgba(255, 255, 255, 0.927), 106 | 1326px 830px 0 0px rgba(255, 255, 255, 0.959), 107 | 551px 464px 0 0px rgba(255, 255, 255, 0.609), 108 | 1575px 1354px 0 0px rgba(255, 255, 255, 0.479), 109 | 1393px 907px 0 0px rgba(255, 255, 255, 0.623), 110 | 979px 161px 0 0px rgba(255, 255, 255, 0.3), 111 | 784px 1687px 0 0px rgba(255, 255, 255, 0.962), 112 | 731px 1483px 0 0px rgba(255, 255, 255, 0.299), 113 | 305px 579px 0 0px rgba(255, 255, 255, 0.664), 114 | 1590px 868px 0 0px rgba(255, 255, 255, 0.989), 115 | 34px 354px 0 0px rgba(255, 255, 255, 0.196), 116 | 1310px 539px 0 0px rgba(255, 255, 255, 0.007), 117 | 808px 309px 0 0px rgba(255, 255, 255, 0.344), 118 | 1061px 946px 0 0px rgba(255, 255, 255, 0.024), 119 | 98px 1262px 0 0px rgba(255, 255, 255, 0.896), 120 | 1280px 123px 0 0px rgba(255, 255, 255, 0.595), 121 | 266px 1183px 0 0px rgba(255, 255, 255, 0.385), 122 | 1700px 550px 0 0px rgba(255, 255, 255, 0.837), 123 | 1309px 570px 0 0px rgba(255, 255, 255, 0.69), 124 | 899px 1246px 0 0px rgba(255, 255, 255, 0.8), 125 | 876px 1045px 0 0px rgba(255, 255, 255, 0.796), 126 | 264px 496px 0 0px rgba(255, 255, 255, 0.916), 127 | 988px 231px 0 0px rgba(255, 255, 255, 0.34), 128 | 1142px 409px 0 0px rgba(255, 255, 255, 0.65), 129 | 1537px 45px 0 0px rgba(255, 255, 255, 0.761), 130 | 607px 21px 0 0px rgba(255, 255, 255, 0.979), 131 | 1574px 1738px 0 0px rgba(255, 255, 255, 0.8), 132 | 719px 1373px 0 0px rgba(255, 255, 255, 0.447), 133 | 362px 347px 0 0px rgba(255, 255, 255, 0.438), 134 | 1710px 825px 0 0px rgba(255, 255, 255, 0.636), 135 | 1629px 476px 0 0px rgba(255, 255, 255, 0.092), 136 | 732px 513px 0 0px rgba(255, 255, 255, 0.381), 137 | 1165px 356px 0 0px rgba(255, 255, 255, 0.198), 138 | 1px 1186px 0 0px rgba(255, 255, 255, 0.745), 139 | 906px 12px 0 0px rgba(255, 255, 255, 0.016), 140 | 442px 1632px 0 0px rgba(255, 255, 255, 0.413), 141 | 1214px 1362px 0 0px rgba(255, 255, 255, 0.024), 142 | 214px 641px 0 0px rgba(255, 255, 255, 0.79), 143 | 1438px 1323px 0 0px rgba(255, 255, 255, 0.191), 144 | 250px 1156px 0 0px rgba(255, 255, 255, 0.5), 145 | 1733px 1251px 0 0px rgba(255, 255, 255, 0.196), 146 | 1009px 1416px 0 0px rgba(255, 255, 255, 0.897), 147 | 1502px 1094px 0 0px rgba(255, 255, 255, 0.635), 148 | 1424px 1424px 0 0px rgba(255, 255, 255, 0.681), 149 | 176px 1032px 0 0px rgba(255, 255, 255, 0.278), 150 | 649px 133px 0 0px rgba(255, 255, 255, 0.744), 151 | 217px 108px 0 0px rgba(255, 255, 255, 0.347), 152 | 804px 614px 0 0px rgba(255, 255, 255, 0.859), 153 | 1060px 1193px 0 0px rgba(255, 255, 255, 0.687), 154 | 1333px 824px 0 0px rgba(255, 255, 255, 0.582), 155 | 1394px 1481px 0 0px rgba(255, 255, 255, 0.372), 156 | 1730px 1681px 0 0px rgba(255, 255, 255, 0.181), 157 | 1302px 173px 0 0px rgba(255, 255, 255, 0.964), 158 | 1623px 254px 0 0px rgba(255, 255, 255, 0.651), 159 | 1730px 315px 0 0px rgba(255, 255, 255, 0.827), 160 | 1733px 1361px 0 0px rgba(255, 255, 255, 0.492), 161 | 1767px 133px 0 0px rgba(255, 255, 255, 0.642), 162 | 637px 1586px 0 0px rgba(255, 255, 255, 0.635), 163 | 1545px 1295px 0 0px rgba(255, 255, 255, 0.106), 164 | 1732px 1153px 0 0px rgba(255, 255, 255, 0.595), 165 | 125px 674px 0 0px rgba(255, 255, 255, 0.263), 166 | 810px 1036px 0 0px rgba(255, 255, 255, 0.281), 167 | 1213px 780px 0 0px rgba(255, 255, 255, 0.105), 168 | 1253px 402px 0 0px rgba(255, 255, 255, 0.321), 169 | 1620px 1747px 0 0px rgba(255, 255, 255, 0.695), 170 | 146px 1621px 0 0px rgba(255, 255, 255, 0.214), 171 | 416px 113px 0 0px rgba(255, 255, 255, 0.773), 172 | 1505px 1750px 0 0px rgba(255, 255, 255, 0.865), 173 | 1084px 1790px 0 0px rgba(255, 255, 255, 0.511), 174 | 838px 1072px 0 0px rgba(255, 255, 255, 0.12), 175 | 552px 1333px 0 0px rgba(255, 255, 255, 0.539), 176 | 843px 1660px 0 0px rgba(255, 255, 255, 0.475), 177 | 826px 633px 0 0px rgba(255, 255, 255, 0.988), 178 | 1682px 623px 0 0px rgba(255, 255, 255, 0.1), 179 | 940px 948px 0 0px rgba(255, 255, 255, 0.33), 180 | 1731px 686px 0 0px rgba(255, 255, 255, 0.945), 181 | 1387px 117px 0 0px rgba(255, 255, 255, 0.368), 182 | 1243px 296px 0 0px rgba(255, 255, 255, 0.635), 183 | 345px 517px 0 0px rgba(255, 255, 255, 0.274), 184 | 56px 567px 0 0px rgba(255, 255, 255, 0.917), 185 | 485px 441px 0 0px rgba(255, 255, 255, 0.117), 186 | 1612px 97px 0 0px rgba(255, 255, 255, 0.541), 187 | 640px 435px 0 0px rgba(255, 255, 255, 0.715), 188 | 1145px 214px 0 0px rgba(255, 255, 255, 0.46), 189 | 454px 1326px 0 0px rgba(255, 255, 255, 0.477), 190 | 927px 258px 0 0px rgba(255, 255, 255, 0.164), 191 | 752px 142px 0 0px rgba(255, 255, 255, 0.923), 192 | 77px 1254px 0 0px rgba(255, 255, 255, 0.361), 193 | 224px 1083px 0 0px rgba(255, 255, 255, 0.303), 194 | 401px 1010px 0 0px rgba(255, 255, 255, 0.559), 195 | 947px 1657px 0 0px rgba(255, 255, 255, 0.264), 196 | 421px 1226px 0 0px rgba(255, 255, 255, 0.074), 197 | 1777px 228px 0 0px rgba(255, 255, 255, 0.308), 198 | 73px 1681px 0 0px rgba(255, 255, 255, 0.56), 199 | 712px 1072px 0 0px rgba(255, 255, 255, 0.414), 200 | 1428px 1565px 0 0px rgba(255, 255, 255, 0.773), 201 | 59px 532px 0 0px rgba(255, 255, 255, 0.062), 202 | 1362px 1105px 0 0px rgba(255, 255, 255, 0.54), 203 | 1582px 986px 0 0px rgba(255, 255, 255, 0.724), 204 | 508px 624px 0 0px rgba(255, 255, 255, 0.228), 205 | 305px 1502px 0 0px rgba(255, 255, 255, 0.787), 206 | 1413px 1105px 0 0px rgba(255, 255, 255, 0.397), 207 | 1131px 818px 0 0px rgba(255, 255, 255, 0.309), 208 | 360px 765px 0 0px rgba(255, 255, 255, 0.157), 209 | 1170px 436px 0 0px rgba(255, 255, 255, 0.308), 210 | 508px 1489px 0 0px rgba(255, 255, 255, 0.434), 211 | 915px 425px 0 0px rgba(255, 255, 255, 0.889), 212 | 1523px 966px 0 0px rgba(255, 255, 255, 0.443), 213 | 1023px 718px 0 0px rgba(255, 255, 255, 0.856), 214 | 616px 1044px 0 0px rgba(255, 255, 255, 0.914), 215 | 735px 707px 0 0px rgba(255, 255, 255, 0.787), 216 | 1155px 1108px 0 0px rgba(255, 255, 255, 0.847), 217 | 198px 196px 0 0px rgba(255, 255, 255, 0.776), 218 | 30px 294px 0 0px rgba(255, 255, 255, 0.527), 219 | 1133px 1124px 0 0px rgba(255, 255, 255, 0.963), 220 | 455px 224px 0 0px rgba(255, 255, 255, 0.216), 221 | 658px 695px 0 0px rgba(255, 255, 255, 0.058), 222 | 1757px 274px 0 0px rgba(255, 255, 255, 0.081), 223 | 165px 671px 0 0px rgba(255, 255, 255, 0.928), 224 | 959px 1673px 0 0px rgba(255, 255, 255, 0.741), 225 | 859px 1315px 0 0px rgba(255, 255, 255, 0.167), 226 | 475px 709px 0 0px rgba(255, 255, 255, 0.154), 227 | 805px 1705px 0 0px rgba(255, 255, 255, 0.696), 228 | 1208px 653px 0 0px rgba(255, 255, 255, 0.381), 229 | 1543px 976px 0 0px rgba(255, 255, 255, 0.388), 230 | 153px 798px 0 0px rgba(255, 255, 255, 0.018), 231 | 1573px 1032px 0 0px rgba(255, 255, 255, 0.382), 232 | 1043px 697px 0 0px rgba(255, 255, 255, 0.294), 233 | 360px 1367px 0 0px rgba(255, 255, 255, 0.934), 234 | 1307px 1578px 0 0px rgba(255, 255, 255, 0.121), 235 | 1783px 1395px 0 0px rgba(255, 255, 255, 0.934), 236 | 514px 683px 0 0px rgba(255, 255, 255, 0.276), 237 | 1080px 1362px 0 0px rgba(255, 255, 255, 0.424), 238 | 1545px 761px 0 0px rgba(255, 255, 255, 0.698), 239 | 1408px 1342px 0 0px rgba(255, 255, 255, 0.37), 240 | 256px 690px 0 0px rgba(255, 255, 255, 0.118), 241 | 309px 438px 0 0px rgba(255, 255, 255, 0.666), 242 | 522px 654px 0 0px rgba(255, 255, 255, 0.323), 243 | 112px 1787px 0 0px rgba(255, 255, 255, 0.062), 244 | 955px 195px 0 0px rgba(255, 255, 255, 0.566), 245 | 1481px 1510px 0 0px rgba(255, 255, 255, 0.606), 246 | 683px 287px 0 0px rgba(255, 255, 255, 0.25), 247 | 757px 41px 0 0px rgba(255, 255, 255, 0.301), 248 | 1287px 1426px 0 0px rgba(255, 255, 255, 0.742), 249 | 1240px 1757px 0 0px rgba(255, 255, 255, 0.349), 250 | 377px 1307px 0 0px rgba(255, 255, 255, 0.509), 251 | 39px 6px 0 0px rgba(255, 255, 255, 0.871), 252 | 1645px 710px 0 0px rgba(255, 255, 255, 0.879), 253 | 997px 1022px 0 0px rgba(255, 255, 255, 0.411), 254 | 502px 1590px 0 0px rgba(255, 255, 255, 0.355), 255 | 397px 1330px 0 0px rgba(255, 255, 255, 0.922), 256 | 1789px 1239px 0 0px rgba(255, 255, 255, 0.275), 257 | 1669px 1485px 0 0px rgba(255, 255, 255, 0.826), 258 | 1028px 1039px 0 0px rgba(255, 255, 255, 0.724), 259 | 1685px 1302px 0 0px rgba(255, 255, 255, 0.794), 260 | 1571px 495px 0 0px rgba(255, 255, 255, 0.142), 261 | 1243px 1284px 0 0px rgba(255, 255, 255, 0.184), 262 | 247px 1030px 0 0px rgba(255, 255, 255, 0.709), 263 | 105px 1388px 0 0px rgba(255, 255, 255, 0.979), 264 | 1019px 942px 0 0px rgba(255, 255, 255, 0.032), 265 | 1745px 756px 0 0px rgba(255, 255, 255, 0.364), 266 | 698px 1497px 0 0px rgba(255, 255, 255, 0.949), 267 | 403px 57px 0 0px rgba(255, 255, 255, 0.928), 268 | 1175px 1107px 0 0px rgba(255, 255, 255, 0.149), 269 | 1133px 765px 0 0px rgba(255, 255, 255, 0.061), 270 | 931px 401px 0 0px rgba(255, 255, 255, 0.279), 271 | 394px 1212px 0 0px rgba(255, 255, 255, 0.352), 272 | 1558px 1420px 0 0px rgba(255, 255, 255, 0.102), 273 | 455px 181px 0 0px rgba(255, 255, 255, 0.999), 274 | 578px 1052px 0 0px rgba(255, 255, 255, 0.168), 275 | 94px 275px 0 0px rgba(255, 255, 255, 0.56), 276 | 627px 1370px 0 0px rgba(255, 255, 255, 0.543), 277 | 1080px 538px 0 0px rgba(255, 255, 255, 0.281), 278 | 256px 1128px 0 0px rgba(255, 255, 255, 0.234), 279 | 767px 880px 0 0px rgba(255, 255, 255, 0.356), 280 | 389px 83px 0 0px rgba(255, 255, 255, 0.696), 281 | 1026px 1662px 0 0px rgba(255, 255, 255, 0.979), 282 | 1493px 1751px 0 0px rgba(255, 255, 255, 0.344), 283 | 27px 157px 0 0px rgba(255, 255, 255, 0.274), 284 | 1493px 668px 0 0px rgba(255, 255, 255, 0.974), 285 | 1265px 1060px 0 0px rgba(255, 255, 255, 0.61), 286 | 1755px 1118px 0 0px rgba(255, 255, 255, 0.103), 287 | 776px 997px 0 0px rgba(255, 255, 255, 0.414), 288 | 116px 491px 0 0px rgba(255, 255, 255, 0.988), 289 | 473px 116px 0 0px rgba(255, 255, 255, 0.019), 290 | 770px 705px 0 0px rgba(255, 255, 255, 0.663), 291 | 1705px 928px 0 0px rgba(255, 255, 255, 0.09), 292 | 1187px 616px 0 0px rgba(255, 255, 255, 0.597), 293 | 186px 875px 0 0px rgba(255, 255, 255, 0.422), 294 | 1734px 616px 0 0px rgba(255, 255, 255, 0.358), 295 | 53px 769px 0 0px rgba(255, 255, 255, 0.78), 296 | 1204px 1310px 0 0px rgba(255, 255, 255, 0.91), 297 | 1538px 829px 0 0px rgba(255, 255, 255, 0.645), 298 | 1354px 1212px 0 0px rgba(255, 255, 255, 0.601), 299 | 387px 477px 0 0px rgba(255, 255, 255, 0.688), 300 | 1387px 1358px 0 0px rgba(255, 255, 255, 0.427), 301 | 1430px 1171px 0 0px rgba(255, 255, 255, 0.956), 302 | 1364px 1790px 0 0px rgba(255, 255, 255, 0.156), 303 | 517px 825px 0 0px rgba(255, 255, 255, 0.552), 304 | 156px 1240px 0 0px rgba(255, 255, 255, 0.698), 305 | 980px 86px 0 0px rgba(255, 255, 255, 0.007), 306 | 742px 1268px 0 0px rgba(255, 255, 255, 0.683), 307 | 1474px 1584px 0 0px rgba(255, 255, 255, 0.296), 308 | 1195px 1778px 0 0px rgba(255, 255, 255, 0.784), 309 | 1784px 141px 0 0px rgba(255, 255, 255, 0.842), 310 | 296px 60px 0 0px rgba(255, 255, 255, 0.835), 311 | 1313px 1196px 0 0px rgba(255, 255, 255, 0.821), 312 | 1053px 165px 0 0px rgba(255, 255, 255, 0.304), 313 | 1672px 1022px 0 0px rgba(255, 255, 255, 0.027), 314 | 1612px 153px 0 0px rgba(255, 255, 255, 0.914), 315 | 119px 472px 0 0px rgba(255, 255, 255, 0.142), 316 | 815px 863px 0 0px rgba(255, 255, 255, 0.276), 317 | 1139px 1189px 0 0px rgba(255, 255, 255, 0.24), 318 | 1232px 108px 0 0px rgba(255, 255, 255, 0.854), 319 | 1254px 1284px 0 0px rgba(255, 255, 255, 0.772), 320 | 410px 488px 0 0px rgba(255, 255, 255, 0.405), 321 | 1440px 1114px 0 0px rgba(255, 255, 255, 0.425), 322 | 681px 1345px 0 0px rgba(255, 255, 255, 0.825), 323 | 1634px 1680px 0 0px rgba(255, 255, 255, 0.966), 324 | 953px 331px 0 0px rgba(255, 255, 255, 0.093), 325 | 1570px 70px 0 0px rgba(255, 255, 255, 0.926), 326 | 1507px 1486px 0 0px rgba(255, 255, 255, 0.347), 327 | 71px 736px 0 0px rgba(255, 255, 255, 0.987), 328 | 1427px 1452px 0 0px rgba(255, 255, 255, 0.183), 329 | 413px 1024px 0 0px rgba(255, 255, 255, 0.652), 330 | 1668px 1766px 0 0px rgba(255, 255, 255, 0.684), 331 | 1744px 1644px 0 0px rgba(255, 255, 255, 0.233), 332 | 659px 1295px 0 0px rgba(255, 255, 255, 0.064), 333 | 1799px 933px 0 0px rgba(255, 255, 255, 0.029), 334 | 1603px 1536px 0 0px rgba(255, 255, 255, 0.348), 335 | 654px 1036px 0 0px rgba(255, 255, 255, 0.158), 336 | 779px 415px 0 0px rgba(255, 255, 255, 0.744), 337 | 1042px 1597px 0 0px rgba(255, 255, 255, 0.023), 338 | 1529px 583px 0 0px rgba(255, 255, 255, 0.133), 339 | 461px 740px 0 0px rgba(255, 255, 255, 0.879), 340 | 1354px 1112px 0 0px rgba(255, 255, 255, 0.236), 341 | 573px 1438px 0 0px rgba(255, 255, 255, 0.782), 342 | 1147px 886px 0 0px rgba(255, 255, 255, 0.07), 343 | 697px 1775px 0 0px rgba(255, 255, 255, 0.938), 344 | 1412px 714px 0 0px rgba(255, 255, 255, 0.566), 345 | 1497px 1713px 0 0px rgba(255, 255, 255, 0.295), 346 | 260px 1775px 0 0px rgba(255, 255, 255, 0.662), 347 | 168px 552px 0 0px rgba(255, 255, 255, 0.977), 348 | 52px 525px 0 0px rgba(255, 255, 255, 0.938), 349 | 1027px 569px 0 0px rgba(255, 255, 255, 0.494), 350 | 1333px 1079px 0 0px rgba(255, 255, 255, 0.611), 351 | 482px 28px 0 0px rgba(255, 255, 255, 0.603), 352 | 409px 360px 0 0px rgba(255, 255, 255, 0.041), 353 | 189px 903px 0 0px rgba(255, 255, 255, 0.276), 354 | 251px 1443px 0 0px rgba(255, 255, 255, 0.424), 355 | 1016px 1267px 0 0px rgba(255, 255, 255, 0.361), 356 | 229px 1350px 0 0px rgba(255, 255, 255, 0.6), 357 | 29px 1559px 0 0px rgba(255, 255, 255, 0.938), 358 | 1018px 1198px 0 0px rgba(255, 255, 255, 0.724), 359 | 739px 1391px 0 0px rgba(255, 255, 255, 0.143), 360 | 1372px 1433px 0 0px rgba(255, 255, 255, 0.557), 361 | 198px 1662px 0 0px rgba(255, 255, 255, 0.307), 362 | 1008px 213px 0 0px rgba(255, 255, 255, 0.51), 363 | 1548px 376px 0 0px rgba(255, 255, 255, 0.786), 364 | 329px 1199px 0 0px rgba(255, 255, 255, 0.364), 365 | 929px 862px 0 0px rgba(255, 255, 255, 0.913), 366 | 1333px 762px 0 0px rgba(255, 255, 255, 0.936), 367 | 18px 700px 0 0px rgba(255, 255, 255, 0.279), 368 | 1155px 1003px 0 0px rgba(255, 255, 255, 0.974), 369 | 1034px 720px 0 0px rgba(255, 255, 255, 0.484), 370 | 597px 463px 0 0px rgba(255, 255, 255, 0.342), 371 | 599px 1660px 0 0px rgba(255, 255, 255, 0.946), 372 | 655px 482px 0 0px rgba(255, 255, 255, 0.049), 373 | 1369px 872px 0 0px rgba(255, 255, 255, 0.678), 374 | 341px 1507px 0 0px rgba(255, 255, 255, 0.77), 375 | 827px 356px 0 0px rgba(255, 255, 255, 0.543), 376 | 911px 1225px 0 0px rgba(255, 255, 255, 0.416), 377 | 848px 1452px 0 0px rgba(255, 255, 255, 0.026), 378 | 1688px 1264px 0 0px rgba(255, 255, 255, 0.589), 379 | 733px 1605px 0 0px rgba(255, 255, 255, 0.088), 380 | 767px 590px 0 0px rgba(255, 255, 255, 0.339), 381 | 1366px 902px 0 0px rgba(255, 255, 255, 0.681), 382 | 614px 1019px 0 0px rgba(255, 255, 255, 0.058), 383 | 902px 326px 0 0px rgba(255, 255, 255, 0.384), 384 | 1505px 777px 0 0px rgba(255, 255, 255, 0.78), 385 | 1132px 868px 0 0px rgba(255, 255, 255, 0.863), 386 | 1008px 1047px 0 0px rgba(255, 255, 255, 0.727), 387 | 648px 567px 0 0px rgba(255, 255, 255, 0.1), 388 | 997px 373px 0 0px rgba(255, 255, 255, 0.18), 389 | 409px 608px 0 0px rgba(255, 255, 255, 0.894), 390 | 1227px 730px 0 0px rgba(255, 255, 255, 0.27), 391 | 257px 1681px 0 0px rgba(255, 255, 255, 0.186), 392 | 155px 1244px 0 0px rgba(255, 255, 255, 0.95), 393 | 996px 1678px 0 0px rgba(255, 255, 255, 0.105), 394 | 1348px 794px 0 0px rgba(255, 255, 255, 0.916), 395 | 42px 1092px 0 0px rgba(255, 255, 255, 0.386), 396 | 1388px 150px 0 0px rgba(255, 255, 255, 0.358), 397 | 1507px 10px 0 0px rgba(255, 255, 255, 0.12), 398 | 1342px 1572px 0 0px rgba(255, 255, 255, 0.837), 399 | 845px 1168px 0 0px rgba(255, 255, 255, 0.637), 400 | 570px 654px 0 0px rgba(255, 255, 255, 0.546), 401 | 1387px 824px 0 0px rgba(255, 255, 255, 0.594), 402 | 1572px 1306px 0 0px rgba(255, 255, 255, 0.414), 403 | 1250px 1772px 0 0px rgba(255, 255, 255, 0.894), 404 | 585px 1550px 0 0px rgba(255, 255, 255, 0.275), 405 | 524px 1335px 0 0px rgba(255, 255, 255, 0.587), 406 | 1684px 317px 0 0px rgba(255, 255, 255, 0.739), 407 | 929px 57px 0 0px rgba(255, 255, 255, 0.481), 408 | 1749px 1409px 0 0px rgba(255, 255, 255, 0.583), 409 | 861px 25px 0 0px rgba(255, 255, 255, 0.377), 410 | 927px 615px 0 0px rgba(255, 255, 255, 0.989), 411 | 202px 563px 0 0px rgba(255, 255, 255, 0.971), 412 | 55px 318px 0 0px rgba(255, 255, 255, 0.931), 413 | 1283px 1352px 0 0px rgba(255, 255, 255, 0.785), 414 | 1553px 411px 0 0px rgba(255, 255, 255, 0.713), 415 | 692px 1140px 0 0px rgba(255, 255, 255, 0.147), 416 | 599px 805px 0 0px rgba(255, 255, 255, 0.743), 417 | 1687px 588px 0 0px rgba(255, 255, 255, 0.467), 418 | 843px 1417px 0 0px rgba(255, 255, 255, 0.44), 419 | 704px 447px 0 0px rgba(255, 255, 255, 0.25), 420 | 1119px 1489px 0 0px rgba(255, 255, 255, 0.152), 421 | 688px 1757px 0 0px rgba(255, 255, 255, 0.813), 422 | 176px 1732px 0 0px rgba(255, 255, 255, 0.709), 423 | 426px 632px 0 0px rgba(255, 255, 255, 0.115), 424 | 1383px 487px 0 0px rgba(255, 255, 255, 0.578), 425 | 129px 663px 0 0px rgba(255, 255, 255, 0.883), 426 | 1366px 368px 0 0px rgba(255, 255, 255, 0.872), 427 | 1029px 988px 0 0px rgba(255, 255, 255, 0.233), 428 | 544px 155px 0 0px rgba(255, 255, 255, 0.408), 429 | 1611px 529px 0 0px rgba(255, 255, 255, 0.548), 430 | 641px 194px 0 0px rgba(255, 255, 255, 0.303), 431 | 548px 1354px 0 0px rgba(255, 255, 255, 0.589), 432 | 1777px 84px 0 0px rgba(255, 255, 255, 0.906), 433 | 100px 343px 0 0px rgba(255, 255, 255, 0.79), 434 | 1263px 485px 0 0px rgba(255, 255, 255, 0.005), 435 | 1557px 1127px 0 0px rgba(255, 255, 255, 0.242), 436 | 1033px 582px 0 0px rgba(255, 255, 255, 0.358), 437 | 1554px 1419px 0 0px rgba(255, 255, 255, 0.319), 438 | 326px 122px 0 0px rgba(255, 255, 255, 0.332), 439 | 317px 1505px 0 0px rgba(255, 255, 255, 0.774), 440 | 667px 763px 0 0px rgba(255, 255, 255, 0.15), 441 | 1760px 1379px 0 0px rgba(255, 255, 255, 0.706), 442 | 346px 1207px 0 0px rgba(255, 255, 255, 0.038), 443 | 469px 1663px 0 0px rgba(255, 255, 255, 0.673), 444 | 715px 162px 0 0px rgba(255, 255, 255, 0.897), 445 | 1749px 1418px 0 0px rgba(255, 255, 255, 0.969), 446 | 1309px 1651px 0 0px rgba(255, 255, 255, 0.788), 447 | 1723px 1660px 0 0px rgba(255, 255, 255, 0.266), 448 | 1457px 1364px 0 0px rgba(255, 255, 255, 0.614), 449 | 309px 674px 0 0px rgba(255, 255, 255, 0.309), 450 | 1737px 628px 0 0px rgba(255, 255, 255, 0.026), 451 | 624px 204px 0 0px rgba(255, 255, 255, 0.897), 452 | 1731px 860px 0 0px rgba(255, 255, 255, 0.773), 453 | 1487px 508px 0 0px rgba(255, 255, 255, 0.337), 454 | 1036px 977px 0 0px rgba(255, 255, 255, 0.335), 455 | 1578px 1702px 0 0px rgba(255, 255, 255, 0.885), 456 | 1585px 1356px 0 0px rgba(255, 255, 255, 0.769), 457 | 922px 1507px 0 0px rgba(255, 255, 255, 0.433), 458 | 660px 1219px 0 0px rgba(255, 255, 255, 0.595), 459 | 1770px 1513px 0 0px rgba(255, 255, 255, 0.292), 460 | 1717px 236px 0 0px rgba(255, 255, 255, 0.533), 461 | 566px 16px 0 0px rgba(255, 255, 255, 0.193), 462 | 681px 862px 0 0px rgba(255, 255, 255, 0.69), 463 | 1304px 1384px 0 0px rgba(255, 255, 255, 0.376), 464 | 135px 449px 0 0px rgba(255, 255, 255, 0.532), 465 | 1714px 1560px 0 0px rgba(255, 255, 255, 0.339), 466 | 1599px 1646px 0 0px rgba(255, 255, 255, 0.262), 467 | 680px 566px 0 0px rgba(255, 255, 255, 0.086), 468 | 416px 470px 0 0px rgba(255, 255, 255, 0.997), 469 | 1665px 1547px 0 0px rgba(255, 255, 255, 0.519), 470 | 1246px 373px 0 0px rgba(255, 255, 255, 0.601), 471 | 449px 1620px 0 0px rgba(255, 255, 255, 0.184), 472 | 256px 217px 0 0px rgba(255, 255, 255, 0.578), 473 | 1563px 695px 0 0px rgba(255, 255, 255, 0.92), 474 | 1251px 316px 0 0px rgba(255, 255, 255, 0.588), 475 | 688px 1367px 0 0px rgba(255, 255, 255, 0.867), 476 | 1767px 1030px 0 0px rgba(255, 255, 255, 0.445), 477 | 836px 890px 0 0px rgba(255, 255, 255, 0.979), 478 | 1075px 148px 0 0px rgba(255, 255, 255, 0.418), 479 | 738px 757px 0 0px rgba(255, 255, 255, 0.134), 480 | 1228px 1740px 0 0px rgba(255, 255, 255, 0.118), 481 | 738px 468px 0 0px rgba(255, 255, 255, 0.976), 482 | 603px 810px 0 0px rgba(255, 255, 255, 0.895), 483 | 932px 1009px 0 0px rgba(255, 255, 255, 0.797), 484 | 1033px 976px 0 0px rgba(255, 255, 255, 0.266), 485 | 1332px 1498px 0 0px rgba(255, 255, 255, 0.77), 486 | 1732px 851px 0 0px rgba(255, 255, 255, 0.966), 487 | 572px 213px 0 0px rgba(255, 255, 255, 0.403), 488 | 258px 434px 0 0px rgba(255, 255, 255, 0.189), 489 | 1726px 1735px 0 0px rgba(255, 255, 255, 0.026), 490 | 519px 662px 0 0px rgba(255, 255, 255, 0.156), 491 | 1015px 639px 0 0px rgba(255, 255, 255, 0.904), 492 | 833px 927px 0 0px rgba(255, 255, 255, 0.926), 493 | 1723px 302px 0 0px rgba(255, 255, 255, 0.461), 494 | 334px 855px 0 0px rgba(255, 255, 255, 0.782), 495 | 220px 490px 0 0px rgba(255, 255, 255, 0.177), 496 | 134px 465px 0 0px rgba(255, 255, 255, 0.922), 497 | 586px 1149px 0 0px rgba(255, 255, 255, 0.417), 498 | 22px 948px 0 0px rgba(255, 255, 255, 0.448), 499 | 192px 69px 0 0px rgba(255, 255, 255, 0.563), 500 | 1043px 88px 0 0px rgba(255, 255, 255, 0.371);`; 501 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 18 | Frontend Mentor | Planets fact site 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import { BrowserRouter as Router } from 'react-router-dom'; 3 | import App from './components/App/App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | -------------------------------------------------------------------------------- /src/pages/Earth/Earth.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Earth = () => { 5 | return ; 6 | }; 7 | 8 | export default Earth; 9 | -------------------------------------------------------------------------------- /src/pages/Earth/data.js: -------------------------------------------------------------------------------- 1 | import earthImage from '../../assets/images/planet-earth.svg'; 2 | import earthInternalImage from '../../assets/images/planet-earth-internal.svg'; 3 | import earthGeoImage from '../../assets/images/planet-earth-geology.png'; 4 | 5 | export const data = { 6 | name: 'Earth', 7 | overview: { 8 | content: 9 | "Third planet from the Sun and the only known planet to harbor life. About 29.2% of Earth's surface is land with remaining 70.8% is covered with water. Earth's distance from the Sun, physical properties and geological history have allowed life to evolve and thrive.", 10 | source: 'https://en.wikipedia.org/wiki/Earth', 11 | image: earthImage, 12 | }, 13 | structure: { 14 | content: 15 | "Earth's interior, like that of the other terrestrial planets, is divided into layers by their chemical or physical (rheological) properties. The outer layer is a chemically distinct silicate solid crust, which is underlain by a highly viscous solid mantle.", 16 | source: 'https://en.wikipedia.org/wiki/Earth#Internal_structure', 17 | image: earthInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | 'The total surface area of Earth is about 510 million km2. The continental crust consists of lower density material such as the igneous rocks granite and andesite. Less common is basalt, a denser volcanic rock that is the primary constituent of the ocean floors.', 22 | source: 'https://en.wikipedia.org/wiki/Earth#Surface', 23 | image: earthImage, 24 | geo: earthGeoImage, 25 | }, 26 | sectionColor: 'hsl(263, 67%, 51%)', 27 | desktopImgWidth: '450px', 28 | tabletImgWidth: '285px', 29 | mobileImgWidth: '173px', 30 | rotation: '0.99 Days', 31 | revolution: '365.26 Days', 32 | radius: '6,371 KM', 33 | temperature: '16°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/Jupiter/Jupiter.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Jupiter = () => { 5 | return ; 6 | }; 7 | 8 | export default Jupiter; 9 | -------------------------------------------------------------------------------- /src/pages/Jupiter/data.js: -------------------------------------------------------------------------------- 1 | import jupiterImage from '../../assets/images/planet-jupiter.svg'; 2 | import jupiterInternalImage from '../../assets/images/planet-jupiter-internal.svg'; 3 | import jupiterGeoImage from '../../assets/images/planet-jupiter-geology.png'; 4 | 5 | export const data = { 6 | name: 'Jupiter', 7 | overview: { 8 | content: 9 | 'Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass two and a half times that of all the other planets in the Solar System combined, but less than one-thousandth the mass of the Sun.', 10 | source: 'https://en.wikipedia.org/wiki/Jupiter', 11 | image: jupiterImage, 12 | }, 13 | structure: { 14 | content: 15 | "When the Juno arrived in 2016, it found that Jupiter has a very diffuse core that mixes into its mantle. A possible cause is an impact from a planet of about ten Earth masses a few million years after Jupiter's formation, which would have disrupted an originally solid Jovian core.", 16 | source: 'https://en.wikipedia.org/wiki/Jupiter#Internal_structure', 17 | image: jupiterInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | 'The best known feature of Jupiter is the Great Red Spot, a persistent anticyclonic storm located 22° south of the equator. It is known to have existed since at least 1831, and possibly since 1665.', 22 | source: 'https://en.wikipedia.org/wiki/Jupiter#Great_Red_Spot_and_other_vortices', 23 | image: jupiterImage, 24 | geo: jupiterGeoImage, 25 | }, 26 | sectionColor: 'hsl(2, 68%, 53%)', 27 | desktopImgWidth: '582px', 28 | tabletImgWidth: '369px', 29 | mobileImgWidth: '224px', 30 | rotation: '9.93 Hours', 31 | revolution: '11.86 Years', 32 | radius: '69,911 KM', 33 | temperature: '-108°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/Mars/Mars.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Mars = () => { 5 | return ; 6 | }; 7 | 8 | export default Mars; 9 | -------------------------------------------------------------------------------- /src/pages/Mars/data.js: -------------------------------------------------------------------------------- 1 | import marsImage from '../../assets/images/planet-mars.svg'; 2 | import marsInternalImage from '../../assets/images/planet-mars-internal.svg'; 3 | import marsGeoImage from '../../assets/images/planet-mars-geology.png'; 4 | 5 | export const data = { 6 | name: 'Mars', 7 | overview: { 8 | content: 9 | 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".', 10 | source: 'https://en.wikipedia.org/wiki/Mars', 11 | image: marsImage, 12 | }, 13 | structure: { 14 | content: 15 | 'Like Earth, Mars has differentiated into a dense metallic core overlaid by less dense materials. Scientists initially determined that the core is at least partially liquid. Current models of its interior imply a core consisting primarily of iron and nickel with about 16–17% sulfur.', 16 | source: 'https://en.wikipedia.org/wiki/Mars#Internal_structure', 17 | image: marsInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | 'Mars is a terrestrial planet whose surface consists of minerals containing silicon and oxygen, metals, and other elements that typically make up rock. The surface is primarily composed of tholeiitic basalt, although parts are more silica-rich than typical basalt.', 22 | source: 'https://en.wikipedia.org/wiki/Mars#Surface_geology', 23 | image: marsImage, 24 | geo: marsGeoImage, 25 | }, 26 | sectionColor: 'hsl(10, 63%, 51%)', 27 | desktopImgWidth: '336px', 28 | tabletImgWidth: '213px', 29 | mobileImgWidth: '129px', 30 | rotation: '1.03 Days', 31 | revolution: '1.88 Years', 32 | radius: '3,389.5 KM', 33 | temperature: '-28°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/Mercury/Mercury.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Mercury = () => { 5 | return ; 6 | }; 7 | 8 | export default Mercury; 9 | -------------------------------------------------------------------------------- /src/pages/Mercury/data.js: -------------------------------------------------------------------------------- 1 | import mercuryImage from '../../assets/images/planet-mercury.svg'; 2 | import mercuryInternalImage from '../../assets/images/planet-mercury-internal.svg'; 3 | import mercuryGeoImage from '../../assets/images/planet-mercury-geology.png'; 4 | 5 | export const data = { 6 | name: 'Mercury', 7 | overview: { 8 | content: 9 | "Mercury is the smallest planet in the Solar System and the closest to the Sun. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the Sun's planets. Mercury is one of four terrestrial planets in the Solar System, and is a rocky body like Earth.", 10 | source: 'https://en.wikipedia.org/wiki/Mercury_(planet)', 11 | image: mercuryImage, 12 | }, 13 | structure: { 14 | content: 15 | "Mercury appears to have a solid silicate crust and mantle overlying a solid, iron sulfide outer core layer, a deeper liquid core layer, and a solid inner core. The planet's density is the second highest in the Solar System at 5.427 g/cm3 , only slightly less than Earth's density.", 16 | source: 'https://en.wikipedia.org/wiki/Mercury_(planet)#Internal_structure', 17 | image: mercuryInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | "Mercury's surface is similar in appearance to that of the Moon, showing extensive mare-like plains and heavy cratering, indicating that it has been geologically inactive for billions of years. It is more heterogeneous than either Mars's or the Moon’s.", 22 | source: 'https://en.wikipedia.org/wiki/Mercury_(planet)#Surface_geology', 23 | image: mercuryImage, 24 | geo: mercuryGeoImage, 25 | }, 26 | sectionColor: 'hsl(194, 48%, 49%)', 27 | desktopImgWidth: '290px', 28 | tabletImgWidth: '184px', 29 | mobileImgWidth: '111px', 30 | rotation: '58.6 Days', 31 | revolution: '87.97 Days', 32 | radius: '2,439.7 KM', 33 | temperature: '430°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/Neptune/Neptune.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Neptune = () => { 5 | return ; 6 | }; 7 | 8 | export default Neptune; 9 | -------------------------------------------------------------------------------- /src/pages/Neptune/data.js: -------------------------------------------------------------------------------- 1 | import neptuneImage from '../../assets/images/planet-neptune.svg'; 2 | import neptuneInternalImage from '../../assets/images/planet-neptune-internal.svg'; 3 | import neptuneGeoImage from '../../assets/images/planet-neptune-geology.png'; 4 | 5 | export const data = { 6 | name: 'Neptune', 7 | overview: { 8 | content: 9 | 'Neptune is the eighth and farthest-known Solar planet from the Sun. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet. It is 17 times the mass of Earth, more massive than its near-twin Uranus.', 10 | source: 'https://en.wikipedia.org/wiki/Neptune', 11 | image: neptuneImage, 12 | }, 13 | structure: { 14 | content: 15 | "Neptune's internal structure resembles that of Uranus. Its atmosphere forms about 5% to 10% of its mass and extends perhaps 10% to 20% of the way towards the core. Increasing concentrations of methane, ammonia and water are found in the lower regions.", 16 | source: 'https://en.wikipedia.org/wiki/Neptune#Internal_structure', 17 | image: neptuneInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | "Neptune's atmosphere is 80% hydrogen and 19% helium. A trace amount of methane is also present. Prominent absorption bands of methane exist at wavelengths above 600 nm, in the red and infrared portion of the spectrum.", 22 | source: 'https://en.wikipedia.org/wiki/Neptune#Atmosphere', 23 | image: neptuneImage, 24 | geo: neptuneGeoImage, 25 | }, 26 | sectionColor: 'hsl(222, 87%, 56%)', 27 | desktopImgWidth: '450px', 28 | tabletImgWidth: '285px', 29 | mobileImgWidth: '173px', 30 | rotation: '16.08 Hours', 31 | revolution: '164.79 Years', 32 | radius: '24,622 KM', 33 | temperature: '-201°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/Saturn/Saturn.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Saturn = () => { 5 | return ; 6 | }; 7 | 8 | export default Saturn; 9 | -------------------------------------------------------------------------------- /src/pages/Saturn/data.js: -------------------------------------------------------------------------------- 1 | import saturnImage from '../../assets/images/planet-saturn.svg'; 2 | import saturnInternalImage from '../../assets/images/planet-saturn-internal.svg'; 3 | import saturnGeoImage from '../../assets/images/planet-saturn-geology.png'; 4 | 5 | export const data = { 6 | name: 'Saturn', 7 | overview: { 8 | content: 9 | 'Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius of about nine and a half times that of Earth. It only has one-eighth the average density of Earth.', 10 | source: 'https://en.wikipedia.org/wiki/Saturn', 11 | image: saturnImage, 12 | }, 13 | structure: { 14 | content: 15 | "Despite consisting mostly of hydrogen and helium, most of Saturn's mass is not in the gas phase, because hydrogen becomes a non-ideal liquid when the density is above 0.01 g/cm3, which is reached at a radius containing 99.9% of Saturn's mass.", 16 | source: 'https://en.wikipedia.org/wiki/Saturn#Internal_structure', 17 | image: saturnInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | "The outer atmosphere of Saturn contains 96.3% molecular hydrogen and 3.25% helium by volume. The planet's most famous feature is its prominent ring system, which is composed mostly of ice particles with a smaller amount of rocky debris and dust.", 22 | source: 'https://en.wikipedia.org/wiki/Saturn#Atmosphere', 23 | image: saturnImage, 24 | geo: saturnGeoImage, 25 | }, 26 | sectionColor: 'hsl(17, 73%, 46%)', 27 | desktopImgWidth: '666px', 28 | tabletImgWidth: '422px', 29 | mobileImgWidth: '256px', 30 | rotation: '10.8 Hours', 31 | revolution: '29.46 Years', 32 | radius: '58,232 KM', 33 | temperature: '-138°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/Uranus/Uranus.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Uranus = () => { 5 | return ; 6 | }; 7 | 8 | export default Uranus; 9 | -------------------------------------------------------------------------------- /src/pages/Uranus/data.js: -------------------------------------------------------------------------------- 1 | import uranusImage from '../../assets/images/planet-uranus.svg'; 2 | import uranusInternalImage from '../../assets/images/planet-uranus-internal.svg'; 3 | import uranusGeoImage from '../../assets/images/planet-uranus-geology.png'; 4 | 5 | export const data = { 6 | name: 'Uranus', 7 | overview: { 8 | content: 9 | 'Uranus is the seventh planet from the Sun. Its name is a reference to the Greek god of the sky, Uranus according to Greek mythology, was the great-grandfather of Ares. It has the third-largest planetary radius and fourth-largest planetary mass in the Solar System.', 10 | source: 'https://en.wikipedia.org/wiki/Uranus', 11 | image: uranusImage, 12 | }, 13 | structure: { 14 | content: 15 | "The standard model of Uranus's structure is that it consists of three layers: a rocky (silicate/iron–nickel) core in the centre, an icy mantle in the middle and an outer gaseous hydrogen/helium envelope. The core is relatively small, with a mass of only 0.55 Earth masses.", 16 | source: 'https://en.wikipedia.org/wiki/Uranus#Internal_structure', 17 | image: uranusInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | "The composition of Uranus's atmosphere is different from its bulk, consisting mainly of molecular hydrogen and helium. The helium molar fraction, i.e. the number of helium atoms per molecule of gas, is 0.15±0.03 in the upper troposphere.", 22 | source: 'https://en.wikipedia.org/wiki/Uranus#Atmosphere', 23 | image: uranusImage, 24 | geo: uranusGeoImage, 25 | }, 26 | sectionColor: 'hsl(169, 73%, 44%)', 27 | desktopImgWidth: '458px', 28 | tabletImgWidth: '290px', 29 | mobileImgWidth: '176px', 30 | rotation: '17.2 Hours', 31 | revolution: '84 Years', 32 | radius: '25,362 KM', 33 | temperature: '-195°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/Venus/Venus.js: -------------------------------------------------------------------------------- 1 | import PlanetSection from '../../components/PlanetSection/PlanetSection'; 2 | import { data } from './data'; 3 | 4 | const Venus = () => { 5 | return ; 6 | }; 7 | 8 | export default Venus; 9 | -------------------------------------------------------------------------------- /src/pages/Venus/data.js: -------------------------------------------------------------------------------- 1 | import venusImage from '../../assets/images/planet-venus.svg'; 2 | import venusInternalImage from '../../assets/images/planet-venus-internal.svg'; 3 | import venusGeoImage from '../../assets/images/planet-venus-geology.png'; 4 | 5 | export const data = { 6 | name: 'Venus', 7 | overview: { 8 | content: 9 | "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the brightest natural object in Earth's night sky after the Moon, Venus can cast shadows and can be, on rare occasions, visible to the naked eye in broad daylight.", 10 | source: 'https://en.wikipedia.org/wiki/Venus', 11 | image: venusImage, 12 | }, 13 | structure: { 14 | content: 15 | 'The similarity in size and density between Venus and Earth suggests they share a similar internal structure: a core, mantle, and crust. Like that of Earth, Venusian core is most likely at least partially liquid because the two planets have been cooling at about the same rate.', 16 | source: 'https://en.wikipedia.org/wiki/Venus#Internal_structure', 17 | image: venusInternalImage, 18 | }, 19 | geology: { 20 | content: 21 | 'Much of the Venusian surface appears to have been shaped by volcanic activity. Venus has several times as many volcanoes as Earth, and it has 167 large volcanoes that are over 100 km (60 mi) across. The only volcanic complex of this size on Earth is the Big Island of Hawaii.', 22 | source: 'https://en.wikipedia.org/wiki/Venus#Surface_geology', 23 | image: venusImage, 24 | geo: venusGeoImage, 25 | }, 26 | sectionColor: 'hsl(33, 82%, 61%)', 27 | desktopImgWidth: '400px', 28 | tabletImgWidth: '253px', 29 | mobileImgWidth: '154px', 30 | rotation: '243 Days', 31 | revolution: '224.7 Days', 32 | radius: '6,051.8 KM', 33 | temperature: '471°c', 34 | }; 35 | -------------------------------------------------------------------------------- /src/selection.json: -------------------------------------------------------------------------------- 1 | {"IcoMoonType":"selection","icons":[{"icon":{"paths":["M115.5-30.167l-60.333 60.333 311.167 311.167-311.167 311.167 60.333 60.333 371.5-371.5z"],"attrs":[{"opacity":0.4}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["icon-chevron1"]},"attrs":[{"opacity":0.4}],"properties":{"order":105,"id":1,"name":"icon-chevron1","prevSize":32,"code":59648},"setIdx":0,"setId":6,"iconIdx":0},{"icon":{"paths":["M967.68 56.32c-37.547-37.547-82.773-56.32-135.68-56.32h-640c-52.907 0-98.133 18.773-135.68 56.32s-56.32 82.773-56.32 135.68v640c0 52.907 18.773 98.133 56.32 135.68s82.773 56.32 135.68 56.32h640c52.907 0 98.133-18.773 135.68-56.32s56.32-82.773 56.32-135.68v-640c0-52.907-18.773-98.133-56.32-135.68zM853.333 533.333c0.028 0.556 0.043 1.207 0.043 1.861 0 17.062-10.722 31.619-25.796 37.301l-0.274 0.091c-4.914 2.056-10.616 3.3-16.595 3.413l-0.045 0.001c-0.273 0.007-0.595 0.011-0.918 0.011-11.496 0-21.85-4.888-29.096-12.7l-0.023-0.025-96-96-355.925 356.011c-7.489 7.841-18.026 12.716-29.701 12.716-0.118 0-0.236-0-0.354-0.001l0.018 0c-0.111 0.001-0.241 0.002-0.372 0.002-11.664 0-22.19-4.876-29.65-12.7l-0.016-0.016-67.925-68.011c-7.84-7.475-12.716-18.001-12.716-29.664 0-0.101 0-0.202 0.001-0.303l-0 0.015c-0.001-0.111-0.002-0.241-0.002-0.372 0-11.664 4.876-22.19 12.7-29.65l0.016-0.016 356.011-356.011-96-96c-13.824-12.8-16.896-28.416-9.387-46.592 5.772-15.35 20.331-26.074 37.394-26.074 0.684 0 1.364 0.017 2.040 0.051l-0.095-0.004h320c11.52 0 21.589 4.267 30.037 12.629 7.791 7.469 12.632 17.961 12.632 29.584 0 0.159-0.001 0.318-0.003 0.477l0-0.024v320z"],"attrs":[{"fill":"rgb(255, 255, 255)","opacity":0.5}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["source"]},"attrs":[{"fill":"rgb(255, 255, 255)","opacity":0.5}],"properties":{"order":104,"id":0,"name":"source","prevSize":32,"code":59649},"setIdx":0,"setId":6,"iconIdx":1}],"height":1024,"metadata":{"name":"planets-fact-icons"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"i-","metadata":{"fontFamily":"planets-fact-icons","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":true,"selector":"i","classSelector":".icon","showMetrics":false,"showMetadata":false,"cssVars":false,"cssVarsFormat":"scss","noie8":true,"ie7":false,"showVersion":false,"flutter":false,"includeMetadata":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon","height":32,"columns":16,"margin":16,"minifyJs":true},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"YWUwNDNmZDBkYTA4NTk4ZTY5MGRhZjU2Yzc4MDQ4NzYjMSMxNjE3NDY0NjcxIyMj"}}} -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix'); 2 | 3 | // Compile modern JavaScript and copy index.html / assets 4 | mix.js('src/index.js', 'index.js').react().setPublicPath('dist'); 5 | mix.copy('src/index.html', 'dist/index.html'); 6 | mix.copy('src/assets/images', 'dist/images'); 7 | 8 | // Disable success notifications 9 | mix.disableSuccessNotifications(); 10 | --------------------------------------------------------------------------------