src/assets/styles/About.module.scss

@@ -1,5 +1,25 @@
 @use './variables' as *;
 
+/* Section styling */
+.sectionTitle {
+  font-size: 2.25rem;
+  margin-bottom: 1.5rem;
+  position: relative;
+  padding-bottom: 1rem;
+  display: inline-block;
+}
+
+.sectionTitle::after {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: 3px;
+  background: $accent-fire;
+  bottom: 0;
+  left: 0;
+  box-shadow: $glow-effect;
+}
+
 .profileImage {
   width: 100%;
   aspect-ratio: 1/1;
@@ -31,8 +51,8 @@
 .introText {
   font-size: 1.1rem;
   line-height: 1.8;
-  color: var(--text-ash);
+  color: $text-ash;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }
 
 .introText p {
@@ -47,7 +67,7 @@
   color: $accent-fire;
 }
 
-.connect-link {
+.connectLink {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -543,3 +563,56 @@
   font-size: 0.9rem;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
+
+@media (max-width: 992px) {
+  .pageTitle {
+    font-size: 2.5rem;
+  }
+
+  .timeline:before {
+    left: 2rem;
+  }
+
+  .timelineItem:nth-child(odd) .timeline-content,
+  .timelineItem:nth-child(even) .timeline-content {
+    width: calc(100% - 3rem);
+    margin-left: 3rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .timelineDot {
+    left: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .pageTitle {
+    font-size: 2rem;
+  }
+
+  .introText {
+    margin-top: 2rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .pageTitle {
+    font-size: 1.8rem;
+  }
+
+  .sectionTitle {
+    font-size: 1.8rem;
+  }
+
+  .testimonialAuthor {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .authorInfo {
+    margin-top: 1rem;
+    text-align: center;
+  }
+}

src/pages/About.tsx

@@ -48,36 +48,36 @@ export const About = () => {
         <div className="container">
           <div className="row">
             <div className="col-lg-4">
-              <h2 className={`section-title ${style.sectionTitle}`}>The Master Behind the Mask</h2>
+              <h2 className={`${style.sectionTitle}`}>The Master Behind the Mask</h2>
-              <div className="profile-image">
+              <div className={style.profileImage}>
                 <img src="/images/profile.jpg" alt="SecCodeSmith" />
               </div>
             </div>
             <div className="col-lg-8">
-              <div className="intro-text">
+              <div className={style.introText}>
-                <p>Greetings, seeker of digital arcana. I am <strong>SecCodeSmith</strong>, a master craftsman of code and conductor of silicon. For over a decade, I have been forging robust solutions across the realms of embedded systems, machine learning, and web development.</p>
+                <p className={style.introText}>Greetings, seeker of digital arcana. I am <strong>SecCodeSmith</strong>, a master craftsman of code and conductor of silicon. For over a decade, I have been forging robust solutions across the realms of embedded systems, machine learning, and web development.</p>
 
-                <p>My journey began in the depths of <span className="accent">low-level programming</span>, where I learned to bend hardware to my will through carefully crafted instructions. From the arcane energies of microcontrollers to the vast landscapes of cloud architecture, I have honed my skills to create solutions that stand the test of time.</p>
+                <p className={style.introText}>My journey began in the depths of <span className={style.accent}>low-level programming</span>, where I learned to bend hardware to my will through carefully crafted instructions. From the arcane energies of microcontrollers to the vast landscapes of cloud architecture, I have honed my skills to create solutions that stand the test of time.</p>
 
-                <p>What distinguishes my work is the <strong>meticulous attention to security</strong> and performance. Like a blacksmith who understands that a sword's true value lies not just in its edge but in the integrity of its steel, I craft code that is not merely functional but resilient against the chaotic forces of the digital wilderness.</p>
+                <p className={style.introText}>What distinguishes my work is the <strong>meticulous attention to security</strong> and performance. Like a blacksmith who understands that a sword's true value lies not just in its edge but in the integrity of its steel, I craft code that is not merely functional but resilient against the chaotic forces of the digital wilderness.</p>
 
-                <p>Beyond the technical realms, I am a devoted practitioner of open-source sorcery, contributing to projects that empower others to create and innovate. When not at the forge, I can be found exploring the ancient texts of computer science, delving into new programming languages, or mentoring apprentices on their own journey.</p>
+                <p className={style.introText}>Beyond the technical realms, I am a devoted practitioner of open-source sorcery, contributing to projects that empower others to create and innovate. When not at the forge, I can be found exploring the ancient texts of computer science, delving into new programming languages, or mentoring apprentices on their own journey.</p>
 
                 <div className="mt-4">
-                  <a href="#" className="connect-link">
+                  <a href="#" className={style.connectLink}>
-                    <i className="fab fa-github connect-icon"></i>
+                    <i className={`fab fa-github ${style.connectIcon}`}></i>
                     <span>GitHub</span>
                   </a>
-                  <a href="#" className="connect-link">
+                  <a href="#" className={style.connectLink}>
-                    <i className="fab fa-linkedin connect-icon"></i>
+                    <i className={`fab fa-linkedin ${style.connectIcon}`}></i>
                     <span>LinkedIn</span>
                   </a>
-                  <a href="#" className="connect-link">
+                  <a href="#" className={style.connectLink}>
-                    <i className="fab fa-twitter connect-icon"></i>
+                    <i className={`fab fa-twitter ${style.connectIcon}`}></i>
                     <span>Twitter</span>
                   </a>
-                  <a href="#" className="connect-link">
+                  <a href="#" className={style.connectLink}>
-                    <i className="fas fa-envelope connect-icon"></i>
+                    <i className={`fas fa-envelope ${style.connectIcon}`}></i>
                     <span>Email</span>
                   </a>
                 </div>
@@ -92,18 +92,18 @@ export const About = () => {
         <div className="container">
           <div className="row mb-4">
             <div className="col-12">
-              <h2 className={`section-title ${style.sectionTitle}`}>Forging Principles</h2>
+              <h2 className={` ${style.sectionTitle}`}>Forging Principles</h2>
             </div>
           </div>
           <div className={`row g-4 ${style.row}`}>
             {data.coreValues.map((value, index) => (
               <div className="col-md-6 col-lg-3" key={index}>
-                <div className={`value-card h-100 ${style.valueCard}`}>
+                <div className={` h-100 ${style.valueCard}`}>
-                  <div className={`value-icon ${style.valueIcon}`}>
+                  <div className={style.valueIcon}>
                     <i className={value.icon}></i>
                   </div>
-                  <h3 className={`value-title ${style.valueTitle}`}>{value.title}</h3>
+                  <h3 className={`${style.valueTitle}`}>{value.title}</h3>
-                  <p className={`value-text ${style.valueText}`}>{value.description}</p>
+                  <p className={`${style.valueText}`}>{value.description}</p>
                 </div>
               </div>
             ))}
@@ -117,27 +117,29 @@ export const About = () => {
         <div className="container">
           <div className="row mb-4">
             <div className="col-12">
-              <h2 className={`section-title ${style.sectionTitle}`}>Arsenal of Expertise</h2>
+              <h2 className={`${style.sectionTitle}`}>Arsenal of Expertise</h2>
             </div>
           </div>
           <div className="row g-4">
             {data.technicalArsenal.map((value, index) => (
-              <div className="skill-card h-100" key={index}>
+              <div className="col-md-6 col-lg-3" key={index}>
-                <div className="skill-header">
+                <div className={`h-100 ${style.skillCard}`} key={index}>
-                  <div className="skill-icon">
+                  <div className={`${style.skillHeader}`}>
+                    <div className={`skill-icon ${style.skillIcon}`}>
                       <i className={value.icon}></i>
                     </div>
-                  <h3 className="skill-title">${value.title}</h3>
+                    <h3 className={`skill-title ${style.skillTitle}`}>{value.title}</h3>
                   </div>
                   <ul className="list-unstyled">
                     {value.skills.map((skillItem, skillIndex) => (
                       <li className="mb-2" key={skillIndex}>
-                      <i className={`fas fa-check skill-check `}></i>
+                        <i className={`fas fa-check skill-check ${style.skillCheck}`}></i>
                         <span>{skillItem}</span>
                       </li>
                     ))}
                   </ul>
                 </div>
+              </div>
             ))}
 
           </div>