+
+
+
Intro
diff --git a/src/components/shared/history/history.css b/src/components/shared/history/history.css
index 305c085..f1f2111 100644
--- a/src/components/shared/history/history.css
+++ b/src/components/shared/history/history.css
@@ -7,6 +7,7 @@
position: relative;
max-width: 1200px;
margin: 0 auto;
+ z-index: -1;
}
/* The actual timeline (the vertical ruler) */
@@ -19,6 +20,7 @@
bottom: 0;
left: 50%;
margin-left: -3px;
+ z-index: -1;
}
/* Container around content */
@@ -40,7 +42,6 @@
border: 4px solid #2780E3;
top: 15px;
border-radius: 50%;
- z-index: 1;
}
/* Place the container to the left */
diff --git a/src/components/shared/history/history.js b/src/components/shared/history/history.js
index 571a995..45d2d05 100644
--- a/src/components/shared/history/history.js
+++ b/src/components/shared/history/history.js
@@ -2,17 +2,81 @@ import React, {Component} from 'react';
import './history.css';
class History extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ wasTimelineConatinerInView: [false, false, false, false]
+ };
+
+ this.timelineContainerRefs = [
+ React.createRef(), // ONE
+ React.createRef(), // TWO
+ React.createRef(), // THREE
+ React.createRef() // FOUR
+ ];
+ }
+
+ timelineContainerRefs = [];
+
+ isElementInView = (elementRef, offset = 0) => {
+ if (!elementRef) {
+ return false;
+ }
+ const top = elementRef.getBoundingClientRect().top;
+ return (top + offset) >= 0 && (top - offset) <= window.innerHeight;
+ }
+
+ checkTimelimeContainersInView = () => {
+ let wasTimelineConatinerInView = this.state.wasTimelineConatinerInView;
+
+ for (var i = 0; i < this.timelineContainerRefs.length; i++) {
+ let timelineContainer = this.timelineContainerRefs[i];
+ if (this.isElementInView(timelineContainer)) {
+ wasTimelineConatinerInView[i] = true;
+ }
+ }
+
+ if (wasTimelineConatinerInView.every(x => x)) {
+ window.removeEventListener('scroll', this.checkTimelimeContainersInView);
+ }
+
+ this.setState({
+ wasTimelineConatinerInView: wasTimelineConatinerInView
+ });
+ }
+
+ getTimelineContainerClasses = (i) => {
+ let defaultClasses = "timeline-container timeline-left";
+
+ if (this.state.wasTimelineConatinerInView[i]) {
+ return defaultClasses + " animated slideInLeft faster";
+ }
+ return defaultClasses;
+ }
+
render() {
return (
-
{/* Check p-5 */}
+
-
+
this.timelineContainerRefs[0] = el}>
-
+
this.timelineContainerRefs[1] = el}>
+
+
+
this.timelineContainerRefs[2] = el}>
+
+
+
this.timelineContainerRefs[3] = el}>
2016
Lorem ipsum..
@@ -22,6 +86,10 @@ class History extends Component {
);
}
+
+ componentDidMount() {
+ window.addEventListener('scroll', this.checkTimelimeContainersInView);
+ }
}
export default History;
\ No newline at end of file
diff --git a/src/components/shared/skills/skills.js b/src/components/shared/skills/skills.js
index 3b1fa77..be5ad53 100644
--- a/src/components/shared/skills/skills.js
+++ b/src/components/shared/skills/skills.js
@@ -50,34 +50,36 @@ class Skills extends Component {
-
Skills and Abilities
-
-
C#/.NET
-
-
this.progressBarRefs[0] = el}
- role="progressbar" style={{width: this.state.wasProgressBarInView[0] ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
+
Skills and Abilities
+
+
C#/.NET
+
+
this.progressBarRefs[0] = el}
+ role="progressbar" style={{width: this.state.wasProgressBarInView[0] ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
-
-
-
Javascript
-
-
this.progressBarRefs[1] = el}
- role="progressbar" style={{width: this.state.wasProgressBarInView[1] ? 75+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
+
Javascript
+
+
this.progressBarRefs[1] = el}
+ role="progressbar" style={{width: this.state.wasProgressBarInView[1] ? 75+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
-
-
-
Software Design
-
-
this.progressBarRefs[2] = el}
- role="progressbar"style={{width: this.state.wasProgressBarInView[2] ? 70+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
+
Software Design
+
+
this.progressBarRefs[2] = el}
+ role="progressbar"style={{width: this.state.wasProgressBarInView[2] ? 70+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
-
-
-
MSSQL
-
-
this.progressBarRefs[3] = el}
- role="progressbar" style={{width: this.state.wasProgressBarInView[3] ? 62+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
+
MSSQL
+
+
this.progressBarRefs[3] = el}
+ role="progressbar" style={{width: this.state.wasProgressBarInView[3] ? 62+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+
diff --git a/src/index.js b/src/index.js
index 909a770..9f62bb1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,8 @@ import $ from 'jquery';
// eslint-disable-next-line
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
+import 'animate.css/animate.min.css'
+import 'octicons/build/build.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';