Major improvements to SCSS code

src/components/Contact.module.scss

@@ -5,13 +5,6 @@
 	padding-top: 4rem;
 }
 
-.input,
-.textarea {
-	border-color: var(--borders);
-	color: var(--foreground);
-	background-color: var(--secondary);
-}
-
 .textarea {
 	resize: none;
 	height: 10rem;

src/components/Navbar.module.scss

@@ -10,6 +10,15 @@
 	width: 100%;
 }
 
+.select {
+	border-color: var(--borders);
+	color: var(--foreground);
+	background-color: var(--secondary);
+
+	width: 7.5rem;
+	margin-bottom: 0;
+}
+
 .header {
 	font-size: 1.75rem;
 }

src/components/Navbar.tsx

@@ -21,6 +21,11 @@ const Navbar: FC = () => {
 			<div className="container">
 				<span className={styles.header}>Portfolio</span>
 				<div className={styles.items}>
+					<select id="" className={styles.select}>
+						<option value="nl">NL</option>
+						<option value="en">EN</option>
+					</select>
+
 					<Link href="/#projects">
 						<a>{t('nav.projects')}</a>
 					</Link>
@@ -42,6 +47,8 @@ const Navbar: FC = () => {
 export const getStaticProps: GetStaticProps = async ({ locale }) => {
 	const { default: lngDict = {} } = await import(`../locales/${locale}.json`);
 
+	console.log(lngDict);
+
 	return {
 		props: { lngDict },
 	};

src/components/PageBuilder.module.scss

@@ -0,0 +1,21 @@
+.body {
+	height: 100vh;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	text-align: center;
+}
+
+.header {
+	font-size: 5rem;
+}
+
+.subtitle {
+	font-size: 3rem;
+}
+
+.link {
+	margin-top: 1.5rem;
+}

src/components/PageBuilder.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+import { FC } from 'react';
+
+import styles from './PageBuilder.module.scss';
+
+const PageBuilder: FC<{ header: string; subtitle: string }> = ({ header, subtitle, children }) => (
+	<div className={styles.body}>
+		<div>
+			{children}
+			<div className={styles.header}>{header}</div>
+			<div className={styles.subtitle}>{subtitle}</div>
+			<Link href="/">
+				<a className={styles.link + ' button'}>Go back</a>
+			</Link>
+		</div>
+	</div>
+);
+
+export default PageBuilder;

src/components/Project.module.scss

@@ -4,8 +4,8 @@
 	padding: 5rem 0;
 }
 
-.title {
-	font-size: 4rem;
+.description {
+	margin-bottom: 2rem;
 }
 
 .right {

src/components/Project.tsx

@@ -16,10 +16,9 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
 		<div className={styles.body}>
 			<div className={styles.content}>
 				<div className={right ? styles.right : styles.info}>
-					<div className={styles.title}>{name}</div>
-					{description}
-					<br />
-					<br />
+					<h2>{name}</h2>
+					<div className={styles.description}>{description}</div>
+
 					{buttons.map((button, i) => (
 						<Link href={button.link} key={i}>
 							<a className={styles.button + ' button'}>{button.text}</a>

src/pages/404.tsx

@@ -1,22 +1,16 @@
-import Link from 'next/link';
-
 import { FC } from 'react';
 
 import Page from '@components/Page';
 import Layout from '@components/Layout';
+import PageBuilder from '@components/PageBuilder';
 
 const NotFound: FC = () => (
 	<Page title="Page not found" description="This page either doesn't exist or has been deleted">
 		<Layout>
-			<div className="page">
-				<div>
-					<div className="header">Not found</div>
-					<div className="subtitle">This page either doesn&apos;t exist or has been deleted</div>
-					<Link href="/">
-						<a className="link button">Go back</a>
-					</Link>
-				</div>
-			</div>
+			<PageBuilder
+				header="Not found"
+				subtitle="This page either doesn't exist or has been deleted"
+			/>
 		</Layout>
 	</Page>
 );

src/pages/home.module.scss

@@ -12,23 +12,14 @@
 .profile {
 	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;
+.projectsHeader {
 	text-align: center;
 	margin-bottom: 3rem;
 }

src/pages/index.tsx

@@ -10,7 +10,7 @@ import Page from '@components/Page';
 import Project from '@components/Project';
 import projects from '@config/projects.json';
 
-import styles from './Home.module.scss';
+import styles from './home.module.scss';
 
 const Home: NextPage = () => {
 	const { t } = useI18n();
@@ -20,12 +20,12 @@ const Home: NextPage = () => {
 			<Layout>
 				<div className={styles.body}>
 					<div className={styles.content + ' container'}>
-						<span className={styles.profile + ' profile'}>
+						<div className={styles.profile + ' profile'}>
 							<Image src="/assets/images/profile.svg" width={100} height={100} alt="" />
-						</span>
+						</div>
 
-						<span className={styles.title}>Guus van Meerveld</span>
-						<span className={styles.subtitle}>{t('pages.home.subtitle')}</span>
+						<h1>Guus van Meerveld</h1>
+						<h4 className={styles.subtitle}>{t('pages.home.subtitle')}</h4>
 
 						<a href="#projects" className="button">
 							{t('pages.home.projects.button')}
@@ -35,9 +35,9 @@ const Home: NextPage = () => {
 
 				<div className={styles.projects}>
 					<div className="container">
-						<div className={styles.header} id="projects">
-							Projects
-						</div>
+						<h1 className={styles.projectsHeader} id="projects">
+							{t('nav.projects')}
+						</h1>
 
 						{projects.map((project, i) => {
 							const props = { ...project, right: (i + 1) % 2 == 0 };

src/pages/shifts.tsx

@@ -14,7 +14,7 @@ import Page from '@components/Page';
 
 import Shift from '@models/shifts';
 
-import styles from './Shifts.module.scss';
+import styles from './shifts.module.scss';
 
 interface APIResponse {
 	updated: Date;

src/pages/thanks.module.scss

@@ -0,0 +1,3 @@
+.icon {
+	font-size: 10rem;
+}

src/pages/thanks.tsx

@@ -1,26 +1,21 @@
 import { NextPage } from 'next';
-import Link from 'next/link';
 
 import Page from '@components/Page';
 import Layout from '@components/Layout';
+import PageBuilder from '@components/PageBuilder';
+
+import styles from './thanks.module.scss';
 
 const Thanks: NextPage = () => (
 	<Page title="Thanks!" description="Thanks for submitting your contact form!">
 		<Layout>
-			<div className="page">
-				<div>
-					<div className="icon">
-						<span role="img" aria-label="heart emoji">
-							❤️
-						</span>
-					</div>
-					<div className="header">Thank you!</div>
-					<div className="subtitle">Your submission is greatly appreciated!</div>
-					<Link href="/">
-						<a className="link button">Go back</a>
-					</Link>
+			<PageBuilder header="Thank you!" subtitle="Your submission is greatly appreciated!">
+				<div className={styles.icon}>
+					<span role="img" aria-label="heart emoji">
+						❤️
+					</span>
 				</div>
-			</div>
+			</PageBuilder>
 		</Layout>
 	</Page>
 );

src/styles/global/body.scss

@@ -0,0 +1,7 @@
+body {
+	margin: 0;
+	background-color: var(--background);
+	color: var(--foreground);
+
+	font-family: 'Raleway';
+}

src/styles/global/button.scss

@@ -0,0 +1,4 @@
+.button {
+	background-color: var(--primary);
+	border-color: var(--primary);
+}

src/styles/global/input.scss

@@ -0,0 +1,7 @@
+input,
+textarea,
+select {
+	&:focus {
+		border-color: var(--primary);
+	}
+}

src/styles/global/link.scss

@@ -0,0 +1,3 @@
+a {
+	color: var(--primary);
+}

src/styles/global/table.scss

@@ -0,0 +1,4 @@
+td,
+th {
+	border-color: var(--borders);
+}

src/styles/globals.scss

@@ -16,35 +16,10 @@
 	--secondary: #1c1c1c;
 	--borders: #3c3838;
 	--foreground: rgb(236, 235, 235);
-
-	td,
-	th {
-		border-color: var(--borders);
-	}
-}
-
-body {
-	margin: 0;
-	background-color: var(--background);
-	color: var(--foreground);
-
-	font-family: 'Raleway';
-}
-
-a {
-	color: var(--primary);
-}
-
-.button {
-	background-color: var(--primary);
-	border-color: var(--primary);
-}
-
-input:focus,
-textarea:focus,
-select:focus,
-input[type='email']:focus {
-	border-color: var(--primary);
 }
 
-@import 'page.scss';
+@import './global/body.scss';
+@import './global/link.scss';
+@import './global/input.scss';
+@import './global/table.scss';
+@import './global/button.scss';

src/styles/page.scss

@@ -1,25 +0,0 @@
-.page {
-	height: 100vh;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	text-align: center;
-
-	.icon {
-		font-size: 10rem;
-	}
-
-	.header {
-		font-size: 5rem;
-	}
-
-	.subtitle {
-		font-size: 3rem;
-	}
-
-	.link {
-		margin-top: 1.5rem;
-	}
-}