From 9ce50db9fa517e0cca59fb04ff2af0ad29f96097 Mon Sep 17 00:00:00 2001 From: BRAVO68WEB Date: Mon, 2 May 2022 19:13:41 +0530 Subject: [PATCH] Added 404/500 respose page --- README.md | 1 + components/404Page.jsx | 16 ++++++ components/404Page.style.jsx | 98 +++++++++++++++++++++++++++++++++++ components/500Page.jsx | 22 ++++++++ components/500Page.style.jsx | 48 +++++++++++++++++ pages/404.js | 10 +++- pages/500.js | 7 ++- public/images/500-cone.png | Bin 0 -> 35879 bytes 8 files changed, 200 insertions(+), 2 deletions(-) create mode 100644 components/404Page.jsx create mode 100644 components/404Page.style.jsx create mode 100644 components/500Page.jsx create mode 100644 components/500Page.style.jsx create mode 100644 public/images/500-cone.png diff --git a/README.md b/README.md index 383692b..7f301ee 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ This Repo cotains source code for my developer portfolio at https://bravo68web.m - Resume Embed - Custom User Stats representations - Art and Project Showcase +- Custom Error page (including 404 and 500 response error) - More to be added soon ... #### Technologies Used:- diff --git a/components/404Page.jsx b/components/404Page.jsx new file mode 100644 index 0000000..7fe7403 --- /dev/null +++ b/components/404Page.jsx @@ -0,0 +1,16 @@ +import { Page404Style } from "./404Page.style"; + +function Page404() { + return ( + +
+ 404 !! +
+ Back to Home +
+
+ + ); +} + +export default Page404; diff --git a/components/404Page.style.jsx b/components/404Page.style.jsx new file mode 100644 index 0000000..319d456 --- /dev/null +++ b/components/404Page.style.jsx @@ -0,0 +1,98 @@ +import styled from "styled-components"; + +export const Page404Style = styled.div` + @import url("https://fonts.googleapis.com/css?family=Fira+Mono:400"); + + display: flex; + width: 100vw; + height: 100vh; + align-items: center; + justify-content: center; + margin: 0; + background: #131313; + color: #fff; + font-size: 96px; + font-family: "Fira Mono", monospace; + letter-spacing: -7px; + + div { + animation: glitch 1s linear infinite; + } + + @keyframes glitch { + 2%, + 64% { + transform: translate(2px, 0) skew(0deg); + } + 4%, + 60% { + transform: translate(-2px, 0) skew(0deg); + } + 62% { + transform: translate(0, 0) skew(5deg); + } + } + + div:before, + div:after { + content: attr(title); + position: absolute; + left: 0; + } + + div:before { + animation: glitchTop 1s linear infinite; + clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); + -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); + } + + @keyframes glitchTop { + 2%, + 64% { + transform: translate(2px, -2px); + } + 4%, + 60% { + transform: translate(-2px, 2px); + } + 62% { + transform: translate(13px, -1px) skew(-13deg); + } + } + + div:after { + animation: glitchBotom 1.5s linear infinite; + clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); + -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); + } + + @keyframes glitchBotom { + 2%, + 64% { + transform: translate(-2px, 0); + } + 4%, + 60% { + transform: translate(-2px, 0); + } + 62% { + transform: translate(-22px, 5px) skew(21deg); + } + } + .backtohome { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + font-size: 0.6em; + font-weight: bold; + color: #fff; + cursor: pointer; + transition: all 0.3s ease; + &:hover { + color: #111111; + background: #fff; + } + } +`; diff --git a/components/500Page.jsx b/components/500Page.jsx new file mode 100644 index 0000000..de3157d --- /dev/null +++ b/components/500Page.jsx @@ -0,0 +1,22 @@ +import { Page500Style } from "./500Page.style"; + +function Page500() { + return ( + +
+ + +

+ 500
+ Internal server error +

+

I might be currently trying to fix the problem.

+

+ Maybe try again in a few minutes ... +

+
+ + ); +} + +export default Page500; diff --git a/components/500Page.style.jsx b/components/500Page.style.jsx new file mode 100644 index 0000000..9ab5a6e --- /dev/null +++ b/components/500Page.style.jsx @@ -0,0 +1,48 @@ +import styled from "styled-components"; + +export const Page500Style = styled.div` + @import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap"); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #111; + * { + margin: 0; + padding: 0; + font-family: "Fira Code", monospace; + } + .container { + text-align: center; + margin: auto; + padding: 4em; + img { + width: 256px; + height: 225px; + } + + h1 { + margin-top: 1rem; + font-size: 35px; + text-align: center; + + span { + font-size: 60px; + } + } + p { + margin-top: 1rem; + } + + p.info { + margin-top: 4em; + font-size: 12px; + + a { + text-decoration: none; + color: rgb(84, 84, 206); + } + } +} +`; diff --git a/pages/404.js b/pages/404.js index cad1702..da14ae0 100644 --- a/pages/404.js +++ b/pages/404.js @@ -1,3 +1,11 @@ +import Page404 from "components/404Page"; +import Footer from "components/footer"; + export default function Custom404() { - return

404 - Page Not Found

; + return ( + // <> + + /*