Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update README, add form validation, and fix form submission messages #3

Merged
merged 3 commits into from
Dec 12, 2023
Merged

Update README, add form validation, and fix form submission messages #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ccee0e0
Update README and add form validation
eperezme Dec 12, 2023
ea39b4d
Fixed form and added messages of confirmation or error when sending
eperezme Dec 12, 2023
536ec44
Added effects to form
eperezme Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Binary file removed dist/assets/index-LiB_WsC6.css.br
View file
Open in desktop
Binary file not shown.
40 changes: 40 additions & 0 deletions dist/assets/index-iBOevf1u.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added dist/assets/index-iBOevf1u.js.br
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/assets/index-LiB_WsC6.css → dist/assets/index-jokBaQeX.css
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added dist/assets/index-jokBaQeX.css.br
View file
Open in desktop
Binary file not shown.
40 changes: 0 additions & 40 deletions dist/assets/index-vuPY0BWt.js
View file
Open in desktop

This file was deleted.

Binary file removed dist/assets/index-vuPY0BWt.js.br
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Binary file modified dist/index.html.br
View file
Open in desktop
Binary file not shown.
24 changes: 24 additions & 0 deletions src/animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -56,6 +79,7 @@
opacity: 1;
}


/* Animation for scaling and fading in */
.build-in-scale-fade {
opacity: 0;
Expand Down
13 changes: 7 additions & 6 deletions src/sources/contact/Contact.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
35 changes: 23 additions & 12 deletions src/sources/contact/Form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand Down