refactor: fix inconsistent container

raexera · Sep 22, 2024 · f1844fe · f1844fe
1 parent 6d28485
commit f1844fe
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 29 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -18,11 +18,11 @@ const { url, name, description, highlights, technologies } = Astro.props;
 >
   <div class="w-full group-hover:text-black dark:group-hover:text-white">
     <div class="flex items-center gap-2">
-      <h3
+      <div
         class="text-base font-bold leading-snug text-black/75 dark:text-white/75"
       >
         {name}
-      </h3>
+      </div>
       <svg
         class="h-2.5 w-2.5 -translate-x-1 translate-y-1 -rotate-45 transition-transform group-hover:translate-x-0 group-hover:translate-y-0"
         viewBox="0 0 13 15"

diff --git a/src/components/Heading.astro b/src/components/Heading.astro
@@ -10,23 +10,23 @@ const { title, description, highlight } = Astro.props;
 
 <header class="flex flex-col items-center gap-4 text-center">
   <div>
-    <h1
+    <div
       class="bg-opacity-50 bg-gradient-to-b from-neutral-900 to-neutral-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent dark:from-neutral-50 dark:to-neutral-400 lg:text-5xl"
     >
       {title}.
-    </h1>
-    <h2
+    </div>
+    <div
       class="mt-2 text-justify text-sm leading-6 text-black/75 dark:text-white/75 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg"
     >
       {description}
-    </h2>
+    </div>
     {
       highlight && (
         <div class="flex flex-col gap-2">
           {highlight.map((item) => (
-            <h2 class="text-justify text-sm leading-6 text-black/75 dark:text-white/75 sm:text-base lg:text-lg">
+            <div class="text-justify text-sm leading-6 text-black/75 dark:text-white/75 sm:text-base lg:text-lg">
               {item}
-            </h2>
+            </div>
           ))}
         </div>
       )

diff --git a/src/components/Section.astro b/src/components/Section.astro
@@ -11,7 +11,9 @@ const { className, title } = Astro.props;
   {
     title && (
       <div class="flex items-center gap-2">
-        <h3 class="text-base font-bold text-black dark:text-white">{title}</h3>
+        <div class="text-base font-bold text-black dark:text-white">
+          {title}
+        </div>
         <div class="h-0.5 flex-grow bg-black/25 dark:bg-white/25" />
       </div>
     )

diff --git a/src/components/sections/Awards.astro b/src/components/sections/Awards.astro
@@ -27,7 +27,7 @@ import { awards } from "@cv";
             <time class="text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0">
               {date}
             </time>
-            <h3 class="font-medium text-black dark:text-white">{title}</h3>
+            <div class="font-medium text-black dark:text-white">{title}</div>
             <p class="mt-1 text-sm text-black/75 dark:text-white/75">
               {awarder}
             </p>

diff --git a/src/components/sections/Education.astro b/src/components/sections/Education.astro
@@ -34,7 +34,7 @@ import { education } from "@cv";
                 <time class="mb-1 text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0">
                   {years}
                 </time>
-                <h3 class="text-base font-medium leading-snug text-black dark:text-white">
+                <div class="text-base font-medium leading-snug text-black dark:text-white">
                   {url ? (
                     <a
                       class="inline-flex items-center hover:text-black/75 dark:hover:text-white/75"
@@ -60,7 +60,7 @@ import { education } from "@cv";
                   ) : (
                     <span>{institution}</span>
                   )}
-                </h3>
+                </div>
                 <p class="mt-1 text-sm text-black/75 dark:text-white/75">
                   {area}
                 </p>

diff --git a/src/components/sections/Experience.astro b/src/components/sections/Experience.astro
@@ -45,7 +45,7 @@ import { work } from "@cv";
 
               {/* Content */}
               <div class={isLastItem ? "" : "mb-8"}>
-                <h3 class="font-bold text-black dark:text-white">
+                <div class="font-bold text-black dark:text-white">
                   {position} <span>@</span>
                   {url ? (
                     <a
@@ -72,7 +72,7 @@ import { work } from "@cv";
                   ) : (
                     name
                   )}
-                </h3>
+                </div>
                 {(location || location_type) && (
                   <p class="mt-2 text-sm text-black/75 dark:text-white/75">
                     {location} {location && location_type && " - "}{" "}
@@ -92,9 +92,9 @@ import { work } from "@cv";
                   {responsibilities && (
                     <ExpandButton client:load>
                       <div>
-                        <h4 class="font-medium text-black/75 dark:text-white/75">
+                        <div class="font-medium text-black/75 dark:text-white/75">
                           Responsibilities:
-                        </h4>
+                        </div>
                         <ul class="list-inside list-disc space-y-1 text-black/50 dark:text-white/50">
                           {responsibilities.map((responsibility) => (
                             <li>{responsibility}</li>

diff --git a/src/components/sections/Skills.astro b/src/components/sections/Skills.astro
@@ -5,9 +5,9 @@ const { technologies, programming_languages } = skills;
 ---
 
 <Section className={Astro.props.className} title="Skills">
-  <h3 class="text-sm font-bold text-black/75 dark:text-white/75">
+  <div class="text-sm font-bold text-black/75 dark:text-white/75">
     Technologies
-  </h3>
+  </div>
   <ul class="flex flex-wrap gap-2">
     {
       technologies.map((tech) => (
@@ -18,9 +18,9 @@ const { technologies, programming_languages } = skills;
     }
   </ul>
 
-  <h3 class="mt-2 text-sm font-bold text-black/75 dark:text-white/75">
+  <div class="mt-2 text-sm font-bold text-black/75 dark:text-white/75">
     Programming Languages
-  </h3>
+  </div>
   <ul class="flex flex-wrap gap-2">
     {
       programming_languages.map((lang) => (

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -17,27 +17,27 @@ const { name, label, summary, socials } = basics;
       >
         <div class="w-full text-justify md:w-1/2 md:text-start">
           <div class="flex flex-col items-start gap-2">
-            <h1
+            <div
               class="text-sm tracking-tight text-neutral-900 dark:text-neutral-50 lg:text-lg"
             >
               Hi, my name is
-            </h1>
-            <h1
-              class="bg-gradient-to-b from-neutral-900 to-neutral-600 bg-clip-text text-start text-4xl font-bold tracking-tight text-transparent dark:from-neutral-50 dark:to-neutral-400 lg:text-5xl"
+            </div>
+            <div
+              class="bg-gradient-to-b from-neutral-900 to-neutral-600 bg-clip-text text-start text-4xl font-bold tracking-tight text-transparent dark:from-neutral-50 dark:to-neutral-400 lg:text-6xl"
             >
               {name}.
-            </h1>
+            </div>
           </div>
-          <h2
+          <div
             class="mt-2 text-sm font-medium text-black/75 dark:text-white/75 lg:text-lg"
           >
             {label}.
-          </h2>
-          <h2
+          </div>
+          <div
             class="mt-2 text-sm font-medium text-black/75 dark:text-white/75 lg:text-lg"
           >
             {summary}.
-          </h2>
+          </div>
           <div class="mt-5 flex flex-wrap items-center gap-2 md:justify-start">
             {
               socials.map((item) => (