Merge pull request #3 from eperezme:dev

Update README, add form validation, and fix form submission messages
eperezme · Dec 12, 2023 · f422051 · f422051
2 parents 1e099d4 + 536ec44
commit f422051
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,5 @@
-# React + Vite
+# My Portfolio
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Welcome to my portfolio repository! This repository showcases my projects, skills, and achievements as a software developer.
 
-Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/dist/assets/index-LiB_WsC6.css.br b/dist/assets/index-LiB_WsC6.css.br
diff --git a/dist/assets/index-iBOevf1u.js b/dist/assets/index-iBOevf1u.js
diff --git a/dist/assets/index-iBOevf1u.js.br b/dist/assets/index-iBOevf1u.js.br
diff --git a/dist/assets/index-LiB_WsC6.css → dist/assets/index-jokBaQeX.css b/dist/assets/index-LiB_WsC6.css → dist/assets/index-jokBaQeX.css
diff --git a/dist/assets/index-jokBaQeX.css.br b/dist/assets/index-jokBaQeX.css.br
diff --git a/dist/assets/index-vuPY0BWt.js b/dist/assets/index-vuPY0BWt.js
diff --git a/dist/assets/index-vuPY0BWt.js.br b/dist/assets/index-vuPY0BWt.js.br
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="./src/assets/icons/dna.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Eduard Portfolio</title>
-    <script type="module" crossorigin src="/assets/index-vuPY0BWt.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-LiB_WsC6.css">
+    <script type="module" crossorigin src="/assets/index-iBOevf1u.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-jokBaQeX.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/dist/index.html.br b/dist/index.html.br
diff --git a/src/animations.css b/src/animations.css
@@ -11,6 +11,18 @@
   transform: scaleY(1);
 }
 
+/* Animation for scaling from top */
+.build-in-scale-left {
+  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: scaleX(0);
+  transform-origin: 0 0;
+}
+
+.build-in-scale-left.build-in-animate {
+  transform: scaleX(1);
+}
+
+
 /* Animation for sliding from left */
 .build-in-slideX-left {
   opacity: 0;
@@ -46,6 +58,17 @@
   transform: translateY(0);
 }
 
+.build-in-slideY-top {
+  opacity: 0;
+  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),transform .6s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateY(-15px);
+}
+
+.build-in-slideY-top.build-in-animate {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 /* Animation for fading in */
 .build-in-fade {
   opacity: 0;
@@ -56,6 +79,7 @@
   opacity: 1;
 }
 
+
 /* Animation for scaling and fading in */
 .build-in-scale-fade {
   opacity: 0;

diff --git a/src/sources/contact/Contact.jsx b/src/sources/contact/Contact.jsx
@@ -3,7 +3,7 @@ import Form from './Form.jsx'
 
 function Contact() {
   return (
-    <div id="contact" className='color-header home-campaign-footer position-relative js-section mb-10 overflow-visible'>
+    <div id="contact" className='color-header home-campaign-hero position-relative js-section mb-10 overflow-visible'>
       <div className="container-xl position-relative z-2 px-3">
         <div className="d-flex js-build-in-trigger" data-build-in-stagger='100'>
           <div className="col-1 d-flex flex-column flex-items-center js-build-in-trigger">
@@ -17,18 +17,19 @@ function Contact() {
               </div>
             </div>
           </div>
-          <div className="col-11 ml-2 ml-md-0">
-            <div className="col-md-11 col-lg-9 pt-8">
-              <h1 className="h2-mktg mb-5">
+          <div className="col-11 ml-2 ml-md-0 js-build-in-trigger"  data-build-in-stagger='125'>
+            <div className="col-md-11 col-lg-9 pt-8 js-build-in-item">
+              <h1 className="h2-mktg mb-5 h1-mktg text-accent-primary text-medium js-build-in-item build-in-slideX-left">
                 Contact Me
               </h1>
-              <p className="f3-mktg color-fg-muted">
+              <p className="f3-mktg color-fg-muted js-build-in-item build-in-slideX-left">
                 If you want to get in touch with me, please fill out the form below and I will get back to you as soon as possible.
               </p>
+
+              <Form/>
             </div>
             <div>
 
-              <Form/>
             </div>
             {/* <div className="pb-2">
               <div className="d-flex flex-column flex-md-row">

diff --git a/src/sources/contact/Form.jsx b/src/sources/contact/Form.jsx
@@ -1,15 +1,24 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import emailjs from '@emailjs/browser';
 
 const Form = () => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [subject, setSubject] = useState('');
   const [message, setMessage] = useState('');
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
+    if (!isFormValid) {
+      const errorMessage = 'Please fill in all fields.'; // Set error message if any field is empty
+      setErrorMessage(errorMessage); // Update the state
+      alert(errorMessage); // Display error message in a popup alert
+      return;
+    }
+
     // Replace with your own emailjs service ID, template ID, and public key
     const serviceId = 'service_5shgyrp';
     const templateId = 'template_06nu5j3';
@@ -23,51 +32,53 @@ const Form = () => {
     }, publicKey)
       .then((response) => {
         console.log('Email sent successfully!', response.status, response.text);
-        // Reset form fields
+        // Reset form fields and error message
         setName('');
         setEmail('');
         setSubject('');
         setMessage('');
+        alert('Email sent successfully!');
       })
       .catch((error) => {
         console.error('Error sending email:', error);
       });
   };
 
-  return (
+  useEffect(() => {
+    setIsFormValid(name.trim() !== '' && email.trim() !== '' && subject.trim() !== '' && message.trim() !== '');
+  }, [name, email, subject, message]);
 
-    <form onSubmit={handleSubmit} className="col-md-11 col-lg-9">
-      
-      <div className="form-group">
+  return (
+    <form onSubmit={handleSubmit} className='col-md-11 col-lg-9'>
+      <div className="form-group js-build-in-item build-in-slideY-top" >
         <label className='form'>
           <h4>Name</h4>
           <input className='form-control' type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your Name" />
         </label>
       </div>
 
-      <div className="form-group">
+      <div className="form-group js-build-in-item build-in-slideY-top">
         <label>
-          <h4>Email</h4>
+          <h4 className=''>Email</h4>
           <input className='form-control' type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" />
         </label>
       </div>
 
-      <div className="form-group">
+      <div className="form-group js-build-in-item build-in-slideY-top">
         <label>
           <h4>Subject</h4>
           <input className='form-control' value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Brief Description of Inquiry/Offer" />
         </label>
       </div>
 
-      <div className="form-group">
+      <div className="form-group js-build-in-item build-in-slideY-top">
         <label>
           <h4>Message</h4>
           <textarea className='form-control' value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Enter your message" />
         </label>
       </div>
 
-
-      <div className="d-flex flex-column flex-md-row mt-3 pb-2">
+      <div className="d-flex flex-column flex-md-row mt-3 pb-2 js-build-in-item build-in-fade">
         <button type="submit" className="btn-mktg">Submit
           <svg xmlns="http://www.w3.org/2000/svg" className="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path className="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" strokeWidth="1.5" strokeLinecap="round"></path></svg>
         </button>