Added eslint

.eslintrc.json

@@ -0,0 +1,52 @@
+{
+	"root": true,
+	"env": {
+		"node": true,
+		"es6": true
+	},
+	"parserOptions": {
+		"ecmaVersion": 8
+	},
+	"plugins": ["prettier"],
+	"ignorePatterns": ["node_modules/*", ".next/*", ".out/*", "!.prettierrc.js"],
+	"extends": ["eslint:recommended"],
+	"overrides": [
+		{
+			"files": ["**/*.ts", "**/*.tsx"],
+			"parser": "@typescript-eslint/parser",
+			"settings": {
+				"react": {
+					"version": "detect"
+				}
+			},
+			"env": {
+				"browser": true,
+				"node": true,
+				"es6": true
+			},
+			"extends": [
+				"eslint:recommended",
+				"plugin:@typescript-eslint/recommended",
+				"plugin:react/recommended",
+				"plugin:react-hooks/recommended",
+				"plugin:jsx-a11y/recommended"
+			],
+			"rules": {
+				"prettier/prettier": "error",
+				"react/prop-types": "off",
+				"react/react-in-jsx-scope": "off",
+				"jsx-a11y/anchor-is-valid": "off",
+				"jsx-a11y/no-autofocus": "off",
+				"@typescript-eslint/no-unused-vars": ["error"],
+				"@typescript-eslint/explicit-function-return-type": [
+					"warn",
+					{
+						"allowExpressions": true,
+						"allowConciseArrowFunctionExpressionsStartingWithVoid": true,
+						"allowTypedFunctionExpressions": true
+					}
+				]
+			}
+		}
+	]
+}

next.config.js

@@ -1,3 +0,0 @@
-module.export = {
-    basePath: '/'
-}

package.json

@@ -6,7 +6,8 @@
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-		"pretify": "prettier --write ."
+		"prettify": "prettier --write .",
+		"lint": "eslint src"
 	},
 	"dependencies": {
 		"milligram": "^1.4.1",
@@ -16,13 +17,19 @@
 		"react-dom": "^17.0.2",
 		"react-google-recaptcha": "^2.1.0",
 		"react-icons": "^4.2.0",
-		"react-recaptcha-google": "^1.1.1",
 		"sass": "^1.34.0"
 	},
 	"devDependencies": {
 		"@types/node": "^15.6.1",
 		"@types/react": "^17.0.6",
 		"@types/react-google-recaptcha": "^2.1.0",
+		"@typescript-eslint/eslint-plugin": "^4.25.0",
+		"@typescript-eslint/parser": "^4.25.0",
+		"eslint": "^7.27.0",
+		"eslint-plugin-jsx-a11y": "^6.4.1",
+		"eslint-plugin-prettier": "^3.4.0",
+		"eslint-plugin-react": "^7.24.0",
+		"eslint-plugin-react-hooks": "^4.2.0",
 		"prettier": "^2.3.0",
 		"typescript": "^4.2.4"
 	}

src/components/Contact.tsx

@@ -1,9 +1,11 @@
 import ReCAPTCHA from 'react-google-recaptcha';
 import { useTheme } from 'next-themes';
 
+import { FC } from 'react';
+
 const formURL = 'https://forms.guusvanmeerveld.dev/portfolio';
 
-const Contact = () => {
+const Contact: FC = () => {
 	const { theme } = useTheme();
 
 	return (

src/components/Footer.tsx

@@ -1,6 +1,8 @@
 import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
 
-const Footer = () => {
+import { FC } from 'react';
+
+const Footer: FC = () => {
 	return (
 		<footer className="footer">
 			<div className="container">

src/components/Layout.tsx

@@ -1,7 +1,9 @@
-import Navbar from './Navbar';
-import Footer from './Footer';
+import { FC } from 'react';
 
-const Layout = ({ children }) => (
+import Navbar from '@components/Navbar';
+import Footer from '@components/Footer';
+
+const Layout: FC<{ children: JSX.Element | JSX.Element[] }> = ({ children }) => (
 	<>
 		<Navbar />
 		{children}

src/components/Navbar.tsx

@@ -2,9 +2,11 @@ import { useTheme } from 'next-themes';
 import { BiMoon } from 'react-icons/bi';
 import { ImSun } from 'react-icons/im';
 
-const Navbar = () => {
+import { FC } from 'react';
+
+const Navbar: FC = () => {
 	const { theme, setTheme } = useTheme();
-	const switchTheme = () => setTheme(theme == 'dark' ? 'light' : 'dark');
+	const switchTheme = (): void => setTheme(theme == 'dark' ? 'light' : 'dark');
 
 	return (
 		<nav className="navigation">
@@ -12,7 +14,7 @@ const Navbar = () => {
 				<span className="header">Portfolio</span>
 				<div className="items">
 					<a href="/#projects">Projects</a>
-					<a href="/#contact">Contact</a>
+					<a href="/contact">Contact</a>
 					<a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
 
 					<BiMoon onClick={switchTheme} className="dark-switch moon" />

src/components/Page.tsx

@@ -1,14 +1,12 @@
 import Head from 'next/head';
 
-const Page = ({
-	title,
-	description,
-	children,
-}: {
+import { FC } from 'react';
+
+const Page: FC<{
 	title: string;
 	description: string;
 	children: JSX.Element[] | JSX.Element;
-}) => (
+}> = ({ title, description, children }) => (
 	<>
 		<Head>
 			<meta charSet="UTF-8" />

src/pages/404.tsx

@@ -1,13 +1,15 @@
 import Page from 'src/components/Page';
 import Layout from 'src/components/Layout';
 
-const NotFound = () => (
+import { FC } from 'react';
+
+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't exist or has been deleted</div>
+					<div className="subtitle">This page either doesn&apos;t exist or has been deleted</div>
 					<a href="/" className="link button">
 						Go back
 					</a>

src/pages/_app.tsx

@@ -1,11 +1,13 @@
 import { ThemeProvider } from 'next-themes';
 
+import type { AppProps } from 'next/app';
+
 import 'milligram';
 import '@styles/raleway.css';
 
 import '@styles/sass/index.scss';
 
-function App({ Component, pageProps }) {
+function App({ Component, pageProps }: AppProps): JSX.Element {
 	return (
 		<ThemeProvider>
 			<Component {...pageProps} />

src/pages/_document.tsx

@@ -1,12 +1,19 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, {
+	Html,
+	Head,
+	Main,
+	NextScript,
+	DocumentInitialProps,
+	DocumentContext,
+} from 'next/document';
 
 export default class AppDocument extends Document {
-	static async getInitialProps(ctx) {
+	static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
 		const initialProps = await Document.getInitialProps(ctx);
 		return { ...initialProps };
 	}
 
-	render() {
+	render(): JSX.Element {
 		return (
 			<Html lang="en">
 				<Head />

src/pages/binas.tsx

@@ -1,24 +1,23 @@
 import Page from '@components/Page';
 import Layout from '@components/Layout';
-import { Component } from 'react';
+
+import React, { Component } from 'react';
 
 class Binas extends Component {
 	links: string[];
 
-	constructor(props) {
-		super(props);
-
-		this.links = new Array();
+	componentDidMount(): void {
+		this.links = [];
 
 		for (let i = 1; i < 305; i++) {
 			this.links.push(this.link(i));
 		}
 	}
 
-	link = (page) =>
+	link = (page: number): string =>
 		`https://cdp.contentdelivery.nu/1fa0c165-3b6c-4c5b-acee-a231157e66a3/20160908101125/extract/assets/img/layout/${page}.jpg`;
 
-	render() {
+	render(): JSX.Element {
 		return (
 			<Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
 				<Layout>

src/pages/thanks.tsx

@@ -1,12 +1,17 @@
 import Page from 'src/components/Page';
 import Layout from 'src/components/Layout';
+import { NextPage } from 'next';
 
-const Thanks = () => (
+const Thanks: NextPage = () => (
 	<Page title="Thanks!" description="Thanks for submitting your contact form!">
 		<Layout>
 			<div className="page">
 				<div>
-					<div className="icon">❤️</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>
 					<a href="/" className="link button">