From 3c2f489a3cb1c30f67e1e6b25fbf1248a6ca64d9 Mon Sep 17 00:00:00 2001
From: Carlos-Bolano <carlostutos828@gmail.com>
Date: Sat, 25 Jan 2025 11:42:23 -0500
Subject: [PATCH 1/2] Add discernible text for screen readers in contact items

---
 src/app/components/Contact.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/components/Contact.js b/src/app/components/Contact.js
index da63f8d..0b03fcd 100644
--- a/src/app/components/Contact.js
+++ b/src/app/components/Contact.js
@@ -9,33 +9,37 @@ import {
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons"
 import "./contact.css"
 
-function BlackIconWrapper({ icon, ...rest }) {
+function BlackIconWrapper({ icon, arialabel, ...rest }) {
   return (
     <IconWrapper
       icon={icon}
       bgColor='bg-[#264653]'
       textColor='text-[#E76F51]'
+      arialabel={arialabel}
       {...rest}
     />
   )
 }
 
-function RedIconWrapper({ icon, ...rest }) {
+function RedIconWrapper({ icon, arialabel, ...rest }) {
   return (
     <IconWrapper
       icon={icon}
       bgColor='bg-[#E9C46A]'
       textColor='text-[#2A9D8F]'
+      arialabel={arialabel}
       {...rest}
     />
   )
 }
 
-function IconWrapper({ icon, bgColor, textColor, target, isEmail }) {
+function IconWrapper({ icon, bgColor, textColor, target, isEmail, arialabel }) {
   return (
     <a
       href={isEmail ? `mailto:${target}` : target}
       className={`w-20 h-20 md:w-14 md:h-14 lg:w-20 lg:h-20 ${bgColor} flex items-center justify-center text-3xl transition-all hover:text-4xl cursor-pointer border border-black`}
+      target='_blank' // this is need to open in a new tab and not in the same
+      aria-label={arialabel} // discernible text for screen readers
     >
       <FontAwesomeIcon icon={icon} className={textColor} />
     </a>
@@ -174,12 +178,13 @@ export default function Contact() {
         <BlackIconWrapper
           icon={faInstagram}
           target='https://www.instagram.com/thecodedose/'
+          arialabel="This is my Instagram profile"
         />
-        <RedIconWrapper icon={faXTwitter} target="https://x.com/thecodedose" />
-        <BlackIconWrapper icon={faYoutube} target="https://www.youtube.com/channel/UCUqYu_GiAzFL4ErDEiK9xbA" />
-        <RedIconWrapper icon={faLinkedinIn} target="https://www.linkedin.com/in/ihsavru/" />
-        <BlackIconWrapper icon={faGithub} target="https://github.com/thecodedose"  />
-        <RedIconWrapper icon={faEnvelope} target="urvashi@thecodedose.com" isEmail />
+        <RedIconWrapper icon={faXTwitter} target="https://x.com/thecodedose" arialabel=" This is my X profile" />
+        <BlackIconWrapper icon={faYoutube} target="https://www.youtube.com/channel/UCUqYu_GiAzFL4ErDEiK9xbA" arialabel="this is my Youtube channel" />
+        <RedIconWrapper icon={faLinkedinIn} target="https://www.linkedin.com/in/ihsavru/" arialabel="Linkedin" />
+        <BlackIconWrapper icon={faGithub} target="https://github.com/thecodedose" arialabel="this is my Github profile" />
+        <RedIconWrapper icon={faEnvelope} target="urvashi@thecodedose.com" isEmail arialabel="this is my email"/>
       </div>
     </>
   )

From 471359dd1b4e58e3f8402af492e1bb3da44120c5 Mon Sep 17 00:00:00 2001
From: Carlos-Bolano <carlostutos828@gmail.com>
Date: Sat, 25 Jan 2025 11:44:21 -0500
Subject: [PATCH 2/2] Improve text-background contrast for better readability

---
 src/app/components/HomeGrid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/HomeGrid.js b/src/app/components/HomeGrid.js
index ea57c71..c0f1a8d 100644
--- a/src/app/components/HomeGrid.js
+++ b/src/app/components/HomeGrid.js
@@ -87,13 +87,13 @@ export default function HomeGrid({ setCurrentGrid, animatedStyles }) {
           style={trails[0]}
           className='h-full w-full p-10 bg-[#e9c46a] border border-black flex flex-col items-center justify-center gap-3'
         >
-          <div className='border border-neutral-900 bg-[#264653]  w-fit px-5 py-3'>
+          <div className='border border-neutral-900 bg-[#264653] text-[#e9c46a] w-fit px-5 py-3'>
             <span className='text-5xl font-bold' id='home'>
               {name.slice(0, nameIdx).join("")}
               <span className='inline-block mx-2 w-6 h-1 bg-[#2A9D8F] animate-pulse'></span>
             </span>
           </div>
-          <div className='border text-center border-neutral-900 bg-[#264653] w-fit px-5 py-2'>
+          <div className='border text-center border-neutral-900 bg-[#264653] text-[#e9c46a] w-fit px-5 py-2'>
             <span className='md:text-md'>
               {subheading.slice(0, subheadingIdx).join("")}
               <span className='inline-block w-3 h-0.5 mx-1 bg-[#2A9D8F] animate-pulse'></span>