refactor(content): improve section clarity and accessibility

src/components/ExperienceSection.module.css

@@ -152,8 +152,9 @@
 }
 
 .summary {
-  font-size: var(--font-size-body-small);
+  max-width: 68ch;
-  line-height: var(--line-height-body-small);
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-default);
   color: var(--text-secondary);
   margin-bottom: 0.75rem;
 }
@@ -181,8 +182,9 @@
 }
 
 .bulletText {
-  font-size: var(--font-size-body-small);
+  max-width: 72ch;
-  line-height: var(--line-height-body-small);
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-default);
   color: var(--text-secondary);
 }
 

src/components/ExperienceSection.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import Image from 'next/image';
 import { experiences } from '@/data/experience';
@@ -9,9 +7,7 @@ export const ExperienceSection: React.FC = () => {
   return (
     <section id="experience" className={styles.experienceSection}>
       <div className="content-container">
-        {/* Section Header */}
         <div className="section-header">
-          <span className="section-eyebrow">EXPERIENCES</span>
           <div className="section-title-wrap">
             <h2 className="section-title">Where I&apos;ve Made an Impact</h2>
             <div className="section-underline" />
@@ -21,13 +17,14 @@ export const ExperienceSection: React.FC = () => {
         {/* Timeline Container */}
         <div className={styles.timeline}>
           {experiences.map((item, index) => (
-            <div key={item.id} className={styles.timelineItem}>
+            <article key={item.id} className={styles.timelineItem}>
               {/* Vertical Spine & Node Indicator */}
               <div className={styles.spineColumn}>
                 <div
                   className={`${styles.nodeDot} ${
                     item.isCurrent ? styles.nodeCurrent : ''
                   }`}
+                  aria-hidden="true"
                 />
                 {index < experiences.length - 1 && (
                   <div className={styles.verticalLine} />
@@ -84,14 +81,14 @@ export const ExperienceSection: React.FC = () => {
                   <ul className={styles.bulletList}>
                     {item.bullets.map((bullet, bIdx) => (
                       <li key={bIdx} className={styles.bulletItem}>
-                        <span className={styles.bulletDot} />
+                        <span className={styles.bulletDot} aria-hidden="true" />
                         <span className={styles.bulletText}>{bullet}</span>
                       </li>
                     ))}
                   </ul>
                 </div>
               </div>
-            </div>
+            </article>
           ))}
         </div>
       </div>

src/components/RiverJourney.tsx

@@ -32,7 +32,6 @@ export const RiverJourney: React.FC = () => {
       <ol className={styles.stepsList} aria-label="Career journey">
         {steps.map((step) => (
           <li key={step.number} className={`${styles.stepCard} ${styles[`step${step.number}`]}`}>
-            <span className={styles.stepNumber}>{step.number}</span>
             <div>
               <h3 className={styles.stepTitle}>{step.title}</h3>
               <p className={styles.stepDesc}>{step.description}</p>

src/components/SkillsSection.module.css

@@ -145,7 +145,7 @@
 }
 
 .toolLabel {
-  font-size: clamp(0.71875rem, 1vw, 0.8125rem);
+  font-size: clamp(0.75rem, 1vw, 0.8125rem);
   line-height: 1.25;
   font-weight: 600;
   color: var(--text-primary);

src/components/SkillsSection.tsx

@@ -15,10 +15,6 @@ import styles from './SkillsSection.module.css';
 export const SkillsSection: React.FC = () => {
   const [activeFilter, setActiveFilter] = useState<FilterTab['id']>('software-engineering');
 
-  const filteredTools = toolsList.filter((tool) =>
-    tool.category.includes(activeFilter)
-  );
-
   const getFilterIcon = (id: FilterTab['id']) => {
     switch (id) {
       case 'software-engineering':
@@ -95,7 +91,7 @@ export const SkillsSection: React.FC = () => {
                     <div className={styles.toolIconContainer}>
                       <Image
                         src={tool.icon}
-                        alt={tool.name}
+                        alt=""
                         width={64}
                         height={64}
                         className={styles.toolIcon}
@@ -110,12 +106,14 @@ export const SkillsSection: React.FC = () => {
         </div>
 
         {/* Filter Tabs Under Card */}
-        <div className={styles.filterTabsRow}>
+        <div className={styles.filterTabsRow} aria-label="Filter tools by discipline">
           {filterTabs.map((tab) => {
             const isActive = activeFilter === tab.id;
             return (
               <button
                 key={tab.id}
+                type="button"
+                aria-pressed={isActive}
                 onClick={() => setActiveFilter(tab.id)}
                 className={`pill-btn ${
                   isActive ? 'pill-btn-primary' : 'pill-btn-outline'