Refactored the skills component and worked on history animations and content

src/components/shared/history/history.js

@@ -8,15 +8,41 @@ class History extends Component {
       wasTimelineConatinerInView: [false, false, false, false]
     };
 
-    this.timelineContainerRefs = [
+    this.timelineContainers = [
-      React.createRef(), // ONE
+      {
-      React.createRef(), // TWO
+        ref: React.createRef(),
-      React.createRef(), // THREE
+        heading: 'Miami Dade College - 2014',
-      React.createRef()  // FOUR
+        content: `I studied at MDC as a Computer Engineering major. I consistently took more programming and computer science
+                  courses than my major required. These included courses like VB, C, C++, Java among other high rigour courses.`,
+        position: 'left'
+      },
+      {
+        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.`,
+        position: 'right'
+      },
+      {
+        ref: React.createRef(),
+        heading: 'CS50x Miami - 2016',
+        content: `I completed Harvard's largest MOOC course called CS50 offered at MDC's Idea Center. Was invited to Boston to 
+                  present my project to CS50's professor David Malan. I later volunteered myself as a teaching fellow for others taking
+                  the CS50x Miami course.`,
+        position: 'left'
+      },
+      {
+        ref: React.createRef(),
+        heading: 'InsTech - 2017',
+        content: `After many internships and job applications I was hired by Insurance Technologies. A software company focused on
+                  bringing comprehensive solutions to clients in the insurance industry. I'm currently the lead developer in charge
+                  of a system that is used by 300+ employees.`,
+        position: 'right'
+      },
     ];
   }
 
-  timelineContainerRefs = [];
+  timelineContainers = [];
 
   isElementInView = (elementRef, offset = 0) => {
     if (!elementRef) {
@@ -29,9 +55,9 @@ class History extends Component {
   checkTimelimeContainersInView = () => {
     let wasTimelineConatinerInView = this.state.wasTimelineConatinerInView;
 
-    for (var i = 0; i < this.timelineContainerRefs.length; i++) {
+    for (var i = 0; i < this.timelineContainers.length; i++) {
-      let timelineContainer = this.timelineContainerRefs[i];
+      let timelineContainerRef = this.timelineContainers[i].ref;
-      if (this.isElementInView(timelineContainer)) {
+      if (this.isElementInView(timelineContainerRef)) {
         wasTimelineConatinerInView[i] = true;
       }
     }
@@ -45,12 +71,19 @@ class History extends Component {
     });
   }
 
-  getTimelineContainerClasses = (i) => { 
+  getTimelineContainerClasses = (timelineContainer, i) => { 
-    let defaultClasses = "timeline-container timeline-left";
+    let defaultClasses = 'timeline-container';
+
+    if (timelineContainer.position === 'left') {
+      defaultClasses += ' timeline-left';
+    } else {
+      defaultClasses += ' timeline-right';
+    }
 
     if (this.state.wasTimelineConatinerInView[i]) {
-      return defaultClasses + " animated slideInLeft faster";
+      return defaultClasses + ' slideInRight animated faster'; /* TODO: fix slideInLeft */
     }
+
     return defaultClasses;
   }
 
@@ -58,30 +91,16 @@ class History extends Component {
     return (
       <div className="container-fluid p-5">
         <div className="timeline">
-          <div className={this.getTimelineContainerClasses(0)} ref={(el) => this.timelineContainerRefs[0] = el}>
+          {this.timelineContainers.map((timelineContainer, i) => {
-            <div className="timeline-content">
+            return (
-              <h2>2017</h2>
+              <div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
-              <p>Lorem ipsum..</p>
+                <div className="timeline-content">
-            </div>
+                  <h1>{timelineContainer.heading}</h1>
-          </div>
+                  <h5>{timelineContainer.content}</h5>
-          <div className="timeline-container timeline-right" ref={(el) => this.timelineContainerRefs[1] = el}>
+                </div>
-            <div className="timeline-content">
+              </div>
-              <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>
-            </div>
-          </div>
         </div>
       </div>
     );

src/components/shared/skills/skills.js

@@ -4,20 +4,41 @@ import './skills.css';
 class Skills extends Component {
   constructor(props) {
     super(props);
+
+    /* Initialize progress bars in view flags in state */
     this.state = {
       wasProgressBarInView: [false, false, false, false]
     };
 
-    this.progressBarRefs = [
+    /* Create static content information */
-      React.createRef(), // ONE
+    this.progressBars = [
-      React.createRef(), // TWO
+      {
-      React.createRef(), // THREE
+        ref: React.createRef(),
-      React.createRef()  // FOUR
+        percentageWidth: 88,
+        heading: "C#/.NET"
+      },
+      {
+        ref: React.createRef(),
+        percentageWidth: 75,
+        heading: "Javascript"
+      },
+      {
+        ref: React.createRef(),
+        percentageWidth: 70,
+        heading: "Software Design"
+      },
+      {
+        ref: React.createRef(),
+        percentageWidth: 62,
+        heading: "MSSQL"
+      }
     ];
   }
 
-  progressBarRefs = [];
+  /* Class field to store static content */
+  progressBars = [];
 
+  /* Checks to see if an element is in view using it's ref - REDUNTANT IN OTHER CONTROLLER */
   isElementInView = (elementRef, offset = 0) => { 
     if (!elementRef) {
       return false;
@@ -26,16 +47,18 @@ class Skills extends Component {
     return (top + offset) >= 0 && (top - offset) <= window.innerHeight;
   }
 
+  /* Sets if progress bar was ever in view flag for each progress bar currently in view */
   checkProgressBarsInView = () => {
     let wasProgressBarInView = this.state.wasProgressBarInView;
 
-    for (var i = 0; i < this.progressBarRefs.length; i++) {
+    for (var i = 0; i < this.progressBars.length; i++) {
-      let progressBarRef = this.progressBarRefs[i];
+      let progressBar = this.progressBars[i];
-      if (this.isElementInView(progressBarRef)) {
+      if (this.isElementInView(progressBar.ref)) {
         wasProgressBarInView[i] = true;
       }
     }
 
+    // Remove event listener once all flags are set
     if (wasProgressBarInView.every(x => x)) {
       window.removeEventListener('scroll', this.checkProgressBarsInView);
     }
@@ -52,35 +75,23 @@ class Skills extends Component {
           <div className="col">
             <div className="border-top border-bottom ml-2 mr-2 pb-5 pt-5">
               <h2><strong>Skills and Abilities</strong></h2>
-              <div className="mt-5 mb-4">
+                {this.progressBars.map((progressBar, i) => {
-                <h4 className="text-left">C#/.NET</h4>
+                  return (
-                <div className="progress progress-bar-height">
+                    <div className="mt-5 mb-4">
-                  <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[0] = el}
+                      <h4 className="text-left">{progressBar.heading}</h4>
-                      role="progressbar" style={{width: this.state.wasProgressBarInView[0] ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                      <div className="progress progress-bar-height">
-                  </div>
+                        <div className="progress-bar progress-bar-ani" 
-                </div>
+                             ref={(el) => progressBar.ref = el}
-              </div>
+                             role="progressbar" 
-              <div className="mt-5 mb-4">
+                             style={{width: this.state.wasProgressBarInView[i] ? progressBar.percentageWidth+'%' : 0}} 
-                <h4 className="text-left">Javascript</h4>
+                             aria-valuenow="25" 
-                <div className="progress progress-bar-height">
+                             aria-valuemin="0" 
-                  <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[1] = el}
+                             aria-valuemax="100">
-                      role="progressbar" style={{width: this.state.wasProgressBarInView[1] ? 75+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
-                </div>
+                      </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: 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: this.state.wasProgressBarInView[3] ? 62+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -88,6 +99,7 @@ class Skills extends Component {
     );
   }
 
+  /* When component is initially mounted add scroll event listener */
   componentDidMount() {
     window.addEventListener('scroll', this.checkProgressBarsInView);
   }