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

Worked on animate.css with the history component

Browse Source
This commit is contained in:
Giovani
2019-04-13 21:43:37 -04:00
parent a644a83897
commit 615f30a2d5
8 changed files with 3536 additions and 3422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6820
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -3,9 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"animate.css": "^3.7.0",
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"octicons": "^8.5.0",
"popper.js": "^1.15.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",

4
src/components/shared/bio/bio.js
View File

@@ -10,8 +10,8 @@ class Bio extends Component {
<div className="mx-auto text-center border-top border-bottom d-flex h-100 w-75">
<h2 className="align-self-center">
My name is <strong>Giovani Rodriguez</strong> and I create tools, applications and websites as solutions for individuals or businesses that need them.
I am problem solver, solution maker upper and answer deilverer. I always itch to learn something new and strive to deliver my best. When I'm not
creating I am either reading, writing or spending time with the people that I care.
I am a problem solver, solution maker upper and answer deilverer. I always itch to learn something new and strive to deliver my best. When I'm not
creating I am either reading, writing or playing games.
</h2>
</div>
</div>

3
src/components/shared/header/header.js
View File

@@ -6,6 +6,9 @@ class Header extends Component {
return (
<div className="container-fluid fixed-top">
<div className="row justify-content-end nav-background-color">
<div className="col-1">
<span className="octicon-mark-github" aria-hidden="true"></span>
</div>
<div className="col-1 nav-menu-item pt-2 pb-2">
<h3>Intro</h3>
</div>

3
src/components/shared/history/history.css
View File

@@ -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 */

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

@@ -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 (
<div className="container-fluid p-5"> {/* Check p-5 */}
<div className="container-fluid p-5">
<div className="timeline">
<div className="timeline-container timeline-left">
<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">
<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>
@@ -22,6 +86,10 @@ class History extends Component {
</div>
);
}
componentDidMount() {
window.addEventListener('scroll', this.checkTimelimeContainersInView);
}
}
export default History;

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

@@ -50,34 +50,36 @@ class Skills extends Component {
<div className="container">
<div className="row p-5">
<div className="col">
<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 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>
<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 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>
<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 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>
<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 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>
</div>
</div>

2
src/index.js
View File

@@ -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';