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 (
-
-

Skills and Abilities

- {this.progressBars.map((progressBar, i) => { - return ( -
-

{progressBar.heading}

-

{progressBar.percentageWidth+'%'}

-
-
progressBar.ref = el} - role="progressbar" - style={{width: this.state.wasProgressBarInView[i] ? progressBar.percentageWidth+'%' : 0}} - aria-valuenow="25" - aria-valuemin="0" - aria-valuemax="100"> -
-
-
- ); - })} +
+

Technologies I Use

+ {this.technologies.map((technology, i) => { + return ( +
+ {technology.name} +

{technology.name}

+
+ ); + })}
@@ -103,7 +63,6 @@ class Skills extends Component { /* When component is initially mounted add scroll event listener */ componentDidMount() { - window.addEventListener('scroll', this.checkProgressBarsInView); } } diff --git a/src/images/home/profilePicture.jpg b/src/images/home/profilePicture.jpg deleted file mode 100644 index f4945eb..0000000 Binary files a/src/images/home/profilePicture.jpg and /dev/null differ diff --git a/src/images/technologies/csharp.png b/src/images/technologies/csharp.png new file mode 100644 index 0000000..69fb0eb Binary files /dev/null and b/src/images/technologies/csharp.png differ diff --git a/src/images/technologies/javascript.svg b/src/images/technologies/javascript.svg new file mode 100644 index 0000000..69ff6ea --- /dev/null +++ b/src/images/technologies/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/technologies/python.png b/src/images/technologies/python.png new file mode 100644 index 0000000..64558f3 Binary files /dev/null and b/src/images/technologies/python.png differ diff --git a/src/images/technologies/sql.png b/src/images/technologies/sql.png new file mode 100644 index 0000000..a607e4e Binary files /dev/null and b/src/images/technologies/sql.png differ