Added binas page

package-lock.json

@@ -8,11 +8,10 @@
       "name": "portfolio",
       "version": "0.1.0",
       "dependencies": {
-        "axios": "^0.21.1",
-        "dotenv": "^8.2.0",
         "next": "10.0.8",
         "react": "17.0.1",
         "react-dom": "17.0.1",
+        "react-lazyload": "^3.2.0",
         "sass": "^1.32.8"
       },
       "devDependencies": {
@@ -324,14 +323,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-      "dependencies": {
-        "follow-redirects": "^1.10.0"
-      }
-    },
     "node_modules/babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -830,14 +821,6 @@
         "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",
@@ -958,25 +941,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/follow-redirects": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
-      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1824,6 +1788,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lazyload": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.2.0.tgz",
+      "integrity": "sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==",
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -2580,14 +2553,6 @@
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.2.tgz",
       "integrity": "sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA=="
     },
-    "axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-      "requires": {
-        "follow-redirects": "^1.10.0"
-      }
-    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -3013,11 +2978,6 @@
       "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",
@@ -3110,11 +3070,6 @@
         "path-exists": "^4.0.0"
       }
     },
-    "follow-redirects": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
-      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
-    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -3790,6 +3745,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lazyload": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.2.0.tgz",
+      "integrity": "sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==",
+      "requires": {}
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

package.json

@@ -11,6 +11,7 @@
     "next": "10.0.8",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-lazyload": "^3.2.0",
     "sass": "^1.32.8"
   },
   "devDependencies": {

pages/_app.tsx

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

pages/binas.tsx

@@ -0,0 +1,40 @@
+import Page from "../components/Page";
+import Footer from "../components/Footer";
+import Navbar from "../components/Navbar";
+import LazyLoad from "react-lazyload";
+import { Component } from "react";
+
+class Binas extends Component {
+  links: string[];
+
+  constructor(props) {
+    super(props);
+
+    this.links = new Array();
+
+    for (let i = 1; i < 305; i++) {
+      this.links.push(this.link(i));
+    }
+  }
+
+  link = (page) =>
+    `https://cdp.contentdelivery.nu/1fa0c165-3b6c-4c5b-acee-a231157e66a3/20160908101125/extract/assets/img/layout/${page}.jpg`;
+
+  render() {
+    return (
+      <Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
+        <Navbar />
+        <div className="binas">
+          {this.links.map((link) => (
+            <LazyLoad height={100} offset={100}>
+              <img src={link} alt="" />
+            </LazyLoad>
+          ))}
+        </div>
+        <Footer />
+      </Page>
+    );
+  }
+}
+
+export default Binas;

pages/thanks.tsx

@@ -1,5 +1,6 @@
 import Page from "../components/Page";
 import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
 
 const Thanks = () => (
   <Page title="Thanks!" description="Thanks for submitting your contact form!">
@@ -14,6 +15,7 @@ const Thanks = () => (
         </a>
       </div>
     </div>
+    <Footer />
   </Page>
 );
 

styles/sass/binas.scss

@@ -0,0 +1,31 @@
+.binas {
+  padding-top: 6rem;
+
+  img {
+    border: 0.1rem solid #d1d1d1;
+    border-radius: 5px;
+
+    max-width: 100vw;
+
+    @media screen and (min-width: 0px) {
+      height: 30rem;
+    }
+
+    @media screen and (min-width: 300px) {
+      height: 45rem;
+    }
+
+    @media screen and (min-width: 600px) {
+      height: 60rem;
+    }
+
+    @media screen and (min-width: 900px) {
+      height: 75rem;
+    }
+
+    margin: auto;
+    display: block;
+
+    margin-bottom: 2rem;
+  }
+}

styles/sass/index.scss

@@ -1,8 +1,8 @@
-@import "nav.scss";
+@import "home/nav.scss";
-@import "landing.scss";
+@import "home/landing.scss";
-@import "project.scss";
+@import "home/project.scss";
-@import "contact.scss";
+@import "home/contact.scss";
-@import "footer.scss";
+@import "home/footer.scss";
 
 body {
   margin: 0;