From 922a83351ddbbe4a9ba201ab79ceb44999556c93 Mon Sep 17 00:00:00 2001
From: Giovani <github@nekojita.it>
Date: Mon, 15 Apr 2019 19:05:14 -0400
Subject: [PATCH] Fixed history animation and worked on navigation

---
 src/components/App.css                        | 35 +----------
 src/components/pages/home.js                  |  4 +-
 src/components/shared/bio/bio.js              |  2 +-
 src/components/shared/header/header.js        | 33 -----------
 .../header/{header.css => navigation.css}     |  5 ++
 src/components/shared/header/navigation.js    | 59 +++++++++++++++++++
 src/components/shared/history/history.css     |  4 ++
 src/components/shared/history/history.js      | 34 ++++++-----
 .../shared/introduction/introduction.css      |  3 +-
 .../shared/introduction/introduction.js       | 14 +++--
 src/components/shared/skills/skills.js        |  4 +-
 11 files changed, 105 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/shared/header/header.js
 rename src/components/shared/header/{header.css => navigation.css} (53%)
 create mode 100644 src/components/shared/header/navigation.js

diff --git a/src/components/App.css b/src/components/App.css
index b41d297..09e6898 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,33 +1,4 @@
-.App {
-  text-align: center;
-}
-
-.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);
-  }
+/* SCROLL BEHAVIOR NOT COMPATIBLE WITH IE */
+html {
+  scroll-behavior: smooth; 
 }
diff --git a/src/components/pages/home.js b/src/components/pages/home.js
index d0b469e..51bedb6 100644
--- a/src/components/pages/home.js
+++ b/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/>
diff --git a/src/components/shared/bio/bio.js b/src/components/shared/bio/bio.js
index 132f4d7..c0c8b07 100644
--- a/src/components/shared/bio/bio.js
+++ b/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">
diff --git a/src/components/shared/header/header.js b/src/components/shared/header/header.js
deleted file mode 100644
index a020161..0000000
--- a/src/components/shared/header/header.js
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/components/shared/header/header.css b/src/components/shared/header/navigation.css
similarity index 53%
rename from src/components/shared/header/header.css
rename to src/components/shared/header/navigation.css
index 06e9ecf..d2ff3ea 100644
--- a/src/components/shared/header/header.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/shared/header/navigation.js b/src/components/shared/header/navigation.js
new file mode 100644
index 0000000..347c71f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/shared/history/history.css b/src/components/shared/history/history.css
index f1f2111..dda5a8c 100644
--- a/src/components/shared/history/history.css
+++ b/src/components/shared/history/history.css
@@ -1,3 +1,7 @@
+.row-height-5 {
+  height: 5rem;
+}
+
 * {
   box-sizing: border-box !important;
 }
diff --git a/src/components/shared/history/history.js b/src/components/shared/history/history.js
index d8669f0..c6cd03b 100644
--- a/src/components/shared/history/history.js
+++ b/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="timeline">
-          {this.timelineContainers.map((timelineContainer, i) => {
-            return (
-              <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
-                <div className="timeline-content">
-                  <h1>{timelineContainer.heading}</h1>
-                  <h5>{timelineContainer.content}</h5>
+      <div className="container-fluid" id="history">
+        <div className="pb-5">
+          <div className="row-height-5"></div>
+          <div className="timeline">
+            {this.timelineContainers.map((timelineContainer, i) => {
+              return (
+                <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
+                  <div className="timeline-content">
+                    <h1>{timelineContainer.heading}</h1>
+                    <h5>{timelineContainer.content}</h5>
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
         </div>
       </div>
     );
diff --git a/src/components/shared/introduction/introduction.css b/src/components/shared/introduction/introduction.css
index 83a721f..003eeed 100644
--- a/src/components/shared/introduction/introduction.css
+++ b/src/components/shared/introduction/introduction.css
@@ -1,3 +1,4 @@
 .align-text-top { 
   line-height: 100%;
-}
\ No newline at end of file
+}
+
diff --git a/src/components/shared/introduction/introduction.js b/src/components/shared/introduction/introduction.js
index 54f53ac..025af1e 100644
--- a/src/components/shared/introduction/introduction.js
+++ b/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"> 
-              <button type="button" className="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
-            </div>
+            <a href="#bio">
+              <div className="mt-5 pl-3"> 
+                <button type="button" className="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
+              </div>
+            </a>
           </div>
         </div>
       </div>
diff --git a/src/components/shared/skills/skills.js b/src/components/shared/skills/skills.js
index a6a9486..7e5af76 100644
--- a/src/components/shared/skills/skills.js
+++ b/src/components/shared/skills/skills.js
@@ -70,8 +70,8 @@ class Skills extends Component {
 
   render() {
     return (
-      <div className="container">
-        <div className="row p-5">
+      <div className="container" id="skills">
+        <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>