fix: usage of correct heading levels and html tags

blog/BlogPosts.tsx

@@ -9,37 +9,34 @@ 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}
-            >
-              <ShadowContainer className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02]">
-                <h2
-                  data-cy="blog-post-title"
-                  className="text-xl font-semibold text-primary dark:text-primary-dark"
-                >
-                  {post.frontmatter.title}
-                </h2>
-                <p data-cy="blog-post-date" className="mt-2">
-                  {postPublishedOn}
-                </p>
-                <p data-cy="blog-post-description" className="mt-3">
-                  {post.frontmatter.description}
-                </p>
-              </ShadowContainer>
-            </Link>
+            <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"
+                    className="text-xl font-semibold text-primary dark:text-primary-dark"
+                  >
+                    {post.frontmatter.title}
+                  </h2>
+                  <p data-cy="blog-post-date" className="mt-2">
+                    {postPublishedOn}
+                  </p>
+                  <p data-cy="blog-post-description" className="mt-3">
+                    {post.frontmatter.description}
+                  </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">
-          {title}
-        </strong>
-        <br />
-        <span>{htmlParser(description)}</span>
-      </p>
-    </>
+    <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}
+      </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">
-          <GitHubIcon className="mr-2 h-6" />
-          <span className="font-semibold text-primary dark:text-primary-dark">
-            {name}
-          </span>
-        </div>
-        <p className="my-4">{description}</p>
+        <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>
+          </h3>
+          <p className="my-4">{description}</p>
+        </ShadowContainer>
       </a>
-    </ShadowContainer>
+    </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,23 +21,25 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
         href={link}
         aria-label={title}
       >
-        <div className="flex justify-center">
-          <Image
-            quality={100}
-            className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
-            width={300}
-            height={300}
-            src={image}
-            alt={title}
-          />
-        </div>
-        <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
-          <h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
-            {title}
-          </h3>
-          <p className="mx-4 my-6 font-semibold">{description}</p>
-        </div>
+        <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
+          <div className="flex justify-center">
+            <Image
+              quality={100}
+              className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
+              width={300}
+              height={300}
+              src={image}
+              alt={title}
+            />
+          </div>
+          <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
+            <h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
+              {title}
+            </h3>
+            <p className="mx-4 my-6 font-semibold">{description}</p>
+          </div>
+        </ShadowContainer>
       </a>
-    </ShadowContainer>
+    </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 (
-    <a
-      href={skillProperties.link}
-      className="mx-2 max-w-xl text-primary hover:underline dark:text-primary-dark"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <div className="text-center">
+    <li>
+      <a
+        href={skillProperties.link}
+        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"
+      >
         <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>
+      </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>