Finished the animation on the skills and started on history/timeline

src/components/pages/home.js

@@ -3,6 +3,7 @@ import Header from '../shared/header/header';
 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 {
@@ -12,6 +13,7 @@ class Home extends Component {
         <Header/>
         <Introduction/>
         <Bio/>
+        <History/>
         <Skills/>
         <Footer/>
       </div>

src/components/shared/bio/bio.css

@@ -0,0 +1,7 @@
+.row-height-25 {
+  height: 25rem;
+}
+
+.row-background-color {
+  background-color: #eff1f4;
+}

src/components/shared/bio/bio.js

@@ -1,17 +1,18 @@
 import React, {Component} from 'react';
+import './bio.css';
 
 class Bio extends Component {
   render() {
     return (
       <div className="container-fluid">
-        <div className="row p-5">
-          <div className="col">
-            <div className="mx-auto text-center w-75">
-              <h3>
+        <div className="row row-height-25 p-5">
+          <div className="col"> 
+            <div className="mx-auto text-center border-top border-bottom d-flex h-100 w-75">
+              <h2 className="align-self-center">
                 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 problem solver, solution maker upper and answer deilverer. I'm always itching to learn something new and striving to deliver my best. When I'm not 
+                I am 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 spending time with the people that I care. 
-              </h3>
+              </h2>
             </div>
           </div>
         </div>

src/components/shared/header/header.js

@@ -13,7 +13,7 @@ class Header extends Component {
             <h3>Bio</h3>
           </div>
           <div className="col-1 nav-menu-item pt-2 pb-2">
-            <h3>Portfolio</h3>
+            <h3>History</h3>
           </div>
           <div className="col-1 nav-menu-item pt-2 pb-2">
             <h3>Skills</h3>

src/components/shared/history/history.css

@@ -0,0 +1,128 @@
+* {
+  box-sizing: border-box !important;
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline {
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  background-color: #eff1f4;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  margin-left: -3px;
+}
+
+/* Container around content */
+.timeline-container {
+  padding: 10px 40px;
+  position: relative;
+  background-color: inherit;
+  width: 50%;
+}
+
+/* The circles on the timeline */
+.timeline-container::after {
+  content: '';
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  right: -13px;
+  background-color: white;
+  border: 4px solid #2780E3;
+  top: 15px;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+/* Place the container to the left */
+.timeline-left {
+  left: 0;
+}
+
+/* Place the container to the right */
+.timeline-right {
+  left: 50%;
+}
+
+/* Add arrows to the left container (pointing right) */
+.timeline-left::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 22px;
+  width: 0;
+  z-index: 1;
+  right: 30px;
+  border: medium solid #eff1f4;
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent #eff1f4;
+}
+
+/* Add arrows to the right container (pointing left) */
+.timeline-right::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 22px;
+  width: 0;
+  z-index: 1;
+  left: 30px;
+  border: medium solid #eff1f4;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent #eff1f4 transparent transparent;
+}
+
+/* Fix the circle for containers on the right side */
+.timeline-right::after {
+  left: -13px;
+}
+
+/* The actual content */
+.timeline-content {
+  padding: 20px 30px;
+  background-color: #eff1f4;
+  position: relative;
+  border-radius: none;
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+/* Place the timelime to the left */
+  .timeline::after {
+    left: 31px;
+  }
+
+/* Full-width containers */
+  .timeline-container {
+    width: 100%;
+    padding-left: 70px;
+    padding-right: 25px;
+  }
+
+/* Make sure that all arrows are pointing leftwards */
+  .timeline-container::before {
+    left: 60px;
+    border: medium solid #eff1f4;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent #eff1f4 transparent transparent;
+  }
+
+/* Make sure all circles are at the same spot */
+  .timeline-left::after, .timeline-right::after {
+    left: 18px;
+  }
+
+/* Make all right containers behave like the left ones */
+  .timeline-right {
+    left: 0%;
+  }
+}

src/components/shared/history/history.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import './history.css';
+
+class History extends Component {
+  render() {
+    return (
+      <div className="container-fluid p-5"> {/* Check p-5 */}
+        <div className="timeline">
+          <div className="timeline-container timeline-left">
+            <div className="timeline-content">
+              <h2>2017</h2>
+              <p>Lorem ipsum..</p>
+            </div>
+          </div>
+          <div className="timeline-container timeline-right">
+            <div className="timeline-content">
+              <h2>2016</h2>
+              <p>Lorem ipsum..</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default History;

src/components/shared/introduction/introduction.css

@@ -1,13 +1,3 @@
-#introduction {
-
-}
-
-.intro-background {
-  background-image: url("../../../images/home/introductionBackground2.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
 .align-text-top { 
   line-height: 100%;
 }

src/components/shared/introduction/introduction.js

@@ -89,7 +89,7 @@ class Introduction extends Component {
 
   render() { 
     return (
-      <div className="container-fluid mt-5" id="introduction">
+      <div className="container-fluid mt-5">
         <div className="row align-items-center pt-5 pb-5">
           <div className="col">
             <div className="text-center">

src/components/shared/portfolio/portfolio.js

@@ -1,15 +0,0 @@
-import React, {Component} from 'react';
-
-class Portfolio extends Component {
-  render() {
-    return (
-      <div className="container-fluid">
-        <div className="row pl-5 pr-5">
-          
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Portfolio;

src/components/shared/skills/skills.js

@@ -5,7 +5,7 @@ class Skills extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isProgressBarOneInView: false
+      wasProgressBarInView: [false, false, false, false]
     };
 
     this.progressBarRefs = [
@@ -19,35 +19,43 @@ class Skills extends Component {
   progressBarRefs = [];
 
   isElementInView = (elementRef, offset = 0) => {
-    if (!elementRef) return false;
+    if (!elementRef) {
+      return false;
+    }
     const top = elementRef.getBoundingClientRect().top;
     return (top + offset) >= 0 && (top - offset) <= window.innerHeight;
   }
 
   checkProgressBarsInView = () => {
+    let wasProgressBarInView = this.state.wasProgressBarInView;
+
     for (var i = 0; i < this.progressBarRefs.length; i++) {
       let progressBarRef = this.progressBarRefs[i];
       if (this.isElementInView(progressBarRef)) {
-        this.setState({
-          isProgressBarOneInView: true /* In Progress */
-        });
+        wasProgressBarInView[i] = true;
       }
     }
+
+    if (wasProgressBarInView.every(x => x)) {
+      window.removeEventListener('scroll', this.checkProgressBarsInView);
+    }
+
+    this.setState({
+      wasProgressBarInView: wasProgressBarInView
+    });
   }
 
   render() {
-    let isProgressBarOneInView = this.state.isProgressBarOneInView;
-
     return (
       <div className="container">
-        <div className="row pl-5 pr-5">
+        <div className="row p-5">
           <div className="col">
             <h2><strong>Skills and Abilities</strong></h2>
             <div className="mt-5 mb-4">
               <h4 className="text-left">C#/.NET</h4>
               <div className="progress progress-bar-height">
                 <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[0] = el}
-                     role="progressbar" style={{width: isProgressBarOneInView ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                     role="progressbar" style={{width: this.state.wasProgressBarInView[0] ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                 </div>
               </div>
             </div>
@@ -55,21 +63,21 @@ class Skills extends Component {
               <h4 className="text-left">Javascript</h4>
               <div className="progress progress-bar-height">
                 <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[1] = el}
-                     role="progressbar" style={{width: 75+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                     role="progressbar" style={{width: this.state.wasProgressBarInView[1] ? 75+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             </div>
             <div className="mt-5 mb-4">
               <h4 className="text-left">Software Design</h4>
               <div className="progress progress-bar-height">
                 <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[2] = el}
-                     role="progressbar" style={{width: 70+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                     role="progressbar"style={{width: this.state.wasProgressBarInView[2] ? 70+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             </div>
             <div className="mt-5 mb-4">
               <h4 className="text-left">MSSQL</h4>
               <div className="progress progress-bar-height">
                 <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[3] = el}
-                     role="progressbar" style={{width: 62+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                     role="progressbar" style={{width: this.state.wasProgressBarInView[3] ? 62+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             </div>
           </div>