fix: usage of correct heading levels and html tags

blog/BlogPosts.tsx

@@ -9,19 +9,15 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
 
   return (
     <div className="flex w-full items-center justify-center p-8">
-      <div className="w-[1600px]" data-cy="blog-posts">
-        {posts.map((post, index) => {
+      <ul className="w-[1600px]" data-cy="blog-posts">
+        {posts.map((post) => {
           const postPublishedOn = date.format(
             new Date(post.frontmatter.publishedOn),
             "DD/MM/YYYY",
           )
           return (
-            <Link
-              href={`/blog/${post.slug}`}
-              key={index}
-              locale="en"
-              data-cy={post.slug}
-            >
+            <li key={post.slug}>
+              <Link href={`/blog/${post.slug}`} locale="en" data-cy={post.slug}>
                 <ShadowContainer className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02]">
                   <h2
                     data-cy="blog-post-title"
@@ -37,9 +33,10 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
                   </p>
                 </ShadowContainer>
               </Link>
+            </li>
           )
         })}
-      </div>
+      </ul>
     </div>
   )
 }

components/Header/index.tsx

@@ -17,7 +17,7 @@ export const Header = (): JSX.Element => {
       <h1>
         <Link
           href="/"
-          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-105"
+          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-[1.03]"
         >
           <Image
             quality={100}

components/Interests/InterestParagraph.tsx

@@ -20,14 +20,11 @@ export const InterestParagraph = (
   const { title, description } = props
 
   return (
-    <>
-      <p className="my-6 text-center text-gray dark:text-gray-dark">
-        <strong className="text-lg font-semibold text-primary dark:text-primary-dark">
+    <div className="my-6 text-center text-gray dark:text-gray-dark">
+      <h3 className="text-lg font-semibold text-primary dark:text-primary-dark">
         {title}
-        </strong>
-        <br />
-        <span>{htmlParser(description)}</span>
-      </p>
-    </>
+      </h3>
+      <p className="my-2">{htmlParser(description)}</p>
+    </div>
   )
 }

components/Interests/index.tsx

@@ -16,8 +16,8 @@ export const Interests = (): JSX.Element => {
 
   return (
     <div className="max-w-full">
-      {paragraphs.map((paragraph, index) => {
-        return <InterestParagraph key={index} {...paragraph} />
+      {paragraphs.map((paragraph) => {
+        return <InterestParagraph key={paragraph.id} {...paragraph} />
       })}
       <InterestsList />
     </div>

components/OpenSource/Repository.tsx

@@ -11,16 +11,18 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
   const { name, description, href } = props
 
   return (
-    <ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.03]">
+    <li>
       <a href={href} target="_blank" rel="noopener noreferrer">
-        <div className="flex">
+        <ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.03]">
+          <h3 className="flex">
             <GitHubIcon className="mr-2 h-6" />
             <span className="font-semibold text-primary dark:text-primary-dark">
               {name}
             </span>
-        </div>
+          </h3>
           <p className="my-4">{description}</p>
-      </a>
         </ShadowContainer>
+      </a>
+    </li>
   )
 }

components/OpenSource/index.tsx

@@ -10,7 +10,7 @@ export const OpenSource = (): JSX.Element => {
       <p className="text-center">
         {i18n.translate("home.open-source.description")}
       </p>
-      <div className="my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">
+      <ul className="my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">
         <Repository
           name="nodejs/node"
           description="Node.js JavaScript runtime ✨🐢🚀✨"
@@ -31,7 +31,7 @@ export const OpenSource = (): JSX.Element => {
           description="The React Framework"
           href="https://github.com/vercel/next.js/commits?author=theoludwig"
         />
-      </div>
+      </ul>
     </div>
   )
 }

components/Portfolio/PortfolioItem.tsx

@@ -13,7 +13,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
   const { title, description, link, image } = props
 
   return (
-    <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
+    <li>
       <a
         className="group inline-flex justify-center"
         target="_blank"
@@ -21,6 +21,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
         href={link}
         aria-label={title}
       >
+        <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
           <div className="flex justify-center">
             <Image
               quality={100}
@@ -37,7 +38,8 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
             </h3>
             <p className="mx-4 my-6 font-semibold">{description}</p>
           </div>
-      </a>
         </ShadowContainer>
+      </a>
+    </li>
   )
 }

components/Portfolio/index.tsx

@@ -12,10 +12,10 @@ export const Portfolio = (): JSX.Element => {
   }
 
   return (
-    <div className="flex w-full flex-wrap justify-center px-3">
-      {items.map((item, index) => {
-        return <PortfolioItem key={index} {...item} />
+    <ul className="flex w-full flex-wrap justify-center px-3">
+      {items.map((item) => {
+        return <PortfolioItem key={item.title} {...item} />
       })}
-    </div>
+    </ul>
   )
 }

components/Skills/Skill.tsx

@@ -27,13 +27,13 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
   }
 
   return (
+    <li>
       <a
         href={skillProperties.link}
-      className="mx-2 max-w-xl text-primary hover:underline dark:text-primary-dark"
+        className="mx-2 flex max-w-xl flex-col items-center justify-center text-center text-primary hover:underline dark:text-primary-dark"
         target="_blank"
         rel="noopener noreferrer"
       >
-      <div className="text-center">
         <Image
           className="inline size-16"
           quality={100}
@@ -43,7 +43,7 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
           src={getImage()}
         />
         <p className="mt-1 font-semibold">{skill}</p>
-      </div>
       </a>
+    </li>
   )
 }

components/Skills/SkillsSection.tsx

@@ -18,7 +18,7 @@ export const SkillsSection = (props: SkillsSectionProps): JSX.Element => {
                 {title}
               </h3>
             </div>
-            <div className="flex flex-wrap justify-around">{children}</div>
+            <ul className="flex flex-wrap justify-around">{children}</ul>
           </div>
         </div>
       </div>

components/design/Section/index.tsx

@@ -57,8 +57,8 @@ export const Section = (props: SectionProps): JSX.Element => {
         </p>
       ) : null}
       <div className="w-full px-3">
-        <ShadowContainer>
-          <div className="w-full px-16 py-4 leading-8">{children}</div>
+        <ShadowContainer className="w-full px-2 py-4 leading-8 sm:px-16">
+          {children}
         </ShadowContainer>
       </div>
     </section>