diff --git a/README.md b/README.md index 62c46e8..ee79497 100644 --- a/README.md +++ b/README.md @@ -34,5 +34,8 @@ Following the above will run the project in development mode and will open a bro ## Contributing Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. +## Credits +Javascript Flat Logo Icon by Jagathish Saravanan + ## License [MIT](https://choosealicense.com/licenses/mit/) \ No newline at end of file diff --git a/src/components/skills/skills.js b/src/components/skills/skills.js index 0e4e61a..20fb1da 100644 --- a/src/components/skills/skills.js +++ b/src/components/skills/skills.js @@ -1,36 +1,36 @@ import React, {Component} from 'react'; import './skills.css'; +import CSharpIcon from '../../images/technologies/csharp.png'; +import PythonIcon from '../../images/technologies/python.png'; +import JavascriptIcon from '../../images/technologies/javascript.svg'; +import SqlIcon from '../../images/technologies/sql.png'; + class Skills extends Component { constructor(props) { super(props); - /* Initialize progress bars in view flags in state */ - this.state = { - wasProgressBarInView: [false, false, false, false] - }; - /* Create static content information */ - this.progressBars = [ + this.technologies = [ { ref: React.createRef(), - percentageWidth: 88, - heading: "C#/.NET" + image: CSharpIcon, + name: "C#" }, { ref: React.createRef(), - percentageWidth: 75, - heading: "Javascript" + image: JavascriptIcon, + name: "Javascript" }, { ref: React.createRef(), - percentageWidth: 70, - heading: "Software Design" + image: PythonIcon, + name: "Python" }, { ref: React.createRef(), - percentageWidth: 62, - heading: "MSSQL" + image: SqlIcon, + name: "SQL" } ]; } @@ -38,62 +38,22 @@ class Skills extends Component { /* Class field to store static content */ progressBars = []; - /* 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; - } - const top = elementRef.getBoundingClientRect().top; - 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.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); - } - - this.setState({ - wasProgressBarInView: wasProgressBarInView - }); - } - render() { return (