Merge pull request #45 from rachelsoae/accessibility

Accessibility

src/components/About/About.js

@@ -4,7 +4,7 @@ import {Link} from 'react-router-dom';
 const About = () => {
   return (
     <div className='about'>
-      <h2 className='page-header'>About</h2>
+      <h1 className='page-header'>About</h1>
       <div className='about__content'>
         <img 
           className='about__image'

src/components/App/_App.scss

@@ -30,9 +30,12 @@ main {
   }
 }
 
-h2 {
+h1 {
   @include header-font;
-  margin: 2em 0;
+}
+
+.page-header {
+  margin: 3rem;
 }
 
 p {
@@ -95,6 +98,3 @@ button:hover,
   }
 }
 
-.page-header {
-  margin: 3rem;
-}

src/components/Contact/Contact.js

@@ -4,7 +4,7 @@ import github from '../../assets/icons/github.png';
 const Contact = () => {
   return (
     <div className='contact'>
-      <h2 className='page-header'>Contact</h2>
+      <h1 className='page-header'>Contact</h1>
       <div className='contact__email-container'>
         <p>Email me at</p>
         <a href='mailto:rachelprather1@gmail.com'>

src/components/Home/Home.js

@@ -6,7 +6,7 @@ const Home = () => {
     <div className='hero'>
       <div className='hero__text-container'>
         <section className='hero__text-wrapper'>
-          <h2>Software Engineer & Web Developer</h2>
+          <h1>Software Engineer & Web Developer</h1>
           <p> Building technology that builds community. Let’s create something meaningful together.</p>
           <div className='hero__buttons-container'>
             <Link to='/contact'>

src/components/Home/_Home.scss

@@ -10,7 +10,7 @@
 .hero__text-container {
   width: 60%;
   @include true-center;
-  h2 {
+  h1 {
     margin-bottom: 3rem;
   }
   p {

src/components/Nav/Nav.js

@@ -1,4 +1,4 @@
-import {useState, useEffect} from 'react';
+import {useState} from 'react';
 import {Link} from 'react-router-dom';
 import logo from '../../assets/logo.png'
 import BurgerNav from '../BurgerNav/BurgerNav';
@@ -17,11 +17,9 @@ const Nav = ({isOpen, setIsOpen}) => {
   return (
     <nav className='top-nav' >
       <div className='top-nav__wrapper'>
-        <h1>
-          <Link to='/'>
-            <img src={logo} id='logo' alt='Rachel Soae Prather, Software Engineer' />
-          </Link>
-        </h1>
+        <Link to='/'>
+          <img src={logo} id='logo' alt='Rachel Soae Prather, Software Engineer' />
+        </Link>
         <div className='top-nav__buttons'>
           {isBurger === true ? <BurgerNav isOpen={isOpen} setIsOpen={setIsOpen} /> : <TopNav />}
         </div>

src/components/Nav/_Nav.scss

@@ -14,12 +14,8 @@
   width: 100%;
 }
 
-h1 {
-  margin: 0 0 0 2rem;
-}
-
 #logo {
-  margin: 1rem 0 0;
+  margin: 1rem 0 0 2rem;
   width: 29rem;
 }
 

src/components/Portfolio/Portfolio.js

@@ -43,7 +43,7 @@ const Portfolio = () => {
 
   return (
     <div className='portfolio'>
-      <h2 className='page-header'>Portfolio</h2>
+      <h1 className='page-header'>Portfolio</h1>
       <section className='portfolio__projects'>
         {PROJECTS.map(project => <Project key={project.id} project={project} />)}
       </section>

src/components/Project/Project.js

@@ -50,13 +50,13 @@ const Project = ({project}) => {
         className='card__back'
         onMouseLeave={() => flipCard()}
       >
-      <h3 className='card__title'>{name}</h3>
+      <h2 className='card__title'>{name}</h2>
         <p className='card__tagline'>{tagline}</p>
         <div className='tech'>
           {techs.map(tech => {
             return (
               <div key={tech} className='tech__icon-container'>
-                <img className='tech__icon' src={ICONS[tech]} alt={tech} />
+                <img className='tech__icon' src={ICONS[tech]} alt="" />
                 <p className='tech__label'>{tech}</p>   
               </div>
             )