From d0de63bb7a6c6167ad3f33cb289e473d3fc83892 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 6 Sep 2026 21:59:12 +0330
Subject: [PATCH] refactor(content): improve section clarity and accessibility

---
 src/components/ExperienceSection.module.css | 10 ++++++----
 src/components/ExperienceSection.tsx        | 11 ++++-------
 src/components/RiverJourney.tsx             |  1 -
 src/components/SkillsSection.module.css     |  2 +-
 src/components/SkillsSection.tsx            | 10 ++++------
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/ExperienceSection.module.css b/src/components/ExperienceSection.module.css
index 738233a..84173b7 100644
--- a/src/components/ExperienceSection.module.css
+++ b/src/components/ExperienceSection.module.css
@@ -152,8 +152,9 @@
 }
 
 .summary {
-  font-size: var(--font-size-body-small);
-  line-height: var(--line-height-body-small);
+  max-width: 68ch;
+  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);
-  line-height: var(--line-height-body-small);
+  max-width: 72ch;
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-default);
   color: var(--text-secondary);
 }
 
diff --git a/src/components/ExperienceSection.tsx b/src/components/ExperienceSection.tsx
index 916f53a..0682dfe 100644
--- a/src/components/ExperienceSection.tsx
+++ b/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>
diff --git a/src/components/RiverJourney.tsx b/src/components/RiverJourney.tsx
index 2b302c0..bbcc121 100644
--- a/src/components/RiverJourney.tsx
+++ b/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>
diff --git a/src/components/SkillsSection.module.css b/src/components/SkillsSection.module.css
index 9259ec7..3b0e631 100644
--- a/src/components/SkillsSection.module.css
+++ b/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);
diff --git a/src/components/SkillsSection.tsx b/src/components/SkillsSection.tsx
index abf7c48..eb804ba 100644
--- a/src/components/SkillsSection.tsx
+++ b/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'