feat: Initialize backend with Express and MySQL, and restructure frontend with new routing and language support.

2025-12-15 17:03:03 +01:00
parent 56897a0c2d
commit 6c11cf5213
54 changed files with 2000 additions and 174 deletions
--- a/frontend/src/styles/components/_skills.scss
+++ b/frontend/src/styles/components/_skills.scss
@@ -0,0 +1,109 @@
+// ========================
+// SKILLS SECTION SCSS
+// ========================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.skills {
+  padding: var(--section-padding);
+
+  &-grid {
+    @include grid-responsive(300px, 32px);
+    margin-bottom: 60px;
+  }
+
+  .skill-category {
+    @include card(32px, $border-radius-large, light);
+
+    .category-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 24px;
+
+      .category-icon {
+        @include icon-container(60px, $primary-color, $border-radius);
+      }
+
+      .category-title {
+        font-size: map-get($font-sizes, lg);
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+    }
+
+    .skills-list {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      .skill-item {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .skill-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .skill-name {
+            font-weight: 600;
+            color: var(--text-primary);
+          }
+
+          .skill-percentage {
+            font-size: map-get($font-sizes, sm);
+            color: var(--text-secondary);
+          }
+        }
+
+        .skill-bar {
+          @include progress-bar(8px);
+
+          .skill-progress {
+            height: 100%;
+            border-radius: 4px;
+            @include transition(width, $transition-slow);
+          }
+        }
+      }
+    }
+  }
+
+  .soft-skills {
+    text-align: center;
+
+    &-title {
+      font-size: map-get($font-sizes, xl);
+      font-weight: 700;
+      margin-bottom: 32px;
+      color: var(--text-primary);
+    }
+
+    &-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      justify-content: center;
+
+      .soft-skill-tag {
+        @include tag(12px 20px, var(--bg-primary), var(--text-secondary));
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        border: 2px solid var(--border-color);
+        border-radius: 50px;
+        font-weight: 500;
+        cursor: default;
+
+        &:hover {
+          border-color: $primary-color;
+          color: $primary-color;
+          transform: translateY(-2px);
+        }
+      }
+    }
+  }
+}