added skill-cards

2026-01-21 07:28:34 +01:00
parent 7f7ff008e2
commit da38de3159
12 changed files with 315 additions and 0 deletions
--- a/src/app/components/pages/skills/skill-card/skill-card.scss
+++ b/src/app/components/pages/skills/skill-card/skill-card.scss
@@ -0,0 +1,63 @@
+// skill-card.component.scss
+.card {
+  background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.05) 100%
+  );
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 16px;
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow:
+      0 8px 32px rgba(99, 102, 241, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+
+  h3 {
+    margin: 0 0 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .icons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    flex: 1;
+
+    a {
+      position: relative;
+      display: flex;
+
+      img {
+        width: 40px;
+        height: 40px;
+        object-fit: contain;
+        filter: grayscale(100%) brightness(0.8);
+        transition: filter 0.2s ease, transform 0.2s ease;
+      }
+
+      &:hover img {
+        filter: none;
+        transform: scale(1.1);
+      }
+    }
+  }
+}