diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..beb5b0b --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,16 @@ +name: Deploy Workflow + +on: + push: + branches: + - gh-pages + +jobs: + deploy: + name: portfolioDeploy + runs-on: ubuntu-latest + environment: github-pages + env: + REACT_APP_FORM_ACTION_URL: ${{ secrets.REACT_APP_FORM_ACTION_URL }} + REACT_APP_INVOLVEMENT_API_BASE_URL: ${{ secrets.REACT_APP_INVOLVEMENT_API_BASE_URL }} + REACT_APP_INVOLVEMENT_API_APP_ID: ${{ secrets.REACT_APP_INVOLVEMENT_API_APP_ID }} diff --git a/README.md b/README.md index 94ac01b..708b68c 100644 --- a/README.md +++ b/README.md @@ -181,9 +181,9 @@ To run the linters included in this project, execute the following command: - [ ] Scrollable count for **LineCount** component. - [ ] **FloatingAstronaut** on **ExpertisePage**. - [ ] Add **Suspense** and **ErrorBoundaries**. -- [ ] Swap configs to Environmental Variables. -- [ ] Small Waving Alien in _Thank You btn message_ at the contact form. -- [ ] Horizontal ide Navbar. +- [x] Swap configs to Environmental Variables. +- [x] Small Waving Alien in _Thank You btn message_ at the contact form. +- [x] Horizontal ide Navbar.

(back to top)

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..2946b08 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/index.html b/public/index.html index f390215..6c9ee3f 100644 --- a/public/index.html +++ b/public/index.html @@ -3,13 +3,19 @@ - + - + ITurres Portfolio diff --git a/public/manifest.json b/public/manifest.json index ce5c72a..da887bd 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,8 +1,8 @@ { - "short_name": "reactive-portfolio", - "name": "reactive-portfolio", + "short_name": "Arthur ITurres Portfolio", + "name": "Arthur ITurres Portfolio", "start_url": ".", "display": "standalone", - "theme_color": "#000000", + "theme_color": "#090909", "background_color": "#ffffff" } diff --git a/src/components/UI/ContactForm.tsx b/src/components/UI/ContactForm.tsx index 0ff0852..2803280 100644 --- a/src/components/UI/ContactForm.tsx +++ b/src/components/UI/ContactForm.tsx @@ -1,9 +1,15 @@ import React, { - useRef, useEffect, useMemo, useState, + useRef, + useEffect, + useMemo, + useState, + useCallback, } from 'react'; import '../../styles/UI/ContactForm.scss'; +const successButtonIcon = 'https://camo.githubusercontent.com/b55970b1d4c6e5d8d09a07556bce08ff3cfec080b680ad6b5be3ed46546e6f77/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6b52654b6366727331596f546d74324151742f67697068792e676966'; + const ContactForm: React.FC = () => { const [formContent, setFormContent] = useState( JSON.parse(sessionStorage.getItem('formContent')!) || null, @@ -36,9 +42,8 @@ const ContactForm: React.FC = () => { () => ({ name: /[a-z]{2,}/, company: /[a-z]{3,}/, - email: - /^[\w.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/, - message: /[\w.!,.@#%&'"*+/=-]{20,}/, + email: /^[\w.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/, + message: /[\w\s.!,.@#%&'"*+/=-]{20,}/, }), [], ); @@ -69,7 +74,7 @@ const ContactForm: React.FC = () => { } }; - const validateInput = (input: any, regex: RegExp) => { + const validateInput = useCallback((input: any, regex: RegExp) => { const inputKey = input.obj.current?.name as keyof typeof inputs; const isValid = regex.test(input.obj.current?.value || ''); @@ -80,7 +85,7 @@ const ContactForm: React.FC = () => { setSubmitButtonStyle( Object.values(inputs).every((inputObj) => inputObj.validated), ); - }; + }, [inputs]); useEffect(() => { if (formContent) { @@ -88,7 +93,7 @@ const ContactForm: React.FC = () => { } }, [formContent]); - const updateFormContent = (input: any) => () => { + const updateFormContent = useCallback((input: any) => () => { const inputKey = input.obj.current?.name as keyof typeof inputs; setFormContent((previousFormContent: any) => { @@ -97,7 +102,7 @@ const ContactForm: React.FC = () => { return currentFormContent; }); - }; + }, []); useEffect(() => { Object.values(inputs).forEach((input) => { @@ -107,7 +112,7 @@ const ContactForm: React.FC = () => { input.obj.current?.removeEventListener('blur', updateFormContent); }; }); - }, [inputs]); + }, [inputs, updateFormContent]); // * this useEffect is to update the form inputs values and styles // * when the user comes back to the page. @@ -134,7 +139,7 @@ const ContactForm: React.FC = () => { } }); } - }, [formContent, inputs, validInputsPattern]); + }, [formContent, inputs, validInputsPattern, validateInput]); const submitButtonErrorContent = (error: Error | string) => { if ($submitButton.current) { @@ -145,7 +150,7 @@ const ContactForm: React.FC = () => { } }; - const hideInputs = () => { + const hideInputs = useCallback(() => { if (formSubmittedStatus) { Object.values(inputs).forEach((input) => { const inputElement = input; @@ -155,11 +160,11 @@ const ContactForm: React.FC = () => { } }); } - }; + }, [formSubmittedStatus, inputs]); useEffect(() => { if (formSubmittedStatus) hideInputs(); - }, [formSubmittedStatus]); + }, [formSubmittedStatus, hideInputs]); const submitForm = async () => { try { @@ -223,7 +228,7 @@ const ContactForm: React.FC = () => { input.obj.current?.removeEventListener('keyup', () => validateInput); }; }); - }, [inputs]); + }, [inputs, validInputsPattern, validateInput]); return (
{ type="text" ref={$nameInputRef} name="name" - placeholder="tell me your name" + placeholder="your name, at least 2 characters long" minLength={2} required /> @@ -244,7 +249,7 @@ const ContactForm: React.FC = () => { type="text" ref={$companyInputRef} name="company" - placeholder="your company name here!" + placeholder="your company name, at least 3 characters long" minLength={3} required /> @@ -253,21 +258,34 @@ const ContactForm: React.FC = () => { type="email" ref={$emailInputRef} name="email" - placeholder="an email so I can contact you back!" + placeholder="an email, e.g example@gmail.com" required />