Extracted colors to variables

src/components/AboutMe/AboutMe.scss

@@ -10,7 +10,7 @@
   }
 
   .about-me-card {
-    background: #F1F1F1;
+    background: var(--about-me);
     border-radius: 5px;
     margin: 0 5px 0;
     padding: 10px;
@@ -18,7 +18,7 @@
   }
 
   #about-me {
-    background: #F1F1F1;
+    background: var(--about-me);
     border-radius: 5px;
     padding: 15px;
     width: fit-content;

src/components/Footer.scss

@@ -1,5 +1,5 @@
 .site-footer {
-  background: #84B7DB;
+  background: var(--header);
   margin: 10px;
   border-radius: 5px;
 

src/components/Header.scss

@@ -5,7 +5,7 @@ header {
   margin: 10px;
   padding: 10px;
   border-radius: 5px;
-  background: #84B7DB;
+  background: var(--header);
   font-family: "Fira Code", monospace;
 
   h1 {

src/components/ProjectGrid.scss

@@ -14,11 +14,11 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
 
 #project-grid-parent {
   margin: 10px;
-  background: #FECEA8;
+  background: var(--grid-background);
   border-radius: 5px;
 
   & > #project-header {
-    background: #1C1C1C;
+    background: var(--grid-header-background);
     border-radius: 5px 5px 0 0;
     margin-bottom: 2px;
 
@@ -26,7 +26,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
     padding: 5px;
 
     * {
-      color: white;
+      color: var(--grid-header-text);
     }
 
     h2 {
@@ -119,7 +119,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   .GridElementInternal {
     padding: 9px;
     border-radius: 5px;
-    background: #F1F1F1;
+    background: var(--grid-element-background);
 
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
     transition: box-shadow 0.3s ease-in-out;
@@ -249,6 +249,6 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   font-size: 24px;
   color: black;
 
-  background: rgba(224, 255, 255, 0.7);
+  background: var(--link-icon-background);
   border-radius: 5px;
 }

src/index.scss

@@ -1,5 +1,5 @@
 * {
-  color: #2A363B;
+  color: var(--text);
 }
 
 body {
@@ -10,7 +10,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   //background: url("./images/y-so-serious-white.png") repeat;
-  background-color: #3767A8 !important;
+  background-color: var(--background) !important;
 }
 
 #root {

src/index.tsx

@@ -3,6 +3,7 @@ import { render } from "react-snapshot";
 
 import "./index.scss";
 import "./imports.scss";
+import "./vars.scss"
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { HashRouter } from "react-router-dom";

src/vars.scss

@@ -0,0 +1,11 @@
+:root {
+  --text: black;
+  --background: #2A363B;
+  --header: #84B7DB;
+  --about-me: #F1F1F1;
+  --grid-background: #FECEA8;
+  --grid-header-background: #1C1C1c;
+  --grid-header-text: #F1F1F1;
+  --grid-element-background: #F1F1F1;
+  --link-icon-background: rgba(224, 255, 255, 0.7);
+}