fix: a11y issues with curriculum-vitae

packages/config-tailwind/styles.css

@@ -192,19 +192,13 @@ code .line:last-child {
   }
   .h1,
   .h2,
-  .h3,
-  h1,
-  h2,
-  h3 {
+  .h3 {
     margin-top: 20px;
     margin-bottom: 10px;
   }
   .h4,
   .h5,
-  .h6,
-  h4,
-  h5,
-  h6 {
+  .h6 {
     margin-top: 10px;
     margin-bottom: 10px;
   }
@@ -213,31 +207,22 @@ code .line:last-child {
   .h3,
   .h4,
   .h5,
-  .h6,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  .h6 {
     font-family: inherit;
     line-height: 1.1;
     color: inherit;
   }
-  .h3,
-  h3 {
+  .h3 {
     font-size: 24px;
   }
-  .h4,
-  h4 {
+  .h4 {
     font-size: 18px;
   }
-  .h5,
-  h5 {
+  .h5 {
     font-size: 14px;
   }
   .text-muted {
-    color: #777;
+    color: #414141;
   }
   .list-unstyled {
     padding-left: 0;

packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx

@@ -23,14 +23,14 @@ export const CurriculumVitaeProfile: React.FC<
           />
         </div>
         <div className="name-and-profession text-center">
-          <h3>
+          <h1 className="h3">
             <strong>{t("meta.title")}</strong>
-          </h3>
-          <h5 className="text-muted">{t("curriculum-vitae.description")}</h5>
-          <h5 className="text-muted">
+          </h1>
+          <h2 className="text-muted h5">{t("curriculum-vitae.description")}</h2>
+          <h2 className="text-muted h5">
             <BirthDate />
-          </h5>
-          <h5 className="text-muted">{t("home.about.nationality.value")}</h5>
+          </h2>
+          <h2 className="text-muted h5">{t("home.about.nationality.value")}</h2>
         </div>
       </div>
       <div className="flex justify-center">

packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx

@@ -14,7 +14,7 @@ export const CurriculumVitaeSection: React.FC<CurriculumVitaeSectionProps> = (
       <div className="icon">{icon}</div>
 
       <div className="info">
-        <h4 className="font-semibold uppercase">{title}</h4>
+        <h2 className="h4 font-semibold uppercase">{title}</h2>
 
         <div className="content">{children}</div>
       </div>