Issues #3 and #5 🎟️: Waving Alien when form submitted (Contact Page) and JSR Assess changes

[ITurres]

Pull Request Summary for Issue #3 and #5 Completion

---

Overview:

• Issue [2pt] Waving Alien when form submitted (Contact Page) #3

  The feature of the waving alien in the Thank you! button once the form has been successfully submitted has been implemented. The waving alien is a GIF that will be displayed in the button until the user goes to another page or refreshes the page. This new feature was a mere aesthetic improvement to the website.

• Issue [4pt] Assess portfolio for JSR - follow rubric #5

  The JSR assessment is an activity by Microverse's professional coaches to assess the developer portfolio and if it meets all the following Rubric requirements.

Changes Made:

Added:

.github/workflows/deploy.yml

• A new workflow file was added to the .github/workflows directory for the gh-pages deployment to pick up the environment variables from the repository's secrets.

/public/apple-touch-icon.png

• The apple-touch-icon.png file was updated with a new design that better represents the website.
• Additionally, it follows Apple dimensions for the icon.

---

Modified:

/README.md

• Check completed the following tasks:
  • Swap configs to Environmental Variables.
  • Small Waving Alien in Thank You btn message at the contact form.
  • Horizontal ide Navbar. (closed on PR 4)

/public/index.html

• I have updated the description of the website to better represent the content of the website.
• The apple touch icon path was updated to the new design.

'/public/manifest.json'

• UPdated the short_name, name and theme_color to better represent the website.

/src/components/UI/ContactForm.tsx

• The Thank you! button now has a waving alien gif that will be displayed once the form has been successfully submitted.
• The message regex pattern has been updated to accept empty spaces within the message.
• Additionally, some performance improvements were made to the form.
  • All the useEffect dependencies were added to the useEffect dependency array. Some were missing.
  • Some functions that were added in the dependencies array now needed to be wrapped in the useCallback hook to prevent unnecessary re-renders.
• All input placeholders were updated to be more descriptive for a better user experience.
• >>bug fix<< Now the submit button will be disabled once the form has been successfully submitted to prevent multiple submissions.
• Of course, the waving alien will be conditionally displayed once the form has been successfully submitted.

/src/components/UI/LikeButton.tsx

• This UI component was also having some performance issues, firstly all useEffect dependencies were added to the dependency array. Secondly, the function that was added to the dependency array was wrapped in the useCallback hook to prevent unnecessary re-renders.

/src/components/pages/AboutPage.tsx

• The About sections were updated with a new refactored paragraph.
• A CTA (Call to Action) was added to the About page to encourage the user to contact me through the contact form at the contact page. This CTA is wrapped in a Link component that will redirect the user to the contact page.

/src/components/pages/ContactPage.tsx

• A new React icon was imported to be used in the contact details.
• Now at the bottom of the page, the developer email will be displayed along with the React icon.

/src/db/expertiseSummary.json

• All the expertise summary was updated to better represent the developer's skills.

/src/styles/UI/LikeButton.scss

• The button needed some margin-bottom to give space to the CTA link.

/src/styles/UI/ContactForm.scss

• Styles were added to the waving alien gif to make it look better on the button.

/src/styles/UI/LineCount.scss

• All the .line-count class properties were moved out of the ampersand selector to simplify the structure and improve readability since this was unnecessary.

/src/styles/pages/AboutPage.scss

• Styles and local animations were added to the CTA link.

/src/styles/pages/ContactPage.scss

• The contact page has also new styles and local animations for the contact details.

/src/styles/pages/ExpertiseSummaryPage.scss

• I changed display flex to grid since now there are more cards with expertise summary, this change ensures that the cards will be displayed in a grid layout, making it more organized and visually appealing.

---

Reasoning:

• The waving alien gif was added to the Thank you! button to give the user a sense of completion and satisfaction once the form has been successfully submitted.

Impact:

• n/a.

Testing:

• n/a.

Related Issues:

• Closes [4pt] Assess portfolio for JSR - follow rubric #5.
• Closes [2pt] Waving Alien when form submitted (Contact Page) #3.

Dependencies:

• n/a.

Additional Notes:

• n/a.

---

[ITurres]

✅ Good to go.