Skip to content

Commit

Permalink
feat: 500 error page implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
12Gustavo21 committed Jan 7, 2024
1 parent 0f74a86 commit f466876
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 12 deletions.
5 changes: 4 additions & 1 deletion src/assets/pages/about/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import * as S from "./style";
import AOS from "aos";
import "aos/dist/aos.css";

//Pages
import Error from "../error"

//Components
import Layout from "../../components/layout";
import Loading from "../../components/loading";
Expand Down Expand Up @@ -127,7 +130,7 @@ function Index() {
const { data, loading, error } = useQuery(ABOUT_QUERY);

if (loading) return <Loading />;
if (error) return <p>Error :(</p>;
if (error) return <Error />;

const { about } = data;

Expand Down
76 changes: 68 additions & 8 deletions src/assets/pages/error/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,69 @@
import React from 'react'

export default function index() {
return (
<>
Error
</>
)
import React, { useEffect } from "react";

//Style
import * as S from "./style";

export default function Error() {
useEffect(() => {
const main = document.querySelector("main");
main.addEventListener("mousemove", function (e) {
var eye = document.querySelectorAll(".eye");
eye.forEach(function (eye) {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let rad = Math.atan2(e.pageX - x, e.pageY - y);
let rot = rad * (180 / Math.PI) * -1 + 180;
eye.style.transform = "rotate(" + rot + "deg)";
});
});
}, []);

const renderEyes = () => {
const numLayers = 5;
const numEyesPerLayer = 30;
const maxRadius = 500;

const layerMultipliers = [6, 7, 3, 4, 5, 1, 3, 8, 7];

const layers = Array.from({ length: numLayers }, (_, layerIndex) => {
const layerRadius =
(maxRadius / numLayers) * layerMultipliers[layerIndex];

return Array.from({ length: numEyesPerLayer }, (_, eyeIndex) => {
const angle = (eyeIndex * 2 * Math.PI) / numEyesPerLayer;

const eyeStyle = {
top: `calc(50% - ${Math.sin(angle) * layerRadius}px)`,
left: `calc(50% + ${Math.cos(angle) * layerRadius}px)`,
};

return (
<div
className="container"
key={`${layerIndex}-${eyeIndex}`}
style={eyeStyle}
>
<div className="eye"></div>
<div className="eye"></div>
</div>
);
});
});

return layers.flat();
};

return (
<>
<S.Main>
<S.EyesWrapper>{renderEyes()}</S.EyesWrapper>
<S.ContentWrapper>
<h1>ERRO 500</h1>
<p>
Sorry, something went wrong. <span>We are working on it.</span> Ok? :)
</p>
</S.ContentWrapper>
</S.Main>
</>
);
}
71 changes: 71 additions & 0 deletions src/assets/pages/error/style.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
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;
}
`;
5 changes: 4 additions & 1 deletion src/assets/pages/home/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import { Helmet } from 'react-helmet';
//User Location
import { useLocation } from 'react-router-dom';

//Pages
import Error from "../error"

//Components
import Layout from '../../components/layout';
import Loading from '../../components/loading';
Expand Down Expand Up @@ -46,7 +49,7 @@ export default function Home() {
const { data, loading, error } = useQuery(HOME_QUERY);

if (loading) return <Loading />;
if (error) return <p>Error :(</p>;
if (error) return <Error />;

console.log(data);

Expand Down
5 changes: 4 additions & 1 deletion src/assets/pages/projects/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import PROJECTS_QUERY from "../../services/querys/projectsQuery";
import AOS from "aos";
import "aos/dist/aos.css";

//Pages
import Error from "../error";

//Components
import Layout from "../../components/layout";
import BatComponent from "../../components/bats";
Expand All @@ -28,7 +31,7 @@ export default function Index() {
const { data, loading, error } = useQuery(PROJECTS_QUERY);

if (loading) return <Loading />;
if (error) return <p>Error :(</p>;
if (error) return <Error />;

const projects = data.project;

Expand Down
5 changes: 4 additions & 1 deletion src/assets/pages/techStack/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import * as S from "./style";
import AOS from "aos";
import "aos/dist/aos.css";

//Pages
import Error from "../error"

//Components
import Layout from "../../components/layout";
import Loading from "../../components/loading";
Expand All @@ -28,7 +31,7 @@ export default function Index() {
const { data, loading, error } = useQuery(TECH_QUERY);

if (loading) return <Loading />;
if (error) return <p>Error :(</p>;
if (error) return <Error />;

const tech = data.techStack;

Expand Down

0 comments on commit f466876

Please sign in to comment.