feat: update skills section to show icons instead

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
+<a href="https://iconscout.com/icons/javascript" target="_blank">Javascript Flat  Logo Icon</a> by <a href="https://iconscout.com/contributors/jagathish" target="_blank">Jagathish Saravanan</a>
+
 ## License
 [MIT](https://choosealicense.com/licenses/mit/)

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 (
       <div className="container" id="skills">
         <div className="section-height"></div>
         <div className="row">
           <div className="col">
-            <div className="border-top border-bottom ml-2 mr-2 pb-5 pt-5">
-              <h2><strong>Skills and Abilities</strong></h2>
-                {this.progressBars.map((progressBar, i) => {
-                  return (
-                    <div className="mt-5 mb-4" key={i}>
-                      <h4 className="float-left d-inline-block">{progressBar.heading}</h4>
-                      <h4 className="float-right d-inline-block">{progressBar.percentageWidth+'%'}</h4>
-                      <div className="progress progress-bar-height w-100">
-                        <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 className="text-center border-top border-bottom ml-2 mr-2 pb-5 pt-5">
+              <div className="pb-lg-2 pb-5"><h1>Technologies I Use</h1></div>
+              {this.technologies.map((technology, i) => {
+                return (
+                  <div className="pt-2 pb-2 pt-lg-5 pb-lg-3 pl-4 pr-4 d-inline-block" key={i}>
+                    <img src={technology.image} alt={technology.name} width="200" className="img-thumbnail"/>
+                    <div className="pt-3"><h4>{technology.name}</h4></div>
+                  </div>
+                );
+              })}
             </div>
           </div>
         </div>
@@ -103,7 +63,6 @@ class Skills extends Component {
 
   /* When component is initially mounted add scroll event listener */
   componentDidMount() {
-    window.addEventListener('scroll', this.checkProgressBarsInView);
   }
 }
 

src/images/technologies/javascript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-label="JavaScript" viewBox="0 0 512 512"><rect width="512" height="512" fill="#f7df1e" rx="15%"/><path d="m324,370c10,17 24,29 47,29 20,0 33,-10 33,-24 0,-16 -13,-22 -35,-32l-12,-5c-35,-15 -58,-33 -58,-72 0,-36 27,-64 70,-64 31,0 53,11 68,39l-37,24c-8,-15 -17,-21 -31,-21 -14,0 -23,9 -23,21 0,14 9,20 30,29l12,5c41,18 64,35 64,76 0,43 -34,67 -80,67 -45,0 -74,-21 -88,-49zm-170,4c8,13 14,25 31,25 16,0 26,-6 26,-30V203h48v164c0,50 -29,72 -72,72 -39,0 -61,-20 -72,-44z"/></svg>