experience timeline integration phase 1, created initial monolithic component, moved svgs to imports and used external library for scroll animation to easily replace jquery. css is still seperate. next steps are breaking down components further, reducing repeat logic, bring css into the component, likely more

Author: tiny-dancer

.env.development

@@ -1,3 +1,4 @@
 NAV=true
 DOWN_ARROWS=true
-SKILLS=true
+SKILLS=true
+EXPERIENCE=true

.env.production

@@ -1,2 +1,2 @@
 DOWN_ARROWS=true
-SKILLS=true
+SKILLS=true

src/components/ExperienceTimeline.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import suitcaseSvg from '../img/suitcase.svg';
+import capSvg from '../img/cap.svg';
+import ScrollAnimation from 'react-animate-on-scroll';
+
+export default class componentName extends Component {
+  render() {
+    return (
+      <section id="experience-education" className="section-experience-education bgPrimaryColor">
+        <h2>Experience &amp; Education</h2>
+        <ul className="timeline">
+          <li>
+            <div className="icon">
+              <img src={suitcaseSvg} alt />
+            </div>
+
+            <div className="animation-chain overflow-hidden">
+              <ScrollAnimation animateIn="fadeInLeft" animateOnce={true}>
+                <h3>UI / UX Designer</h3>
+                <h4>Amazing Design</h4>
+                <div className="date">Aug 2007 - Now</div>
+              </ScrollAnimation>
+            </div>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta exercitationem nam
+              perferendis tempora eius repellat expedita numquam, beatae eaque nihil? Aliquam
+              architecto voluptatum provident animi, excepturi fugit ut! Impedit, eum!
+            </p>
+          </li>
+          <li>
+            <div className="icon">
+              <img src={suitcaseSvg} alt />
+            </div>
+            <div className="animation-chain overflow-hidden">
+              <ScrollAnimation animateIn="fadeInRight" animateOnce={true}>
+                <h3>Front-End Web Developer</h3>
+                <h4>AudioJungle</h4>
+                <div className="date">Aug 2007 - Jan 2010</div>
+              </ScrollAnimation>
+            </div>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id error atque debitis
+              tempora soluta, modi voluptatum sunt optio, ut quidem quam dolore. Unde minus quasi
+              consequuntur consequatur, tempore repudiandae aperiam?
+            </p>
+          </li>
+          <li>
+            <div className="icon">
+              <img src={capSvg} alt />
+            </div>
+            <div className="animation-chain overflow-hidden">
+              <ScrollAnimation animateIn="fadeInLeft" animateOnce={true}>
+                <h3>Professional Diploma in Graphic Design </h3>
+                <h4>Beautiful College</h4>
+                <div className="date">Sep 2012 - Aug 2013</div>
+              </ScrollAnimation>
+            </div>
+          </li>
+          <li>
+            <div className="icon">
+              <img src={capSvg} alt />
+            </div>
+            <div className="animation-chain overflow-hidden">
+              <ScrollAnimation animateIn="fadeInRight" animateOnce={true}>
+                <h3>Master of Engineering in Computer Engineering</h3>
+                <h4>Fantastic University</h4>
+                <div className="date">Sep 2010 - Aug 2012</div>
+              </ScrollAnimation>
+            </div>
+            <p>
+              Thesis: Nulla, Omnis Vitae Illum Molestiae Rem<br />GPA: 4.0
+            </p>
+          </li>
+          <li>
+            <div className="icon">
+              <img src={suitcaseSvg} alt />
+            </div>
+            <div className="animation-chain overflow-hidden">
+              <ScrollAnimation animateIn="fadeInLeft" animateOnce={true}>
+                <h3>Back-End Web Developer</h3>
+                <h4>PhotoDune</h4>
+                <div className="date">Aug 2007 - Jan 2010</div>
+              </ScrollAnimation>
+            </div>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id error atque debitis
+              tempora soluta, modi voluptatum sunt optio, ut quidem quam dolore. Unde minus quasi
+              consequuntur consequatur, tempore repudiandae aperiam?
+            </p>
+          </li>
+          <li>
+            <div className="icon">
+              <img src={capSvg} alt />
+            </div>
+            <div className="animation-chain overflow-hidden">
+              <ScrollAnimation animateIn="fadeInRight" animateOnce={true}>
+                <h3>Bachelor of Engineering in Computer Science</h3>
+                <h4>Incredible University</h4>
+                <div className="date">Aug 2005 - Aug 2009</div>
+              </ScrollAnimation>
+            </div>
+            <p>
+              First-class honors<br />GPA: 4.33
+            </p>
+          </li>
+        </ul>
+      </section>
+    );
+  }
+}

src/pages/index.js

@@ -3,6 +3,7 @@ import Link from 'gatsby-link';
 import Hero from '../components/Hero';
 import Skills from '../components/Skills';
 import About from '../components/About';
+import ExperienceTimeline from '../components/ExperienceTimeline';
 
 export default class IndexPage extends React.Component {
   render() {
@@ -18,6 +19,11 @@ export default class IndexPage extends React.Component {
             return <Skills />;
           }
         })()}
+        {(() => {
+          if (process.env.EXPERIENCE) {
+            return <ExperienceTimeline />;
+          }
+        })()}
       </div>
     );
   }