💄 style(experience-section): update HTML structure for consistency

- replace h4 and h5 tags with p tags for company and title
- use strong tag to emphasize company name
- ensure consistent HTML structure across component

💄 style(experience-section): remove unused CSS rules

- delete width and text alignment rules for even children
- remove paragraph styling from index.module.css

Author: isfopo

src/components/Section/ExperienceSection/index.module.css

@@ -20,17 +20,6 @@
     display: grid;
     grid-template-columns: 1fr auto;
     column-gap: 1rem;
-    width: 100%;
-
-    &:nth-child(even):not(p) {
-      text-align: right;
-    }
-
-    p {
-      font-size: 1rem;
-      font-weight: 400;
-      color: var(--md-sys-color-on-surface);
-    }
 
     .description {
       grid-column: 1 / -1; /* Span all columns */

src/components/Section/ExperienceSection/index.tsx

@@ -56,12 +56,14 @@ export const ExperienceSection = ({
     }: { title: string; company: string } & Experience): React.ReactElement => {
       return (
         <div className={styles["container"]} key={`${company}-${title}`}>
-          <h4>{company}</h4>
+          <p>
+            <strong>{company}</strong>
+          </p>
           <p>
             {startDate} - {endDate ? endDate : "Present"}
           </p>
-          <h5>{title}</h5>
-          <h6>{location}</h6>
+          <p>{title}</p>
+          <p>{location}</p>
           <p className={styles["description"]}>
             {description?.map((desc: string) => (
               <span>{desc}</span>