fix(home): added repsonsiveness

src/Components/Footer/Footer.css

@@ -108,3 +108,7 @@ footer p {
     margin: 0%;
   }
 }
+
+.twitter-footer {
+  overflow: hidden;
+}

src/Components/Footer/Footer.jsx

@@ -11,7 +11,7 @@ const Footer = () => {
         <footer className="footer">
             <div className="container bottom_border">
                 <div className="row">
-                    <div className=" col-sm-4 col-md col-sm-4  col-12 col">
+                    <div className=" col-sm-4 col-md col-12 col">
                         <h5 className="footer_h5 col_white_amrc pt2">Find Me</h5>
                         <p className="mb10">HoseaCodes’ mission statement is to build the future while empowering every person and every organization on the planet to achieve more. </p>
                         <p><i className="fa fa-location-arrow"></i> Houston, TX </p>
@@ -39,7 +39,7 @@ const Footer = () => {
                             <li><a href="http://webenlance.com">Image Cropping</a></li>
                         </ul>
                     </div>
-                    <div className=" col-sm-4 col-md  col-12 col">
+                    <div className=" col-sm-4 col-md col-12 col twitter-footer">
                         <h5 className="footer_h5 col_white_amrc pt2">Follow Me On</h5>
                         {/* Twitter Profile Tweets */}
                         <ul className="footer_ul2_amrc">
@@ -50,7 +50,7 @@ const Footer = () => {
                     </div>
                 </div>
             </div>
-            <div className="container">
+            <div className="container col-md ">
                 <ul className="foote_bottom_ul_amrc">
                     <li><a href="/">Home</a></li>
                     <li><a href="/about">About</a></li>

src/Components/NavBar/NavBar.jsx

@@ -14,7 +14,7 @@ const NavBar = () => {
   const [user] = state.userAPI.user
   const [isActive, toggle] = useReducer(
       (isActive) => !isActive,
-      false
+      true
       );
 
     return (

src/Components/PersonalBrand/PersonalBrand.css

@@ -145,6 +145,11 @@
   color: #fff;
 }
 
+.personal-btn-wrapper {
+  display: flex;
+  justify-content: space-around;
+}
+
 @keyframes peronal-btn {
   0% {
     left: 250%;
@@ -185,9 +190,10 @@
     height: 50vh;
     margin: auto;
   }
-  .personal-card-info {
+  .personal-btn-wrapper {
     display: none;
   }
+
   .bio-info {
     margin-top: 3rem;
   }

src/Components/PersonalBrand/PersonalBrandOriginal.jsx

@@ -76,9 +76,9 @@ const PersonalBrand = () => {
                         that believe in growth and innovation. I have worked progressively with major
                         companies since the beginning of my career and I am excited for the opportunity
                             to continue this journey with another industry leader.</p>
-                        <div style={{ display: "flex", justifyContent: 'space-around' }}>
+                        <div className="personal-btn-wrapper" >
                           <StyledButton onClick={handleClick}>More about Dominique</StyledButton>
-                          <StyledButton onClick={handleDownload}>Download my Resume</StyledButton>
+                          <StyledButton className="download-btn" onClick={handleDownload}>Download my Resume</StyledButton>
                         </div>
                     </div>
                 </div>

src/Components/Project/projectHighlight.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ProjectCard from '../Cards/projectCard';
+import ProjectCard from '../Cards/project';
 import {projectData} from '../../Pages/Projects/ProjectsData';
 import AOS from 'aos';
 import 'aos/dist/aos.css';

src/Components/Technologies/Technologies.css

@@ -111,7 +111,7 @@
 
 @media only screen and (min-device-width: 375px) and (max-device-width: 768px) {
   .tech-title {
-    /* font-size: 1.5rem; */
+    font-size: 3rem;
   }
 }
 

src/Layout/Button/styledButton.jsx

@@ -59,10 +59,9 @@ export const StyledButtonATag = styled.a`
         transition: 0.5s color ease;
       }
       @media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
-        width: 20%;
+        width: fit-content;
         margin: auto;
         bottom: 0 !important;
-        width: 40%;
       }
   `}
 `;

src/Pages/Articles/Articles.jsx

@@ -1,5 +1,5 @@
 
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext } from 'react';
 import './Articles.css'
 import Subscribe from '../../Components/Subscribe/Subscribe'
 // import { articleData, categoryTags } from './ArticleData';

src/Pages/Articles/BtnRender.jsx

@@ -7,10 +7,8 @@ function BtnRender({ article, deleteArticle }) {
         <div className="row_btn">
             <Link id="btn_buy" to="#!" onClick={() => deleteArticle(article._id, article.images.public_id)}> Delete</Link>
             <Link id="btn_view" to={`/edit_article/${article._id}`}> Edit</Link>
-
-
         </div>
     )
 }
 
-export default BtnRender;
+export default BtnRender;