Relocate all colors to _globals.scss

src/_globals.scss

@@ -1,16 +1,94 @@
+@use "sass:map";
+
 $layoutWidth: 1200px;
-$accentColor: #e52b3e;
-$accentColorDarker: darken($accentColor, 5);
-$background: #070707;
-$lightBackground: #fff;
-$textColor: white;
-$lightTextColor: black;
 $layoutPadding: 20px;
 
-$noticeColor: rgba(#e52b3e, 0.15);
-
 $mainFont: "Fira Code", monospace;
 
+$theme: (
+  "accent": #e52b3e,
+  "background": #070707,
+  "text": white,
+  "red": #e52b3e,
+  "orange": #e5752b,
+  "green": #18bb20,
+  "blue": #6d94e9,
+  "purple": #886af5
+);
+
+$theme-light: (
+  "accent": #e52b3e,
+  "background": white,
+  "text": black,
+  "red": #db1e31,
+  "orange": #aa4f12,
+  "green": #17681b,
+  "blue": #2b66e5,
+  "purple": #6848da
+);
+
+
+
+$accentColor: map.get($theme, "accent");
+$background: map.get($theme, "background");
+$lightBackground: map.get($theme-light, "background");
+$textColor: map.get($theme, "text");
+$lightTextColor:  map.get($theme-light, "text");
+$accentColorDarker: darken($accentColor, 5);
+$borderColor: rgba(0, 0, 0, 0.25);
+$border: thin solid $borderColor;
+$textShadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+$textShadowAccent: 0 0 20px rgba($accentColor, 0.15);
+$textShadowAccentLight: 0 0 20px rgba($accentColor, 0.3);
+
+$skillColor1: map.get($theme, "red");
+$skillColor2: map.get($theme, "orange");
+$skillColor3: map.get($theme, "green");
+$skillColor4: map.get($theme, "blue");
+$skillColor5: map.get($theme, "purple");
+
+$skillColor1Light: map.get($theme-light, "red");
+$skillColor2Light: map.get($theme-light, "orange");
+$skillColor3Light: map.get($theme-light, "green");
+$skillColor4Light: map.get($theme-light, "blue");
+$skillColor5Light: map.get($theme-light, "purple");
+
+$noticeColor: rgba($accentColor, 0.15);
+
+$cardShadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
+$cardHoverShadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2), -1px 11px 33px -10px rgba($accentColor, 0.75);
+
+$cardLightShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
+$cardLightHoverShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
+-1px 11px 33px -10px rgba($accentColor, 0.75);
+
+$homeProfileShadow: -1px 11px 33px -10px rgba($accentColor, 0.25);
+$homeProfileClipFront: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
+$homeProfileClipBack: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
+
+$aboutCVShadow: 0 0 15px 0 rgba($accentColor, 0.25);
+$aboutCVColorEdu: map.get($theme, "blue");
+$aboutCVColorEduLight: map.get($theme-light, "blue");
+
+
+@mixin homeBg {
+    background: linear-gradient(45deg, #000850 0%, #000320 100%),
+        radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
+        linear-gradient(225deg, #ff7a00 0%, #000000 100%),
+        linear-gradient(
+            135deg,
+            #cdffeb 10%,
+            #cdffeb 35%,
+            #009f9d 35%,
+            #009f9d 60%,
+            #07456f 60%,
+            #07456f 67%,
+            #0f0a3c 67%,
+            #0f0a3c 100%
+        );
+    background-blend-mode: screen, overlay, hard-light, normal;
+}
+
 @mixin flexList {
     display: flex;
     flex-wrap: wrap;
@@ -20,7 +98,7 @@ $mainFont: "Fira Code", monospace;
 @mixin cardGeneric {
     border-radius: 5px;
     overflow: hidden;
-    box-shadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
+    box-shadow: $cardShadow;
     transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
         color 0.25s;
     color: $textColor;
@@ -32,12 +110,11 @@ $mainFont: "Fira Code", monospace;
     &:active,
     &:focus {
         transform: scale(1.05);
-        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-            -1px 11px 33px -10px rgba($accentColor, 0.75);
+        box-shadow: $cardHoverShadow;
     }
 
     @media (prefers-color-scheme: light) {
-        box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
+        box-shadow: $cardLightShadow;
 
         background: $lightBackground;
         color: $lightTextColor;
@@ -46,8 +123,7 @@ $mainFont: "Fira Code", monospace;
         &:active,
         &:focus {
             transform: scale(1.05);
-            box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-                -1px 11px 33px -10px rgba($accentColor, 0.75);
+            box-shadow: $cardLightHoverShadow;
         }
     }
 }