feat(layout): refactored for styled components

src/Components/Hero/heroImage.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {HeroCircleImage, HeroContainer, HeroPositioning} from '../../Layout/Hero/styledHero';
+
+const HeroImage = () => {
+  return (
+    <>
+      <HeroContainer About>
+        <HeroPositioning >
+          <HeroCircleImage />
+        </HeroPositioning>
+        </HeroContainer>
+    </>
+  )
+}
+
+export default HeroImage;

src/Components/SocialMediaTags/SocialMediaTags.css

@@ -1,31 +1,28 @@
 .social_footer_ul {
-  display: table;
-  margin: 15px auto 0 auto;
-  list-style-type: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-left: 25%;
+  margin-right: 25%;
 }
 
 .social_footer_ul li {
-  padding-left: 20px;
-  padding-top: 10px;
+  padding-left: 1.5rem;
+  padding-top: 3rem;
   float: left;
-  font-size: 1em;
   margin: 0 auto;
 }
 
 .social_footer_ul li a {
+  font-size: 1.5rem;
   color: #ccc;
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 50%;
   margin: 0 auto;
 }
 
-.social_footer_ul li i {
-  width: 24px;
-  height: 24px;
-  text-align: center;
-}
-
 @media only screen and (min-width: 768px) {
   .social_footer_ul li i {
     width: 16px;

src/Pages/About/About.jsx

@@ -1,47 +1,47 @@
-//Tap into your 
-//professional story and your value proposition, and highlight 
-//what you do, why you do it, and how you do it. 
-//You can communicate how you became motivated to start a career 
-//in your desired industry, what drives you currently, 
+//Tap into your
+//professional story and your value proposition, and highlight
+//what you do, why you do it, and how you do it.
+//You can communicate how you became motivated to start a career
+//in your desired industry, what drives you currently,
 //the problems that you solve, and your current industry-related
-//passions. There is no need to include extensive details or your 
-//whole life story in the “About Me” section. Stick to the what, 
-//why, and how of your professional story, and any personal 
+//passions. There is no need to include extensive details or your
+//whole life story in the “About Me” section. Stick to the what,
+//why, and how of your professional story, and any personal
 //information that impacted or informed your professional story.
-//You can include some additional, brief details about your 
-//personal life in the “About Me” section, after you’ve detailed 
-//your professional story. You can include information about your 
-//interests, hobbies, pets, kids, partner, and geographic location. 
-//Including this information can help your audience connect with 
-//the person behind the work. It is important, however, to keep 
-//the personal details brief and not too personal. Remember that 
+//You can include some additional, brief details about your
+//personal life in the “About Me” section, after you’ve detailed
+//your professional story. You can include information about your
+//interests, hobbies, pets, kids, partner, and geographic location.
+//Including this information can help your audience connect with
+//the person behind the work. It is important, however, to keep
+//the personal details brief and not too personal. Remember that
 //we want to cast the widest net when job searching.
-//If you have another passion, particularly if that passion 
-//compliments the work that you will be doing in your desired 
-//industry, it’s also acceptable to include this information in 
-//your “About Me” section. For example, if you’re a UX designer, 
-//who also has a passion and talent for graphic design, you can 
-//include information about your graphic design skills, and 
-//include a link to your graphic design website. If you do 
-//include information about a secondary passion, be sure that your 
-//messaging around this interest is brief and doesn’t distract 
+//If you have another passion, particularly if that passion
+//compliments the work that you will be doing in your desired
+//industry, it’s also acceptable to include this information in
+//your “About Me” section. For example, if you’re a UX designer,
+//who also has a passion and talent for graphic design, you can
+//include information about your graphic design skills, and
+//include a link to your graphic design website. If you do
+//include information about a secondary passion, be sure that your
+//messaging around this interest is brief and doesn’t distract
 //from your primary messaging around your career interest.
 
 
 import React from 'react';
 import './About.css';
 import NavBar from '../../Components/NavBar/NavBar';
+import HeroImage from '../../Components/Hero/heroImage';
 import Footer from '../../Components/Footer/Footer';
+import { StyledHr } from '../../Layout/Hr/styledHr';
 
 
 const About = () => {
     return (
         <div>
             <NavBar />
-            <div className='about-background'>
-                <img className='about-img' src="https://i.imgur.com/dj1vhqzm.png?1" alt="Hosea" />
-            </div>
-            <hr className="header-hr "/>
+            <HeroImage About/>
+            <StyledHr Primary/>
             <div className="quote">
                 <q>
                     What you think, you become. What you feel, you attract. What you imagine, you create.
@@ -51,7 +51,7 @@ const About = () => {
             {/* <!-- Quote/Highlight End  --> */}
 
             {/* <!-- Timeline  -->  */}
-            <hr className="header-hr "/>
+            <StyledHr Primary/>
             <div className="timeline">
                 <div id="timeline" className="about-container right">
                     <div className="content">
@@ -85,10 +85,10 @@ const About = () => {
                 </div>
             </div>
             {/* <!-- Timeline End  --> */}
-            <hr className="header-hr "/>
+            <StyledHr Primary/>
             <Footer/>
         </div>
     )
 }
 
-export default About;
+export default About;

src/Pages/Articles/Articles.jsx

@@ -11,6 +11,7 @@ import Loading from '../../Loading';
 import axios from 'axios';
 import Footer from '../../Components/Footer/Footer';
 import Pagination from '../../Components/Pagination/pagination';
+import { StyledHr } from '../../Layout/Hr/styledHr';
 
 const Articles = () => {
 
@@ -117,7 +118,7 @@ const Articles = () => {
                     <div className='artcile-header-logo'>
                     </div>
                 </div>
-                <hr className="header-hr "/>
+                <StyledHr Primary/>
                 <div id="articles">
                     <h3 className='articles-header'>Thoughts of a Wise Mind<hr /></h3>
                     <p style={{ fontSize: '1.5rem', color: 'lightgray' }}>Here are some of my articles you may like.</p>
@@ -201,7 +202,7 @@ const Articles = () => {
                     </div>
                 </div>
             </div>
-            <hr className="header-hr "/>
+            <StyledHr Primary/>
             <Footer/>
         </>
     )

src/Pages/Contact/Contact.jsx

@@ -1,20 +1,22 @@
-//Make it easy for your audience to 
-//contact you. You can create a separate 
-//“Contact” section, a “Contact” 
-//call-to-action button, or both. One 
-//best practice is to include multiple, 
-//easily accessible ways for your audience 
-//to contact you, as they navigate their 
-//way through your website. Include a 
-//contact form, your email address, or 
-//both in this section. It’s not necessary 
-//to include your phone number or address 
+//Make it easy for your audience to
+//contact you. You can create a separate
+//“Contact” section, a “Contact”
+//call-to-action button, or both. One
+//best practice is to include multiple,
+//easily accessible ways for your audience
+//to contact you, as they navigate their
+//way through your website. Include a
+//contact form, your email address, or
+//both in this section. It’s not necessary
+//to include your phone number or address
 //in your website’s contact information.
 
 import React from 'react';
 import './Contact.css'
 import NavBar from '../../Components/NavBar/NavBar';
 import ContactForm from '../../Components/Form/ContactForm'
+import { StyledHr } from '../../Layout/Hr/styledHr';
+import Footer from '../../Components/Footer/Footer';
 
 const Contact = () => {
     return (
@@ -27,9 +29,11 @@ const Contact = () => {
                     </h1>
                 </div>
             </div>
-            <hr className="header-hr "/>
+            <StyledHr Primary/>
             <h2 className='contacth2'>Contact Me</h2>
             <ContactForm />
+            <StyledHr Primary/>
+            <Footer/>
         </div >
     )
 

src/Pages/Projects/Project/Project.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import NavBar from '../../../Components/NavBar/NavBar';
+import {StyledHr} from '../../../Layout/Hr/styledHr';
 import Footer from '../../../Components/Footer/Footer';
 import {projectData} from '../ProjectsData'
 import  './Project.css';
@@ -69,6 +70,7 @@ const ProjectItem = () => {
                         </div>
                     </div>
                 </div>
+                <StyledHr Primary/>
                 <hr className="header-hr"/>
                 <main className="single-work">
                     <section className="single-work-intro-section">
@@ -172,7 +174,7 @@ const ProjectItem = () => {
                                     return (
                                         <>
                                         <div key={i} className="section-title">
-                                            <h5 style={{paddingLeft: '30px'}}>{typeface}</h5>
+                                            <h5 style={{paddingLeft: '30px', fontSize: '3rem'}}>{typeface}</h5>
                                             <img  style={{objectFit: 'contain', padding: '30px'}} src={typography[typeface]} alt="" srcset="" />
                                         </div>
                                         </>
@@ -291,7 +293,7 @@ const ProjectItem = () => {
                     {/* { projectData.length >= 1 ? nextProjectLink : null} */}
                 </main>
             </div>
-            <hr className="header-hr"/>
+            <StyledHr Primary/>
             <Footer/>
         </>
     )

src/Pages/Projects/Projects.jsx

@@ -83,6 +83,7 @@ import NavBar from '../../Components/NavBar/NavBar';
 import {projectData} from './ProjectsData';
 import ProjectCard from '../../Components/Cards/projectCard';
 import Footer from '../../Components/Footer/Footer';
+import { StyledHr } from '../../Layout/Hr/styledHr';
 
 const Projects = () => {
 
@@ -93,13 +94,13 @@ const Projects = () => {
                 <div className='header-logo'>
                 </div>
             </div>
-            <hr className="header-hr"/>
+            <StyledHr Primary/>
             {projectData.map(project => {
                                 return (<>
                                     <ProjectCard project={project}
                                         key={project.id}
                                     />
-                                    <hr className="header-hr"/>
+                                    <StyledHr Primary/>
                                 </>
                                 )
                             })}