Added recaptcha

package.json

@@ -10,17 +10,20 @@
 	},
 	"dependencies": {
 		"milligram": "^1.4.1",
-		"next": "10.0.8",
-		"next-themes": "^0.0.12",
-		"react": "17.0.1",
-		"react-dom": "17.0.1",
+		"next": "^10.2.3",
+		"next-themes": "^0.0.14",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"react-google-recaptcha": "^2.1.0",
 		"react-icons": "^4.2.0",
-		"sass": "^1.32.8"
+		"react-recaptcha-google": "^1.1.1",
+		"sass": "^1.34.0"
 	},
 	"devDependencies": {
-		"@types/node": "^14.14.32",
-		"@types/react": "^17.0.3",
-		"prettier": "^2.2.1",
-		"typescript": "^4.2.3"
+		"@types/node": "^15.6.1",
+		"@types/react": "^17.0.6",
+		"@types/react-google-recaptcha": "^2.1.0",
+		"prettier": "^2.3.0",
+		"typescript": "^4.2.4"
 	}
 }

src/components/Contact.tsx

@@ -1,33 +1,51 @@
-const Contact = () => (
-	<div className="contact">
-		<div className="container">
-			<div className="header" id="contact">
-				Contact
+import { FormEventHandler, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { useTheme } from 'next-themes';
+
+const formURL = 'http://localhost:4000/portfolio';
+
+const Contact = () => {
+	const { theme, setTheme } = useTheme();
+
+	return (
+		<div className="contact">
+			<div className="container">
+				<div className="header" id="contact">
+					Contact
+				</div>
+				<form
+					encType="application/x-www-form-urlencoded"
+					action={formURL}
+					className="content"
+					method="POST"
+					name="contact"
+				>
+					<label htmlFor="email">Email</label>
+					<input name="email" type="email" required placeholder="Your email address" id="email" />
+
+					<label htmlFor="type">Message type</label>
+					<select name="type[]" id="type">
+						<option value="bug">Bug</option>
+						<option value="question">Question</option>
+						<option value="suggestion">Suggestion</option>
+						<option value="other">Other</option>
+					</select>
+
+					<label htmlFor="message">Message</label>
+					<textarea required name="message" placeholder="Your message" id="message"></textarea>
+
+					<ReCAPTCHA
+						theme={theme as 'light' | 'dark'}
+						sitekey={process.env.NEXT_PUBLIC_CAPTCHA_KEY}
+					/>
+
+					<button className="button submit" type="submit">
+						Send
+					</button>
+				</form>
 			</div>
-			<form
-				encType="application/x-www-form-urlencoded"
-				action="https://forms.guusvanmeerveld.dev/portfolio"
-				className="content"
-				method="POST"
-				name="contact"
-			>
-				<label htmlFor="email">Email</label>
-				<input name="email" type="email" required placeholder="Your email address" id="email" />
-				<label htmlFor="type">Message type</label>
-				<select name="type[]" id="type">
-					<option value="bug">Bug</option>
-					<option value="question">Question</option>
-					<option value="suggestion">Suggestion</option>
-					<option value="other">Other</option>
-				</select>
-				<label htmlFor="message">Message</label>
-				<textarea required name="message" placeholder="Your message" id="message"></textarea>
-				<button className="button" type="submit">
-					Send
-				</button>
-			</form>
 		</div>
-	</div>
-);
+	);
+};
 
 export default Contact;

src/components/Footer.tsx

@@ -1,14 +1,13 @@
 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}
+					&#169; 2021
 				</div>
 				<div className="socials">
 					<a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">

src/pages/index.tsx

@@ -1,8 +1,8 @@
-import Page from '@components/Page';
-import Landing from '@components/Landing';
 import Projects from '@components/Projects';
+import Landing from '@components/Landing';
 import Contact from '@components/Contact';
 import Layout from '@components/Layout';
+import Page from '@components/Page';
 
 const Home = () => (
 	<Page description="A simple portfolio website to display my projects." title="Projects">

src/styles/sass/contact.scss

@@ -15,6 +15,10 @@
 		background-color: var(--secondary);
 	}
 
+	.submit {
+		margin-top: 1.5rem;
+	}
+
 	font-family: 'Raleway';
 
 	#message {