Fixed footer with social icons and made it responsive + misc

src/components/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Home from './pages/home'
+import Home from './home/home'
 import './App.css';
 
 class App extends Component {

src/components/footer/footer.css

@@ -0,0 +1,3 @@
+.footer-background-color {
+  background-color: #eff1f4;
+}

src/components/footer/footer.js

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import './footer.css';
+import GithubIcon from '../../images/github-logo.svg';
+import LinkedInIcon from '../../images/linkedin-logo.svg';
+import TwitterIcon from '../../images/twitter-logo.svg';
+
+class Footer extends Component {
+  render() {
+    return (
+      <div className="container-fluid footer-background-color">
+        <div className="row justify-content-center">
+          <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" />
+            </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" />
+            </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" />
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Footer;

src/components/history/history.js

@@ -101,7 +101,7 @@ class History extends Component {
         <div className="timeline">
           {this.timelineContainers.map((timelineContainer, i) => {
             return (
-              <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
+              <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el} key={i}>
                 <div className="timeline-content">
                   <h1>{timelineContainer.heading}</h1>
                   <h5>{timelineContainer.content}</h5>

src/components/home/home.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import Navigation from '../navigation/navigation';
+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'
+
+class Home extends Component {
+  render() {
+    return (
+      <div>
+        <Navigation/>
+        <Introduction/>
+        <Bio/>
+        <History/>
+        <Skills/>
+        <Footer/>
+      </div>
+    );
+  }
+}
+
+export default Home;

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/profilePicture.jpg';
 import "./introduction.css";
 
 const lineOneText = 'Hi, my name is Giovani.';

src/components/navigation/navigation.js

@@ -40,7 +40,7 @@ class NavigationBar extends Component {
           <div className="row justify-content-end nav-background-color">
             {this.navigationOptions.map((navigationOption, i) => {
               return ( 
-                <a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href}>
+                <a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href} key={i}>
                   <div className="text-center pt-2 pb-2">
                     <h3>{navigationOption.content}</h3>
                   </div>
@@ -54,7 +54,7 @@ class NavigationBar extends Component {
             <div className="m-3">
               {this.navigationOptions.map((navigationOption, i) => {
                 return ( 
-                  <div className="p-2" data-toggle="collapse" data-target="#navbarToggleExternalContent">
+                  <div className="p-2" data-toggle="collapse" data-target="#navbarToggleExternalContent" key={i}>
                     <a className="remove-link-styling" href={navigationOption.href} >
                       <h4>{navigationOption.content}</h4>
                     </a>

src/components/pages/home.js

@@ -1,24 +0,0 @@
-import React, {Component} from 'react';
-import Navigation from '../shared/navigation/navigation';
-import Footer from "../shared/footer/footer";
-import Introduction from '../shared/introduction/introduction'; 
-import Bio from '../shared/bio/bio';
-import History from '../shared/history/history';
-import Skills from '../shared/skills/skills'
-
-class Home extends Component {
-  render() {
-    return (
-      <div>
-        <Navigation/>
-        <Introduction/>
-        <Bio/>
-        <History/>
-        <Skills/>
-        <Footer/>
-      </div>
-    );
-  }
-}
-
-export default Home;

src/components/shared/footer/footer.js

@@ -1,23 +0,0 @@
-import React, {Component} from 'react';
-
-class Footer extends Component {
-  render() {
-    return (
-      <div className="container-fluid mt-5">
-        <div className="row">
-          <div className="col">
-            One
-          </div>
-          <div className="col">
-            Two
-          </div>
-          <div className="col">
-            Three
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Footer;

src/components/skills/skills.js

@@ -77,7 +77,7 @@ class Skills extends Component {
               <h2><strong>Skills and Abilities</strong></h2>
                 {this.progressBars.map((progressBar, i) => {
                   return (
-                    <div className="mt-5 mb-4">
+                    <div className="mt-5 mb-4" key={i}>
                       <h4 className="text-left">{progressBar.heading}</h4>
                       <div className="progress progress-bar-height">
                         <div className="progress-bar progress-bar-ani"