Fixed history animation and worked on navigation

src/components/App.css

@@ -1,33 +1,4 @@
-.App {
+/* SCROLL BEHAVIOR NOT COMPATIBLE WITH IE */
-  text-align: center;
+html {
-}
+  scroll-behavior: smooth; 
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

src/components/pages/home.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import Header from '../shared/header/header';
+import Navigation from '../shared/header/navigation';
 import Footer from "../shared/footer/footer";
 import Introduction from '../shared/introduction/introduction';
 import Bio from '../shared/bio/bio';
@@ -10,7 +10,7 @@ class Home extends Component {
   render() {
     return (
       <div>
-        <Header/>
+        <Navigation/>
         <Introduction/>
         <Bio/>
         <History/>

src/components/shared/bio/bio.js

@@ -4,7 +4,7 @@ import './bio.css';
 class Bio extends Component {
   render() {
     return (
-      <div className="container-fluid">
+      <div className="container-fluid" id="bio">
         <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">

src/components/shared/header/header.js

@@ -1,33 +0,0 @@
-import React, {Component} from 'react';
-import './header.css';
-
-class Header extends Component {
-  render() {
-    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>
-          <div className="col-1 nav-menu-item pt-2 pb-2">
-            <h3>Bio</h3>
-          </div>
-          <div className="col-1 nav-menu-item pt-2 pb-2">
-            <h3>History</h3>
-          </div>
-          <div className="col-1 nav-menu-item pt-2 pb-2">
-            <h3>Skills</h3>
-          </div>
-          <div className="col-1 nav-menu-item pt-2 pb-2">
-            <h3>Contact</h3>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Header;

src/components/shared/header/navigation.css

@@ -4,4 +4,9 @@
 
 .nav-menu-item:hover {
   background-color: #d8d8da;
+}
+
+.remove-link-styling {
+  color: inherit !important;
+  text-decoration: inherit !important;
 }

src/components/shared/header/navigation.js

@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import './navigation.css';
+
+class NavigationBar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+
+    };
+
+    this.navigationOptions = [
+      {
+        content: 'Intro',
+        href: '#intro'
+      },
+      {
+        content: 'Bio',
+        href: '#bio'
+      },
+      {
+        content: 'History',
+        href: '#history'
+      },
+      {
+        content: 'Skills',
+        href: '#skills'
+      },
+      {
+        content: 'Contact',
+        href: '#contact'
+      }
+    ];
+  }
+
+  navigationOptions = [];
+
+  render() {
+    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>
+          {this.navigationOptions.map((navigationOption, i) => {
+            return (
+              <a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href}>
+                <div className="text-center pt-2 pb-2">
+                  <h3>{navigationOption.content}</h3>
+                </div>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default NavigationBar;

src/components/shared/history/history.css

@@ -1,3 +1,7 @@
+.row-height-5 {
+  height: 5rem;
+}
+
 * {
   box-sizing: border-box !important;
 }

src/components/shared/history/history.js

@@ -20,7 +20,7 @@ class History extends Component {
         ref: React.createRef(),
         heading: 'EnTec - 2015',
         content: `I graduated from MDC and was offered a position as a teaching assistant at MDC's school of engineering
-                  technology. My goal was to inpire students and help them excel in the area of information technology.`,
+                  technology. My goal was to inpire students and help them excel in the area of IT.`,
         position: 'right'
       },
       {
@@ -73,34 +73,38 @@ class History extends Component {
 
   getTimelineContainerClasses = (timelineContainer, i) => { 
     let defaultClasses = 'timeline-container';
+    let isLeft = timelineContainer.position === 'left';
 
-    if (timelineContainer.position === 'left') {
+    if (isLeft) {
       defaultClasses += ' timeline-left';
     } else {
       defaultClasses += ' timeline-right';
     }
 
     if (this.state.wasTimelineConatinerInView[i]) {
-      return defaultClasses + ' slideInRight animated faster'; /* TODO: fix slideInLeft */
+      defaultClasses += ` ${isLeft ? 'slideInLeft' : 'slideInRight'} animated faster`;
     }
 
-    return defaultClasses;
+    return defaultClasses + ' mb-5';
   }
 
   render() {
     return (
-      <div className="container-fluid p-5">
+      <div className="container-fluid" id="history">
-        <div className="timeline">
+        <div className="pb-5">
-          {this.timelineContainers.map((timelineContainer, i) => {
+          <div className="row-height-5"></div>
-            return (
+          <div className="timeline">
-              <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
+            {this.timelineContainers.map((timelineContainer, i) => {
-                <div className="timeline-content">
+              return (
-                  <h1>{timelineContainer.heading}</h1>
+                <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
-                  <h5>{timelineContainer.content}</h5>
+                  <div className="timeline-content">
+                    <h1>{timelineContainer.heading}</h1>
+                    <h5>{timelineContainer.content}</h5>
+                  </div>
                 </div>
-              </div>
+              );
-            );
+            })}
-          })}
+          </div>
         </div>
       </div>
     );

src/components/shared/introduction/introduction.css

@@ -1,3 +1,4 @@
 .align-text-top { 
   line-height: 100%;
-}
+}
+

src/components/shared/introduction/introduction.js

@@ -89,21 +89,23 @@ class Introduction extends Component {
 
   render() { 
     return (
-      <div className="container-fluid mt-5">
+      <div className="container-fluid pt-5" id="intro">
         <div className="row align-items-center pt-5 pb-5">
-          <div className="col">
+          <div className="col-lg-6 col-sm-12">
             <div className="text-center">
               <img src={ProfilePicture} alt="Giovani's Face" className="rounded-circle img-fluid img-thumbnail float-right" width="500" />
             </div>
           </div>
-          <div className="col">
+          <div className="col-lg-6 col-sm-12">
             <div className="pl-3"> 
               <h1 className="text-left">{this.state.currentLineOne}<span className={this.getCursorClasses(1)}>|</span></h1>
               <h2 className="text-left">{this.state.currentLineTwo}<span className={this.getCursorClasses(2)}>|</span></h2>
             </div>
-            <div className="mt-5 pl-3"> 
+            <a href="#bio">
-              <button type="button" className="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
+              <div className="mt-5 pl-3"> 
-            </div>
+                <button type="button" className="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
+              </div>
+            </a>
           </div>
         </div>
       </div>

src/components/shared/skills/skills.js

@@ -70,8 +70,8 @@ class Skills extends Component {
 
   render() {
     return (
-      <div className="container">
+      <div className="container" id="skills">
-        <div className="row p-5">
+        <div className="row pt-5 pb-5">
           <div className="col">
             <div className="border-top border-bottom ml-2 mr-2 pb-5 pt-5">
               <h2><strong>Skills and Abilities</strong></h2>