crayonix/giovani.lol
Archived
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed history animation and worked on navigation

Browse Source
This commit is contained in:
Giovani
2019-04-15 19:05:14 -04:00
parent 56735521d7
commit 3cb7ae2fa0
11 changed files with 105 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/shared/history/history.js
View File

@@ -20,7 +20,7 @@ class History extends Component {
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.`,
technology. My goal was to inpire students and help them excel in the area of IT.`,
position: 'right'
},
{
@@ -73,34 +73,38 @@ class History extends Component {
getTimelineContainerClasses = (timelineContainer, i) => {
let defaultClasses = 'timeline-container';
let isLeft = timelineContainer.position === 'left';
if (timelineContainer.position === 'left') {
if (isLeft) {
defaultClasses += ' timeline-left';
} else {
defaultClasses += ' timeline-right';
}
if (this.state.wasTimelineConatinerInView[i]) {
return defaultClasses + ' slideInRight animated faster'; /* TODO: fix slideInLeft */
defaultClasses += ` ${isLeft ? 'slideInLeft' : 'slideInRight'} animated faster`;
}
return defaultClasses;
return defaultClasses + ' mb-5';
}
render() {
return (
<div className="container-fluid p-5">
<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 className="container-fluid" id="history">
<div className="pb-5">
<div className="row-height-5"></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>
</div>
</div>
);