📦 Updates

Author: CSFelix

assets/css/styles/global.css

@@ -28,8 +28,6 @@
 	***************
 */
 :root {
-	/*--background-color-1: aliceblue;
-	--background-color-2: #ededed;*/
 	--background-color-1: #041f36;
 	--background-color-2: #0a394d;
 	--background-color-3: #f8f8ff; /* footer */
@@ -44,6 +42,9 @@
 	--font-1: Roboto Mono;
 	--font-2: Roboto;
 	--font-3: sans-serif;
+
+	--skills-card-height: 200px;
+  	--skills-card-width: calc(var(--skills-card-height) / 1.5);
 }
 
 /*

assets/css/styles/sections.css

@@ -80,6 +80,14 @@
 .skillsSubContainer .skillsStarsContainer img { width:  50px; height:  auto; }
 .skillsSubContainer .skillsStarsContainer .inactive { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
 
+#skillsCardsContainer {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	flex-wrap:  wrap;
+	row-gap: var(--skills-card-height);
+}
+
 /*
 	************************
 	** Projects Container **

assets/css/styles/skills_cards.css

@@ -0,0 +1,81 @@
+.skillsCard {
+  width: var(--skills-card-height);
+  height: var(--skills-card-width);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 36px;
+  perspective: 2500px;
+  margin: 0 50px;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wrapper {
+  transition: all 0.5s;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+
+.skillsCard:hover .wrapper {
+  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
+  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+}
+
+.wrapper::before, .wrapper::after {
+  content: "";
+  opacity: 0;
+  width: 100%;
+  height: 80px;
+  transition: all 0.5s;
+  position: absolute;
+  left: 0;
+}
+
+.wrapper::before {
+  top: 0;
+  height: 100%;
+  background-image: linear-gradient(
+    to top,
+    transparent 46%,
+    rgba(12, 13, 19, 0.5) 68%,
+    rgba(12, 13, 19) 97%
+  );
+}
+
+.wrapper::after {
+  bottom: 0;
+  opacity: 1;
+  background-image: linear-gradient(
+    to bottom,
+    transparent 46%,
+    rgba(12, 13, 19, 0.5) 68%,
+    rgba(12, 13, 19) 97%
+  );
+}
+
+.skillsCard:hover .wrapper::before, .wrapper::after { opacity: 1; }
+.skillsCard:hover .wrapper::after { height: 120px; }
+.skillsTitle { width: 100%; transition: transform 0.5s; }
+.skillsCard:hover .skillsTitle { transform: translate3d(0%, -50px, 100px); }
+
+.character {
+  width: 100%;
+  opacity: 0;
+  transition: all 0.5s;
+  position: absolute;
+  z-index: -1;
+}
+
+.skillsCard:hover .character {
+  opacity: 1;
+  transform: translate3d(0%, -30%, 100px);
+}