From 49b519b015b2fe140da9f750aa85eb3f1c7e7bf9 Mon Sep 17 00:00:00 2001
From: Guusvanmeerveld <guusvanmeerveld@live.nl>
Date: Tue, 9 Mar 2021 18:34:15 +0000
Subject: [PATCH] Added a thank-you-page when user submits form

---
 components/Contact.tsx  | 10 +++++++-
 components/Footer.tsx   | 51 ++++++++++++++++++++++-------------------
 components/Navbar.tsx   |  4 ++--
 components/Page.tsx     |  2 +-
 pages/_app.tsx          |  1 +
 pages/index.tsx         | 22 +++++++++---------
 pages/thanks.tsx        | 20 ++++++++++++++++
 styles/sass/thanks.scss | 26 +++++++++++++++++++++
 8 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 pages/thanks.tsx
 create mode 100644 styles/sass/thanks.scss

diff --git a/components/Contact.tsx b/components/Contact.tsx
index 784b193..6c5c7f5 100644
--- a/components/Contact.tsx
+++ b/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" />
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 2905800..296d2c9 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,27 +1,30 @@
-const Footer = () => (
-  <footer className="footer">
-    <div className="container">
-      <img src="/profile.png" width="100%" height="100%" alt="" className="profile" />
-      <div className="branding">
-        Guus van Meerveld <br />
-        &#169; 2021
+const Footer = () => {
+  const year = new Date().getFullYear();
+  return (
+    <footer className="footer">
+      <div className="container">
+        <img src="/profile.png" 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">
+            <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">
-        <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>
-);
+    </footer>
+  );
+};
 
 export default Footer;
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 01fe949..fdf5524 100644
--- a/components/Navbar.tsx
+++ b/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="#contact">Contact</a>
+        <a href="/#projects">Projects</a>
+        <a href="/#contact">Contact</a>
       </div>
     </div>
   </nav>
diff --git a/components/Page.tsx b/components/Page.tsx
index 2850f71..dc22690 100644
--- a/components/Page.tsx
+++ b/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" />
diff --git a/pages/_app.tsx b/pages/_app.tsx
index da89d1e..56a2c1f 100644
--- a/pages/_app.tsx
+++ b/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} />;
diff --git a/pages/index.tsx b/pages/index.tsx
index c85edcb..5a7c591 100644
--- a/pages/index.tsx
+++ b/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() {
-  return (
-    <Page description="A simple portfolio website to display my projects." title="Guus van Meerveld">
-      <Navbar />
-      <Landing />
-      <Projects />
-      <Contact />
-      <Footer />
-    </Page>
-  );
-}
+const Home = () => (
+  <Page description="A simple portfolio website to display my projects." title="Projects">
+    <Navbar />
+    <Landing />
+    <Projects />
+    <Contact />
+    <Footer />
+  </Page>
+);
+
+export default Home;
diff --git a/pages/thanks.tsx b/pages/thanks.tsx
new file mode 100644
index 0000000..3834505
--- /dev/null
+++ b/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;
diff --git a/styles/sass/thanks.scss b/styles/sass/thanks.scss
new file mode 100644
index 0000000..61f8dad
--- /dev/null
+++ b/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;
+  }
+}