122 lines
4.0 KiB
JavaScript
122 lines
4.0 KiB
JavaScript
import React, {Component} from 'react';
|
|
import './history.css';
|
|
|
|
class History extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
wasTimelineConatinerInView: [false, false, false, false]
|
|
};
|
|
|
|
this.timelineContainers = [
|
|
{
|
|
ref: React.createRef(),
|
|
heading: 'Miami Dade College - 2014',
|
|
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 IT.`,
|
|
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'
|
|
},
|
|
];
|
|
}
|
|
|
|
timelineContainers = [];
|
|
|
|
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.timelineContainers.length; i++) {
|
|
let timelineContainerRef = this.timelineContainers[i].ref;
|
|
if (this.isElementInView(timelineContainerRef)) {
|
|
wasTimelineConatinerInView[i] = true;
|
|
}
|
|
}
|
|
|
|
if (wasTimelineConatinerInView.every(x => x)) {
|
|
window.removeEventListener('scroll', this.checkTimelimeContainersInView);
|
|
}
|
|
|
|
this.setState({
|
|
wasTimelineConatinerInView: wasTimelineConatinerInView
|
|
});
|
|
}
|
|
|
|
getTimelineContainerClasses = (timelineContainer, i) => {
|
|
let defaultClasses = 'timeline-container';
|
|
let isLeft = timelineContainer.position === 'left';
|
|
|
|
if (isLeft) {
|
|
defaultClasses += ' timeline-left';
|
|
} else {
|
|
defaultClasses += ' timeline-right';
|
|
}
|
|
|
|
if (this.state.wasTimelineConatinerInView[i]) {
|
|
defaultClasses += ` ${isLeft ? 'slideInLeft' : 'slideInRight'} animated faster`;
|
|
}
|
|
|
|
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) => {
|
|
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>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener('scroll', this.checkTimelimeContainersInView);
|
|
}
|
|
}
|
|
|
|
export default History; |