From 8ad6e033cda43b5dcea6c77b4efb5140ea13dd58 Mon Sep 17 00:00:00 2001
From: Oorjit Chowdhary <oorjit.chowdhary@hotmail.com>
Date: Tue, 27 Jul 2021 02:34:41 +0530
Subject: [PATCH] Contact form

---
 .gitignore             |  4 +++-
 _includes/contact.html | 32 ++++++++++++++++++++++++++++++++
 _includes/header.html  |  3 +++
 _includes/navbar.html  |  6 +++++-
 _sass/all.scss         |  1 +
 _sass/contact.scss     | 40 ++++++++++++++++++++++++++++++++++++++++
 index.html             |  1 +
 7 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 _includes/contact.html
 create mode 100644 _sass/contact.scss

diff --git a/.gitignore b/.gitignore
index 7b93294..80ab069 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
-.bundle
\ No newline at end of file
+.bundle
+node_modules
+.vscode
\ No newline at end of file
diff --git a/_includes/contact.html b/_includes/contact.html
new file mode 100644
index 0000000..1f1182c
--- /dev/null
+++ b/_includes/contact.html
@@ -0,0 +1,32 @@
+<h2 id="contact" class="section-heading">Contact</h2>
+<div class="container">
+  <form
+    id="contactform"
+    action="https://formspree.io/f/YOUR_FORM_ID"
+    method="POST"
+    onsubmit="showToast()"
+  >
+    <div class="form-group">
+      <input type="text" placeholder="Your name" name="name" required />
+      <input type="email" placeholder="Your email" name="_replyto" required />
+    </div>
+    <div class="form-group">
+      <textarea name="message" placeholder="Your message" required></textarea>
+    </div>
+    <div class="button-group">
+      <button type="submit" class="btn btn-warning">Submit</button>
+    </div>
+  </form>
+</div>
+
+<script>
+  const notyf = new Notyf({ position: { x: "right", y: "top" } });
+  const contactForm = document.getElementById("contactform");
+
+  const showToast = () => {
+    notyf.success("Message sent successfully!");
+    contactform.reset();
+  };
+
+  contactForm.addEventListener("submit", (e) => e.preventDefault());
+</script>
diff --git a/_includes/header.html b/_includes/header.html
index a44570c..11e9175 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -26,6 +26,9 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
         integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
+
     <link lang='sass' rel="stylesheet" href="/assets/css/main.css">
     <link rel='icon' href='/assets/img/favicon.ico' type='image/x-icon' />
     <title>{{ site.title }}</title>
diff --git a/_includes/navbar.html b/_includes/navbar.html
index bfb8791..d0fc134 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -20,9 +20,13 @@
               <a href="#experience" class="nav-link">Work Experience</a>
           </li>
 
-          <li class="nav-item">
+          <li class="nav-item mr-3">
               <a href="#education" class="nav-link">Education</a>
           </li>
+
+          <li class="nav-item">
+            <a href="#contact" class="nav-link">Contact</a>
+          </li>
       </ul>
     </div>
 
diff --git a/_sass/all.scss b/_sass/all.scss
index 10b1d0d..d529419 100644
--- a/_sass/all.scss
+++ b/_sass/all.scss
@@ -7,6 +7,7 @@
 @import "footer";
 @import "experience";
 @import "project";
+@import "contact";
 
 .card-container {
   display: grid;
diff --git a/_sass/contact.scss b/_sass/contact.scss
new file mode 100644
index 0000000..8be0fbd
--- /dev/null
+++ b/_sass/contact.scss
@@ -0,0 +1,40 @@
+.container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    text-align: center;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin: 0 16%;
+}
+
+.form-group input {
+    width: 48%;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 6px 10px;
+    margin: 0 auto;
+}
+
+textarea {
+    width: 100%;
+    height: 20vh;
+    margin: 1vh;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 6px 10px;
+    resize: none;
+}
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: left;
+    margin: 0 16%;
+    padding: 6px 10px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8d2e616..82caa02 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
   <body>
     {% include navbar.html %} {% include profile.html %} {% include
     projects.html %} {% include experience.html %} {% include education.html %}
+    {% include contact.html %}
 
     <div class="switch">
       <input type="checkbox" id="switch-input" name="toggle" />