From fe622c969bb16600f0392e02f58a45ce6ab8c0b6 Mon Sep 17 00:00:00 2001
From: Giovani <github@nekojita.it>
Date: Fri, 23 Jul 2021 13:17:29 -0400
Subject: [PATCH] feat: add improved history section

---
 src/components/bio/bio.js          |   7 +-
 src/components/contact/contact.js  |   2 +-
 src/components/history/history.css | 319 +++++++++++++++++++----------
 src/components/history/history.js  | 104 +++++-----
 src/components/skills/skills.js    |   5 +-
 5 files changed, 274 insertions(+), 163 deletions(-)

diff --git a/src/components/bio/bio.js b/src/components/bio/bio.js
index 50e59dc..019b0e6 100644
--- a/src/components/bio/bio.js
+++ b/src/components/bio/bio.js
@@ -8,8 +8,11 @@ class Bio extends Component {
         <div className="section-height"></div>
         <div className="row">
           <div className="col"> 
-            <div className="mx-auto text-center border-top border-bottom pl-1 pl-lg-5 pr-1 pr-lg-5 pt-5 pb-5 d-flex h-100 content-width">
-              <h2 className="content-text-size">
+            <div className="mx-auto text-center border-top border-bottom pl-1 pl-lg-5 pr-1 pr-lg-5 pt-5 pb-5">
+              <h1 className="w-100">
+                A Little About Myself
+              </h1>
+              <h2 className="mx-auto content-text-size content-width mt-4">
                 My name is <strong>Giovani Rodriguez</strong> and I create tools, apps and websites. 
                 I am a problem solver, solution maker upper and answer deilverer. I'm always itching to learn something new and striving to deliver my best. I like to read, listen to music and ride my bike.
               </h2>
diff --git a/src/components/contact/contact.js b/src/components/contact/contact.js
index 4307a78..579770a 100644
--- a/src/components/contact/contact.js
+++ b/src/components/contact/contact.js
@@ -10,7 +10,7 @@ class Contact extends Component {
           <div className="col"> 
             <div className="text-center">
               <h1 className="w-100">
-                Wanna work together?
+                Wanna Work Together?
               </h1>
               <h2 className="mx-auto content-text-size content-width mt-4">
                 You can get a hold of me by emailing me at <strong>me@grodriguez.dev</strong>.
diff --git a/src/components/history/history.css b/src/components/history/history.css
index f1f2111..3536786 100644
--- a/src/components/history/history.css
+++ b/src/components/history/history.css
@@ -1,129 +1,242 @@
-* {
-  box-sizing: border-box !important;
+.main-timeline {
+  position: relative
 }
 
-/* The actual timeline (the vertical ruler) */
-.timeline {
-  position: relative;
-  max-width: 1200px;
+.main-timeline:before {
+  content: "";
+  display: block;
+  width: 2px;
+  height: 100%;
+  background: #c6c6c6;
   margin: 0 auto;
-  z-index: -1;
-}
-
-/* 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;
-  z-index: -1;
-}
-
-/* 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%;
-}
-
-/* Place the container to the left */
-.timeline-left {
   left: 0;
+  right: 0
 }
 
-/* Place the container to the right */
-.timeline-right {
-  left: 50%;
+.main-timeline .timeline {
+  margin-bottom: 40px;
+  position: relative
 }
 
-/* Add arrows to the left container (pointing right) */
-.timeline-left::before {
-  content: " ";
-  height: 0;
+.main-timeline .timeline:after {
+  content: "";
+  display: block;
+  clear: both
+}
+
+.main-timeline .icon {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  margin: auto;
   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;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0
 }
 
-/* Add arrows to the right container (pointing left) */
-.timeline-right::before {
-  content: " ";
-  height: 0;
+.main-timeline .icon:before,
+.main-timeline .icon:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
   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;
+  top: 0;
+  left: 0;
+  transition: all 0.33s ease-out 0s
 }
 
-/* Fix the circle for containers on the right side */
-.timeline-right::after {
-  left: -13px;
+.main-timeline .icon:before {
+  background: #fff;
+  border: 2px solid #232323;
+  left: -3px
 }
 
-/* The actual content */
-.timeline-content {
-  padding: 20px 30px;
-  background-color: #eff1f4;
-  position: relative;
-  border-radius: none;
+.main-timeline .icon:after {
+  border: 2px solid #c6c6c6;
+  left: 3px
 }
 
-/* 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;
-  }
+.main-timeline .timeline:hover .icon:before {
+  left: 3px
+}
 
-/* Full-width containers */
-  .timeline-container {
-    width: 100%;
-    padding-left: 70px;
-    padding-right: 25px;
-  }
+.main-timeline .timeline:hover .icon:after {
+  left: -3px
+}
 
-/* 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;
-  }
+.main-timeline .date-content {
+  width: 50%;
+  float: left;
+  margin-top: 22px;
+  position: relative
+}
 
-/* Make sure all circles are at the same spot */
-  .timeline-left::after, .timeline-right::after {
-    left: 18px;
-  }
+.main-timeline .date-content:before {
+  content: "";
+  width: 36.5%;
+  height: 2px;
+  background: #c6c6c6;
+  margin: auto 0;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0
+}
 
-/* Make all right containers behave like the left ones */
-  .timeline-right {
-    left: 0%;
+.main-timeline .date-outer {
+  width: 125px;
+  height: 125px;
+  font-size: 16px;
+  text-align: center;
+  margin: auto;
+  z-index: 1
+}
+
+.main-timeline .date-outer:before,
+.main-timeline .date-outer:after {
+  content: "";
+  width: 125px;
+  height: 125px;
+  margin: 0 auto;
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: all 0.33s ease-out 0s
+}
+
+.main-timeline .date-outer:before {
+  background: #fff;
+  border: 2px solid #232323;
+  left: -6px
+}
+
+.main-timeline .date-outer:after {
+  border: 2px solid #c6c6c6;
+  left: 6px
+}
+
+.main-timeline .timeline:hover .date-outer:before {
+  left: 6px
+}
+
+.main-timeline .timeline:hover .date-outer:after {
+  left: -6px
+}
+
+.main-timeline .date {
+  width: 100%;
+  margin: auto;
+  position: absolute;
+  top: 27%;
+  left: 0
+}
+
+.main-timeline .month {
+  font-size: 18px;
+  font-weight: 700
+}
+
+.main-timeline .year {
+  display: block;
+  font-size: 30px;
+  font-weight: 700;
+  color: #232323;
+  line-height: 36px
+}
+
+.main-timeline .timeline-content {
+  width: 50%;
+  padding: 20px 0 20px 50px;
+  float: right
+}
+
+.main-timeline .title {
+  margin: 0 0 15px 0
+}
+
+.main-timeline .description {
+  margin-bottom: 0
+}
+
+.main-timeline .timeline:nth-child(2n) .date-content {
+  float: right
+}
+
+.main-timeline .timeline:nth-child(2n) .date-content:before {
+  left: 10px
+}
+
+.main-timeline .timeline:nth-child(2n) .timeline-content {
+  padding: 20px 50px 20px 0;
+  text-align: right
+}
+
+@media only screen and (max-width: 991px) {
+  .main-timeline .date-content {
+      margin-top: 35px
+  }
+  .main-timeline .date-content:before {
+      width: 22.5%
+  }
+  .main-timeline .timeline-content {
+      padding: 10px 0 10px 30px
+  }
+  .main-timeline .timeline:nth-child(2n) .timeline-content {
+      padding: 10px 30px 10px 0
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .main-timeline:before {
+      margin: 0;
+      left: 7px
+  }
+  .main-timeline .timeline {
+      margin-bottom: 20px
+  }
+  .main-timeline .timeline:last-child {
+      margin-bottom: 0
+  }
+  .main-timeline .icon {
+      margin: auto 0
+  }
+  .main-timeline .date-content {
+      width: 95%;
+      float: right;
+      margin-top: 0
+  }
+  .main-timeline .date-content:before {
+      display: none
+  }
+  .main-timeline .date-outer {
+      width: 110px;
+      height: 110px
+  }
+  .main-timeline .date-outer:before,
+  .main-timeline .date-outer:after {
+      width: 110px;
+      height: 110px
+  }
+  .main-timeline .date {
+      top: 30%
+  }
+  .main-timeline .year {
+      font-size: 24px
+  }
+  .main-timeline .timeline-content,
+  .main-timeline .timeline:nth-child(2n) .timeline-content {
+      width: 95%;
+      text-align: center;
+      padding: 10px 0
+  }
+  .main-timeline .title {
+      margin-bottom: 10px
   }
 }
\ No newline at end of file
diff --git a/src/components/history/history.js b/src/components/history/history.js
index d063c80..d144fed 100644
--- a/src/components/history/history.js
+++ b/src/components/history/history.js
@@ -5,53 +5,60 @@ class History extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      wasTimelineConatinerInView: [false, false, false, false]
+      wasTimelineContainerInView: [false, false, false, false]
     };
 
     this.timelineContainers = [
       {
         ref: React.createRef(),
         heading: 'Miami Dade College',
-        time: '2014 - 2016',
-        content: `I graduated with an Associates majoring in Computer Engineering.
+        year: '2014',
+        yearCount: '2',
+        description: `I graduated with an Associates majoring in Computer Engineering.
                   During my time at Miami Dade College I was given the opportunity
                   to explore many different technologies like C, C++ and Java. It 
                   is where I learned how to code and more importantly where I 
-                  discovered I was interested in software development.`,
-        position: 'left'
+                  discovered I was interested in software development.`
       },
       {
         ref: React.createRef(),
         heading: 'EnTec',
-        time: '2015 - 2016',
-        content: `Shortly before graduating I was offered a position as a Teaching 
+        year: '2015',
+        yearCount: '1',
+        description: `Shortly before graduating I was offered a position as a Teaching 
                   Assistant at Miami Dade College. This role helped develop my communication
-                  skills and showed me I had a passion for teaching others about programming.`,
-        position: 'right'
+                  skills and showed me I had a passion for teaching others about programming.`
       },
       {
         ref: React.createRef(),
         heading: 'CS50x Miami',
-        time: '2016 - 2017',
-        content: `Through MDC's Idea Center I got the chance to enroll in Harvard's
+        year: '2016',
+        yearCount: '1',
+        description: `Through MDC's Idea Center I got the chance to enroll in Harvard's
                   largest MOOC course called CS50. This course was challenging but 
                   was one of the best experiences I had in a classroom setting. It 
-                  laid the foundation I needed to take my skills to the next level.`,
-        position: 'left'
+                  laid the foundation I needed to take my skills to the next level.`
       },
       {
         ref: React.createRef(),
         heading: 'Insurance Technologies',
-        time: '2017 - 2020',
-        content: `I started off as a Junior Software Developer with InsTech. They provide software solutions for insurance companies. I learned a lot about software development during my time there and over the years was able to make major contributions to many of their solutions. My last position at InsTech was of Lead Software Developer.`,
-        position: 'right'
+        year: '2017',
+        yearCount: '3',
+        description: `I started off as a Junior Software Developer with InsTech. They provide 
+                      software solutions for insurance companies. I learned a lot about software 
+                      development during my time there and over the years was able to make major 
+                      contributions to many of their solutions. My last position at InsTech was 
+                      of Lead Software Developer.`
       },
       {
         ref: React.createRef(),
         heading: 'Orion Advisor Technology',
-        time: '2020 - Present',
-        content: `I now work as a Software Engineer for Orion Advisor Tech. They provide software solutions in the fintech space. I am currently working on a project that provides financial advisors with the planning tools they need to give their clients the best experience.`,
-        position: 'left'
+        year: '2020',
+        yearCount: 'Present',
+        description: `I now work as a Software Engineer for Orion Advisor Tech. They provide 
+                      software solutions in the fintech space. I am currently working on a
+                      project that provides financial advisors with the planning tools they
+                      need to give their clients the best experience.`
       }
     ];
   }
@@ -67,63 +74,52 @@ class History extends Component {
   }
 
   checkTimelimeContainersInView = () => {
-    let wasTimelineConatinerInView = this.state.wasTimelineConatinerInView;
+    let wasTimelineContainerInView = this.state.wasTimelineContainerInView;
 
     for (var i = 0; i < this.timelineContainers.length; i++) {
       let timelineContainerRef = this.timelineContainers[i].ref;
       if (this.isElementInView(timelineContainerRef)) {
-        wasTimelineConatinerInView[i] = true;
+        wasTimelineContainerInView[i] = true;
       }
     }
 
-    if (wasTimelineConatinerInView.every(x => x)) {
+    if (wasTimelineContainerInView.every(x => x)) {
       window.removeEventListener('scroll', this.checkTimelimeContainersInView);
     }
 
     this.setState({
-      wasTimelineConatinerInView: wasTimelineConatinerInView
+      wasTimelineContainerInView: wasTimelineContainerInView
     });
   }
 
-  getTimelineContainerClasses = (timelineContainer, i) => { 
-    let defaultClasses = 'timeline-container';
-    let isLeft = timelineContainer.position === 'left';
-
-    if (isLeft) {
-      defaultClasses += ' timeline-left';
-    } else {
-      defaultClasses += ' timeline-right';
-    }
-
-    if (i === (this.timelineContainers.length - 1)) {
-      defaultClasses += ' mb-3';
-    } else {
-      defaultClasses += ' mb-5';
-    }
-    
-    return defaultClasses;
-  }
-
   render() {
     return (
-      <div className="container-fluid" id="history">
-        <div className="section-height"></div>
-        <div className="timeline">
-          {this.timelineContainers.map((timelineContainer, i) => {
+      <div className="container mt-5 mb-5">
+        <div className="main-timeline">
+        {this.timelineContainers.map((timelineContainer, i) => {
             return (
-              <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el} key={i}>
-                <div className="timeline-content">
-                  <h1><b>{timelineContainer.heading}</b></h1>
-                  <span className="d-none d-md-inline"><h1><strong>{timelineContainer.time}</strong></h1></span>
-                  <span className="d-inline d-md-none"><h2><strong>{timelineContainer.time}</strong></h2></span>
-                  <span className="d-none d-md-inline"><h4><strong>{timelineContainer.content}</strong></h4></span>
-                  <span className="d-inline d-md-none"><h5><strong>{timelineContainer.content}</strong></h5></span>
-                </div>
+              <div className="timeline mt-5" ref={(el) => timelineContainer.ref = el} key={i} >
+                  <div className="icon"></div>
+                  <div className="date-content">
+                      <div className="date-outer">
+                          <span className="date">
+                            <span className="year">{timelineContainer.year}</span>
+                            <span className="month">{timelineContainer.yearCount === 'Present' ? timelineContainer.yearCount : timelineContainer.yearCount + ' Years'}</span>
+                          </span>
+                      </div>
+                  </div>
+                  <div className="timeline-content">
+                      <h2 className="title"><strong>{timelineContainer.heading}</strong></h2>
+                      <h2 className="description content-text-size">
+                          {timelineContainer.description}
+                      </h2>
+                  </div>
               </div>
             );
           })}
         </div>
       </div>
+
     );
   }
 
diff --git a/src/components/skills/skills.js b/src/components/skills/skills.js
index 20fb1da..cb00f4f 100644
--- a/src/components/skills/skills.js
+++ b/src/components/skills/skills.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import './skills.css';
 import CSharpIcon from '../../images/technologies/csharp.png';
 import PythonIcon from '../../images/technologies/python.png';
-import JavascriptIcon from '../../images/technologies/javascript.svg';
+import JavaScriptIcon from '../../images/technologies/javascript.svg';
 import SqlIcon from '../../images/technologies/sql.png';
 
 
@@ -19,7 +19,7 @@ class Skills extends Component {
       },
       {
         ref: React.createRef(),
-        image: JavascriptIcon,
+        image: JavaScriptIcon,
         name: "Javascript"
       },
       {
@@ -41,7 +41,6 @@ class Skills extends Component {
   render() {
     return (
       <div className="container" id="skills">
-        <div className="section-height"></div>
         <div className="row">
           <div className="col">
             <div className="text-center border-top border-bottom ml-2 mr-2 pb-5 pt-5">