chore: improve accessibility and use webp image

README.md

@@ -54,7 +54,7 @@ To run the project, you can follow these steps:
 ## How to customize the project according to your profile ?
 
 1. Change `VITE_APP_NAME` in `.env.development` and `.env.production` file.
-2. Change `profilePic.png`, `favicon.ico`, `logo*.png`, `manifest.json` in `public` directory.
+2. Change `profilePic.webp`, `favicon.ico`, `logo*.png`, `manifest.json` in `public` directory.
    1. You can use
       1. https://realfavicongenerator.net/
       2. https://www.pwabuilder.com/imageGenerator

src/Components/Resume/index.tsx

@@ -48,7 +48,7 @@ export const Resume = ({ devName, devTitle, devResumeDownloadLink }: TResumeProp
           </div>
           <div>
             <hr />
-            <h5>{devTitle}</h5> {<ResumePage />}
+            <h4>{devTitle}</h4> {<ResumePage />}
           </div>
         </ResumeLetter>
       </div>

src/Components/SidebarMenu/SidebarMenuData.tsx

@@ -1,7 +1,7 @@
 import { RiGithubFill, RiLinkedinFill, RiMailLine } from "react-icons/ri";
 import { v4 as uuidv4 } from "uuid";
 
-import profilePic from "/profilePic.png";
+import profilePic from "/profilePic.webp";
 
 export const data = {
   devName: "Amandeep Singh",

src/Components/ToggleTheme/index.tsx

@@ -51,7 +51,7 @@ export const ToggleTheme = () => {
           })}
         </ThemesIconsContainer>
       )}
-      <ThemeTogglerContainer>
+      <ThemeTogglerContainer aria-label="Toggle theme">
         <MdOutlinePalette onClick={() => setIsOpen((isOpen) => !isOpen)} />
       </ThemeTogglerContainer>
     </ThemeContainer>

src/Pages/About/AboutData.tsx

@@ -1,5 +1,5 @@
 import { techIcons } from "@/Common/techIcons";
-import profileImg from "/profilePic.png";
+import profileImg from "/profilePic.webp";
 
 export const data = {
   profileImg: profileImg,