Merge pull request #132 from CSFelix/CSFelix-patch-1

📦 Updated

Author: CSFelix

assets/css/styles/global.css

@@ -46,6 +46,7 @@
 	--color-4: #7f4d96;
 
 	--text-shadow-color: #7159c1; /* header */
+	--progress-bar-background-color: #767676;
 
 	--font-1: Roboto Mono;
 	--font-2: Roboto;

assets/css/styles/sections.css

@@ -113,21 +113,63 @@
 	gap: 1em;
 }
 
-.skillsProgress::-moz-progress-bar {
-	background: var(--color-4);
-	color: var(--color-4);
+.skillsProgress {
+  box-sizing: content-box;
+  width: 200px;
+  height: 20px;
+  position: relative;
+  background-color: var(--progress-bar-background-color);
+  border-radius: 25px;
+  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
 }
 
-.skillsProgress::-webkit-progress-value {
-	background: var(--color-4);
-	color: var(--color-4);
+.skillsProgress > span {
+  display: block;
+  height: 100%;
+  border-radius: 20px;
+	background-color: var(--color-4);
+  background-image: linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
+  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
+  position: relative;
+  overflow: hidden;
 }
 
-.skillsProgress {
-	background: var(--color-4);
-	color: var(--color-4);
+.skillsProgress > span:after, .animate > span > span {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  z-index: 1;
+  background-size: 50px 50px;
+  animation: move 2s linear infinite;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  overflow: hidden;
 }
 
+
+
+
+
+
+
+
+
+
 #projectsSubContainer {
 	display: flex;
 	align-items: center;