Moved to Next.js css modules

src/components/Contact.module.scss

@@ -0,0 +1,28 @@
+.header {
+	font-size: 4rem;
+	text-align: center;
+	margin-bottom: 3rem;
+	padding-top: 4rem;
+}
+
+.input,
+.textarea {
+	border-color: var(--borders);
+	color: var(--foreground);
+	background-color: var(--secondary);
+}
+
+.textarea {
+	resize: none;
+	height: 10rem;
+}
+
+.submit {
+	margin-top: 1.5rem;
+}
+
+.contact {
+	height: 100vh;
+
+	padding-top: 10rem;
+}

src/components/Contact.tsx

@@ -3,15 +3,17 @@ import { useTheme } from 'next-themes';
 
 import { FC } from 'react';
 
+import styles from './Contact.module.scss';
+
 const formURL = 'https://forms.guusvanmeerveld.dev/portfolio';
 
 const Contact: FC = () => {
 	const { theme } = useTheme();
 
 	return (
-		<div className="contact">
+		<div className={styles.contact}>
 			<div className="container">
-				<div className="header" id="contact">
+				<div className={styles.header} id="contact">
 					Contact
 				</div>
 				<form
@@ -22,10 +24,17 @@ const Contact: FC = () => {
 					name="contact"
 				>
 					<label htmlFor="email">Email</label>
-					<input name="email" type="email" required placeholder="Your email address" id="email" />
+					<input
+						className={styles.input}
+						name="email"
+						type="email"
+						required
+						placeholder="Your email address"
+						id="email"
+					/>
 
 					<label htmlFor="type">Message type</label>
-					<select name="type[]" id="type">
+					<select className={styles.input} name="type[]" id="type">
 						<option value="bug">Bug</option>
 						<option value="question">Question</option>
 						<option value="suggestion">Suggestion</option>
@@ -33,14 +42,19 @@ const Contact: FC = () => {
 					</select>
 
 					<label htmlFor="message">Message</label>
-					<textarea required name="message" placeholder="Your message" id="message"></textarea>
+					<textarea
+						className={styles.textarea}
+						required
+						name="message"
+						placeholder="Your message"
+					></textarea>
 
 					<ReCAPTCHA
 						theme={theme as 'light' | 'dark'}
 						sitekey={process.env.NEXT_PUBLIC_CAPTCHA_KEY}
 					/>
 
-					<button className="button submit" type="submit">
+					<button className={styles.submit + ' button'} type="submit">
 						Send
 					</button>
 				</form>

src/components/Footer.module.scss

@@ -0,0 +1,31 @@
+.body {
+	background-color: var(--secondary);
+	border-top: 0.1rem solid var(--borders);
+
+	padding: 3rem;
+}
+
+.profile {
+	width: 5rem;
+	height: 5rem;
+}
+
+.branding {
+	display: inline-block;
+	font-size: 2rem;
+	margin-left: 1rem;
+	vertical-align: top;
+}
+
+.socials {
+	margin-left: 4rem;
+	display: inline-block;
+	height: 100%;
+	padding: 1rem 0;
+}
+
+.socialLink {
+	height: 3rem;
+	width: 3rem;
+	margin-right: 2rem;
+}

src/components/Footer.tsx

@@ -2,36 +2,38 @@ import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
 
 import { FC } from 'react';
 
+import styles from './Footer.module.scss';
+
 const Footer: FC = () => {
 	return (
-		<footer className="footer">
+		<footer className={styles.body}>
 			<div className="container">
 				<img
 					src="/assets/images/profile.svg"
 					width="100%"
 					height="100%"
 					alt=""
-					className="profile"
+					className={styles.profile + ' profile'}
 				/>
-				<div className="branding">
+				<div className={styles.branding}>
 					Guus van Meerveld <br />
 					&#169; 2021
 				</div>
-				<div className="socials">
+				<div className={styles.socials}>
 					<a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
-						<FaTwitter className="img" />
+						<FaTwitter className={styles.socialLink} />
 					</a>
 					<a
 						href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"
 						aria-label="youtube link"
 					>
-						<FaYoutube className="img" />
+						<FaYoutube className={styles.socialLink} />
 					</a>
 					<a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
-						<FaCoffee className="img" />
+						<FaCoffee className={styles.socialLink} />
 					</a>
 					<a href="https://github.com/guusvanmeerveld" aria-label="github link">
-						<FaGithub className="img" />
+						<FaGithub className={styles.socialLink} />
 					</a>
 				</div>
 			</div>

src/components/Navbar.module.scss

@@ -0,0 +1,47 @@
+.bar {
+	z-index: 1;
+	background-color: var(--secondary);
+	border-bottom: 0.1rem solid var(--borders);
+
+	position: fixed;
+	top: 0;
+	padding: 1.5rem 0;
+
+	width: 100%;
+}
+
+.header {
+	font-size: 1.75rem;
+}
+
+.items {
+	float: right;
+	display: flex;
+	justify-content: center;
+
+	a {
+		margin-left: 1rem;
+	}
+}
+
+.moon,
+.sun {
+	font-size: 2rem;
+	margin-left: 1rem;
+	margin-top: 0.25rem;
+	cursor: pointer;
+}
+
+.moon {
+	display: none;
+}
+
+[data-theme='dark'] {
+	.sun {
+		display: none;
+	}
+
+	.moon {
+		display: inline-block !important;
+	}
+}

src/components/Navbar.tsx

@@ -4,21 +4,23 @@ import { ImSun } from 'react-icons/im';
 
 import { FC } from 'react';
 
+import styles from './Navbar.module.scss';
+
 const Navbar: FC = () => {
 	const { theme, setTheme } = useTheme();
 	const switchTheme = (): void => setTheme(theme == 'dark' ? 'light' : 'dark');
 
 	return (
-		<nav className="navigation">
+		<nav className={styles.bar}>
 			<div className="container">
-				<span className="header">Portfolio</span>
+				<span className={styles.header}>Portfolio</span>
-				<div className="items">
+				<div className={styles.items}>
 					<a href="/#projects">Projects</a>
 					<a href="/contact">Contact</a>
 					<a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
 
-					<BiMoon onClick={switchTheme} className="dark-switch moon" />
+					<BiMoon onClick={switchTheme} className={styles.moon} />
-					<ImSun onClick={switchTheme} className="dark-switch sun" />
+					<ImSun onClick={switchTheme} className={styles.sun} />
 				</div>
 			</div>
 		</nav>

src/components/Project.module.scss

@@ -0,0 +1,56 @@
+.body {
+	border-top: 0.1rem solid var(--borders);
+
+	padding: 5rem 0;
+}
+
+.title {
+	font-size: 4rem;
+}
+
+.right {
+	text-align: right;
+}
+
+.content {
+	display: flex;
+}
+
+.info,
+.right {
+	font-size: 2rem;
+	width: 50%;
+}
+
+.button:not(:last-child) {
+	margin-right: 1rem;
+}
+
+.cover {
+	width: 50%;
+
+	img {
+		display: block;
+		margin: auto;
+		height: 20rem;
+		width: 20rem;
+	}
+}
+
+@media only screen and (max-width: 600px) {
+	.cover,
+	.info {
+		width: 100%;
+		margin: 2rem 0;
+		text-align: center;
+
+		img {
+			height: 15rem;
+			width: 15rem;
+		}
+	}
+
+	.content {
+		display: block;
+	}
+}

src/components/Project.tsx

@@ -2,27 +2,29 @@ import { FC } from 'react';
 
 import ProjectType from '@models/project';
 
+import styles from './Project.module.scss';
+
 interface ProjectComponent extends ProjectType {
 	right: boolean;
 }
 
 const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, right }) => {
 	return (
-		<div className="project">
+		<div className={styles.body}>
-			<div className="content">
+			<div className={styles.content}>
-				<div className={right ? 'info right' : 'info'}>
+				<div className={right ? styles.right : styles.info}>
-					<div className="title">{name}</div>
+					<div className={styles.title}>{name}</div>
 					{description}
 					<br />
 					<br />
 					{buttons.map((button, i) => (
-						<a href={button.link} className="button" key={i}>
+						<a href={button.link} className={styles.button + ' button'} key={i}>
 							{button.text}
 						</a>
 					))}
 				</div>
 				{cover ? (
-					<div className="cover">
+					<div className={styles.cover}>
 						<img src={`/assets/images/${cover}`} width="100%" height="100%" alt="" />
 					</div>
 				) : null}

src/pages/Home.module.scss

@@ -0,0 +1,40 @@
+.body {
+	background: var(--secondary);
+	margin-top: 6rem;
+
+	text-align: center;
+}
+
+.content {
+	padding: 7rem 3rem;
+}
+
+.profile {
+	height: 10rem;
+	width: 10rem;
+	margin: auto;
+	margin-bottom: 3rem;
+	display: block;
+}
+
+.title {
+	font-size: 4rem;
+	display: block;
+}
+
+.subtitle {
+	margin-top: 2rem;
+	margin-bottom: 4rem;
+	display: block;
+	font-size: 2rem;
+}
+
+.header {
+	font-size: 4rem;
+	text-align: center;
+	margin-bottom: 3rem;
+}
+
+.projects {
+	margin-top: 3rem;
+}

src/pages/_app.tsx

@@ -5,7 +5,7 @@ import type { AppProps } from 'next/app';
 import 'milligram';
 import '@styles/raleway.css';
 
-import '@styles/sass/index.scss';
+import '@styles/globals.scss';
 
 function App({ Component, pageProps }: AppProps): JSX.Element {
 	return (

src/pages/contact.tsx

@@ -8,9 +8,7 @@ const Contact: NextPage = () => {
 	return (
 		<Page description="Contact me" title="Contact">
 			<Layout>
-				<div className="contact-page">
 				<ContactForm />
-				</div>
 			</Layout>
 		</Page>
 	);

src/pages/index.tsx

@@ -6,17 +6,19 @@ import Page from '@components/Page';
 import Project from '@components/Project';
 import projects from '@config/projects.json';
 
+import styles from './Home.module.scss';
+
 const Home: NextPage = () => (
 	<Page description="A simple portfolio website to display my projects." title="Home">
 		<Layout>
-			<div className="landing">
+			<div className={styles.body}>
-				<div className="container">
+				<div className={styles.content + ' container'}>
-					<span className="profile">
+					<span className={styles.profile + ' profile'}>
 						<img src="/assets/images/profile.svg" width="100%" height="100%" alt="" />
 					</span>
 
-					<span className="title">Guus van Meerveld</span>
+					<span className={styles.title}>Guus van Meerveld</span>
-					<span className="subtitle">
+					<span className={styles.subtitle}>
 						TypeScript / Dart developer, <br />
 						currently working on Argo.
 					</span>
@@ -27,9 +29,9 @@ const Home: NextPage = () => (
 				</div>
 			</div>
 
-			<div className="projects">
+			<div className={styles.projects}>
 				<div className="container">
-					<div className="header" id="projects">
+					<div className={styles.header} id="projects">
 						Projects
 					</div>
 

src/styles/globals.scss

@@ -1,8 +1,8 @@
 :root {
+	--primary: #9a36d8;
 	--background: white;
 	--secondary: #f4f5f6;
 	--borders: #e4e4e4;
-	--links: #9a36d8;
 	--foreground: #606c76;
 }
 
@@ -11,8 +11,8 @@
 		filter: invert(1);
 	}
 
+	--primary: #00b8d4;
 	--background: #212123;
-	--links: #c181e8;
 	--secondary: #1c1c1c;
 	--borders: #3c3838;
 	--foreground: rgb(236, 235, 235);
@@ -22,17 +22,12 @@ body {
 	margin: 0;
 	background-color: var(--background);
 	color: var(--foreground);
+
+	font-family: 'Raleway';
 }
 
 a {
-	color: var(--links);
+	color: var(--primary);
 }
 
-@import 'nav.scss';
-@import 'landing.scss';
-@import 'project.scss';
-@import 'contact.scss';
-@import 'footer.scss';
-
-@import 'upload.scss';
 @import 'page.scss';

src/styles/page.scss

@@ -1,7 +1,6 @@
 .page {
-	font-family: 'Raleway';
 	height: 100vh;
-	width: 100vw;
+
 	display: flex;
 	justify-content: center;
 	align-items: center;

src/styles/sass/contact.scss

@@ -1,34 +0,0 @@
-.contact {
-	.header {
-		font-size: 4rem;
-		text-align: center;
-		margin-bottom: 3rem;
-		// border-top: 0.1rem solid var(--borders);
-		padding-top: 4rem;
-	}
-
-	input,
-	textarea,
-	select {
-		border-color: var(--borders);
-		color: var(--foreground);
-		background-color: var(--secondary);
-	}
-
-	.submit {
-		margin-top: 1.5rem;
-	}
-
-	font-family: 'Raleway';
-
-	#message {
-		resize: none;
-		height: 10rem;
-	}
-}
-
-.contact-page {
-	height: 100vh;
-
-	padding-top: 10rem;
-}

src/styles/sass/footer.scss

@@ -1,33 +0,0 @@
-.footer {
-	background-color: var(--secondary);
-	border-top: 0.1rem solid var(--borders);
-
-	padding: 3rem;
-
-	font-family: 'Raleway';
-
-	.profile {
-		width: 5rem;
-		height: 5rem;
-	}
-
-	.branding {
-		display: inline-block;
-		font-size: 2rem;
-		margin-left: 1rem;
-		vertical-align: top;
-	}
-
-	.socials {
-		margin-left: 4rem;
-		display: inline-block;
-		height: 100%;
-		padding: 1rem 0;
-
-		.img {
-			height: 3rem;
-			width: 3rem;
-			margin-right: 2rem;
-		}
-	}
-}

src/styles/sass/landing.scss

@@ -1,31 +0,0 @@
-.landing {
-	background: var(--secondary);
-	margin-top: 6rem;
-
-	.container {
-		padding: 7rem 3rem;
-	}
-
-	.profile {
-		height: 10rem;
-		width: 10rem;
-		margin: auto;
-		margin-bottom: 3rem;
-		display: block;
-	}
-
-	text-align: center;
-	font-family: 'Raleway';
-
-	.title {
-		font-size: 4rem;
-		display: block;
-	}
-
-	.subtitle {
-		margin-top: 2rem;
-		margin-bottom: 4rem;
-		display: block;
-		font-size: 2rem;
-	}
-}

src/styles/sass/nav.scss

@@ -1,47 +0,0 @@
-.navigation {
-	z-index: 1;
-	background-color: var(--secondary);
-	border-bottom: 0.1rem solid var(--borders);
-
-	position: fixed;
-	top: 0;
-	font-family: 'Raleway';
-	padding: 1.5rem 0;
-
-	width: 100%;
-
-	.header {
-		font-size: 1.75rem;
-	}
-
-	.items {
-		float: right;
-		display: flex;
-		justify-content: center;
-
-		.moon {
-			display: none;
-		}
-
-		.dark-switch {
-			font-size: 2rem;
-			margin-left: 1rem;
-			margin-top: 0.25rem;
-			cursor: pointer;
-		}
-
-		a {
-			margin-left: 1rem;
-		}
-	}
-}
-
-[data-theme='dark'] {
-	.sun {
-		display: none;
-	}
-
-	.moon {
-		display: inline-block !important;
-	}
-}

src/styles/sass/project.scss

@@ -1,64 +0,0 @@
-.projects {
-	.header {
-		font-size: 4rem;
-		text-align: center;
-		margin-bottom: 3rem;
-	}
-
-	font-family: 'Raleway';
-	margin-top: 3rem;
-
-	.project {
-		border-top: 0.1rem solid var(--borders);
-
-		padding: 5rem 0;
-
-		.title {
-			font-size: 4rem;
-		}
-
-		.right {
-			text-align: right;
-		}
-
-		.content {
-			display: flex;
-
-			.info {
-				font-size: 2rem;
-				width: 50%;
-
-				.button:not(:last-child) {
-					margin-right: 1rem;
-				}
-			}
-
-			.cover {
-				width: 50%;
-
-				img {
-					display: block;
-					margin: auto;
-					height: 20rem;
-					width: 20rem;
-				}
-			}
-
-			@media only screen and (max-width: 600px) {
-				.cover,
-				.info {
-					width: 100%;
-					margin: 2rem 0;
-					text-align: center;
-
-					img {
-						height: 15rem;
-						width: 15rem;
-					}
-				}
-
-				display: block;
-			}
-		}
-	}
-}

src/styles/sass/upload.scss

@@ -1,3 +0,0 @@
-.upload {
-	padding-top: 6rem;
-}