Added a thank-you-page when user submits form

components/Contact.tsx

@@ -4,7 +4,15 @@ const Contact = () => (
       <div className="header" id="contact">
         Contact
       </div>
-      <form className="content" method="POST" data-netlify="true" name="contact" data-netlify-recaptcha="true">
+      <form
+        encType="application/x-www-form-urlencoded"
+        action="/thanks"
+        className="content"
+        method="POST"
+        data-netlify="true"
+        name="contact"
+        data-netlify-recaptcha="true"
+      >
         <fieldset>
           <label htmlFor="email">Email</label>
           <input name="email" type="email" required placeholder="Your email address" id="email" />

components/Footer.tsx

@@ -1,27 +1,30 @@
-const Footer = () => (
+const Footer = () => {
-  <footer className="footer">
+  const year = new Date().getFullYear();
-    <div className="container">
+  return (
-      <img src="/profile.png" width="100%" height="100%" alt="" className="profile" />
+    <footer className="footer">
-      <div className="branding">
+      <div className="container">
-        Guus van Meerveld <br />
+        <img src="/profile.png" width="100%" height="100%" alt="" className="profile" />
-        &#169; 2021
+        <div className="branding">
+          Guus van Meerveld <br />
+          &#169; {year}
+        </div>
+        <div className="socials">
+          <a href="https://twitter.com/GuusvanMeerveld">
+            <img src="/svg/twitter.svg" alt="" />
+          </a>
+          <a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ">
+            <img src="/svg/youtube.svg" alt="" />
+          </a>
+          <a href="https://ko-fi.com/guusvanmeerveld">
+            <img src="/svg/coffee.svg" alt="" />
+          </a>
+          <a href="https://github.com/guusvanmeerveld">
+            <img src="/svg/github.svg" alt="" />
+          </a>
+        </div>
       </div>
-      <div className="socials">
+    </footer>
-        <a href="https://twitter.com/GuusvanMeerveld">
+  );
-          <img src="/svg/twitter.svg" alt="" />
+};
-        </a>
-        <a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ">
-          <img src="/svg/youtube.svg" alt="" />
-        </a>
-        <a href="https://ko-fi.com/guusvanmeerveld">
-          <img src="/svg/coffee.svg" alt="" />
-        </a>
-        <a href="https://github.com/guusvanmeerveld">
-          <img src="/svg/github.svg" alt="" />
-        </a>
-      </div>
-    </div>
-  </footer>
-);
 
 export default Footer;

components/Navbar.tsx

@@ -3,8 +3,8 @@ const Navbar = () => (
     <div className="container">
       <span className="header">Portfolio</span>
       <div className="items">
-        <a href="#projects">Projects</a>
+        <a href="/#projects">Projects</a>
-        <a href="#contact">Contact</a>
+        <a href="/#contact">Contact</a>
       </div>
     </div>
   </nav>

components/Page.tsx

@@ -14,7 +14,7 @@ const Page = ({
       <meta charSet="UTF-8" />
       <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Portfolio | {title}</title>
+      <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" />

pages/_app.tsx

@@ -1,6 +1,7 @@
 import "../styles/milligram.min.css";
 import "../styles/raleway.css";
 import "../styles/sass/index.scss";
+import "../styles/sass/thanks.scss";
 
 function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

pages/index.tsx

@@ -5,14 +5,14 @@ import Projects from "../components/Projects";
 import Contact from "../components/Contact";
 import Footer from "../components/Footer";
 
-export default function Home() {
+const Home = () => (
-  return (
+  <Page description="A simple portfolio website to display my projects." title="Projects">
-    <Page description="A simple portfolio website to display my projects." title="Guus van Meerveld">
+    <Navbar />
-      <Navbar />
+    <Landing />
-      <Landing />
+    <Projects />
-      <Projects />
+    <Contact />
-      <Contact />
+    <Footer />
-      <Footer />
+  </Page>
-    </Page>
+);
-  );
+
-}
+export default Home;

pages/thanks.tsx

@@ -0,0 +1,20 @@
+import Page from "../components/Page";
+import Navbar from "../components/Navbar";
+
+const Thanks = () => (
+  <Page title="Thanks!" description="Thanks for submitting your contact form!">
+    <Navbar />
+    <div className="message">
+      <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>
+  </Page>
+);
+
+export default Thanks;

styles/sass/thanks.scss

@@ -0,0 +1,26 @@
+.message {
+  font-family: "Raleway";
+  height: 100vh;
+  width: 100vw;
+  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;
+  }
+}