DubbelNull
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

about page and various other updates

Browse Source
main
Midnight 3 years ago
parent b263229406
commit 3b16ca9ddf
16 changed files with 587 additions and 27 deletions
Show Stats Download Patch File Download Diff File

2
components/buttons.tsx
Unescape View File

@ -6,7 +6,7 @@ export default function Footer() {
<section className={styles.section}>
<h2>Learn more</h2>
<div>
<Link href="">About</Link>
<Link href="/about">About</Link>
<Link href="">Contact</Link>
<a href="https://twitter.com/DubbelNull" target="_blank" rel="noreferrer">Twitter</a>
<a href="https://gitlab.com/dubbelnull" target="_blank" rel="noreferrer">GitLab</a>

28
components/elements/smallstyledbutton.tsx
Unescape View File

@ -0,0 +1,28 @@
export default function StyledButton(props: any) {
return (
<div>
<style jsx>{`
a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1em;
border-radius: 8px;
cursor: default;
transition-duration: 0.2s;
}
a:hover {
background-color: var(--background-color-dark);
text-decoration: none;
transition-duration: 0.2s;
}
`}</style>
<a href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
</div>
)
}

29
components/elements/styledbutton.tsx
Unescape View File

@ -0,0 +1,29 @@
export default function StyledButton(props: any) {
return (
<div>
<style jsx>{`
a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1.1em;
border-radius: 8px;
background-color: var(--background-color-dark);
cursor: default;
transition-duration: 0.2s;
}
a:hover {
background-color: var(--theme-color-500);
text-decoration: none;
transition-duration: 0.2s;
}
`}</style>
<a href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
</div>
)
}

2
components/footer.tsx
Unescape View File

@ -9,7 +9,7 @@ export default function Footer() {
<footer className={styles.footer}>
<div className="container">
<p>Copyright © 2021 DubbelNull vof <br/> Kvk 81343493 -- The Netherlands</p>
<p>Built by Pascal with NextJS, Netlify & Airtable<br/>Dutch language option coming soon</p>
<p>Website built with NextJS & Netlify<br/>Dutch language option coming soon</p>
</div>
</footer>
)

3
components/menu.tsx
Unescape View File

@ -1,4 +1,3 @@
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/components/Menu.module.css';
import Link from 'next/link';
@ -17,7 +16,7 @@ export default function Menu() {
</Link>
<div>
<div className={styles.disabled}><Link href="">About</Link></div>
<Link href="/about">About</Link>
<div className={styles.disabled}><Link href="">Blog</Link></div>
<div className={styles.disabled}><Link href="">Showcase</Link></div>
<div className={styles.disabled}><Link href="">Services</Link></div>

2
layouts/global.tsx
Unescape View File

@ -6,7 +6,7 @@ export default function GlobalLayout(props: any) {
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>owo</title>
<title>{process.env.NEXT_PUBLIC_NAME}</title>
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png" />

329
package-lock.json generated
Unescape View File

@ -12,6 +12,148 @@
"@babel/highlight": "^7.10.4"
}
},
"@babel/generator": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
"integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
"requires": {
"@babel/types": "^7.14.5",
"jsesc": "^2.5.1",
"source-map": "^0.5.0"
},
"dependencies": {
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
"@babel/helper-annotate-as-pure": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
"integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
"requires": {
"@babel/types": "^7.14.5"
},
"dependencies": {
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-function-name": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
"integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
"requires": {
"@babel/helper-get-function-arity": "^7.14.5",
"@babel/template": "^7.14.5",
"@babel/types": "^7.14.5"
},
"dependencies": {
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-get-function-arity": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
"integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
"requires": {
"@babel/types": "^7.14.5"
},
"dependencies": {
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-hoist-variables": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
"integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
"requires": {
"@babel/types": "^7.14.5"
},
"dependencies": {
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-module-imports": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
"integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
"requires": {
"@babel/types": "^7.14.5"
},
"dependencies": {
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-split-export-declaration": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
"integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
"requires": {
"@babel/types": "^7.14.5"
},
"dependencies": {
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-validator-identifier": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
@ -27,6 +169,11 @@
"js-tokens": "^4.0.0"
}
},
"@babel/parser": {
"version": "7.14.7",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
"integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA=="
},
"@babel/runtime": {
"version": "7.14.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
@ -46,6 +193,75 @@
"regenerator-runtime": "^0.13.4"
}
},
"@babel/template": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
"integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
"requires": {
"@babel/code-frame": "^7.14.5",
"@babel/parser": "^7.14.5",
"@babel/types": "^7.14.5"
},
"dependencies": {
"@babel/code-frame": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
"integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
"requires": {
"@babel/highlight": "^7.14.5"
}
},
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/traverse": {
"version": "7.14.7",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
"integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
"requires": {
"@babel/code-frame": "^7.14.5",
"@babel/generator": "^7.14.5",
"@babel/helper-function-name": "^7.14.5",
"@babel/helper-hoist-variables": "^7.14.5",
"@babel/helper-split-export-declaration": "^7.14.5",
"@babel/parser": "^7.14.7",
"@babel/types": "^7.14.5",
"debug": "^4.1.0",
"globals": "^11.1.0"
},
"dependencies": {
"@babel/code-frame": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
"integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
"requires": {
"@babel/highlight": "^7.14.5"
}
},
"@babel/types": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
"integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"to-fast-properties": "^2.0.0"
}
},
"globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
}
}
},
"@babel/types": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.3.tgz",
@ -56,6 +272,29 @@
"to-fast-properties": "^2.0.0"
}
},
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"requires": {
"@emotion/memoize": "0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@eslint/eslintrc": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
@ -504,6 +743,17 @@
"integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
"dev": true
},
"babel-plugin-styled-components": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.1.tgz",
"integrity": "sha512-iY11g5orsdBnvWtXKCFBzDyTxZ9jvmkcYCCs5ONlvASYltDRhieCVzeDC7Do0fSW7psAL0zfVoXB3FHz2CkUSg==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11"
}
},
"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",
@ -676,6 +926,11 @@
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
"dev": true
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-lite": {
"version": "1.0.30001241",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001241.tgz",
@ -891,6 +1146,21 @@
"randomfill": "^1.0.3"
}
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"css.escape": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@ -933,7 +1203,6 @@
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"dev": true,
"requires": {
"ms": "2.1.2"
}
@ -1773,6 +2042,14 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@ -2047,6 +2324,11 @@
"esprima": "^4.0.0"
}
},
"jsesc": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
},
"json-parse-better-errors": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@ -2274,8 +2556,7 @@
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"nanoid": {
"version": "3.1.23",
@ -2884,6 +3165,11 @@
}
}
},
"postcss-value-parser": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
},
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@ -3205,6 +3491,11 @@
"safe-buffer": "^5.0.1"
}
},
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -3440,6 +3731,38 @@
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
"dev": true
},
"styled-components": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.0.tgz",
"integrity": "sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1.12.0",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
},
"dependencies": {
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"styled-jsx": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.2.tgz",

3
package.json
Unescape View File

@ -17,7 +17,8 @@
"@fortawesome/react-fontawesome": "^0.1.14",
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2"
"react-dom": "17.0.2",
"styled-components": "^5.3.0"
},
"devDependencies": {
"@types/react": "17.0.13",

75
pages/about.tsx
Unescape View File

@ -2,10 +2,83 @@ import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/About.module.css';
import Link from 'next/link';
import StyledButton from '../components/elements/styledbutton';
import SmallStyledButton from '../components/elements/smallstyledbutton';
export default function Menu() {
export default function Index() {
return (
<div className={"page " + styles.about}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | About</title>
</Head>
<section className="container">
<article className="content">
<section>
<h2>About DubbelNull</h2>
<p>
{"We are a new and small family business from The Netherlands developing and designing web applications for clients. "}
{"We specialize in TALL stack but also make use of applications like Wordpress. "}
{"We are service focused, meaning that if a client needs something we don't explicitly offer we can always work something out."}
</p>
</section>
<hr/>
<section style={{textAlign: "center"}}>
<h2>We utilize the newest tech</h2>
<div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
<StyledButton>#wordpress</StyledButton>
<StyledButton>#graphql</StyledButton>
<StyledButton>#laravel</StyledButton>
<StyledButton>#express</StyledButton>
<StyledButton>#nextjs</StyledButton>
<StyledButton>#tailwindcss</StyledButton>
<StyledButton>#livewire</StyledButton>
<StyledButton>#reactjs</StyledButton>
<StyledButton>#typescript</StyledButton>
<StyledButton>#nestjs</StyledButton>
<StyledButton>#php</StyledButton>
</div>
<br/>
<h3>and are always learning new stuff</h3>
<div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
<SmallStyledButton>#threejs</SmallStyledButton>
<SmallStyledButton>#prisma2</SmallStyledButton>
<SmallStyledButton>#vue</SmallStyledButton>
<SmallStyledButton>#nosql</SmallStyledButton>
</div>
</section>
<hr/>
<section>
<div>
<h3>Marco van Ginkel — Client relations and communication</h3>
<p>
{"lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet "}
</p>
</div>
<br/>
<div>
<h3>Pascal van Ginkel — Full-stack webdeveloper</h3>
<p>
{"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. I have a passion for everything tech and always dive into new technologies, but my favorite by far is webdevelopment. I started making my own things nearly 6 years ago and have gotten a lot of experience with a wide range of concepts and technologies since then. I am also following a Software Engineering major at the Saxion University of Applied Sciences currently. "}
</p>
</div>
</section>
</article>
</section>
</div>
)

13
pages/index.tsx
Unescape View File

@ -14,12 +14,13 @@ import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
import logo from '../public/img/logoblue.png'
import trick from '../public/img/trick.png'
export default function Home() {
return (
<div className={"page " + styles.index}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME}</title>
<title>{process.env.NEXT_PUBLIC_NAME} | Home</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
@ -110,7 +111,7 @@ export default function Home() {
<div className={styles.quote}>
<div>
<FontAwesomeIcon icon={faQuoteRight} size="6x" style={{color: "var(--theme-color)"}} />
<Image src={trick} />
</div>
<div>
<p>
@ -121,13 +122,14 @@ export default function Home() {
{" They were always there to answer any questions I had and were happy to change the things I wanted. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
</p>
<br/>
<i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
</div>
</div>
<br/>
<div className={styles.quote}>
{/* <div className={styles.quote}>
<div>
<p>
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
@ -137,12 +139,13 @@ export default function Home() {
{" They were always there to answer any questions I had and were happy to change the things I wanted. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
</p>
<br/>
<i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
</div>
<div>
<FontAwesomeIcon icon={faQuoteRight} size="6x" style={{color: "var(--theme-color)"}} />
<Image src={trick} />
</div>
</div>
</div> */}
</section>
<hr/>

BIN
public/img/trick.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

32
styles/Index.module.css
Unescape View File

@ -1,3 +1,8 @@
/* elements */
.index img {
border-radius: 50%;
}
/* layout */
.banner {
background-image: url('/img/banner.png');
@ -5,6 +10,7 @@
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner h1 {
@ -55,7 +61,7 @@
.quote {
display: flex;
gap: 50px;
gap: var(--padding-lg);
align-items: start;
}
@ -96,4 +102,28 @@
margin-top: -10rem;
opacity: 100;
}
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.features {
grid-template-columns: auto;
}
.quote {
flex-direction: column;
}
.banner {
padding: var(--padding);
}
.banner h1 {
font-size: 2em;
}
.description {
font-size: 1em;
}
}

11
styles/components/Buttons.module.css
Unescape View File

@ -7,6 +7,8 @@
}
.section a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
@ -22,9 +24,18 @@
display: flex;
gap: 10px;
justify-content: center;
align-items: stretch;
}
.section a:hover {
background-color: var(--theme-color-500);
text-decoration: none;
}
/* mobile */
@media(max-aspect-ratio: 7/6) {
.section div {
flex-direction: column;
}
}

14
styles/components/Footer.module.css
Unescape View File

@ -1,5 +1,5 @@
.footer {
margin-top: 50px;
margin: var(--padding-lg) 0;
}
.footer > div {
@ -14,4 +14,16 @@
.footer * {
font-size: 0.9em;
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.footer > div {
flex-direction: column;
}
.footer * {
text-align: center !important;
}
}

15
styles/components/Menu.module.css
Unescape View File

@ -58,4 +58,19 @@
.menu .disabled {
display: flex;
align-items: stretch;
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.menu > div {
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu > div > *:last-child {
flex-wrap: wrap;
justify-content: center;
}
}

56
styles/globals.css
Unescape View File

@ -1,4 +1,11 @@
/* variables */
:root {
--padding-sm: 10px;
--padding: 20px;
--padding-lg: 50px;
--padding-xl: 100px;
}
body, body[data-theme="light"] {
--theme-color: #2463EB;
--theme-color-dilluted: rgba(36, 99, 235, 0.1);
@ -12,10 +19,6 @@ body, body[data-theme="light"] {
--background-color-body: white;
--text-color: black;
--padding: 20px;
--padding-lg: 50px;
--padding-xl: 100px;
}
body, body[data-theme="dark"] {
@ -31,10 +34,6 @@ body, body[data-theme="dark"] {
--background-color-body: #111827;
--text-color: white;
--padding: 20px;
--padding-lg: 50px;
--padding-xl: 100px;
}
@ -71,7 +70,10 @@ a:hover {
hr {
width: 100%;
color: rgba(0,0,0,0.1);
background-color: var(--text-color);
opacity: 10%;
border: unset;
height: 2px;
}
@ -90,8 +92,42 @@ hr {
border-radius: 1em;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
padding: var(--padding-xl);
padding: var(--padding-lg);
display: flex;
flex-direction: column;
gap: var(--padding-lg);
margin: var(--padding-lg) 0;
-webkit-animation-name: contentanim;
animation-name: contentanim;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
@keyframes contentanim {
0% {
margin-top: 10rem;
opacity: 0;
}
100% {
margin-top: var(--padding-lg);
opacity: 100;
}
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.content {
gap: var(--padding);
padding: var(--padding-lg);
}
}
@media(max-aspect-ratio: 3/2) {
.content {
gap: var(--padding);
padding: var(--padding);
}
}
Write Preview
Loading…
Cancel
Save