Redesign skills section

package.json

@@ -12,16 +12,16 @@
   },
   "devDependencies": {
     "prettier": "3.0.3",
-    "sass": "^1.67.0",
+    "sass": "^1.69.4",
     "sharp": "^0.32.6",
     "svgo": "^3.0.2",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vite-plugin-image-optimizer": "^1.1.7"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.15",
-    "i18next": "^23.5.1",
+    "autoprefixer": "^10.4.16",
+    "i18next": "^23.6.0",
     "normalize.css": "^8.0.1",
-    "rollup-obfuscator": "^4.0.0"
+    "rollup-obfuscator": "^4.1.0"
   }
 }

public/i18n/en.json

@@ -20,7 +20,18 @@
     "title": "Hi, <span>I’m Indar</span>. Nice to meet you.",
     "description": "I create interfaces for web applications and websites using various technologies such as HTML, CSS, JavaScript, React and many others. I believe that well-written code should be understandable, modular, scalable, and easy to maintain. I love working in a team and am always ready to share my knowledge and experience with colleagues. If you are looking for an experienced and responsible front-end developer who is ready to take on any tasks related to creating interfaces for web applications and websites, then I am ready to help you implement your ideas and achieve the desired results."
   },
-  "skills": "Skills",
+  "skills": {
+    "title": "Skills",
+    "subtitle": {
+      "basic": "Basic",
+      "frontend": "Frontend",
+      "backend": "Backend",
+      "uikit": "UI Kit",
+      "deploy": "Deploy",
+      "tests": "Tests",
+      "tools": "Other Tools"
+    }
+  },
   "education": {
     "title": "Education",
     "university": {

public/i18n/ru.json

@@ -20,7 +20,18 @@
     "title": "Привет, <span>я Индар</span>. Рад приветствовать тебя.",
     "description": "Я создаю интерфейсы для веб-приложений и сайтов с использованием различных технологий, таких как HTML, CSS, JavaScript, React и многих других. Я считаю, что хорошо написанный код должен быть понятным, модульным, масштабируемым и простым в обслуживании. Люблю работать в команде и всегда готов поделиться своими знаниями и опытом с коллегами. Если вы ищете опытного и ответственного фронтенд-разработчика, готового взять на себя любые задачи, связанные с созданием интерфейсов для веб-приложений и сайтов, то я готов помочь вам реализовать ваши идеи и добиться желаемых результатов."
   },
-  "skills": "Навыки",
+  "skills": {
+    "title": "Навыки",
+    "subtitle": {
+      "basic": "Базовые",
+      "frontend": "Фронтенд",
+      "backend": "Бэкенд",
+      "uikit": "Дизайн-системы",
+      "deploy": "Развертывание",
+      "tests": "Тестирование",
+      "tools": "Другие инструменты"
+    }
+  },
   "education": {
     "title": "Образование",
     "university": {

src/scss/components/education/_education.scss

@@ -28,7 +28,7 @@
 
 .education-list {
   padding: 0;
-  margin: 120px 0 0;
+  margin: 95px 0 0;
   list-style: none;
   display: flex;
   justify-content: center;
@@ -37,8 +37,7 @@
 
   @include responsive(xs, sm) {
     flex-direction: column;
-    margin-top: 70px;
-    gap: 0px;
+    gap: 0;
   }
 
   &__item {

src/scss/components/skills/_skills.scss

@@ -17,61 +17,24 @@
   &__hr {
     margin-top: 43px;
   }
-
-  &__wrapper {
-    margin-top: 143px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, auto);
-    justify-items: center;
-    gap: 50px;
-    grid-template-areas:
-      'skills-frontend skills-backend'
-      'skills-common skills-common';
-    @include responsive(xs, sm) {
-      margin-top: 80px;
-      gap: 29px;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr;
-      grid-template-areas:
-        'skills-frontend'
-        'skills-backend'
-        'skills-common';
-    }
-  }
 }
 
 .skills-list {
   padding: 0;
-  margin: 0;
+  margin: 95px 0 0;
   list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 29px;
-  width: 100%;
-  max-width: 531px;
-
-  &:nth-child(1) {
-    grid-area: skills-frontend;
-    justify-self: self-end;
-  }
 
-  &:nth-child(2) {
-    grid-area: skills-backend;
-    justify-self: self-start;
-  }
-
-  &:nth-child(3) {
-    grid-area: skills-common;
-  }
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 50px;
+  width: 100%;
 
   &__title {
     margin: 0;
-    margin-right: 50px;
     font: $t1;
     line-height: 30px;
     text-transform: uppercase;
+    white-space: nowrap;
     @include theme-style('theme-light') {
       color: $light-fc-second;
     }
@@ -80,34 +43,26 @@
   &__item {
     display: flex;
     flex-direction: column;
+    gap: 10px;
   }
 }
 
-.progress-bar {
+.hard-skills {
+  margin: 0;
+  padding: 0;
+  list-style: none;
   display: flex;
-  gap: 18px;
-  align-items: center;
-  &__container {
-    width: 100%;
-    height: 6px;
-    border-radius: 6px;
-    overflow: hidden;
-    @include theme-style('theme-light') {
-      background-color: $light-pb-color;
-    }
-    @include theme-style('theme-dark') {
-      background-color: $dark-pb-color;
-    }
-  }
-  &__content {
-    display: block;
-    height: 100%;
+  flex-wrap: wrap;
+  gap: 15px;
+
+  &__item {
     background-color: $link-active;
+    padding: 10px;
     border-radius: 6px;
-  }
-
-  &__info {
-    margin: 0;
     font: $t1;
+    line-height: 30px;
+    text-transform: uppercase;
+    color: $dark-fc-primary;
+    white-space: nowrap;
   }
-}
+}