Refactor: Decompose .skills, .skills__item into separate components

astik-dev · Apr 14, 2024 · fca5f87 · fca5f87
1 parent fb18051
commit fca5f87
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 87 deletions.
diff --git a/src/components/skills/_skills.html b/src/components/skills/_skills.html
@@ -0,0 +1,15 @@
+<section class="skills">
+ <div class="skills__container title-content">
+
+ <h2 id="skills">Skills</h2>
+
+ <div class="skills__items">
+
+ @@for (var i = 0; i < 13; i++) {
+ @@include('./skills__item/_skills__item_empty.html')
+ }
+
+ </div>
+
+ </div>
+</section>
diff --git a/src/components/skills/_skills.scss b/src/components/skills/_skills.scss
@@ -0,0 +1,26 @@
+@use "../../scss/abstracts/variables" as *;
+@use "../../scss/abstracts/mixins" as *;
+
+@use "skills__item/skills__item";
+
+
+.skills {
+
+ &__container {
+ @include container(750px, $section-gap);
+ }
+
+ &__items {
+ @include flex(flex, row, 10px, flex-start, center);
+ flex-wrap: wrap;
+ width: inherit;
+ }
+}
+
+@media (max-width: 575.5px) {
+ .skills {
+ &__container {
+ padding-top: $section-gap-min;
+ }
+ }
+}
diff --git a/src/components/skills/skills__item/_skills__item.scss b/src/components/skills/skills__item/_skills__item.scss
@@ -0,0 +1,21 @@
+@use "../../../scss/abstracts/mixins" as *;
+
+
+.skills__item {
+ @include flex(flex, row, 10px, center, flex-start);
+ width: calc(33.333% - 7.5px);
+ padding: 10px;
+
+ border: 3px solid #293548;
+ border-radius: 8px;
+
+ @media (max-width: 652px) {
+ width: auto;
+ }
+
+
+ img {
+ width: 40px;
+ height: 40px;
+ }
+}
diff --git a/src/components/skills/skills__item/_skills__item_empty.html b/src/components/skills/skills__item/_skills__item_empty.html
@@ -0,0 +1,4 @@
+<article class="skills__item skills__item_empty">
+ <img src="img/1x1.png" alt=" ">
+ <h4>Loading...</h4>
+</article>
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -50,49 +50,8 @@
 
  @@include('./../components/projects/_projects.html')
 
- <section class="main__skills skills">
- <div class="skills__container title-content">
- <h2 id="skills">Skills</h2>
- <div class="skills__items">
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- <article class="skills__item skills__item_empty">
- <img src="img/1x1.png" alt=" ">
- <h4>Loading...</h4>
- </article>
- </div>
- </div>
- </section>
+ @@include('./../components/skills/_skills.html')
+
  <section class="main__reviews reviews">
  <div class="reviews__container title-content">
  <h2 id="reviews">Reviews</h2>

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -8,6 +8,7 @@
 @use "../components/header/header";
 @use "../components/home/home";
 @use "../components/projects/projects";
+@use "../components/skills/skills";
 @use "../components/swiper-nav/swiper-nav";
 @use "../components/project-popup/project-popup";
 @use "../components/footer/footer";
@@ -62,50 +63,6 @@
 
 
 
-.skills {
- &__container {
- @include container(750px, $section-gap);
- }
-
- &__items {
- @include flex(flex, row, 10px, flex-start, center);
- flex-wrap: wrap;
- width: inherit;
- }
-
- &__item {
- @include flex(flex, row, 10px, center, flex-start);
- width: calc(33.333% - 7.5px);
- padding: 10px;
-
- border: 3px solid #293548;
- border-radius: 8px;
-
- img {
- width: 40px;
- height: 40px;
- }
- }
-}
-
-@media (max-width: 652px) {
- .skills {
- &__item {
- width: auto;
- }
- }
-}
-
-@media (max-width: 575.5px) {
- .skills {
- &__container {
- padding-top: $section-gap-min;
- }
- }
-}
-
-
-
 .reviews {
 
  &__container {