✔ Jest icon added to skills

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { AppProps } from "next/app";
 import "styles/base.scss";
-import "styles/icons.scss";
+import "styles/brands.scss";
 import "styles/sociallogos.scss";
 
 export default function App({ Component, pageProps }: AppProps) {

src/sections/About/About.tsx

@@ -167,6 +167,10 @@ export default function About() {
                 <span className='tooltip'>Express</span>
               </span>
 
+              <span className='icon icon-jest'>
+                <span className='tooltip'>Jest</span>
+              </span>
+
               <span className='icon icon-mongodb'>
                 <span className='tooltip'>MongoDB</span>
               </span>

src/styles/icons.scss → src/styles/brands.scss

@@ -2,16 +2,31 @@
 
 @font-face {
   font-family: "brands";
-  src: url("fonts/brands.eot?tw22l5");
-  src: url("fonts/brands.eot?tw22l5#iefix") format("embedded-opentype"),
-    url("fonts/brands.ttf?tw22l5") format("truetype"),
-    url("fonts/brands.woff?tw22l5") format("woff"),
-    url("fonts/brands.svg?tw22l5#brands") format("svg");
+  src: url("fonts/brands.eot?auc5vw");
+  src: url("fonts/brands.eot?auc5vw#iefix") format("embedded-opentype"),
+    url("fonts/brands.ttf?auc5vw") format("truetype"),
+    url("fonts/brands.woff?auc5vw") format("woff"),
+    url("fonts/brands.svg?auc5vw#brands") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
+[class^="icon-"],
+[class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "brands" !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .icon {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: "brands" !important;
@@ -191,10 +206,6 @@
 .icon-apollo:before {
   content: "\e921";
 }
-.icon-bootstrap:before {
-  content: "\e91a";
-  color: #563d7c;
-}
 .icon-c:before {
   content: "\e909";
   color: #a8b9cc;
@@ -286,3 +297,7 @@
   content: "\e900";
   color: #1488c6;
 }
+.icon-jest:before {
+  content: "\e901";
+  color: #c21325;
+}