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 (
+
+
+
+ );
+}
+
+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 (
+ // <>
+
+ /*
+ > */
+ );
}
diff --git a/pages/500.js b/pages/500.js
index f5abc33..f4ae291 100644
--- a/pages/500.js
+++ b/pages/500.js
@@ -1,3 +1,8 @@
+import Page500 from "components/500Page";
+import Footer from "components/footer";
+
export default function Custom500() {
- return 500 - Server-side error occurred
;
+ return (
+
+ );
}
diff --git a/public/images/500-cone.png b/public/images/500-cone.png
new file mode 100644
index 0000000..9da9bc9
Binary files /dev/null and b/public/images/500-cone.png differ