From 124ee8b997fd0f8fa5902b7d8c08633494d40016 Mon Sep 17 00:00:00 2001
From: RAGAV-24 <ragavrunner33@gmail.com>
Date: Mon, 16 Sep 2024 23:11:26 +0530
Subject: [PATCH] Added email

---
 package-lock.json            | 10 ++++
 package.json                 |  1 +
 src/App.jsx                  |  3 ++
 src/components/Contact.jsx   |  6 +--
 src/components/EmailForm.jsx | 93 ++++++++++++++++++++++++++++++++++++
 5 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 src/components/EmailForm.jsx

diff --git a/package-lock.json b/package-lock.json
index 3869a1c..ba656ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "portfolio",
       "version": "0.0.0",
       "dependencies": {
+        "@emailjs/browser": "^4.4.1",
         "framer-motion": "^11.5.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -368,6 +369,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz",
+      "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
diff --git a/package.json b/package.json
index ef625cc..271ade5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "framer-motion": "^11.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/App.jsx b/src/App.jsx
index 9aa2236..dd0d755 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import Experience from "./components/Experience"
 
 import Projects from "./components/Projects"
 import Contact from "./components/Contact"
+import Email from "./components/EmailForm"
 
 const App = () => {
   return (
@@ -21,6 +22,8 @@ const App = () => {
         <Technoloigies />
         <Experience />
         <Projects />
+        <Email />
+
         <Contact />
       </div>
     </div>
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
index 6d2e7b8..2108783 100644
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -3,11 +3,7 @@ import { motion } from "framer-motion"
 const Contact = () => {
   return (
     <div className="border-b border-neutral-900 pb-20">
-        <motion.h1 
-        whileInView={{y:0,opacity:1}}
-        initial={{y:-100,opacity:0}}
-       transition={{duration:1}}
-        className="my-10 text-center text-4xl">Get in Touch</motion.h1>
+        
         <motion.div 
         whileInView={{y:0,opacity:1}}
         initial={{y:-100,opacity:0}}
diff --git a/src/components/EmailForm.jsx b/src/components/EmailForm.jsx
new file mode 100644
index 0000000..bd03bfe
--- /dev/null
+++ b/src/components/EmailForm.jsx
@@ -0,0 +1,93 @@
+import { useRef } from 'react';
+import emailjs from '@emailjs/browser';
+import { motion } from "framer-motion";
+
+const EmailForm = () => {
+  const form = useRef();
+
+  const sendEmail = (e) => {
+    e.preventDefault();
+
+    emailjs
+      .sendForm('service_6jqypys', 'template_yaaoluw', form.current, 'ly_nVFO9rdZJp_bHB')
+      .then(
+        (result) => {
+          console.log(result.text);
+          e.target.reset();
+          alert('Email sent!');
+        },
+        (error) => {
+          console.log('FAILED...', error.text);
+        }
+      );
+  };
+
+  const inputVariants = {
+    focus: { scale: 1.05, borderColor: '#6b7280', transition: { duration: 0.3 } }, // Gray-500
+    hover: { scale: 1.02, borderColor: '#374151', transition: { duration: 0.3 } }, // Gray-700
+    initial: { scale: 1, borderColor: '#d1d5db' } // Gray-300
+  };
+
+  return (
+    <div className="border-b border-neutral-900 pb-20">
+      <motion.h1
+        whileInView={{ y: 0, opacity: 1 }}
+        initial={{ y: -100, opacity: 0 }}
+        transition={{ duration: 1 }}
+        className="my-20 text-center text-4xl"
+      >
+        Get in Touch
+      </motion.h1>
+
+      <form className="space-y-6" ref={form} onSubmit={sendEmail}>
+        <motion.input
+          type="text"
+          className="w-full p-3 border border-gray-300 bg-neutral-100 text-neutral-900 rounded-lg transition-transform duration-300 ease-in-out hover:scale-105"
+          placeholder="Your Name"
+          name="your_name"
+          aria-label="Your Name"
+          required
+          variants={inputVariants}
+          initial="initial"
+          whileFocus="focus"
+          whileHover="hover"
+        />
+        <motion.input
+          type="email"
+          className="w-full p-3 border border-gray-300 bg-neutral-100 text-neutral-900 rounded-lg transition-transform duration-300 ease-in-out hover:scale-105"
+          placeholder="Your Email"
+          name="your_email"
+          aria-label="Your Email"
+          required
+          variants={inputVariants}
+          initial="initial"
+          whileFocus="focus"
+          whileHover="hover"
+        />
+        <motion.textarea
+          className="w-full p-3 border border-gray-300 bg-neutral-100 text-neutral-900 rounded-lg transition-transform duration-300 ease-in-out hover:scale-105"
+          name="message"
+          rows="5"
+          placeholder="Your Message"
+          aria-label="Your Message"
+          required
+          variants={inputVariants}
+          initial="initial"
+          whileFocus="focus"
+          whileHover="hover"
+        ></motion.textarea>
+        <motion.button
+          type="submit"
+          value="Send"
+          className="w-full p-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-transform duration-300 ease-in-out"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          Submit
+        </motion.button>
+      </form>
+    </div>
+  );
+};
+
+export default EmailForm;