Theme switcher

dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
Guusvanmeerveld 3 years ago
parent 918c7a56aa
commit 859a2bb833

@ -12,16 +12,16 @@ const Footer = () => {
</div>
<div className="socials">
<a href="https://twitter.com/GuusvanMeerveld">
<FaTwitter className="img" color="#666" />
<FaTwitter className="img" />
</a>
<a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ">
<FaYoutube className="img" color="#666" />
<FaYoutube className="img" />
</a>
<a href="https://ko-fi.com/guusvanmeerveld">
<FaCoffee className="img" color="#666" />
<FaCoffee className="img" />
</a>
<a href="https://github.com/guusvanmeerveld">
<FaGithub className="img" color="#666" />
<FaGithub className="img" />
</a>
</div>
</div>

@ -1,15 +1,25 @@
const Navbar = () => (
<nav className="navigation">
<div className="container">
<span className="header">Portfolio</span>
<div className="items">
<a href="/#projects">Projects</a>
<a href="/#contact">Contact</a>
</div>
</div>
</nav>
);
import { useTheme } from "next-themes";
import { FaMoon, FaSun } from "react-icons/fa";
const Navbar = () => {
const { theme, setTheme } = useTheme();
const switchTheme = () => setTheme(theme == "dark" ? "light" : "dark");
const darkButton = () => {};
return (
<nav className="navigation">
<div className="container">
<span className="header">Portfolio</span>
<div className="items">
<a href="/#projects">Projects</a>
<a href="/#contact">Contact</a>
<a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
<FaMoon onClick={switchTheme} className="dark-switch moon" />
<FaSun onClick={switchTheme} className="dark-switch sun" />
</div>
</div>
</nav>
);
};
export default Navbar;

@ -51,8 +51,8 @@ const Projects = () => (
<div className="info">
<div className="title">Keyzo</div>
Keyzo is an electron-based program written in <b>JavaScript and CSS</b> but I am planning on moving to
<b>TypeScript</b>. It's main use is to bring every keybind you will every need into a single program, with a
simple and neat interface. <br />
<b> TypeScript</b>. It's main use is to bring every keybind you will every need into a single program, with
a simple and neat interface. <br />
<br />
<a href="https://keyzo.net" className="button">
Website

165
package-lock.json generated

@ -11,10 +11,10 @@
"axios": "^0.21.1",
"next": "10.0.8",
"next-iron-session": "^4.1.12",
"next-themes": "^0.0.12",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-icons": "^4.2.0",
"react-lazyload": "^3.2.0",
"sass": "^1.32.8"
},
"devDependencies": {
@ -252,9 +252,9 @@
}
},
"node_modules/@types/node": {
"version": "14.14.32",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz",
"integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==",
"version": "14.14.33",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz",
"integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==",
"dev": true
},
"node_modules/@types/prop-types": {
@ -576,9 +576,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001197",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001197.tgz",
"integrity": "sha512-8aE+sqBqtXz4G8g35Eg/XEaFr2N7rd/VQ6eABGBmNtcB8cN6qNJhMi6oSFy4UWWZgqgL3filHT8Nha4meu3tsw=="
"version": "1.0.30001198",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz",
"integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA=="
},
"node_modules/chalk": {
"version": "2.4.2",
@ -864,11 +864,19 @@
}
},
"node_modules/debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"dependencies": {
"ms": "2.0.0"
"ms": "2.1.2"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/define-properties": {
@ -924,9 +932,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.3.683",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",
"integrity": "sha512-8mFfiAesXdEdE0DhkMKO7W9U6VU/9T3VTWwZ+4g84/YMP4kgwgFtQgUxuu7FUMcvSeKSNhFQNU+WZ68BQTLT5A=="
"version": "1.3.685",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz",
"integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ=="
},
"node_modules/elliptic": {
"version": "6.5.4",
@ -1624,9 +1632,9 @@
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
},
"node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/nanoid": {
"version": "3.1.20",
@ -1730,27 +1738,16 @@
"node": ">=0.11.0"
}
},
"node_modules/next-iron-session/node_modules/debug": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"dependencies": {
"ms": "2.1.2"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
"node_modules/next-themes": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.0.12.tgz",
"integrity": "sha512-127ZeerlF/GC17TMVkZkarj3f01weI03b+Ne1xHmmaRs9ouYXVkgyAd60GHRzUnCFVo1NKLcZe0Pr8OnTzrxwQ==",
"peerDependencies": {
"next": "*",
"react": "*",
"react-dom": "*"
}
},
"node_modules/next-iron-session/node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/node-fetch": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@ -2194,15 +2191,6 @@
"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",
@ -2417,6 +2405,19 @@
"debug": "2"
}
},
"node_modules/stream-parser/node_modules/debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/stream-parser/node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"node_modules/string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -2940,9 +2941,9 @@
"integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw=="
},
"@types/node": {
"version": "14.14.32",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz",
"integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==",
"version": "14.14.33",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz",
"integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==",
"dev": true
},
"@types/prop-types": {
@ -3211,9 +3212,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001197",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001197.tgz",
"integrity": "sha512-8aE+sqBqtXz4G8g35Eg/XEaFr2N7rd/VQ6eABGBmNtcB8cN6qNJhMi6oSFy4UWWZgqgL3filHT8Nha4meu3tsw=="
"version": "1.0.30001198",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz",
"integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA=="
},
"chalk": {
"version": "2.4.2",
@ -3461,11 +3462,11 @@
"integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"requires": {
"ms": "2.0.0"
"ms": "2.1.2"
}
},
"define-properties": {
@ -3513,9 +3514,9 @@
"integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
},
"electron-to-chromium": {
"version": "1.3.683",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",
"integrity": "sha512-8mFfiAesXdEdE0DhkMKO7W9U6VU/9T3VTWwZ+4g84/YMP4kgwgFtQgUxuu7FUMcvSeKSNhFQNU+WZ68BQTLT5A=="
"version": "1.3.685",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz",
"integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ=="
},
"elliptic": {
"version": "6.5.4",
@ -4016,9 +4017,9 @@
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"nanoid": {
"version": "3.1.20",
@ -4087,23 +4088,14 @@
"cookie": "^0.4.1",
"debug": "^4.3.1",
"iron-store": "^1.3.0"
},
"dependencies": {
"debug": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"requires": {
"ms": "2.1.2"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
}
}
},
"next-themes": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.0.12.tgz",
"integrity": "sha512-127ZeerlF/GC17TMVkZkarj3f01weI03b+Ne1xHmmaRs9ouYXVkgyAd60GHRzUnCFVo1NKLcZe0Pr8OnTzrxwQ==",
"requires": {}
},
"node-fetch": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@ -4468,12 +4460,6 @@
"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",
@ -4644,6 +4630,21 @@
"integrity": "sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=",
"requires": {
"debug": "2"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"string_decoder": {

@ -11,6 +11,7 @@
"axios": "^0.21.1",
"next": "10.0.8",
"next-iron-session": "^4.1.12",
"next-themes": "^0.0.12",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-icons": "^4.2.0",
@ -21,4 +22,4 @@
"@types/react": "^17.0.3",
"typescript": "^4.2.3"
}
}
}

@ -1,10 +1,16 @@
import { ThemeProvider } from "next-themes";
import "../styles/milligram.min.css";
import "../styles/raleway.css";
import "../styles/sass/index.scss";
function App({ Component, pageProps }) {
return <Component {...pageProps} />;
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default App;

@ -2,7 +2,7 @@
padding-top: 6rem;
img {
border: 0.1rem solid #d1d1d1;
border: 0.1rem solid var(--borders);
border-radius: 5px;
max-width: 100vw;

@ -3,10 +3,18 @@
font-size: 4rem;
text-align: center;
margin-bottom: 3rem;
border-top: 0.1rem solid #f4f5f6;
border-top: 0.1rem solid var(--borders);
padding-top: 4rem;
}
input,
textarea,
select {
border-color: var(--borders);
color: var(--foreground);
background-color: var(--secondary);
}
font-family: "Raleway";
#message {

@ -1,6 +1,6 @@
.footer {
background-color: #f4f5f6;
border-top: 0.1rem solid #d1d1d1;
background-color: var(--background);
border-top: 0.1rem solid var(--borders);
padding: 3rem;

@ -1,3 +1,27 @@
:root {
--background: white;
--secondary: #f4f5f6;
--borders: #e4e4e4;
--foreground: #606c76;
}
[data-theme="dark"] {
.profile {
filter: invert(1);
}
--background: #212123;
--secondary: #1c1c1c;
--borders: #3c3838;
--foreground: rgb(236, 235, 235);
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
}
@import "nav.scss";
@import "landing.scss";
@import "project.scss";
@ -7,7 +31,3 @@
@import "binas.scss";
@import "upload.scss";
@import "page.scss";
body {
margin: 0;
}

@ -1,5 +1,5 @@
.landing {
background: #f4f5f6;
background: var(--secondary);
margin-top: 6rem;
.container {

@ -1,7 +1,7 @@
.navigation {
z-index: 1;
background-color: #f4f5f6;
border-bottom: 0.1rem solid #d1d1d1;
background-color: var(--secondary);
border-bottom: 0.1rem solid var(--borders);
position: fixed;
top: 0;
@ -16,9 +16,31 @@
.items {
float: right;
display: flex;
justify-content: center;
.moon {
display: none;
}
.dark-switch {
font-size: 2rem;
margin-left: 1rem;
margin-top: 0.25rem;
}
a {
margin-left: 1rem;
}
}
}
[data-theme="dark"] {
.sun {
display: none;
}
.moon {
display: inline-block !important;
}
}

@ -9,7 +9,7 @@
margin-top: 3rem;
.project {
border-top: 0.1rem solid #f4f5f6;
border-top: 0.1rem solid var(--borders);
padding: 5rem 0;

Loading…
Cancel
Save