Added 404 page and Layout component

components/Layout.tsx

@@ -0,0 +1,12 @@
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
+const Layout = ({ children }) => (
+  <>
+    <Navbar />
+    {children}
+    <Footer />
+  </>
+);
+
+export default Layout;

package-lock.json

@@ -8,6 +8,7 @@
       "name": "portfolio",
       "version": "0.1.0",
       "dependencies": {
+        "dotenv": "^8.2.0",
         "next": "10.0.8",
         "react": "17.0.1",
         "react-dom": "17.0.1",
@@ -821,6 +822,14 @@
         "npm": ">=1.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.3.683",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",
@@ -2978,6 +2987,11 @@
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
       "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "electron-to-chromium": {
       "version": "1.3.683",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "dotenv": "^8.2.0",
     "next": "10.0.8",
     "react": "17.0.1",
     "react-dom": "17.0.1",

pages/404.tsx

@@ -1,20 +1,19 @@
 import Page from "../components/Page";
-import Navbar from "../components/Navbar";
+import Layout from "../components/Layout";
-import Footer from "../components/Footer";
 
 const NotFound = () => (
   <Page title="Page not found" description="This page either doesn't exist or has been deleted">
-    <Navbar />
+    <Layout>
-    <div className="message">
+      <div className="message">
-      <div>
+        <div>
-        <div className="header">Not found</div>
+          <div className="header">Not found</div>
-        <div className="subtitle">This page either doesn't exist or has been deleted</div>
+          <div className="subtitle">This page either doesn't exist or has been deleted</div>
-        <a href="/" className="link button">
+          <a href="/" className="link button">
-          Go back
+            Go back
-        </a>
+          </a>
+        </div>
       </div>
-    </div>
+    </Layout>
-    <Footer />
   </Page>
 );
 

pages/_app.tsx

@@ -4,6 +4,7 @@ import "../styles/raleway.css";
 import "../styles/sass/index.scss";
 import "../styles/sass/thanks.scss";
 import "../styles/sass/binas.scss";
+import "../styles/sass/upload.scss";
 
 function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

pages/binas.tsx

@@ -1,8 +1,7 @@
 import Page from "../components/Page";
-import Footer from "../components/Footer";
-import Navbar from "../components/Navbar";
 import LazyLoad from "react-lazyload";
 import { Component } from "react";
+import Layout from "../components/Layout";
 
 class Binas extends Component {
   links: string[];
@@ -23,15 +22,15 @@ class Binas extends Component {
   render() {
     return (
       <Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
-        <Navbar />
+        <Layout>
-        <div className="binas">
+          <div className="binas">
-          {this.links.map((link) => (
+            {this.links.map((link) => (
-            <LazyLoad height={100} offset={100}>
+              <LazyLoad height={100} offset={100}>
-              <img src={link} alt="" />
+                <img src={link} alt="" />
-            </LazyLoad>
+              </LazyLoad>
-          ))}
+            ))}
-        </div>
+          </div>
-        <Footer />
+        </Layout>
       </Page>
     );
   }

pages/index.tsx

@@ -1,17 +1,16 @@
 import Page from "../components/Page";
-import Navbar from "../components/Navbar";
 import Landing from "../components/Landing";
 import Projects from "../components/Projects";
 import Contact from "../components/Contact";
-import Footer from "../components/Footer";
+import Layout from "../components/Layout";
 
 const Home = () => (
   <Page description="A simple portfolio website to display my projects." title="Projects">
-    <Navbar />
+    <Layout>
-    <Landing />
+      <Landing />
-    <Projects />
+      <Projects />
-    <Contact />
+      <Contact />
-    <Footer />
+    </Layout>
   </Page>
 );
 

pages/thanks.tsx

@@ -1,21 +1,20 @@
 import Page from "../components/Page";
-import Navbar from "../components/Navbar";
+import Layout from "../components/Layout";
-import Footer from "../components/Footer";
 
 const Thanks = () => (
   <Page title="Thanks!" description="Thanks for submitting your contact form!">
-    <Navbar />
+    <Layout>
-    <div className="message">
+      <div className="message">
-      <div>
+        <div>
-        <div className="icon">❤️</div>
+          <div className="icon">❤️</div>
-        <div className="header">Thank you!</div>
+          <div className="header">Thank you!</div>
-        <div className="subtitle">Your submission is greatly appreciated!</div>
+          <div className="subtitle">Your submission is greatly appreciated!</div>
-        <a href="/" className="link button">
+          <a href="/" className="link button">
-          Go back
+            Go back
-        </a>
+          </a>
+        </div>
       </div>
-    </div>
+    </Layout>
-    <Footer />
   </Page>
 );
 

pages/upload.tsx

@@ -0,0 +1,12 @@
+import Page from "../components/Page";
+import Layout from "../components/Layout";
+
+const Upload = () => (
+  <Page title="Upload" description="Upload a custom file to the cdn">
+    <Layout>
+      <div className="container upload"></div>
+    </Layout>
+  </Page>
+);
+
+export default Upload;

public/robots.txt

@@ -1 +1,2 @@
 Disallow /binas
+Disallow /upload

styles/sass/upload.scss

@@ -0,0 +1,3 @@
+.upload {
+  padding-top: 6rem;
+}