test accessibility friendly

amerfathullah · Dec 16, 2024 · 1f45f81 · 1f45f81
1 parent 2d20dd1
commit 1f45f81
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 18 deletions.
diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx
@@ -13,7 +13,7 @@ import {FiGitCommit} from 'react-icons/fi'
 const About = () => {
   return (
     <section id='about'>
-      <h5>Get To Know</h5>
+      <p className='text-center'>Get To Know</p>
       <h2>About Me</h2>
 
       <div className="container about__container">
@@ -41,19 +41,19 @@ const About = () => {
           <div className="about__cards">
             <article className='about__card'>
               <FaAward className='about__icon'/>
-              <h5>Experience</h5>
+              <p>Experience</p>
               <small>2+ Years Working</small>
             </article>
 
             <article className='about__card'>
               <FiGitCommit className='about__icon'/>
-              <h5>Contributions</h5>
+              <p>Contributions</p>
               <small>500+ Commits</small>
             </article>
 
             {/* <article className='about__card'>
               <VscFolderLibrary className='about__icon'/>
-              <h5>Projects</h5>
+              <p>Projects</p>
               <small>10+ Completed</small>
             </article> */}
           </div>

diff --git a/src/components/contact/Contact.jsx b/src/components/contact/Contact.jsx
@@ -19,27 +19,27 @@ const Contact = () => {
 
   return (
     <section id='contact'>
-      <h5>Get In Touch</h5>
+      <p>Get In Touch</p>
       <h2>Contact Me</h2>
 
       <div className="container contact__container">
         <div className="contact__options">
           <article className="contact__option">
             <MdOutlineEmail className='contact__option-icon'/>
-            <h4>Email</h4>
-            <h5>[email protected]</h5>
+            <h3>Email</h3>
+            <h4 style={{ color: 'var(--color-light)' }}>[email protected]</h4>
             <a href="mailto:[email protected]" target="_blank" rel="noreferrer">Send a message</a>
           </article>
           <article className="contact__option">
             <RiLinkedinLine className='contact__option-icon'/>
-            <h4>LinkedIn</h4>
-            <h5>Amer Fathullah</h5>
+            <h3>LinkedIn</h3>
+            <h4 style={{ color: 'var(--color-light)' }}>Amer Fathullah</h4>
             <a href="https://www.linkedin.com/in/amerfathullah/" target="_blank" rel="noreferrer">Send a message</a>
           </article>
           <article className="contact__option">
             <BsWhatsapp className='contact__option-icon'/>
-            <h4>WhatsApp</h4>
-            <h5>+60105752992</h5>
+            <h3>WhatsApp</h3>
+            <h4 style={{ color: 'var(--color-light)' }}>+60105752992</h4>
             <a href="https://wa.me/60105752992" target="_blank" rel="noreferrer">Send a message</a>
           </article>
         </div>

diff --git a/src/components/experience/Experience.jsx b/src/components/experience/Experience.jsx
@@ -4,7 +4,7 @@ import './experience.css'
 const Experience = () => {
   return (
     <section id='experience'>
-      <h5>Where Have I Worked Before</h5>
+      <p>Where Have I Worked Before</p>
       <h2>My Work Experiences</h2>
 
       <div className="container about__container">

diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -10,9 +10,9 @@ const Header = () => {
   return (
     <header>
       <div className="container header__container">
-        <h5>Hello I'm</h5>
+        <p>Hello I'm</p>
         <h1>Amer Fathullah</h1>
-        <h5 className="text-light">Full-Stack Developer</h5>
+        <p>Full-Stack Developer</p>
         <CTA />
         <HeaderSocial />
 

diff --git a/src/components/portfolio/Portfolio.jsx b/src/components/portfolio/Portfolio.jsx
@@ -58,7 +58,7 @@ const data = [
 const Portfolio = () => {
   return (
     <section id='portfolio'>
-      <h5>My Recent Work</h5>
+      <p>My Recent Work</p>
       <h2>Portfolio</h2>
 
       <div className="container portfolio__container">

diff --git a/src/components/services/Services.jsx b/src/components/services/Services.jsx
@@ -5,7 +5,7 @@ import {BiCheck} from 'react-icons/bi'
 const Services = () => {
   return (
     <section id='services'>
-      <h5>What I Offer</h5>
+      <p>What I Offer</p>
       <h2>Services</h2>
 
       <div className="container services__container">

diff --git a/src/components/skills/Skills.jsx b/src/components/skills/Skills.jsx
@@ -5,7 +5,7 @@ import {BsPatchCheckFill} from 'react-icons/bs'
 const Skills = () => {
   return (
     <section id='skills'>
-      <h5>What Skills I Have</h5>
+      <p>What Skills I Have</p>
       <h2>My Skills</h2>
 
       <div className="container experience__container">

diff --git a/src/components/testimonials/Testimonials.jsx b/src/components/testimonials/Testimonials.jsx
@@ -43,7 +43,7 @@ const data = [
 const Testimonials = () => {
   return (
     <section id='testimonials'>
-      <h5>Review from clients</h5>
+      <p>Review from clients</p>
       <h2>Testimonials</h2>
 
       <Swiper className="container testimonials__container" 

diff --git a/src/index.css b/src/index.css
@@ -64,6 +64,7 @@ section {
 }
 
 section > h2,
+section > p,
 section > h5 {
   text-align: center;
   color: var(--color-light);