Finished contact section, website is officially version 1

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "Giovani Rodriguez",
-  "name": "Create React App Sample",
+  "name": "",
   "icons": [
     {
       "src": "favicon.ico",

src/components/App.css

@@ -3,11 +3,23 @@ html {
   scroll-behavior: smooth; 
 }
 
+.content-width {
+  width: 75%;
+}
+
 .section-height {
   height: 5rem;
 }
 
-@media (max-width: 575.98px) { 
+@media (max-width: 575.98px) {  /* sm */
+  .content-width {
+    width: 90%;
+  }
+
+  .content-text-size {
+    font-size: 1.6rem;
+  }
+
   .section-height {
     height: 3rem;
   }

src/components/bio/bio.css

@@ -1,14 +0,0 @@
-
-.content-width {
-  width: 75%;
-}
-
-@media (max-width: 575.98px) {  /* sm */
-  .content-width {
-    width: 85%;
-  }
-
-  .content-type-size {
-    font-size: 1.6rem;
-  }
-}

src/components/bio/bio.js

@@ -9,7 +9,7 @@ class Bio extends Component {
         <div className="row">
           <div className="col"> 
             <div className="mx-auto text-center border-top border-bottom pl-1 pl-lg-5 pr-1 pr-lg-5 pt-5 pb-5 d-flex h-100 content-width">
-              <h2 className="content-type-size">
+              <h2 className="content-text-size">
                 My name is <strong>Giovani Rodriguez</strong> and I create tools, applications and websites as solutions for individuals or businesses that need them. 
                 I am a problem solver, solution maker upper and answer deilverer. I always itch to learn something new and strive to deliver my best. When I'm not 
                 creating I am either reading, writing or playing games. 

src/components/contact/contact.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import './contact.css';
+
+class Contact extends Component {
+  render() {
+    return (
+      <div className="container-fluid" id="contact">
+      <div className="section-height"></div>
+        <div className="row mb-3">
+          <div className="col"> 
+            <div className="text-center">
+              <h1 className="w-100">
+                Intresting in working with me?
+              </h1>
+              <h2 className="mx-auto content-text-size content-width mt-4">
+                You can get a hold of me by texting me at <strong>(305) 570 1332</strong> or you can just email me at <strong>grodriguez@gtek.dev</strong>.
+                You can also see what I am up to by clicking the social media icons below.
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Contact;

src/components/footer/footer.js

@@ -7,21 +7,22 @@ import TwitterIcon from '../../images/twitter-logo.svg';
 class Footer extends Component {
   render() {
     return (
-      <div className="container-fluid footer-background-color">
+      <div className="container-fluid">
-        <div className="row justify-content-center">
+      <div className="section-height"></div>
+        <div className="row justify-content-center footer-background-color">
           <div className="col-3 p-3 text-center">
             <a href="https://github.com/gio101046" className="d-block" target="_blank" rel="noopener noreferrer">
-              <img alt="Github Icon" src={GithubIcon} width="64" height="64" />
+              <img alt="Github Icon" src={GithubIcon} width="32" height="32" />
             </a>
           </div>
           <div className="col-3 p-3 text-center">
             <a href="https://www.linkedin.com/in/giovaniluisrodriguez/" className="d-block" target="_blank" rel="noopener noreferrer">
-              <img alt="LinkedIn Icon" src={LinkedInIcon} width="64" height="64" />
+              <img alt="LinkedIn Icon" src={LinkedInIcon} width="32" height="32" />
             </a>
           </div>
           <div className="col-3 p-3 text-center">
             <a href="https://twitter.com/gcode0727" className="d-block" target="_blank" rel="noopener noreferrer">
-              <img alt="Twitter Icon" src={TwitterIcon} width="64" height="64" />
+              <img alt="Twitter Icon" src={TwitterIcon} width="32" height="32" />
             </a>
           </div>
         </div>

src/components/home/home.js

@@ -4,7 +4,9 @@ import Footer from "../footer/footer";
 import Introduction from '../introduction/introduction'; 
 import Bio from '../bio/bio';
 import History from '../history/history';
-import Skills from '../skills/skills'
+import Skills from '../skills/skills';
+import Contact from '../contact/contact';
+import './home.css';
 
 class Home extends Component {
   render() {
@@ -15,6 +17,7 @@ class Home extends Component {
         <Bio/>
         <History/>
         <Skills/>
+        <Contact/>
         <Footer/>
       </div>
     );

src/components/introduction/introduction.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import ProfilePicture from '../../images/home/profilePicture.jpg';
+import ProfilePicture from '../../images/home/profilePictureTwo.jpg';
 import "./introduction.css";
 
 const lineOneText = 'Hi, my name is Giovani.';

src/components/skills/skills.js

@@ -71,15 +71,17 @@ class Skills extends Component {
   render() {
     return (
       <div className="container" id="skills">
-        <div className="row pt-5 pb-5">
+        <div className="section-height"></div>
+        <div className="row">
           <div className="col">
             <div className="border-top border-bottom ml-2 mr-2 pb-5 pt-5">
               <h2><strong>Skills and Abilities</strong></h2>
                 {this.progressBars.map((progressBar, i) => {
                   return (
                     <div className="mt-5 mb-4" key={i}>
-                      <h4 className="text-left">{progressBar.heading}</h4>
+                      <h4 className="float-left d-inline-block">{progressBar.heading}</h4>
-                      <div className="progress progress-bar-height">
+                      <h4 className="float-right d-inline-block">{progressBar.percentageWidth+'%'}</h4>
+                      <div className="progress progress-bar-height w-100">
                         <div className="progress-bar progress-bar-ani" 
                              ref={(el) => progressBar.ref = el}
                              role="progressbar"