fix(page): set height and width images by default, fix accessibility …

…clauses
raferdev · Dec 11, 2023 · 0251787 · 0251787
1 parent 87858c1
commit 0251787
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 27 deletions.
diff --git a/src/app/_page/_components/chessInviteSection.tsx b/src/app/_page/_components/chessInviteSection.tsx
@@ -22,18 +22,16 @@ const ChessInviteSection = () => (
     <Content className="text-neutral-300">
       <SubSection.Content.Container>
         <SubSection.Content.Illustration>
-          <div className="relative rounded-full">
-            <Decorative className="absolute left-0 top-0 -z-20 h-24 w-24 rounded-full bg-white blur-sm" />
-            <Decorative className=" absolute left-0 top-0 -z-10 h-24 w-24 rounded-full bg-[conic-gradient(at_bottom_right,_var(--tw-gradient-stops))] from-white from-40% via-green-500 to-green-900" />
+          <div className="relative h-[96px] w-[96px] rounded-full">
+            <Decorative className="absolute left-0 top-0 -z-20 h-[96px] w-[96px] rounded-full bg-white blur-sm" />
+            <Decorative className=" absolute left-0 top-0 -z-10 h-[96px] w-[96px] rounded-full bg-[conic-gradient(at_bottom_right,_var(--tw-gradient-stops))] from-white from-40% via-green-500 to-green-900" />
 
             <img
-              width="auto"
-              loading="lazy"
-              height="24rem"
-              decoding="async"
-              alt="chess.com logo"
+              height="96"
+              width="96"
+              alt=""
               src="./logos/chess-icon.png"
-              className="h-24 w-auto opacity-80 shadow-black drop-shadow-lg"
+              className="relative z-10 opacity-80 shadow-black drop-shadow-lg"
             />
           </div>
         </SubSection.Content.Illustration>

diff --git a/src/app/_page/_components/footerSection.tsx b/src/app/_page/_components/footerSection.tsx
@@ -20,6 +20,7 @@ const FooterSection = () => (
             width="256px"
             loading="lazy"
             decoding="async"
+            alt=""
             src="./idea-launch.png"
           />
         </div>
@@ -53,7 +54,7 @@ const FooterSection = () => (
             hover="textYellow"
             background="none"
             size="none"
-            aria-label="Github Repository"
+            aria-label="Popsy Home"
             className="m-0 inline-block w-0 min-w-min p-0 md:min-w-min"
           >
             popsy

diff --git a/src/app/_page/_components/linksSection.tsx b/src/app/_page/_components/linksSection.tsx
@@ -24,7 +24,6 @@ const LinksSection = () => (
         iconName="Github"
         iconFillColor="github"
         href={links.profile.github}
-        aria-label='Github "raferdev" profile'
       >
         Github
       </Link>
@@ -35,7 +34,6 @@ const LinksSection = () => (
         iconName="Youtube"
         iconFillColor="youtube"
         href={links.profile.youtube}
-        aria-label='Youtube "raferdev" channel'
       >
         Youtube
       </Link>
@@ -46,7 +44,6 @@ const LinksSection = () => (
         iconName="Linkedin"
         iconFillColor="linkedin"
         href={links.profile.linkedin}
-        aria-label='Linkedin "raferdev" profile'
       >
         Linkedin
       </Link>
@@ -55,7 +52,6 @@ const LinksSection = () => (
         target="_blank"
         hover="bgCyan"
         iconName="Mail"
-        aria-label="Email"
         iconFillColor="white"
         href={links.profile.email.raferdev}
       >
@@ -68,7 +64,6 @@ const LinksSection = () => (
         iconName="Twitter"
         iconFillColor="twitter"
         href={links.profile.twitter}
-        aria-label='Twitter "raferdev" profile'
       >
         Twitter / X
       </Link>
@@ -79,7 +74,6 @@ const LinksSection = () => (
         iconName="Instagram"
         iconFillColor="instagram"
         href={links.profile.instagram}
-        aria-label='Instagram "raferdev" profile'
       >
         Instagram
       </Link>

diff --git a/src/app/_page/_components/myworldxSection.tsx b/src/app/_page/_components/myworldxSection.tsx
@@ -34,15 +34,15 @@ const MyworldxSection = () => (
       <SubSection.Content.Container>
         <SubSection.Content.Illustration>
           <AnimationPlanetSpotMyworlx />
-          <div className="relative rounded-full">
-            <Decorative className="absolute left-0 top-0 -z-20 h-24 w-24 rounded-full bg-white blur-sm" />
-            <Decorative className=" absolute left-0 top-0 -z-10 h-24 w-24 rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-slate-600 to-indigo-200" />
+          <div className="relative flex h-[96px] w-[108px] items-center justify-center rounded-full">
+            <Decorative className="absolute left-0 top-0 -z-20 h-[96px] w-[96px] rounded-full bg-white blur-sm" />
+            <Decorative className=" absolute left-0 top-0 -z-10 h-[96px] w-[96px] rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-slate-600 to-indigo-200" />
             <img
               loading="lazy"
               decoding="async"
-              height="24rem"
-              width="auto"
-              className="h-24 w-auto"
+              height="96"
+              width="108"
+              className="relative z-10"
               src="./logos/myworldx-logo.png"
               alt=""
             />

diff --git a/src/app/_page/_components/storybookSection.tsx b/src/app/_page/_components/storybookSection.tsx
@@ -26,17 +26,17 @@ const StorybookSection = () => (
 
       <SubSection.Content.Container>
         <SubSection.Content.Illustration>
-          <div className="relative rounded-full">
+          <div className="relative h-[96px] w-[96px] rounded-full">
             <Decorative className="absolute left-0 top-0 -z-20 h-[96px] w-[96px] rounded-full bg-white blur-sm" />
             <Decorative className=" absolute left-0 top-0 -z-10 h-[96px] w-[96px] rounded-full bg-[conic-gradient(at_top_left,_var(--tw-gradient-stops))] from-red-400 via-gray-300 to-blue-500" />
             <img
-              height="96px"
-              width="108px"
+              height="96"
+              width="96"
               loading="lazy"
               decoding="async"
-              className="h-24 w-auto opacity-80 shadow-black drop-shadow-lg"
+              className="relative z-10 opacity-80 shadow-black drop-shadow-lg"
               src="./logos/storybook.png"
-              alt="storybook logo"
+              alt=""
             />
           </div>
         </SubSection.Content.Illustration>