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

Refactored the skills component and worked on history animations and content

Browse Source
This commit is contained in:
Giovani
2019-04-15 14:20:20 -04:00
parent 615f30a2d5
commit 56735521d7
3 changed files with 3495 additions and 3479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6793
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -8,15 +8,41 @@ class History extends Component {
wasTimelineConatinerInView: [false, false, false, false]
};
this.timelineContainerRefs = [
React.createRef(), // ONE
React.createRef(), // TWO
React.createRef(), // THREE
React.createRef() // FOUR
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 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++) {
let timelineContainer = this.timelineContainerRefs[i];
if (this.isElementInView(timelineContainer)) {
for (var i = 0; i < this.timelineContainers.length; i++) {
let timelineContainerRef = this.timelineContainers[i].ref;
if (this.isElementInView(timelineContainerRef)) {
wasTimelineConatinerInView[i] = true;
}
}
@@ -45,12 +71,19 @@ class History extends Component {
});
}
getTimelineContainerClasses = (i) => {
let defaultClasses = "timeline-container timeline-left";
getTimelineContainerClasses = (timelineContainer, i) => {
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}>
<div className="timeline-content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div className="timeline-container timeline-right" ref={(el) => this.timelineContainerRefs[1] = el}>
<div className="timeline-content">
<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>
{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>
);

90
src/components/shared/skills/skills.js
View File

@@ -4,21 +4,42 @@ 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 = [
React.createRef(), // ONE
React.createRef(), // TWO
React.createRef(), // THREE
React.createRef() // FOUR
/* Create static content information */
this.progressBars = [
{
ref: React.createRef(),
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 = [];
isElementInView = (elementRef, offset = 0) => {
/* 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++) {
let progressBarRef = this.progressBarRefs[i];
if (this.isElementInView(progressBarRef)) {
for (var i = 0; i < this.progressBars.length; i++) {
let progressBar = this.progressBars[i];
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">
<h4 className="text-left">C#/.NET</h4>
<div className="progress progress-bar-height">
<div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[0] = el}
role="progressbar" style={{width: this.state.wasProgressBarInView[0] ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div className="mt-5 mb-4">
<h4 className="text-left">Javascript</h4>
<div className="progress progress-bar-height">
<div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[1] = el}
role="progressbar" style={{width: this.state.wasProgressBarInView[1] ? 75+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></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>
{this.progressBars.map((progressBar, i) => {
return (
<div className="mt-5 mb-4">
<h4 className="text-left">{progressBar.heading}</h4>
<div className="progress progress-bar-height">
<div className="progress-bar progress-bar-ani"
ref={(el) => progressBar.ref = el}
role="progressbar"
style={{width: this.state.wasProgressBarInView[i] ? progressBar.percentageWidth+'%' : 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);
}