improved accesibility to site

Author: DevKhris

app/(site)/(sections)/AboutSection.tsx

@@ -36,7 +36,12 @@ export default async function AboutSection(): Promise<ReactElement> {
                       key={key}
                       className="gap-x-3 mb-5 hover:text-yellow-400 dark:hover:text-emerald-400  duration-300 hover:-translate-y-2 ease-linear"
                     >
-                      <a href={value} target="_blank" rel="noreferer noopener">
+                      <a
+                        href={value}
+                        aria-label={`Go to my ${key} profile`}
+                        target="_blank"
+                        rel="noreferer noopener"
+                      >
                         {getIcon({ name: key, size: 26 })}
                       </a>
                     </li>
@@ -47,6 +52,7 @@ export default async function AboutSection(): Promise<ReactElement> {
                     href={`mailto:${data.email}`}
                     rel="noreferer noopener"
                     target="_blank"
+                    aria-label="Open email client to send me a mail to my address"
                   >
                     <BiEnvelope size={26} />
                   </a>
@@ -68,6 +74,7 @@ export default async function AboutSection(): Promise<ReactElement> {
                 href={`${data.resumeURL}`}
                 target="_blank"
                 className="flex items-center justify-center gap-x-2 bg-clip-border backdrop-blur border hover:border-amber-400 dark:hover:border-emerald-400  duration-200 mt-8  py-2 text-center font-medium rounded-[2em] hover:text-amber-400 dark:hover:text-emerald-400  text-md w-full"
+                aria-label="Download my updated resume"
               >
                 <BiFile />
                 <p>Download Resume</p>

app/(site)/(sections)/ContactSection.tsx

@@ -27,7 +27,12 @@ export default async function ContactSection(): Promise<ReactElement> {
                       key={key}
                       className="flex items-center gap-x-3 mb-5 hover:text-yellow-400 dark:hover:text-emerald-400  duration-300 hover:-translate-y-2 ease-linear"
                     >
-                      <a href={value} target="_blank" rel="noreferer noopener">
+                      <a
+                        href={value}
+                        aria-label={`Go to my ${key} profile`}
+                        target="_blank"
+                        rel="noreferer noopener"
+                      >
                         {getIcon({ name: key, size: 48 })}
                       </a>
                     </li>

app/(site)/components/ExperienceItem.tsx

@@ -23,7 +23,7 @@ export default function ExperienceItem({
   return (
     <div className="flex items-start md:gap-x-6 gap-x-4 max-w-2xl relative before:absolute before:bottom-0 before:top-[4.5rem] before:md:left-7 before:left-6 before:w-[1px] before:h-[calc(100%-50px)] before:bg-zinc-800">
       <a
-        href={url}
+        href={url ?? "#"}
         className="min-w-[48px] min-h-[48px] md:min-h-[60px] md:min-w-[60px] mt-2 md:mt-0 rounded-md overflow-clip relative"
       >
         <Image src={logo} className="object-cover" alt={`${name} logo`} fill />

app/(site)/components/Navbar.tsx

@@ -45,6 +45,7 @@ export default function Navbar({ html }: NavBarProps): ReactElement {
               e.preventDefault();
               setToggleMenu(!toggleMenu);
             }}
+            aria-label="Toggle menu in mobile view"
           >
             <HiMenu size={24}></HiMenu>
           </Link>

package-lock.json

@@ -28,6 +28,7 @@
     "react-slick": "^0.29.0",
     "sanity": "^3.14.4",
     "slick-carousel": "^1.8.1",
+    "swr": "^2.2.2",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

package.json

@@ -17,7 +17,7 @@ module.exports = {
         current: "currentColor",
         amber: {
           300: "#FCC200",
-          400: "#D7A111",
+          400: "#E4AC11",
           500: "#B2831e",
         },
       },