Merge pull request #2 from Dual-Ice/week2

Week2

package.json

@@ -63,6 +63,7 @@
     "request": "^2.88.0",
     "signale": "^1.4.0",
     "vue": "^2.6.7",
+    "vue-carousel": "^0.18.0",
     "vue-router": "^3.0.2"
   }
 }

src/components/about.pug

@@ -9,9 +9,9 @@ section.about(id="about")
           .user__info
             - 
               var info = [
-                ["Проживаю", "Петропавловск-Камчатский"],
-                ["Возраст", "27 лет"],
-                ["Родился", "8 ноября 1992"]
+                ["Проживаю:", "Петропавловск-Камчатский"],
+                ["Возраст:", "27 лет"],
+                ["Родился:", "8 ноября 1992"]
               ];
             table.user__data
               tbody.user__data-body  

src/components/contacts.pug

@@ -1,22 +1,22 @@
 section.contacts(id="contacts")
-  .container
+  .container.contacts__container
     h2.section__title.contacts__title Связаться со мной
     .contacts__form
       form
         .form__container
           .form__row
-            label.form__block
-              .form__block-label Введите ваше имя
-              .form__block-wrap
-                +icon('user','form__block-icon')
-                .form__block-field
-                  input(placeholder="Иванов Иван").form__block-input
-            label.form__block
-              .form__block-label Введите ваше email
-              .form__block-wrap
-                +icon('envelope','form__block-icon')
-                .form__block-field
-                  input(placeholder="[email protected]").form__block-input
+            - 
+              var fields = [
+                ["Введите ваше имя", "Иванов Иван", "user"],
+                ["Введите ваш email", "[email protected]", "envelope"]
+              ]
+            each field in fields
+              label.form__block
+                .form__block-label #{field[0]}
+                .form__block-wrap
+                  +icon(field[2],'form__block-icon')
+                  .form__block-field
+                    input(placeholder=field[1]).form__block-input
           .form__row.form__row--more-margin
             label.form__block
               .form__block-label Сообщение к письму

src/components/footer.pug

@@ -1,20 +1,21 @@
 footer.footer
-  .footer__left
-    .footer__copyright © 2020
-    .footer__info
-      .footer__info-name #{username}
-      .footer__info-desc !{desc}
-  .footer__right
-    .footer__row
-      .footer__menu
-        +menu
-    .footer__row
-      .footer__col
-        .footer__desc Этот сайт я сделал в рамках обучения в Школе онлайн образования Loftschool
-        .footer__socials
-          +socials('social--footer')
-      .footer__col
-        .footer__quote
-          .footer__quote-text
-            p Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает где вы живете
-          .footer__quote-author Martin Golding
+  .container.footer__container
+    .footer__left
+      .footer__copyright © 2020
+      .footer__info
+        .footer__info-name #{username}
+        .footer__info-desc !{desc}
+    .footer__right
+      .footer__row
+        .footer__menu
+          +menu('nav--footer')
+      .footer__row
+        .footer__col
+          .footer__desc Этот сайт я сделал в рамках обучения в Школе онлайн образования Loftschool
+          .footer__socials
+            +socials('social--footer')
+        .footer__col
+          .footer__quote
+            .footer__quote-text
+              p Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает где вы живете
+            .footer__quote-author Martin Golding

src/components/hero.pug

@@ -7,6 +7,14 @@ section.hero.fullscreen-section(id="hero")
         +menu
       .header__links
         +socials
+        button(type="button").ham-menu__btn
+          +icon('menu', 'ham-menu__btn-icon')
+      .header__ham-menu
+        button(type="button").ham-menu__close
+          +icon('cross', 'ham-menu__close-icon')
+        .ham-menu
+          +menu('nav--ham')
+          +socials('social--ham')
     .hero__content
       .user-info
         h1.user-info__desc !{desc}

src/components/parallax/budda-parallax.pug

@@ -0,0 +1,32 @@
+- var path = "parallax/budda"
+.parallax.parallax--feedback
+  picture(data-speed="0.1").parallax__layer
+    source(media="(min-width: 1801px)" type="image/jpeg" srcset=require(`images/${path}/2560/1.jpg`))
+    source(media="(min-width: 1201px)" type="image/jpeg" srcset=require(`images/${path}/1800/1.jpg`))
+    source(media="(min-width: 769px)" type="image/jpeg" srcset=require(`images/${path}/1200/1.jpg`))
+    source(media="(min-width: 481px)" type="image/jpeg" srcset=require(`images/${path}/768.jpg`))
+    source(media="(max-width: 480px)" type="image/jpeg" srcset=require(`images/${path}/320.jpg`))
+    img(src=require(`images/${path}/768.jpg`) alt="").parallax__image
+  picture(data-speed="0.18").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/2.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/2.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/2.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.4").parallax__layer
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/budda.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.6").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/4.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/4.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/4.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.65").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/5.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/5.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/5.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.8").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/6.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/6.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/6.png`))
+    img(src="" alt="").parallax__image

src/components/parallax/mountain-parallax.pug

@@ -0,0 +1,37 @@
+- var path = "parallax/mountain"
+.parallax
+  picture(data-speed="0.1").parallax__layer
+    source(media="(min-width: 1801px)" type="image/jpeg" srcset=require(`images/${path}/2560/1.jpg`))
+    source(media="(min-width: 1201px)" type="image/jpeg" srcset=require(`images/${path}/1800/1.jpg`))
+    source(media="(min-width: 769px)" type="image/jpeg" srcset=require(`images/${path}/1200/1.jpg`))
+    source(media="(min-width: 481px)" type="image/jpeg" srcset=require(`images/${path}/768.jpg`))
+    source(media="(max-width: 480px)" type="image/jpeg" srcset=require(`images/${path}/320.jpg`))
+    img(src=require(`images/${path}/768.jpg`) alt="").parallax__image
+  picture(data-speed="0.25").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/2.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/2.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/2.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.35").parallax__layer
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/balloon.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.38").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/4.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/4.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/4.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.42").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/5.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/5.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/5.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.45").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/6.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/6.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/6.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.45").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/7.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/7.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/7.png`))
+    img(src="" alt="").parallax__image

src/components/reviews/review.pug

@@ -0,0 +1,13 @@
+script(type="text/x-template" id="review")
+  .review
+    .review__content
+      .review__text
+        p {{review.text}}
+      .review__author
+        .user.user--horizontal
+          .user__avatar
+            .avatar.avatar--small
+              img(:src="review.photo").avatar__img
+          .user__data
+            .user__name {{review["author"]}}
+            .user__desc {{review["occ"]}}

src/components/reviews/reviews-content.pug

@@ -0,0 +1,29 @@
+script(type="text/x-template" id="reviews-content")
+  .container
+    .reviews__title
+      h2.section__title.reviews__title-text Что обо мне говорят
+      .reviews-slider__buttons.slider-btns.slider-btns--rounded
+        button(
+          type="button"
+          :disabled="prevBtnDisable"
+          @click.prevent="slide('prev')"
+        ).slider-btn.slider-btn--prev
+          +icon('short-arrow', 'slider-btn__icon')
+        button(
+          type="button"
+          :disabled="nextBtnDisable"
+          @click.prevent="slide('next')"
+        ).slider-btn.slider-btn--next
+          +icon('short-arrow', 'slider-btn__icon')
+    .reviews-slider
+      carousel(
+        ref="carousel"
+        :pagination-enabled="false"
+        :per-page-custom="[[320, 1], [577, 2]]"
+        @page-change="updateBtns"
+      ).revies-slider__list
+        slide(
+          v-for="review in reviews"
+          :key="review.id"
+        ).reviews__slider-item
+          review(:review="review")

src/components/reviews/reviews.pug

@@ -0,0 +1,5 @@
+include ./review
+include ./reviews-content
+
+section.reviews(id="reviews")
+  #reviews-component

src/components/skills/skill.pug

@@ -0,0 +1,16 @@
+script(type="text/x-template" id="skill")
+  .skill
+    svg(viewBox="0 0 100 100").skill__shape
+      circle(
+        cx="50"
+        cy="50"
+        r="40"
+      ).skill__circle.skill__circle--under
+      circle(
+        cx="50"
+        cy="50"
+        r="40"
+        ref="skill-percents"
+        stroke="url(#gradient)"
+      ).skill__circle.skill__circle--above
+    .skill__title {{title}}

src/components/skills/skills-list.pug

@@ -0,0 +1,14 @@
+include ./skills-row
+
+script(type="text/x-template" id="skills-list")
+  .skills__values-container
+    ul.skills__list
+      li.skills__item(
+        v-for="skillGroup in skillGroups"
+        :key="skillGroup.id"
+      )
+        skills-row(:skill-group="skillGroup")
+    svg(style="width: 0;height: 0;")
+      linearGradient(id="gradient" x1="0%" y1="0%" x2="100%" y2="0")
+        stop(offset="0%" stop-color="#9300e8")
+        stop(offset="100%" stop-color="#4a00ed")    

src/components/skills/skills-row.pug

@@ -0,0 +1,14 @@
+include ./skill
+
+script(type="text/x-template" id="skills-row")
+  .skills-row
+    h3.skills-row__title {{skillGroup.title}}
+    ul.skills-row__list
+      li.skills-row__item(
+        v-for="skill in skillGroup.skills"
+        :key="skill.id"
+      )
+        skill(
+          :title="skill.title"
+          :percent="skill.percent"
+        )

src/components/skills/skills.pug

@@ -0,0 +1,14 @@
+include ./skills-list
+
+section.skills(id="skills")
+  .container.skills__container
+    .skills__image
+      +image('decor/bag.jpg', 'skills__image-pic')
+    .skills__content
+      .skills__title
+        .skills__title-container
+          h2.skills__title-text Чем я могу быть полезен вам
+          .skills__title-content
+            p Этот сайт я сделал в рамках обучения в Школе онлайн образования LoftSchool. Чуть позже я освежу в нём свой контент. А пока посмотрите, как тут всё классно и красиво!
+      .skills__values
+        #skills-component