Added 404/500 respose page

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

components/404Page.jsx

@@ -0,0 +1,16 @@
+import { Page404Style } from "./404Page.style";
+
+function Page404() {
+  return (
+    <Page404Style>
+      <div>
+        404 !!
+        <div className="backtohome">
+          <a href="/">Back to Home</a>
+        </div>
+      </div>
+    </Page404Style>
+  );
+}
+
+export default Page404;

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;
+    }
+  }
+`;

components/500Page.jsx

@@ -0,0 +1,22 @@
+import { Page500Style } from "./500Page.style";
+
+function Page500() {
+  return (
+    <Page500Style>
+      <div className="container">
+      <img src="/images/500-cone.png" />
+
+      <h1>
+        <span>500</span> <br />
+        Internal server error
+      </h1>
+      <p>I might be currently trying to fix the problem.</p>
+      <p className="info">
+        Maybe try again in a few minutes ...
+      </p>
+    </div>
+    </Page500Style>
+  );
+}
+
+export default Page500;

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);
+    }
+  }
+}
+`;

pages/404.js

@@ -1,3 +1,11 @@
+import Page404 from "components/404Page";
+import Footer from "components/footer";
+
 export default function Custom404() {
-  return <h1>404 - Page Not Found</h1>;
+  return (
+    // <>
+    <Page404 />
+    /* <Footer /> 
+    </> */
+  );
 }

pages/500.js

@@ -1,3 +1,8 @@
+import Page500 from "components/500Page";
+import Footer from "components/footer";
+
 export default function Custom500() {
-  return <h1>500 - Server-side error occurred</h1>;
+  return (
+    <Page500/>
+  );
 }