diff --git a/components/buttons.tsx b/components/buttons.tsx index af80d44..09c90d7 100644 --- a/components/buttons.tsx +++ b/components/buttons.tsx @@ -6,7 +6,7 @@ export default function Footer() {

Learn more

- About + About Contact Twitter GitLab diff --git a/components/elements/smallstyledbutton.tsx b/components/elements/smallstyledbutton.tsx new file mode 100644 index 0000000..b06e776 --- /dev/null +++ b/components/elements/smallstyledbutton.tsx @@ -0,0 +1,28 @@ +export default function StyledButton(props: any) { + return ( +
+ + {props.children} +
+ ) +} \ No newline at end of file diff --git a/components/elements/styledbutton.tsx b/components/elements/styledbutton.tsx new file mode 100644 index 0000000..b776a20 --- /dev/null +++ b/components/elements/styledbutton.tsx @@ -0,0 +1,29 @@ +export default function StyledButton(props: any) { + return ( +
+ + {props.children} +
+ ) +} \ No newline at end of file diff --git a/components/footer.tsx b/components/footer.tsx index 8b525c1..295a2f1 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -9,7 +9,7 @@ export default function Footer() {

Copyright © 2021 DubbelNull vof
Kvk 81343493 -- The Netherlands

-

Built by Pascal with NextJS, Netlify & Airtable
Dutch language option coming soon

+

Website built with NextJS & Netlify
Dutch language option coming soon

) diff --git a/components/menu.tsx b/components/menu.tsx index 5950212..28f55cd 100644 --- a/components/menu.tsx +++ b/components/menu.tsx @@ -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() {
-
About
+ About
Blog
Showcase
Services
diff --git a/layouts/global.tsx b/layouts/global.tsx index 1e864bb..fdd9d0c 100644 --- a/layouts/global.tsx +++ b/layouts/global.tsx @@ -6,7 +6,7 @@ export default function GlobalLayout(props: any) { - owo + {process.env.NEXT_PUBLIC_NAME} diff --git a/package-lock.json b/package-lock.json index bc2799e..7567e80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 78ac5da..fea7af5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pages/about.tsx b/pages/about.tsx index bc96396..a485b7f 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -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 (
+ + {process.env.NEXT_PUBLIC_NAME} | About + + +
+
+ +
+

About DubbelNull

+

+ {"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."} +

+
+ +
+ +
+

We utilize the newest tech

+ +
+ #wordpress + #graphql + #laravel + #express + #nextjs + #tailwindcss + #livewire + #reactjs + #typescript + #nestjs + #php +
+ +
+ +

and are always learning new stuff

+ +
+ #threejs + #prisma2 + #vue + #nosql +
+
+ +
+ +
+ +
+

Marco van Ginkel — Client relations and communication

+

+ {"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 "} +

+
+ +
+ +
+

Pascal van Ginkel — Full-stack webdeveloper

+

+ {"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. "} +

+
+ +
+ +
+
) diff --git a/pages/index.tsx b/pages/index.tsx index 0dea913..d0a9287 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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 (
- {process.env.NEXT_PUBLIC_NAME} + {process.env.NEXT_PUBLIC_NAME} | Home @@ -110,7 +111,7 @@ export default function Home() {
- +

@@ -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. "}

+
— Trick @ trickthefox.com

-
+ {/*

@@ -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. "}

+
— Trick @ trickthefox.com
- +
-
+
*/}
diff --git a/public/img/trick.png b/public/img/trick.png new file mode 100644 index 0000000..10f5d57 Binary files /dev/null and b/public/img/trick.png differ diff --git a/styles/Index.module.css b/styles/Index.module.css index 1574a9d..c4aeca2 100644 --- a/styles/Index.module.css +++ b/styles/Index.module.css @@ -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; + } } \ No newline at end of file diff --git a/styles/components/Buttons.module.css b/styles/components/Buttons.module.css index dae8a9f..5e56d5c 100644 --- a/styles/components/Buttons.module.css +++ b/styles/components/Buttons.module.css @@ -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; + } } \ No newline at end of file diff --git a/styles/components/Footer.module.css b/styles/components/Footer.module.css index 8c31d51..e44752b 100644 --- a/styles/components/Footer.module.css +++ b/styles/components/Footer.module.css @@ -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; + } } \ No newline at end of file diff --git a/styles/components/Menu.module.css b/styles/components/Menu.module.css index e0d075d..8ce7d31 100644 --- a/styles/components/Menu.module.css +++ b/styles/components/Menu.module.css @@ -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; + } } \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 7a9c944..91788af 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -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); + } +} \ No newline at end of file