diff --git a/package-lock.json b/package-lock.json index dd09a97..35a514e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 827e614..7c67dc0 100644 --- a/package.json +++ b/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": { @@ -18,4 +19,4 @@ "@types/react": "^17.0.3", "typescript": "^4.2.3" } -} \ No newline at end of file +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 56a2c1f..32dc688 100644 --- a/pages/_app.tsx +++ b/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 ; diff --git a/pages/binas.tsx b/pages/binas.tsx new file mode 100644 index 0000000..ca9d9a1 --- /dev/null +++ b/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 ( + + +
+ {this.links.map((link) => ( + + + + ))} +
+