Add stars to indicate skill confidence

package-lock.json

@@ -1421,6 +1421,36 @@
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
       "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.22",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.22.tgz",
+      "integrity": "sha512-QmEuZsipX5/cR9JOg0fsTN4Yr/9lieYWM8AQpmRa0eIfeOcl/HLYoEa366BCGRSrgNJEexuvOgbq9jnJ22IY5g=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.22",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.22.tgz",
+      "integrity": "sha512-Q941E4x8UfnMH3308n0qrgoja+GoqyiV846JTLoCcCWAKokLKrixCkq6RDBs8r+TtAWaLUrBpI+JFxQNX/WNPQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.22"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.2.tgz",
+      "integrity": "sha512-9Os/GRUcy+iVaznlg8GKcPSQFpIQpAg14jF0DWsMdnpJfIftlvfaQCWniR/ex9FoOpSEOrlXqmUCFL+JGeciuA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.22"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz",
+      "integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==",
+      "requires": {
+        "humps": "^2.0.1",
+        "prop-types": "^15.5.10"
+      }
+    },
     "@iarna/toml": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz",
@@ -5271,23 +5301,6 @@
       "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
       "dev": true
     },
-    "file-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/file-match/-/file-match-1.0.2.tgz",
-      "integrity": "sha1-ycrSZdLIrfOoFHWw30dYWQafrvc=",
-      "requires": {
-        "utils-extend": "^1.0.6"
-      }
-    },
-    "file-system": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/file-system/-/file-system-2.2.2.tgz",
-      "integrity": "sha1-fWWDPjojR9zZVqgTxncVPtPt2Yc=",
-      "requires": {
-        "file-match": "^1.0.1",
-        "utils-extend": "^1.0.4"
-      }
-    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -6411,6 +6424,11 @@
         "strip-url-auth": "^1.0.0"
       }
     },
+    "humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
+    },
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
@@ -8305,16 +8323,6 @@
         }
       }
     },
-    "parcel-plugin-static-files-copy": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/parcel-plugin-static-files-copy/-/parcel-plugin-static-files-copy-2.2.1.tgz",
-      "integrity": "sha512-Mj//+258Q05ZL72uD1VDJZ7jOW4PuwJO5WNM7ODpgHtDwXlhIURklSX0Ua8J4d/Vr1xWkNCg2HIVlhacdZ3M3w==",
-      "requires": {
-        "file-system": "2.2.2",
-        "minimatch": "3.0.4",
-        "path": "0.12.7"
-      }
-    },
     "parse-asn1": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.4.tgz",
@@ -8373,25 +8381,6 @@
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
       "dev": true
     },
-    "path": {
-      "version": "0.12.7",
-      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
-      "requires": {
-        "process": "^0.11.1",
-        "util": "^0.10.3"
-      },
-      "dependencies": {
-        "util": {
-          "version": "0.10.4",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-          "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-          "requires": {
-            "inherits": "2.0.3"
-          }
-        }
-      }
-    },
     "path-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
@@ -9327,7 +9316,8 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "dev": true
     },
     "process-nextick-args": {
       "version": "2.0.0",
@@ -11364,11 +11354,6 @@
         "object.getownpropertydescriptors": "^2.0.3"
       }
     },
-    "utils-extend": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/utils-extend/-/utils-extend-1.0.8.tgz",
-      "integrity": "sha1-zP17ZFQPjpDuIe7Fd2nQZRyril8="
-    },
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",

package.json

@@ -29,6 +29,9 @@
     "typescript": "^3.6.3"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.22",
+    "@fortawesome/free-solid-svg-icons": "^5.10.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "analytics": "^0.1.20",
     "analytics-plugin-ga": "^0.1.5",
     "gh-pages": "^1.2.0",

src/components/skills/SkillCard/SkillCard.js

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStar } from "@fortawesome/free-solid-svg-icons";
 import "./SkillCard.scss";
 
 export default function SkillCard({ name, logo, rating }) {
@@ -8,7 +10,13 @@ export default function SkillCard({ name, logo, rating }) {
       <div className="text">{name}</div>
       <div className="star-container">
         {Array.from({ length: rating }).map(x => {
-          return <div className="star"></div>;
+          return (
+            <FontAwesomeIcon
+              color="gold"
+              icon={faStar}
+              style={{ margin: "2px" }}
+            />
+          );
         })}
       </div>
     </div>