Custom 404 Page

content/projects/kevink-dev.de.json

@@ -6,7 +6,7 @@
     "longDescription": "Schon so lange ich im Internet unterwegs bin war ich fasziniert von der Idee eine eigene Website zu haben. Deshalb habe ich mich an diese Seite gesetzt um mich selbst und meine Projekte zu repräsentieren. Wenn du interessiert an dem Code hinter der Seite bist, schau doch gerne auf GitHub vorbei!",
     "links": {
         "website": "https://kevink.dev",
-        "github": "https://github.com"
+        "github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
     },
     "image": "../images/KevinK.dev.png"
 }

content/projects/kevink-dev.en.json

@@ -6,7 +6,7 @@
     "longDescription": "For as long as I've been poking around the internet I've always been facinated by the idea to have my own website. This is why I've created this site to showcase myself and my projects. If you are interested in the code behind the scenes feel free to look at it on GitHub!",
     "links": {
         "website": "https://kevink.dev",
-        "github": "https://github.com"
+        "github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
     },
     "image": "../images/KevinK.dev.png"
 }

src/pages/404.js

@@ -1,53 +1,20 @@
 import * as React from "react"
-import { Link } from "gatsby"
-
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-}
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-}
-
-const paragraphStyles = {
-  marginBottom: 48,
-}
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-}
+import { Link } from "gatsby-plugin-react-i18next"
+import Layout from "../layouts/default"
 
 // markup
 const NotFoundPage = () => {
   return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{" "}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{" "}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
-    </main>
+    <Layout title="Not found">
+      <section>
+        <article>
+          <h1>Page not found</h1>
+          <p>
+            Whoops... That page doesn't exist, so you may as well <Link to="/">go home</Link>.
+          </p>
+        </article>
+      </section>
+    </Layout>
   )
 }