A11Y Edits

choubari · Sep 8, 2023 · fdfa99f · fdfa99f
1 parent b4bac19
commit fdfa99f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -18,7 +18,9 @@ export default function Footer() {
     >
       <div className="mx-auto px-8 pt-5 lg:px-8 lg:max-w-7xl grid grid-cols-1 md:grid-cols-12 gap-8">
         <div className="md:col-span-4 md:space-y-4">
-          <Logo />
+          <Link href="/" aria-label="Navigate to the Home Page">
+            <Logo />
+          </Link>
           <p className="pb-3">
             I turn ideas into reality with the power of software engineering,
             and I share my knowledge & passion using content creation.
@@ -100,7 +102,7 @@ export default function Footer() {
         </div>
         <p>
           Open Sourced{" "}
-          <Link className="text-grey italic hover:underline" href={githubrepo}>
+          <Link className="italic hover:underline" href={githubrepo}>
             {"(soon)"}
           </Link>
         </p>

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -19,7 +19,7 @@ export function Nav() {
     >
       <div className="justify-between px-8 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
         <div className="flex items-center justify-between py-3 md:py-5 md:block">
-          <Link href="/" aria-label="navigate to home page">
+          <Link href="/" aria-label="Navigate to the Home Page">
             <Logo />
           </Link>
           <div className="md:hidden">

diff --git a/components/project-card.tsx b/components/project-card.tsx
@@ -3,12 +3,15 @@ import { FiGithub, FiLink } from "react-icons/fi";
 import Image from "next/image";
 import { CodingProject } from "@/types";
 import techIconMap from "@/lib/techIconMap";
+import classNames from "classnames";
 
 type ProjectCardProps = {
   project: CodingProject;
 };
 
 const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
+  const chipStyle =
+    "inline-flex items-center px-3 py-1 rounded-full border hover:border-gray-300 border-gray-500 dark:border-gray-300 hover:dark:border-gray-500 bg-lighter dark:bg-dark hover:bg-gradient-to-r from-accentgrad via-accent to-accent";
   const TechIcon =
     techIconMap[project.technology?.toLowerCase() ?? "undefined"] ||
     techIconMap["none"];
@@ -40,7 +43,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
             href={project.link}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center px-3 py-1 rounded-full bg-accent hover:bg-gradient-to-r hover:from-accent hover:to-accentgrad text-white"
+            className={classNames(chipStyle)}
           >
             <FiLink className="mr-2" /> Demo
           </a>
@@ -50,7 +53,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
             href={project.github}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center px-3 py-1 rounded-full bg-accent hover:bg-gradient-to-r hover:from-accent hover:to-accentgrad text-white"
+            className={classNames(chipStyle)}
           >
             <FiGithub className="mr-2" /> Code
           </a>