diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..18cc72e
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,11 @@
+dist
+node_modules
+README.md
+.vscode
+yarn.lock
+package-lock.json
+LICENSE
+.env
+.prettierrc
+.next
+next-env.d.ts
\ No newline at end of file
diff --git a/package.json b/package.json
index 4a687a5..f26745d 100644
--- a/package.json
+++ b/package.json
@@ -1,26 +1,26 @@
 {
-  "name": "portfolio",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "axios": "^0.21.1",
-    "milligram": "^1.4.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",
-    "sass": "^1.32.8"
-  },
-  "devDependencies": {
-    "@types/node": "^14.14.32",
-    "@types/react": "^17.0.3",
-    "typescript": "^4.2.3"
-  }
+	"name": "portfolio",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"pretify": "prettier --write ."
+	},
+	"dependencies": {
+		"milligram": "^1.4.1",
+		"next": "10.0.8",
+		"next-themes": "^0.0.12",
+		"react": "17.0.1",
+		"react-dom": "17.0.1",
+		"react-icons": "^4.2.0",
+		"sass": "^1.32.8"
+	},
+	"devDependencies": {
+		"@types/node": "^14.14.32",
+		"@types/react": "^17.0.3",
+		"prettier": "^2.2.1",
+		"typescript": "^4.2.3"
+	}
 }
diff --git a/public/manifest.json b/public/manifest.json
index 7f03146..2d2551c 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,16 +1,16 @@
 {
-    "short_name": "Porfolio",
-    "name": "Guus van Meerveld's portfolio",
-    "icons": [
-        {
-            "src": "/img/profile-192.png",
-            "type": "image/png",
-            "sizes": "192x192"
-        }
-    ],
-    "background_color": "#FFFFFF",
-    "display": "standalone",
-    "scope": "/",
-    "theme_color": "#9b4dca",
-    "description": "A simple portfolio website to display my projects."
-}
\ No newline at end of file
+	"short_name": "Porfolio",
+	"name": "Guus van Meerveld's portfolio",
+	"icons": [
+		{
+			"src": "/img/profile-192.png",
+			"type": "image/png",
+			"sizes": "192x192"
+		}
+	],
+	"background_color": "#FFFFFF",
+	"display": "standalone",
+	"scope": "/",
+	"theme_color": "#9b4dca",
+	"description": "A simple portfolio website to display my projects."
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c565297..c308f2b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,32 +1,35 @@
-import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from "react-icons/fa";
+import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
 
 const Footer = () => {
-  const year = new Date().getFullYear();
-  return (
-    <footer className="footer">
-      <div className="container">
-        <img src="/img/profile.svg" width="100%" height="100%" alt="" className="profile" />
-        <div className="branding">
-          Guus van Meerveld <br />
-          &#169; {year}
-        </div>
-        <div className="socials">
-          <a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
-            <FaTwitter className="img" />
-          </a>
-          <a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ" aria-label="youtube link">
-            <FaYoutube className="img" />
-          </a>
-          <a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
-            <FaCoffee className="img" />
-          </a>
-          <a href="https://github.com/guusvanmeerveld" aria-label="github link">
-            <FaGithub className="img" />
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
+	const year = new Date().getFullYear();
+	return (
+		<footer className="footer">
+			<div className="container">
+				<img src="/img/profile.svg" width="100%" height="100%" alt="" className="profile" />
+				<div className="branding">
+					Guus van Meerveld <br />
+					&#169; {year}
+				</div>
+				<div className="socials">
+					<a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
+						<FaTwitter className="img" />
+					</a>
+					<a
+						href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"
+						aria-label="youtube link"
+					>
+						<FaYoutube className="img" />
+					</a>
+					<a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
+						<FaCoffee className="img" />
+					</a>
+					<a href="https://github.com/guusvanmeerveld" aria-label="github link">
+						<FaGithub className="img" />
+					</a>
+				</div>
+			</div>
+		</footer>
+	);
 };
 
 export default Footer;
diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
index 8e6be32..acf2858 100644
--- a/src/components/Landing.tsx
+++ b/src/components/Landing.tsx
@@ -1,21 +1,21 @@
 const Landing = () => (
-  <div className="landing">
-    <div className="container">
-      <span className="profile">
-        <img src="/img/profile.svg" width="100%" height="100%" alt="" />
-      </span>
+	<div className="landing">
+		<div className="container">
+			<span className="profile">
+				<img src="/img/profile.svg" width="100%" height="100%" alt="" />
+			</span>
 
-      <span className="title">Guus van Meerveld</span>
-      <span className="subtitle">
-        TypeScript / Dart developer, <br />
-        currently working on Argo.
-      </span>
+			<span className="title">Guus van Meerveld</span>
+			<span className="subtitle">
+				TypeScript / Dart developer, <br />
+				currently working on Argo.
+			</span>
 
-      <a href="#projects" className="button d-block m-auto">
-        Check out my projects
-      </a>
-    </div>
-  </div>
+			<a href="#projects" className="button d-block m-auto">
+				Check out my projects
+			</a>
+		</div>
+	</div>
 );
 
 export default Landing;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 7963882..4a6919a 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,12 +1,12 @@
-import Navbar from "./Navbar";
-import Footer from "./Footer";
+import Navbar from './Navbar';
+import Footer from './Footer';
 
 const Layout = ({ children }) => (
-  <>
-    <Navbar />
-    {children}
-    <Footer />
-  </>
+	<>
+		<Navbar />
+		{children}
+		<Footer />
+	</>
 );
 
 export default Layout;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e0de24a..080584d 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,26 +1,26 @@
-import { useTheme } from "next-themes";
-import { BiMoon } from "react-icons/bi";
-import { ImSun } from "react-icons/im";
+import { useTheme } from 'next-themes';
+import { BiMoon } from 'react-icons/bi';
+import { ImSun } from 'react-icons/im';
 
 const Navbar = () => {
-  const { theme, setTheme } = useTheme();
-  const switchTheme = () => setTheme(theme == "dark" ? "light" : "dark");
+	const { theme, setTheme } = useTheme();
+	const switchTheme = () => setTheme(theme == 'dark' ? 'light' : 'dark');
 
-  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>
+	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>
 
-          <BiMoon onClick={switchTheme} className="dark-switch moon" />
-          <ImSun onClick={switchTheme} className="dark-switch sun" />
-        </div>
-      </div>
-    </nav>
-  );
+					<BiMoon onClick={switchTheme} className="dark-switch moon" />
+					<ImSun onClick={switchTheme} className="dark-switch sun" />
+				</div>
+			</div>
+		</nav>
+	);
 };
 
 export default Navbar;
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index dc22690..2cb04db 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -1,27 +1,27 @@
-import Head from "next/head";
+import Head from 'next/head';
 
 const Page = ({
-  title,
-  description,
-  children,
+	title,
+	description,
+	children,
 }: {
-  title: string;
-  description: string;
-  children: JSX.Element[] | JSX.Element;
+	title: string;
+	description: string;
+	children: JSX.Element[] | JSX.Element;
 }) => (
-  <>
-    <Head>
-      <meta charSet="UTF-8" />
-      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>G-VM | {title}</title>
-      <meta name="description" content={description} />
-      <meta name="keywords" content="guus van meerveld argo magister tempo discord" />
-      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-      <link rel="apple-touch-icon" sizes="192x192" href="/img/profile-192.png" />
-    </Head>
-    {children}
-  </>
+	<>
+		<Head>
+			<meta charSet="UTF-8" />
+			<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+			<title>G-VM | {title}</title>
+			<meta name="description" content={description} />
+			<meta name="keywords" content="guus van meerveld argo magister tempo discord" />
+			<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+			<link rel="apple-touch-icon" sizes="192x192" href="/img/profile-192.png" />
+		</Head>
+		{children}
+	</>
 );
 
 export default Page;
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index a4e4f99..23cfe08 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,93 +1,96 @@
 const Projects = () => (
-  <div className="projects">
-    <div className="container">
-      <div className="header" id="projects">
-        Projects
-      </div>
+	<div className="projects">
+		<div className="container">
+			<div className="header" id="projects">
+				Projects
+			</div>
 
-      <div className="project">
-        <div className="content">
-          <div className="info">
-            <div className="title">Argo</div>
-            Argo is a new app for Magister 6, made with <b>Dart and Flutter</b>. It will soon be available on the Google
-            Play store and (maybe) even the App store! For more information, click either of the buttons below.
-            <br />
-            <br />
-            <a href="https://argo-magister.net" className="button">
-              Website
-            </a>
-            <a href="https://github.com/argo-client/app" className="button">
-              Github
-            </a>
-          </div>
-          <div className="cover">
-            <img src="/img/argo.png" width="100%" height="100%" alt="" />
-          </div>
-        </div>
-      </div>
+			<div className="project">
+				<div className="content">
+					<div className="info">
+						<div className="title">Argo</div>
+						Argo is a new app for Magister 6, made with <b>Dart and Flutter</b>. It will soon be
+						available on the Google Play store and (maybe) even the App store! For more information,
+						click either of the buttons below.
+						<br />
+						<br />
+						<a href="https://argo-magister.net" className="button">
+							Website
+						</a>
+						<a href="https://github.com/argo-client/app" className="button">
+							Github
+						</a>
+					</div>
+					<div className="cover">
+						<img src="/img/argo.png" width="100%" height="100%" alt="" />
+					</div>
+				</div>
+			</div>
 
-      <div className="project">
-        <div className="content">
-          <div className="cover">
-            <img src="/img/tempo.png" width="100%" height="100%" alt="" />
-          </div>
-          <div className="info right">
-            <div className="title">Tempo</div>
-            Tempo is a "simple" Discord bot which can be used to play YouTube, SoundCloud and even Spotify songs. It's
-            made in pure <b>TypeScript</b> and has plentiful settings. <br />
-            <br />
-            <a href="https://tempo.g-vm.nl" className="button">
-              Website
-            </a>
-            <a href="https://tempo.g-vm.nl/invite" className="button">
-              Invite
-            </a>
-          </div>
-        </div>
-      </div>
+			<div className="project">
+				<div className="content">
+					<div className="cover">
+						<img src="/img/tempo.png" width="100%" height="100%" alt="" />
+					</div>
+					<div className="info right">
+						<div className="title">Tempo</div>
+						Tempo is a "simple" Discord bot which can be used to play YouTube, SoundCloud and even
+						Spotify songs. It's made in pure <b>TypeScript</b> and has plentiful settings. <br />
+						<br />
+						<a href="https://tempo.g-vm.nl" className="button">
+							Website
+						</a>
+						<a href="https://tempo.g-vm.nl/invite" className="button">
+							Invite
+						</a>
+					</div>
+				</div>
+			</div>
 
-      <div className="project">
-        <div className="content">
-          <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 />
-            <br />
-            <a href="https://keyzo.net" className="button">
-              Website
-            </a>
-            <a href="https://github.com/Guusvanmeerveld/Keyzo" className="button">
-              Github
-            </a>
-          </div>
-          <div className="cover"></div>
-        </div>
-      </div>
+			<div className="project">
+				<div className="content">
+					<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 />
+						<br />
+						<a href="https://keyzo.net" className="button">
+							Website
+						</a>
+						<a href="https://github.com/Guusvanmeerveld/Keyzo" className="button">
+							Github
+						</a>
+					</div>
+					<div className="cover"></div>
+				</div>
+			</div>
 
-      <div className="project">
-        <div className="content">
-          <div className="cover">
-            <img src="/img/autologin.png" width="100%" height="100%" alt="" />
-          </div>
-          <div className="info right">
-            <div className="title">Magister Auto-Login</div>
-            Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for you. <br />
-            <br />
-            <a
-              className="button"
-              href="https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl"
-            >
-              Add to Chrome
-            </a>
-            <a className="button" href="https://github.com/Guusvanmeerveld/Magister-Auto-Login">
-              Github
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+			<div className="project">
+				<div className="content">
+					<div className="cover">
+						<img src="/img/autologin.png" width="100%" height="100%" alt="" />
+					</div>
+					<div className="info right">
+						<div className="title">Magister Auto-Login</div>
+						Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for
+						you. <br />
+						<br />
+						<a
+							className="button"
+							href="https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl"
+						>
+							Add to Chrome
+						</a>
+						<a className="button" href="https://github.com/Guusvanmeerveld/Magister-Auto-Login">
+							Github
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 );
 
 export default Projects;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 2d43bf3..35bf62f 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,20 +1,20 @@
-import Page from "src/components/Page";
-import Layout from "src/components/Layout";
+import Page from 'src/components/Page';
+import Layout from 'src/components/Layout';
 
 const NotFound = () => (
-  <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't exist or has been deleted</div>
-          <a href="/" className="link button">
-            Go back
-          </a>
-        </div>
-      </div>
-    </Layout>
-  </Page>
+	<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't exist or has been deleted</div>
+					<a href="/" className="link button">
+						Go back
+					</a>
+				</div>
+			</div>
+		</Layout>
+	</Page>
 );
 
 export default NotFound;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 05b188d..5cab8df 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,20 +1,20 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 export default class AppDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
-  }
+	static async getInitialProps(ctx) {
+		const initialProps = await Document.getInitialProps(ctx);
+		return { ...initialProps };
+	}
 
-  render() {
-    return (
-      <Html lang="en">
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
+	render() {
+		return (
+			<Html lang="en">
+				<Head />
+				<body>
+					<Main />
+					<NextScript />
+				</body>
+			</Html>
+		);
+	}
 }
diff --git a/src/pages/binas.tsx b/src/pages/binas.tsx
index 4197a30..ef35aba 100644
--- a/src/pages/binas.tsx
+++ b/src/pages/binas.tsx
@@ -1,36 +1,36 @@
-import Page from "@components/Page";
-import Layout from "@components/Layout";
-import { Component } from "react";
+import Page from '@components/Page';
+import Layout from '@components/Layout';
+import { Component } from 'react';
 
 class Binas extends Component {
-  links: string[];
+	links: string[];
 
-  constructor(props) {
-    super(props);
+	constructor(props) {
+		super(props);
 
-    this.links = new Array();
+		this.links = new Array();
 
-    for (let i = 1; i < 305; i++) {
-      this.links.push(this.link(i));
-    }
-  }
+		for (let i = 1; i < 305; i++) {
+			this.links.push(this.link(i));
+		}
+	}
 
-  link = (page) =>
-    `https://cdp.contentdelivery.nu/1fa0c165-3b6c-4c5b-acee-a231157e66a3/20160908101125/extract/assets/img/layout/${page}.jpg`;
+	link = (page) =>
+		`https://cdp.contentdelivery.nu/1fa0c165-3b6c-4c5b-acee-a231157e66a3/20160908101125/extract/assets/img/layout/${page}.jpg`;
 
-  render() {
-    return (
-      <Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
-        <Layout>
-          <div className="binas">
-            {this.links.map((link, i) => (
-              <img key={i} src={link} alt="" />
-            ))}
-          </div>
-        </Layout>
-      </Page>
-    );
-  }
+	render() {
+		return (
+			<Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
+				<Layout>
+					<div className="binas">
+						{this.links.map((link, i) => (
+							<img key={i} src={link} alt="" />
+						))}
+					</div>
+				</Layout>
+			</Page>
+		);
+	}
 }
 
 export default Binas;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cc37cff..5862bfc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,17 +1,17 @@
-import Page from "@components/Page";
-import Landing from "@components/Landing";
-import Projects from "@components/Projects";
-import Contact from "@components/Contact";
-import Layout from "@components/Layout";
+import Page from '@components/Page';
+import Landing from '@components/Landing';
+import Projects from '@components/Projects';
+import Contact from '@components/Contact';
+import Layout from '@components/Layout';
 
 const Home = () => (
-  <Page description="A simple portfolio website to display my projects." title="Projects">
-    <Layout>
-      <Landing />
-      <Projects />
-      <Contact />
-    </Layout>
-  </Page>
+	<Page description="A simple portfolio website to display my projects." title="Projects">
+		<Layout>
+			<Landing />
+			<Projects />
+			<Contact />
+		</Layout>
+	</Page>
 );
 
 export default Home;
diff --git a/src/pages/thanks.tsx b/src/pages/thanks.tsx
index 0899f2b..5520d18 100644
--- a/src/pages/thanks.tsx
+++ b/src/pages/thanks.tsx
@@ -1,21 +1,21 @@
-import Page from "src/components/Page";
-import Layout from "src/components/Layout";
+import Page from 'src/components/Page';
+import Layout from 'src/components/Layout';
 
 const Thanks = () => (
-  <Page title="Thanks!" description="Thanks for submitting your contact form!">
-    <Layout>
-      <div className="page">
-        <div>
-          <div className="icon">❤️</div>
-          <div className="header">Thank you!</div>
-          <div className="subtitle">Your submission is greatly appreciated!</div>
-          <a href="/" className="link button">
-            Go back
-          </a>
-        </div>
-      </div>
-    </Layout>
-  </Page>
+	<Page title="Thanks!" description="Thanks for submitting your contact form!">
+		<Layout>
+			<div className="page">
+				<div>
+					<div className="icon">❤️</div>
+					<div className="header">Thank you!</div>
+					<div className="subtitle">Your submission is greatly appreciated!</div>
+					<a href="/" className="link button">
+						Go back
+					</a>
+				</div>
+			</div>
+		</Layout>
+	</Page>
 );
 
 export default Thanks;
diff --git a/src/styles/raleway.css b/src/styles/raleway.css
index d106b61..166670f 100644
--- a/src/styles/raleway.css
+++ b/src/styles/raleway.css
@@ -1,54 +1,57 @@
 /* cyrillic-ext */
 @font-face {
-  font-family: "Raleway";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEVJz9d-c8.woff2)
-    format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+	font-family: 'Raleway';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEVJz9d-c8.woff2)
+		format('woff2');
+	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
 /* cyrillic */
 @font-face {
-  font-family: "Raleway";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEVJz9d-c8.woff2)
-    format("woff2");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+	font-family: 'Raleway';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEVJz9d-c8.woff2)
+		format('woff2');
+	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
 /* vietnamese */
 @font-face {
-  font-family: "Raleway";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEVJz9d-c8.woff2)
-    format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+	font-family: 'Raleway';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEVJz9d-c8.woff2)
+		format('woff2');
+	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+		U+1EA0-1EF9, U+20AB;
 }
 
 /* latin-ext */
 @font-face {
-  font-family: "Raleway";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEVJz9d-c8.woff2)
-    format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	font-family: 'Raleway';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEVJz9d-c8.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
 }
 
 /* latin */
 @font-face {
-  font-family: "Raleway";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrEVJz9d.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	font-family: 'Raleway';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrEVJz9d.woff2)
+		format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/src/styles/sass/binas.scss b/src/styles/sass/binas.scss
index 29b563e..3503c7e 100644
--- a/src/styles/sass/binas.scss
+++ b/src/styles/sass/binas.scss
@@ -1,31 +1,31 @@
 .binas {
-  padding-top: 6rem;
+	padding-top: 6rem;
 
-  img {
-    border: 0.1rem solid var(--borders);
-    border-radius: 5px;
+	img {
+		border: 0.1rem solid var(--borders);
+		border-radius: 5px;
 
-    max-width: 100vw;
+		max-width: 100vw;
 
-    @media screen and (min-width: 0px) {
-      height: 55rem;
-    }
+		@media screen and (min-width: 0px) {
+			height: 55rem;
+		}
 
-    @media screen and (min-width: 300px) {
-      height: 70rem;
-    }
+		@media screen and (min-width: 300px) {
+			height: 70rem;
+		}
 
-    @media screen and (min-width: 600px) {
-      height: 85rem;
-    }
+		@media screen and (min-width: 600px) {
+			height: 85rem;
+		}
 
-    @media screen and (min-width: 900px) {
-      height: 100rem;
-    }
+		@media screen and (min-width: 900px) {
+			height: 100rem;
+		}
 
-    margin: auto;
-    display: block;
+		margin: auto;
+		display: block;
 
-    margin-bottom: 2rem;
-  }
+		margin-bottom: 2rem;
+	}
 }
diff --git a/src/styles/sass/contact.scss b/src/styles/sass/contact.scss
index 3f539e4..353ce9f 100644
--- a/src/styles/sass/contact.scss
+++ b/src/styles/sass/contact.scss
@@ -1,24 +1,24 @@
 .contact {
-  .header {
-    font-size: 4rem;
-    text-align: center;
-    margin-bottom: 3rem;
-    border-top: 0.1rem solid var(--borders);
-    padding-top: 4rem;
-  }
+	.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);
-  }
+	input,
+	textarea,
+	select {
+		border-color: var(--borders);
+		color: var(--foreground);
+		background-color: var(--secondary);
+	}
 
-  font-family: "Raleway";
+	font-family: 'Raleway';
 
-  #message {
-    resize: none;
-    height: 10rem;
-  }
+	#message {
+		resize: none;
+		height: 10rem;
+	}
 }
diff --git a/src/styles/sass/footer.scss b/src/styles/sass/footer.scss
index ffaefd3..5e7d7a3 100644
--- a/src/styles/sass/footer.scss
+++ b/src/styles/sass/footer.scss
@@ -1,33 +1,33 @@
 .footer {
-  background-color: var(--secondary);
-  border-top: 0.1rem solid var(--borders);
+	background-color: var(--secondary);
+	border-top: 0.1rem solid var(--borders);
 
-  padding: 3rem;
+	padding: 3rem;
 
-  font-family: "Raleway";
+	font-family: 'Raleway';
 
-  .profile {
-    width: 5rem;
-    height: 5rem;
-  }
+	.profile {
+		width: 5rem;
+		height: 5rem;
+	}
 
-  .branding {
-    display: inline-block;
-    font-size: 2rem;
-    margin-left: 1rem;
-    vertical-align: top;
-  }
+	.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;
+	.socials {
+		margin-left: 4rem;
+		display: inline-block;
+		height: 100%;
+		padding: 1rem 0;
 
-    .img {
-      height: 3rem;
-      width: 3rem;
-      margin-right: 2rem;
-    }
-  }
+		.img {
+			height: 3rem;
+			width: 3rem;
+			margin-right: 2rem;
+		}
+	}
 }
diff --git a/src/styles/sass/index.scss b/src/styles/sass/index.scss
index 26f470f..7b19b53 100644
--- a/src/styles/sass/index.scss
+++ b/src/styles/sass/index.scss
@@ -1,39 +1,39 @@
 :root {
-  --background: white;
-  --secondary: #f4f5f6;
-  --borders: #e4e4e4;
-  --links: #9a36d8;
-  --foreground: #606c76;
+	--background: white;
+	--secondary: #f4f5f6;
+	--borders: #e4e4e4;
+	--links: #9a36d8;
+	--foreground: #606c76;
 }
 
-[data-theme="dark"] {
-  .profile {
-    filter: invert(1);
-  }
+[data-theme='dark'] {
+	.profile {
+		filter: invert(1);
+	}
 
-  --background: #212123;
-  --links: #c181e8;
-  --secondary: #1c1c1c;
-  --borders: #3c3838;
-  --foreground: rgb(236, 235, 235);
+	--background: #212123;
+	--links: #c181e8;
+	--secondary: #1c1c1c;
+	--borders: #3c3838;
+	--foreground: rgb(236, 235, 235);
 }
 
 body {
-  margin: 0;
-  background-color: var(--background);
-  color: var(--foreground);
+	margin: 0;
+	background-color: var(--background);
+	color: var(--foreground);
 }
 
 a {
-  color: var(--links);
+	color: var(--links);
 }
 
-@import "nav.scss";
-@import "landing.scss";
-@import "project.scss";
-@import "contact.scss";
-@import "footer.scss";
+@import 'nav.scss';
+@import 'landing.scss';
+@import 'project.scss';
+@import 'contact.scss';
+@import 'footer.scss';
 
-@import "binas.scss";
-@import "upload.scss";
-@import "page.scss";
+@import 'binas.scss';
+@import 'upload.scss';
+@import 'page.scss';
diff --git a/src/styles/sass/landing.scss b/src/styles/sass/landing.scss
index 2dfb8d6..be24255 100644
--- a/src/styles/sass/landing.scss
+++ b/src/styles/sass/landing.scss
@@ -1,31 +1,31 @@
 .landing {
-  background: var(--secondary);
-  margin-top: 6rem;
+	background: var(--secondary);
+	margin-top: 6rem;
 
-  .container {
-    padding: 7rem 3rem;
-  }
+	.container {
+		padding: 7rem 3rem;
+	}
 
-  .profile {
-    height: 10rem;
-    width: 10rem;
-    margin: auto;
-    margin-bottom: 3rem;
-    display: block;
-  }
+	.profile {
+		height: 10rem;
+		width: 10rem;
+		margin: auto;
+		margin-bottom: 3rem;
+		display: block;
+	}
 
-  text-align: center;
-  font-family: "Raleway";
+	text-align: center;
+	font-family: 'Raleway';
 
-  .title {
-    font-size: 4rem;
-    display: block;
-  }
+	.title {
+		font-size: 4rem;
+		display: block;
+	}
 
-  .subtitle {
-    margin-top: 2rem;
-    margin-bottom: 4rem;
-    display: block;
-    font-size: 2rem;
-  }
+	.subtitle {
+		margin-top: 2rem;
+		margin-bottom: 4rem;
+		display: block;
+		font-size: 2rem;
+	}
 }
diff --git a/src/styles/sass/nav.scss b/src/styles/sass/nav.scss
index e1de4a2..f29a327 100644
--- a/src/styles/sass/nav.scss
+++ b/src/styles/sass/nav.scss
@@ -1,47 +1,47 @@
 .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;
-    }
-  }
+	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;
-  }
+[data-theme='dark'] {
+	.sun {
+		display: none;
+	}
 
-  .moon {
-    display: inline-block !important;
-  }
+	.moon {
+		display: inline-block !important;
+	}
 }
diff --git a/src/styles/sass/page.scss b/src/styles/sass/page.scss
index 478322f..09af34c 100644
--- a/src/styles/sass/page.scss
+++ b/src/styles/sass/page.scss
@@ -1,26 +1,26 @@
 .page {
-  font-family: "Raleway";
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	font-family: 'Raleway';
+	height: 100vh;
+	width: 100vw;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
-  text-align: center;
+	text-align: center;
 
-  .icon {
-    font-size: 10rem;
-  }
+	.icon {
+		font-size: 10rem;
+	}
 
-  .header {
-    font-size: 5rem;
-  }
+	.header {
+		font-size: 5rem;
+	}
 
-  .subtitle {
-    font-size: 3rem;
-  }
+	.subtitle {
+		font-size: 3rem;
+	}
 
-  .link {
-    margin-top: 1.5rem;
-  }
+	.link {
+		margin-top: 1.5rem;
+	}
 }
diff --git a/src/styles/sass/project.scss b/src/styles/sass/project.scss
index 492b3c3..c458c7f 100644
--- a/src/styles/sass/project.scss
+++ b/src/styles/sass/project.scss
@@ -1,64 +1,64 @@
 .projects {
-  .header {
-    font-size: 4rem;
-    text-align: center;
-    margin-bottom: 3rem;
-  }
+	.header {
+		font-size: 4rem;
+		text-align: center;
+		margin-bottom: 3rem;
+	}
 
-  font-family: "Raleway";
-  margin-top: 3rem;
+	font-family: 'Raleway';
+	margin-top: 3rem;
 
-  .project {
-    border-top: 0.1rem solid var(--borders);
+	.project {
+		border-top: 0.1rem solid var(--borders);
 
-    padding: 5rem 0;
+		padding: 5rem 0;
 
-    .title {
-      font-size: 4rem;
-    }
+		.title {
+			font-size: 4rem;
+		}
 
-    .right {
-      text-align: right;
-    }
+		.right {
+			text-align: right;
+		}
 
-    .content {
-      display: flex;
+		.content {
+			display: flex;
 
-      .info {
-        font-size: 2rem;
-        width: 50%;
+			.info {
+				font-size: 2rem;
+				width: 50%;
 
-        .button:not(:last-child) {
-          margin-right: 1rem;
-        }
-      }
+				.button:not(:last-child) {
+					margin-right: 1rem;
+				}
+			}
 
-      .cover {
-        width: 50%;
+			.cover {
+				width: 50%;
 
-        img {
-          display: block;
-          margin: auto;
-          height: 20rem;
-          width: 20rem;
-        }
-      }
+				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;
+			@media only screen and (max-width: 600px) {
+				.cover,
+				.info {
+					width: 100%;
+					margin: 2rem 0;
+					text-align: center;
 
-          img {
-            height: 15rem;
-            width: 15rem;
-          }
-        }
+					img {
+						height: 15rem;
+						width: 15rem;
+					}
+				}
 
-        display: block;
-      }
-    }
-  }
+				display: block;
+			}
+		}
+	}
 }
diff --git a/src/styles/sass/upload.scss b/src/styles/sass/upload.scss
index fe8ff80..eee6016 100644
--- a/src/styles/sass/upload.scss
+++ b/src/styles/sass/upload.scss
@@ -1,3 +1,3 @@
 .upload {
-  padding-top: 6rem;
+	padding-top: 6rem;
 }
diff --git a/tsconfig.json b/tsconfig.json
index 491fb5f..0fa2eb5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@components/*": ["src/components/*"],
-      "@public/*": ["src/public/*"],
-      "@styles/*": ["src/styles/*"]
-    },
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"@components/*": ["src/components/*"],
+			"@public/*": ["src/public/*"],
+			"@styles/*": ["src/styles/*"]
+		},
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": false,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve"
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
 }
diff --git a/yarn.lock b/yarn.lock
index aaad508..d3fb7bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1377,6 +1377,11 @@ postcss@^7.0.32:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"