feat: improve accessibility

BaptisteLacroix · Sep 22, 2024 · d574c1f · d574c1f
1 parent 45ffb9f
commit d574c1f
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 19 deletions.
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/modules/DownloadCVComponent.tsx b/src/modules/DownloadCVComponent.tsx
@@ -13,9 +13,10 @@ export const DownloadCVComponent: React.FC<DownloadCVComponentProps> = ({variant
         link.click();
     };
 
+    const className = variant === "solid" ? "bg-primary" : "bg-white dark:bg-gray-200";
     return (
         <Tooltip content="Download my CV">
-            <Button color={"primary"} variant={variant} onClick={handleDownload}>
+            <Button color={"primary"} variant={variant} className={className} onClick={handleDownload}>
                 Download CV
             </Button>
         </Tooltip>

diff --git a/src/modules/ExperienceCard.tsx b/src/modules/ExperienceCard.tsx
@@ -50,8 +50,8 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({ icon, title, company, d
                 </div>
 
                 <CardBody className={`${isOdd ? "lg:pr-16 text-right" : "lg:pl-16"}`}>
-                    <h2 className="text-2xl font-semibold text-gray-800 mt-4 max-lg:mt-5 dark:text-blue-700">{title}</h2>
-                    <p className="text-md text-gray-600 dark:text-blue-400">{company}</p>
+                    <h2 className="text-2xl font-semibold text-gray-800 mt-4 max-lg:mt-5 dark:text-blue-400">{title}</h2>
+                    <p className="text-md text-gray-600 dark:text-blue-500">{company}</p>
                     <p className="text-gray-500 mt-2 dark:text-white">{description}</p>
                 </CardBody>
 
@@ -136,16 +136,16 @@ export const ExperienceList: React.FC = () => {
                 <Button
                     onPress={() => setCurrentPage(1)}
                     className={`${
-                        currentPage === 1 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"
-                    } hover:bg-blue-500 hover:text-white transition-colors px-4 py-2 rounded-lg`}
+                        currentPage === 1 ? "bg-blue-600 text-white" : "border-2 bg-white border-blue-600 text-blue-600 dark:text-blue-800 dark:bg-gray-200 hover:opacity-80"
+                    } transition-colors px-4 py-2 rounded-lg`}
                 >
                     Education
                 </Button>
                 <Button
                     onPress={() => setCurrentPage(2)}
                     className={`${
-                        currentPage === 2 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"
-                    } hover:bg-blue-500 hover:text-white transition-colors px-4 py-2 rounded-lg`}
+                        currentPage === 2 ? "bg-blue-600 text-white" : "border-2 bg-white border-blue-600 text-blue-600 dark:text-blue-800 dark:bg-gray-200 hover:opacity-80"
+                    } transition-colors px-4 py-2 rounded-lg`}
                 >
                     Experience
                 </Button>

diff --git a/src/modules/FormationComponent.tsx b/src/modules/FormationComponent.tsx
@@ -10,7 +10,7 @@ export const FormationComponent: React.FC = () => {
             <div className="w-full lg:w-2/3 p-4 bg-white dark:bg-transparent">
                 <Card className="w-full lg dark:border-1 dark:border-amber-50 rounded-lg ml-0 sm:m-4 p-4">
                     <CardHeader className="pb-0">
-                        <h1 className="text-xl lg:text-2xl font-bold text-gray-700 dark:text-blue-700">Education & Experience</h1>
+                        <h1 className="text-xl lg:text-2xl font-bold text-gray-700 dark:text-blue-400">Education & Experience</h1>
                     </CardHeader>
                     <Divider className="my-3 opacity-50" />
                     <CardBody className="space-y-4">

diff --git a/src/modules/Home.tsx b/src/modules/Home.tsx
@@ -103,7 +103,7 @@ export const Home = () => {
                                             <div className="flex items-center space-x-3">
                                                 <EmailIcon className={"w-[30px] h-[30px]"}/>
                                                 <p className="text-gray-600">
-                                                    <strong className="text-gray-800 dark:text-blue-700">Email:</strong>
+                                                    <strong className="text-gray-800 dark:text-blue-400">Email:</strong>
                                                     <ProtectedEmailLink className={'dark:text-white'}
                                                                         message={' contact@baptiste-lacroix.fr '}
                                                                         subject={encodeURIComponent('Potential Hire')}/>
@@ -113,15 +113,15 @@ export const Home = () => {
                                                 <LanguageIcon className={"w-[30px] h-[30px]"}/>
                                                 <p className="text-gray-600 dark:text-white">
                                                     <strong
-                                                        className="text-gray-800 dark:text-blue-700">Languages:</strong>{" "}
+                                                        className="text-gray-800 dark:text-blue-400">Languages:</strong>{" "}
                                                     French | English - B2 - TOEIC (815)
                                                 </p>
                                             </div>
                                             <div className="flex items-center space-x-3">
                                                 <FlagIcon className={"w-[30px] h-[30px]"}/>
                                                 <p className="text-gray-600 dark:text-white">
                                                     <strong
-                                                        className="text-gray-800 dark:text-blue-700">Nationality:</strong>{" "}
+                                                        className="text-gray-800 dark:text-blue-400">Nationality:</strong>{" "}
                                                     French | Canadian
                                                 </p>
                                             </div>
@@ -158,7 +158,7 @@ export const Home = () => {
                                             </div>
                                         </CardBody>
                                         <CardFooter className="text-right">
-                                            <h2 className="font-signature text-3xl text-gray-800 italic dark:text-blue-700">
+                                            <h2 className="font-signature text-3xl text-gray-800 italic dark:text-blue-400">
                                                 Baptiste Lacroix
                                             </h2>
                                         </CardFooter>

diff --git a/src/modules/MenuComponent.tsx b/src/modules/MenuComponent.tsx
@@ -52,7 +52,7 @@ export const MenuComponent: React.FC<MenuComponentProps> = ({
                 {menuItems.map((item, index) => (
                     <NavbarItem key={index} className="hover:text-primary">
                         <Link
-                            className="text-lg font-medium hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer"
+                            className="text-lg font-medium hover:text-blue-600 dark:hover:text-blue-400 dark:text-blue-400 cursor-pointer"
                             onClick={item.onClick}
                         >
                             {item.name}
@@ -67,12 +67,16 @@ export const MenuComponent: React.FC<MenuComponentProps> = ({
             {/* Social Icons and Dark Mode Toggle */}
             <NavbarContent className="flex items-center space-x-4 ml-auto" justify="end">
                 <NavbarItem className="cursor-pointer">
-                    <a href={"https://github.com/BaptisteLacroix"} target={"_blank"}>
+                    <a href={"https://github.com/BaptisteLacroix"}
+                       target={"_blank"}
+                       aria-label={"Github"}>
                         <GithubIcon className="w-6 h-6 text-gray-700 dark:text-gray-200 hover:text-blue-600"/>
                     </a>
                 </NavbarItem>
                 <NavbarItem className="cursor-pointer">
-                    <a href={"https://www.linkedin.com/in/lacroix-baptiste/"} target={"_blank"}>
+                    <a href={"https://www.linkedin.com/in/lacroix-baptiste/"}
+                       target={"_blank"}
+                       aria-label={"Linkedin"}>
                         <LinkedinIcon className="w-6 h-6 text-gray-700 dark:text-gray-200 hover:text-blue-600"/>
                     </a>
                 </NavbarItem>

diff --git a/src/modules/PortfolioComponent.tsx b/src/modules/PortfolioComponent.tsx
@@ -21,7 +21,7 @@ export const PortfolioComponent = () => {
     return (
         <div className="container mx-auto p-8 min-h-[90vh] text-center">
             <div className="flex flex-col items-center my-12">
-                <h2 className="text-3xl font-semibold text-gray-900 mb-4 dark:text-blue-700">Personal and Educational
+                <h2 className="text-3xl font-semibold text-gray-900 mb-4 dark:text-blue-400">Personal and Educational
                     Projects</h2>
                 <p className="text-gray-600 mb-8 text-center max-w-lg dark:text-white">
                     Here, you can explore a collection of my personal and educational projects.
@@ -152,6 +152,7 @@ export function PaginatedCardGrid({cards}: { cards: Project[] }) {
 
             <div className="mt-6">
                 <Pagination
+                    aria-label={"Projects Pagination"}
                     total={totalPages}
                     initialPage={currentPage}
                     onChange={(page) => setCurrentPage(page)}

diff --git a/src/modules/SkillsSection.tsx b/src/modules/SkillsSection.tsx
@@ -66,7 +66,7 @@ const SkillsSection: React.FC = () => {
     return (
         <div className="min-h-[90vh]">
             <div className="flex flex-col items-center my-12">
-                <h2 className="text-3xl font-semibold text-gray-900 mb-4 dark:text-blue-700">Stacks and languages</h2>
+                <h2 className="text-3xl font-semibold text-gray-900 mb-4 dark:text-blue-400">Stacks and languages</h2>
                 <p className="text-gray-600 mb-8 text-center max-w-lg dark:text-white">
                     Here are some of the technologies I have worked with. I am constantly learning new
                     technologies and improving my skills. I am always open to new opportunities to learn and
@@ -97,6 +97,7 @@ const SkillsSection: React.FC = () => {
                 {/* Pagination Controls */}
                 <div className="mt-8">
                     <Pagination
+                        aria-label={"Skills Pagination"}
                         total={Math.ceil(skills.length / itemsPerPage)}
                         initialPage={1}
                         onChange={(page) => setCurrentPage(page)}

diff --git a/src/modules/TypingAnimation.tsx b/src/modules/TypingAnimation.tsx
@@ -45,7 +45,7 @@ const TypingAnimation: React.FC = () => {
 
     return (
         <>
-            I am <span className={"text-blue-700"}>{displayText}</span>
+            I am <span className={"text-blue-700 dark:text-blue-400"}>{displayText}</span>
             <span className="blinking-cursor"></span>
         </>
     );