Worked on animate.css with the history component

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "animate.css": "^3.7.0",
     "boostrap": "^2.0.0",
     "bootstrap": "^4.3.1",
     "jquery": "^3.3.1",
+    "octicons": "^8.5.0",
     "popper.js": "^1.15.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/components/shared/bio/bio.js

@@ -10,8 +10,8 @@ class Bio extends Component {
             <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 always itch to learn something new and strive to deliver my best. When I'm not 
+                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 spending time with the people that I care. 
+                creating I am either reading, writing or playing games. 
               </h2>
             </div>
           </div>

src/components/shared/header/header.js

@@ -6,6 +6,9 @@ class Header extends Component {
     return (
       <div className="container-fluid fixed-top">
         <div className="row justify-content-end nav-background-color">
+          <div className="col-1">
+            <span className="octicon-mark-github" aria-hidden="true"></span>
+          </div>
           <div className="col-1 nav-menu-item pt-2 pb-2">
             <h3>Intro</h3>
           </div>

src/components/shared/history/history.css

@@ -7,6 +7,7 @@
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
+  z-index: -1;
 }
 
 /* The actual timeline (the vertical ruler) */
@@ -19,6 +20,7 @@
   bottom: 0;
   left: 50%;
   margin-left: -3px;
+  z-index: -1;
 }
 
 /* Container around content */
@@ -40,7 +42,6 @@
   border: 4px solid #2780E3;
   top: 15px;
   border-radius: 50%;
-  z-index: 1;
 }
 
 /* Place the container to the left */

src/components/shared/history/history.js

@@ -2,17 +2,81 @@ import React, {Component} from 'react';
 import './history.css';
 
 class History extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      wasTimelineConatinerInView: [false, false, false, false]
+    };
+
+    this.timelineContainerRefs = [
+      React.createRef(), // ONE
+      React.createRef(), // TWO
+      React.createRef(), // THREE
+      React.createRef()  // FOUR
+    ];
+  }
+
+  timelineContainerRefs = [];
+
+  isElementInView = (elementRef, offset = 0) => {
+    if (!elementRef) {
+      return false;
+    }
+    const top = elementRef.getBoundingClientRect().top;
+    return (top + offset) >= 0 && (top - offset) <= window.innerHeight;
+  }
+
+  checkTimelimeContainersInView = () => {
+    let wasTimelineConatinerInView = this.state.wasTimelineConatinerInView;
+
+    for (var i = 0; i < this.timelineContainerRefs.length; i++) {
+      let timelineContainer = this.timelineContainerRefs[i];
+      if (this.isElementInView(timelineContainer)) {
+        wasTimelineConatinerInView[i] = true;
+      }
+    }
+
+    if (wasTimelineConatinerInView.every(x => x)) {
+      window.removeEventListener('scroll', this.checkTimelimeContainersInView);
+    }
+
+    this.setState({
+      wasTimelineConatinerInView: wasTimelineConatinerInView
+    });
+  }
+
+  getTimelineContainerClasses = (i) => { 
+    let defaultClasses = "timeline-container timeline-left";
+
+    if (this.state.wasTimelineConatinerInView[i]) {
+      return defaultClasses + " animated slideInLeft faster";
+    }
+    return defaultClasses;
+  }
+
   render() {
     return (
-      <div className="container-fluid p-5"> {/* Check p-5 */}
+      <div className="container-fluid p-5">
         <div className="timeline">
-          <div className="timeline-container timeline-left">
+          <div className={this.getTimelineContainerClasses(0)} ref={(el) => this.timelineContainerRefs[0] = el}>
             <div className="timeline-content">
               <h2>2017</h2>
               <p>Lorem ipsum..</p>
             </div>
           </div>
-          <div className="timeline-container timeline-right">
+          <div className="timeline-container timeline-right" ref={(el) => this.timelineContainerRefs[1] = el}>
+            <div className="timeline-content">
+              <h2>2016</h2>
+              <p>Lorem ipsum..</p>
+            </div>
+          </div>
+          <div className="timeline-container timeline-left" ref={(el) => this.timelineContainerRefs[2] = el}>
+            <div className="timeline-content">
+              <h2>2016</h2>
+              <p>Lorem ipsum..</p>
+            </div>
+          </div>
+          <div className="timeline-container timeline-right" ref={(el) => this.timelineContainerRefs[3] = el}>
             <div className="timeline-content">
               <h2>2016</h2>
               <p>Lorem ipsum..</p>
@@ -22,6 +86,10 @@ class History extends Component {
       </div>
     );
   }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.checkTimelimeContainersInView);
+  }
 }
 
 export default History;

src/components/shared/skills/skills.js

@@ -50,34 +50,36 @@ class Skills extends Component {
       <div className="container">
         <div className="row p-5">
           <div className="col">
-            <h2><strong>Skills and Abilities</strong></h2>
+            <div className="border-top border-bottom ml-2 mr-2 pb-5 pt-5">
-            <div className="mt-5 mb-4">
+              <h2><strong>Skills and Abilities</strong></h2>
-              <h4 className="text-left">C#/.NET</h4>
+              <div className="mt-5 mb-4">
-              <div className="progress progress-bar-height">
+                <h4 className="text-left">C#/.NET</h4>
-                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[0] = el}
+                <div className="progress progress-bar-height">
-                     role="progressbar" style={{width: this.state.wasProgressBarInView[0] ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                  <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[0] = el}
+                      role="progressbar" style={{width: this.state.wasProgressBarInView[0] ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                  </div>
                 </div>
               </div>
-            </div>
+              <div className="mt-5 mb-4">
-            <div className="mt-5 mb-4">
+                <h4 className="text-left">Javascript</h4>
-              <h4 className="text-left">Javascript</h4>
+                <div className="progress progress-bar-height">
-              <div className="progress progress-bar-height">
+                  <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[1] = el}
-                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[1] = el}
+                      role="progressbar" style={{width: this.state.wasProgressBarInView[1] ? 75+'%' : 0}} 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>
+              <div className="mt-5 mb-4">
-            <div className="mt-5 mb-4">
+                <h4 className="text-left">Software Design</h4>
-              <h4 className="text-left">Software Design</h4>
+                <div className="progress progress-bar-height">
-              <div className="progress progress-bar-height">
+                  <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[2] = el}
-                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[2] = el}
+                      role="progressbar"style={{width: this.state.wasProgressBarInView[2] ? 70+'%' : 0}} 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>
+              <div className="mt-5 mb-4">
-            <div className="mt-5 mb-4">
+                <h4 className="text-left">MSSQL</h4>
-              <h4 className="text-left">MSSQL</h4>
+                <div className="progress progress-bar-height">
-              <div className="progress progress-bar-height">
+                  <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[3] = el}
-                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[3] = el}
+                      role="progressbar" style={{width: this.state.wasProgressBarInView[3] ? 62+'%' : 0}} 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>
           </div>

src/index.js

@@ -5,6 +5,8 @@ import $ from 'jquery';
 // eslint-disable-next-line
 import Popper from 'popper.js'; 
 import 'bootstrap/dist/js/bootstrap.bundle.min';
+import 'animate.css/animate.min.css'
+import 'octicons/build/build.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';