From 4a10204c9785d8e802752d91ba7b6ba1bbfafade Mon Sep 17 00:00:00 2001 From: 12Gustavo21 Date: Sun, 3 Mar 2024 15:20:36 -0300 Subject: [PATCH] feat: same new error page for the 404 and 500 status --- src/assets/pages/about/index.js | 12 +- src/assets/pages/contact/index.js | 9 +- src/assets/pages/{error500 => error}/index.js | 35 +- src/assets/pages/error/style.js | 152 ++++++++ src/assets/pages/error404/index.js | 58 --- src/assets/pages/error404/style.js | 346 ------------------ src/assets/pages/error500/style.js | 71 ---- src/assets/pages/home/index.js | 14 +- src/assets/pages/projects/index.js | 9 +- src/assets/pages/techStack/index.js | 9 +- src/assets/services/routes/index.js | 13 +- 11 files changed, 230 insertions(+), 498 deletions(-) rename src/assets/pages/{error500 => error}/index.js (66%) create mode 100644 src/assets/pages/error/style.js delete mode 100644 src/assets/pages/error404/index.js delete mode 100644 src/assets/pages/error404/style.js delete mode 100644 src/assets/pages/error500/style.js diff --git a/src/assets/pages/about/index.js b/src/assets/pages/about/index.js index cabca31..0aad6af 100644 --- a/src/assets/pages/about/index.js +++ b/src/assets/pages/about/index.js @@ -14,7 +14,7 @@ import AOS from "aos"; import "aos/dist/aos.css"; //Pages -import Error from "../error500"; +import Error from "../error"; //Components import Layout from "../../components/layout"; @@ -130,7 +130,15 @@ function Index() { const { data, loading, error } = useQuery(ABOUT_QUERY); if (loading) return ; - if (error) return ; + if (error) + return ( + We are working on it. Ok? :)" + } + /> + ); const { about } = data; diff --git a/src/assets/pages/contact/index.js b/src/assets/pages/contact/index.js index 3abfa2a..d3fe11e 100644 --- a/src/assets/pages/contact/index.js +++ b/src/assets/pages/contact/index.js @@ -6,7 +6,7 @@ import Loading from "../../components/loading"; import Ghost from "../../components/ghost"; //Pages -import Error from "../error500"; +import Error from "../error"; //EmailJs import emailjs from "@emailjs/browser"; @@ -76,7 +76,12 @@ export default function Index() { const { data, loading, error } = useQuery(CONTACT_QUERY); if (loading) return ; - if (error) return ; + if (error) + return ( + + ); const { contact } = data; diff --git a/src/assets/pages/error500/index.js b/src/assets/pages/error/index.js similarity index 66% rename from src/assets/pages/error500/index.js rename to src/assets/pages/error/index.js index c9090f2..bf90ffd 100644 --- a/src/assets/pages/error500/index.js +++ b/src/assets/pages/error/index.js @@ -3,7 +3,10 @@ import React, { useEffect } from "react"; //Style import * as S from "./style"; -export default function Error() { +//React router dom +import { Link } from "react-router-dom"; + +export default function Error({ error, backToHome }) { useEffect(() => { const main = document.querySelector("main"); main.addEventListener("mousemove", function (e) { @@ -19,9 +22,11 @@ export default function Error() { }, []); const renderEyes = () => { + const windowWidth = window.innerWidth; + const numLayers = 5; - const numEyesPerLayer = 30; - const maxRadius = 500; + const numEyesPerLayer = windowWidth < 768 ? 20 : 30; + const maxRadius = windowWidth < 768 ? 400 : 500; const layerMultipliers = [6, 7, 3, 4, 5, 1, 3, 8, 7]; @@ -58,10 +63,26 @@ export default function Error() { {renderEyes()} -

ERRO 500

-

- Sorry, something went wrong. We are working on it. Ok? :) -

+

ERROR {error}

+ {error === 404 ? ( +

+ It seems like we couldn't find + the page you were looking for +

+ ) : ( +

+ Sorry, something went wrong. We are working on it. + Ok? :) +

+ )} + {backToHome ? ( + + + Go back + + + + ) : null} diff --git a/src/assets/pages/error/style.js b/src/assets/pages/error/style.js new file mode 100644 index 0000000..a86dad0 --- /dev/null +++ b/src/assets/pages/error/style.js @@ -0,0 +1,152 @@ +import styled, { keyframes } from "styled-components"; + +const ani = keyframes` + from { + -webkit-mask-position: 0 0; + mask-position: 0 0; + } + + to { + -webkit-mask-position: 100% 0; + mask-position: 100% 0; + } +`; + +const ani2 = keyframes` + from { + -webkit-mask-position: 100% 0; + mask-position: 100% 0; + } + + to { + -webkit-mask-position: 0 0; + mask-position: 0 0; + } +`; + +export const Main = styled.main` + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: #0f1927; + position: fixed; + z-index: 2; +`; + +export const EyesWrapper = styled.div` + width: 100%; + height: 100vh; + margin: 2rem 4rem 0 0; + position: relative; + + .container { + width: 6.25rem; + height: 6.25rem; + position: absolute; + + .eye { + position: relative; + display: inline-block; + border-radius: 50%; + height: 1.875rem; + width: 1.875rem; + background: #ccc; + } + .eye:after { + content: ""; + position: absolute; + bottom: 1.0625rem; + right: 0.625rem; + width: 0.625rem; + height: 0.625rem; + background: #0f1927; + border-radius: 50%; + } + } +`; + +export const ContentWrapper = styled.section` + width: 100%; + height: 50vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + gap: 2rem; + top: -35rem; + + h1 { + color: #ccc; + font: 700 5rem "Amatic SC", sans-serif; + } + + p { + display: flex; + flex-direction: column; + align-items: center; + color: #ccc; + text-align: center; + font: 400 1.5rem/2.5rem "Poppins", sans-serif; + } + + @media only screen and (max-width: 768px) { + top: -32rem; + } + + @media only screen and (max-width: 375px) { + h1 { + font-size: 4rem; + } + + p { + font-size: 1.25rem; + } + } +`; + +export const ButtonWrapper = styled.div` + position: relative; + overflow: hidden; + border: 1px solid #ccc; + font-family: "Poppins", sans-serif; + font-weight: 300; + transition: 0.5s; + letter-spacing: 1px; + border-radius: 8px; + + button { + width: 9rem; + height: 3rem; + font: 900 1rem/2.5rem "Poppins", sans-serif; + letter-spacing: 1px; + background: #ccc; + -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png"); + mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png"); + -webkit-mask-size: 7100% 100%; + mask-size: 7100% 100%; + border: none; + color: #0f1927; + cursor: pointer; + -webkit-animation: ${ani2} 0.7s steps(70) forwards; + animation: ${ani2} 0.7s steps(70) forwards; + + &:hover { + -webkit-animation: ${ani} 0.7s steps(70) forwards; + animation: ${ani} 0.7s steps(70) forwards; + } + } + + span { + width: 100%; + font: 900 1rem/3rem "Poppins", sans-serif; + letter-spacing: 1px; + position: absolute; + color: #ccc; + text-align: center; + overflow: hidden; + } +`; diff --git a/src/assets/pages/error404/index.js b/src/assets/pages/error404/index.js deleted file mode 100644 index 8d759b8..0000000 --- a/src/assets/pages/error404/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; - -//React router dom -import { Link } from "react-router-dom"; - -//Style -import * as S from "./style"; - -//Components -import Forest from "../../components/forest"; - -export default function index() { - return ( - <> - - -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
Whoops!
-
- It seems like we couldn't find the page you were looking for -
-
- - Go back - -
- - - - - ); -} diff --git a/src/assets/pages/error404/style.js b/src/assets/pages/error404/style.js deleted file mode 100644 index 23ed081..0000000 --- a/src/assets/pages/error404/style.js +++ /dev/null @@ -1,346 +0,0 @@ -import styled, { keyframes } from "styled-components"; - -const DarkGreen = "#194022"; -const Purple = "#8C8AA7"; -const Orange = "#FF6000"; -const white = "#fff"; - -const shine = keyframes` - 0% {opacity: .2;} - 25% {opacity: .1;} - 50% {opacity: .2;} - 100% {opacity: .2;} -`; - -const upndown = keyframes` - 0% {transform: translateY(5px);} - 50% {transform: translateY(15px);} - 100% {transform: translateY(5px);} -`; - -const smallnbig = keyframes` - 0% {width: 90px;} - 50% {width: 100px;} - 100% {width: 90px;} -`; - -const blink = keyframes` - 21% { - transform: scale(1, 1); - } - 22% { - transform: scale(1, .1); - } - 23% { - transform: scale(1, 1); - } - 48% { - transform: scale(1, 1); - } - 49% { - transform: scale(1, .1); - } - 50% { - transform: scale(1, 1); - } -`; - -export const Main = styled.main` - width: 100%; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - position: fixed; - z-index: 2; -`; - -export const Box = styled.div` - width: 350px; - height: 100%; - max-height: 600px; - min-height: 450px; - background: ${DarkGreen}; - border-radius: 20px; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - padding: 30px 50px; - - .box_ghost { - padding: 15px 25px 25px; - position: absolute; - left: 50%; - top: 30%; - transform: translate(-50%, -30%); - - .symbol { - &:nth-child(1) { - opacity: 0.2; - animation: ${shine} 4s ease-in-out 3s infinite; - - &:before, - &:after { - content: ""; - width: 12px; - height: 4px; - background: ${white}; - position: absolute; - border-radius: 5px; - bottom: 65px; - left: 0; - } - &:before { - transform: rotate(45deg); - } - &:after { - transform: rotate(-45deg); - } - } - &:nth-child(2) { - position: absolute; - left: -5px; - top: 30px; - height: 18px; - width: 18px; - border: 4px solid; - border-radius: 50%; - border-color: $white; - opacity: 0.2; - animation: ${shine} 4s ease-in-out 1.3s infinite; - } - &:nth-child(3) { - opacity: 0.2; - animation: ${shine} 3s ease-in-out 0.5s infinite; - - &:before, - &:after { - content: ""; - width: 12px; - height: 4px; - background: ${white}; - position: absolute; - border-radius: 5px; - top: 5px; - left: 40px; - } - &:before { - transform: rotate(90deg); - } - &:after { - transform: rotate(180deg); - } - } - &:nth-child(4) { - opacity: 0.2; - animation: ${shine} 6s ease-in-out 1.6s infinite; - - &:before, - &:after { - content: ""; - width: 15px; - height: 4px; - background: ${white}; - position: absolute; - border-radius: 5px; - top: 10px; - right: 30px; - } - &:before { - transform: rotate(45deg); - } - &:after { - transform: rotate(-45deg); - } - } - &:nth-child(5) { - position: absolute; - right: 5px; - top: 40px; - height: 12px; - width: 12px; - border: 3px solid; - border-radius: 50%; - border-color: ${white}; - opacity: 0.2; - animation: ${shine} 1.7s ease-in-out 7s infinite; - } - &:nth-child(6) { - opacity: 0.2; - animation: ${shine} 2s ease-in-out 6s infinite; - - &:before, - &:after { - content: ""; - width: 15px; - height: 4px; - background: ${white}; - position: absolute; - border-radius: 5px; - bottom: 65px; - right: -5px; - } - &:before { - transform: rotate(90deg); - } - &:after { - transform: rotate(180deg); - } - } - } - - .box_ghost-container { - background: ${white}; - width: 100px; - height: 100px; - border-radius: 100px 100px 0 0; - position: relative; - margin: 0 auto; - animation: ${upndown} 3s ease-in-out infinite; - - .box_ghost-eyes { - position: absolute; - left: 1.26rem; - top: 2.3rem; - height: 12px; - width: 60px; - animation: ${blink} 5s infinite linear; - - .left { - width: 14px; - height: 14px; - background: ${DarkGreen}; - border-radius: 50%; - margin: 0 10px; - position: absolute; - left: 0; - } - .right { - width: 14px; - height: 14px; - background: ${DarkGreen}; - border-radius: 50%; - margin: 0 10px; - position: absolute; - right: 0; - } - } - - .box_ghost-mouth { - width: 1em; - height: 0.6em; - border-radius: 50px; - border: 0.2em solid ${DarkGreen}; - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; - position: relative; - top: 3.5rem; - left: 2.65rem; - transform: rotate(180deg); - } - - .box_ghost-bottom { - display: flex; - position: absolute; - top: 100%; - left: 0; - right: 0; - - div { - flex-grow: 1; - position: relative; - top: -10px; - height: 20px; - border-radius: 100%; - background-color: ${white}; - - &:nth-child(2n) { - top: -12px; - margin: 0 -0px; - border-top: 15px solid ${DarkGreen}; - background: transparent; - } - } - } - } - - .box_ghost-shadow { - height: 20px; - box-shadow: 0 50px 15px 5px ${Purple}; - opacity: .3; - border-radius: 50%; - margin: 0 auto; - animation: ${smallnbig} 3s ease-in-out infinite; - } - } - - .box_description { - position: absolute; - bottom: 30px; - left: 50%; - transform: translateX(-50%); - - .box_description-container { - color: ${white}; - text-align: center; - width: 200px; - height: 150px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - - .box_description-title { - font: 700 44px/0.5px "Amatic SC", sans-serif; - } - - .box_description-text { - color: ${Purple}; - font: 400 16px/20px "Poppins", sans-serif; - } - } - - .box_button { - display: block; - position: relative; - background: ${Orange}; - border: 1px solid transparent; - border-radius: 50px; - height: 50px; - text-align: center; - text-decoration: none; - color: ${white}; - font: 700 18px/50px "Poppins", sans-serif; - padding: 0 70px; - white-space: nowrap; - margin-top: 25px; - transition: background 0.5s ease; - overflow: hidden; - mask-image: radial-gradient(white, black); - - &:before { - content: ""; - position: absolute; - width: 20px; - height: 100px; - background: ${white}; - bottom: -25px; - left: 0; - border: 2px solid ${white}; - transform: translateX(-50px) rotate(45deg); - transition: transform 0.5s ease; - } - - &:hover { - background: transparent; - border-color: ${white}; - - &:before { - transform: translateX(250px) rotate(45deg); - } - } - } - } -`; diff --git a/src/assets/pages/error500/style.js b/src/assets/pages/error500/style.js deleted file mode 100644 index 1ccc5eb..0000000 --- a/src/assets/pages/error500/style.js +++ /dev/null @@ -1,71 +0,0 @@ -import styled from "styled-components"; - -export const Main = styled.main` - width: 100%; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background: #0f1927; - position: fixed; - z-index: 2; -`; - -export const EyesWrapper = styled.div` - width: 100%; - height: 100vh; - margin: 2rem 4rem 0 0; - position: relative; - - .container { - width: 6.25rem; - height: 6.25rem; - position: absolute; - - .eye { - position: relative; - display: inline-block; - border-radius: 50%; - height: 1.875rem; - width: 1.875rem; - background: #ccc; - } - .eye:after { - position: absolute; - bottom: 1.0625rem; - right: 0.625rem; - width: 0.625rem; - height: 0.625rem; - background: #000; - border-radius: 50%; - content: " "; - } - } -`; - -export const ContentWrapper = styled.section` - width: 100%; - height: 50vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - gap: 2rem; - top: -35rem; - - h1 { - color: #fff; - font: 700 5rem 'Amatic SC', sans-serif; - } - - p { - display: flex; - flex-direction: column; - align-items: center; - color: #fff; - text-align: center; - font: 400 1.5rem/2.5rem 'Poppins', sans-serif; - } -`; \ No newline at end of file diff --git a/src/assets/pages/home/index.js b/src/assets/pages/home/index.js index 4c6fa65..6491033 100644 --- a/src/assets/pages/home/index.js +++ b/src/assets/pages/home/index.js @@ -20,7 +20,7 @@ import { Helmet } from "react-helmet"; import { useLocation } from "react-router-dom"; //Pages -import Error from "../error500"; +import Error from "../error"; //Components import Layout from "../../components/layout"; @@ -48,7 +48,12 @@ export default function Home() { const { data, loading, error } = useQuery(HOME_QUERY); if (loading) return ; - if (error) return ; + if (error) + return ( + + ); console.log(data); @@ -59,10 +64,7 @@ export default function Home() { - +

; - if (error) return ; + if (error) + return ( + + ); const projects = data.project; diff --git a/src/assets/pages/techStack/index.js b/src/assets/pages/techStack/index.js index 0c6e7b6..0fb0e0f 100644 --- a/src/assets/pages/techStack/index.js +++ b/src/assets/pages/techStack/index.js @@ -14,7 +14,7 @@ import AOS from "aos"; import "aos/dist/aos.css"; //Pages -import Error from "../error500"; +import Error from "../error"; //Components import Layout from "../../components/layout"; @@ -31,7 +31,12 @@ export default function Index() { const { data, loading, error } = useQuery(TECH_QUERY); if (loading) return ; - if (error) return ; + if (error) + return ( + + ); const tech = data.techStack; diff --git a/src/assets/services/routes/index.js b/src/assets/services/routes/index.js index 20cc922..41ee1f9 100644 --- a/src/assets/services/routes/index.js +++ b/src/assets/services/routes/index.js @@ -9,7 +9,7 @@ import Header from "../../components/header"; //Pages import Home from "../../pages/home"; -import Error from "../../pages/error404"; +import Error from "../../pages/error"; import Projects from "../../pages/projects"; import TechStack from "../../pages/techStack"; import About from "../../pages/about"; @@ -23,7 +23,16 @@ export default function index() {
} /> - } /> + + } + /> } /> } /> } />