Merge pull request #1 from Dual-Ice/week1

Week1

package.json

@@ -10,6 +10,13 @@
   },
   "keywords": [],
   "author": "Maxim Stogniy <[email protected]>",
+  "contributors": [
+    {
+      "name": "Stelios Baglaridis",
+      "email": "[email protected]",
+      "url": "https://psd-to.site"
+    }
+  ],
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.2.2",

src/components/about.pug

@@ -0,0 +1,29 @@
+section.about(id="about")
+  .container.about__container
+    .about__content
+      .about__user
+        .user
+          .user__avatar
+            .avatar
+              +image('userfiles/user.jpg', 'avatar__img')
+          .user__info
+            - 
+              var info = [
+                ["Проживаю", "Петропавловск-Камчатский"],
+                ["Возраст", "27 лет"],
+                ["Родился", "8 ноября 1992"]
+              ];
+            table.user__data
+              tbody.user__data-body  
+                each row in info
+                  tr.user__data-row
+                    td.user__data-field #{row[0]}
+                    td.user__data-value #{row[1]}
+      .about__text
+        .about__text-main
+          .about__intro Привет, меня зовут
+          h2.about__title #{username}
+          .about__desc
+            p Я занимаюсь разработкой современных сайтов и приложений. Мне нравится делать интересные и современные проекты.
+        .about__ps
+          | Этот сайт я сделал в рамках обучения в Школе онлайн образования LoftSchool. Чуть позже я освежу в нём свой контент. А пока посмотрите, как тут всё классно и красиво!

src/components/contacts.pug

@@ -0,0 +1,29 @@
+section.contacts(id="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
+          .form__row.form__row--more-margin
+            label.form__block
+              .form__block-label Сообщение к письму
+              .form__block-wrap.form__block-wrap--align-top
+                +icon('message','form__block-icon')
+                .form__block-field
+                  textarea(placeholder="Требуется ваша помощь в создании сайта. \nИнтересуют сроки и цена вопроса" rows="3").form__block-input.form__block-textarea
+          .form__row
+            .form__buttons
+              button(type="submit").custom-btn Отправить

src/components/footer.pug

@@ -0,0 +1,20 @@
+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

src/components/hero.pug

@@ -0,0 +1,15 @@
+section.hero.fullscreen-section(id="hero")
+  .container.hero__container
+    header.header
+      .header__logo
+        a.logo(href="#") MC
+      .header__menu
+        +menu
+      .header__links
+        +socials
+    .hero__content
+      .user-info
+        h1.user-info__desc !{desc}
+        .user-info__username #{username}
+    .hero__btns
+      a(href="#about").scroll-down Скролл

src/components/reviews.pug

@@ -0,0 +1,25 @@
+section.reviews(id="reviews")
+  .container
+    .reviews__title
+      h2.section__title.reviews__title-text Что обо мне говорят
+      .reviews-slider__buttons.slider-btns.slider-btns--rounded
+        button(type="button").slider-btn.slider-btn--prev
+          +icon('short-arrow', 'slider-btn__icon')
+        button(type="button").slider-btn.slider-btn--next
+          +icon('short-arrow', 'slider-btn__icon')
+    .reviews-slider
+      ul.revies-slider__list
+        - for (var i = 0; i < 2; i++)
+          li.reviews__slider-item
+            .review
+              .review__content
+                .review__text
+                  p Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam inventore eveniet nulla quaerat accusantium ratione, assumenda itaque. Et veniam omnis fuga sint repellat quaerat alias eveniet nobis aliquam dolor.
+                .review__author
+                  .user.user--horizontal
+                    .user__avatar
+                      .avatar.avatar--small
+                        +image('userfiles/user.jpg', 'avatar__img')
+                    .user__data
+                      .user__name Ковальчук Дмитрий
+                      .user__desc Основатель Loftschool

src/components/skills.pug

@@ -0,0 +1,34 @@
+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__values-container
+          ul.skills__list
+            - 
+              var skills = [
+                ['Front-end', ['HTML5', 'CSS3', 'Javascript', 'Jquery, Vue.js']],
+                ['Workflow', ['GIT', 'Terminal', 'Gulp', 'Webpack']],
+              ]
+            each item in skills 
+              li.skills__row
+                .skills__row-items
+                  h3.skills__row-title #{item[0]}
+                  ul.skills_row-list
+                    each skill in item[1]
+                      li.skills__row-item
+                        .skill
+                          svg(viewBox="0 0 100 100").skill__shape
+                            circle(r="40" cx="50" cy="50").skill__circle.skill__circle--under
+                            circle(r="40" cx="50" cy="50" stroke="url(#gradient)").skill__circle.skill__circle--above
+                          .skill__title #{skill}
+            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/works.pug

@@ -0,0 +1,30 @@
+section.works(id="works")
+  .container
+    h2.section__title.works__title Мои работы
+    .works__content
+      .works-slider
+        .works-slider__images
+          .works-slider__images-wrap
+            +image('content/works/1.jpg', 'works-slider__image')
+            ul.works-slider__previews
+              - var previews = [1,2,3,4]
+              each preview in previews
+                li.works-slider__preview-item(class=preview == 1 ? 'active': '')
+                  button(type="button").works-slider__preview-btn
+                    +image(`content/works/${preview}.jpg`, 'works-slider__preview-img')
+            .works-slider__buttons.slider-btns
+              button(type="button").slider-btn.slider-btn--prev
+                +icon('short-arrow', 'slider-btn__icon')
+              button(type="button").slider-btn.slider-btn--next
+                +icon('short-arrow', 'slider-btn__icon')
+        .works-slider__data
+          ul.works-slider__tags
+            - var tags = ['HTML', 'CSS', 'Javascript']
+            each item in tags
+              li.works-slider__tags-item
+                .tag #{item}
+          .works-slider__title Сайт школы образования
+          .works-slider__desc
+            p Этот парень проходил обучение веб-разработке не где-то, а в LoftSchool! 2 месяца только самых тяжелых испытаний и бессонных ночей!
+          .works-slider__link
+            a.custom-link(href="#") Посмотреть сайт

src/index.pug

@@ -9,7 +9,19 @@ html(lang="en")
     title Portfolio | main page
   body
     .wrapper
-      .maincontent
-        +image('content/user.jpg', 'user-pic')
-        +icon('link', 'link-class')
-        .icon-bg
+      .welcome
+        +paralax('mountain-baloon')
+        include ./components/hero
+        include ./components/about
+      +triangles('bottom')
+      .features
+        include ./components/skills
+        include ./components/works
+      +triangles('top', 'triangles--bottom')
+      .feedback
+        +paralax('budda')
+        include ./components/reviews
+        include ./components/contacts
+
+      include ./components/footer
+

src/mixins.pug

@@ -1,7 +1,53 @@
+- var username = "Максим Стогний"
+- var desc = "Личный сайт <br/> веб-разработчика"
 mixin icon(name, className)
   - var icon = require(`images/icons/${name}.svg`);
   svg(class=className viewBox=icon.viewBox preserveAspectRatio="none")
     use(xlink:href=icon.url)
 
 mixin image(path, className)
-  img(src=require(`images/${path}`) class=className)
+  img(src=require(`images/${path}`) class=className)
+
+mixin menu
+  nav.nav
+    - 
+      var menu = [
+        ['Главная', 'hero'],
+        ['Обо мне', 'about'],
+        ['Навыки', 'skills'],
+        ['Работы', 'works'],
+        ['Отзывы', 'reviews'],
+        ['Связаться', 'contacts']
+      ];
+    ul.nav__list
+      each item in menu
+        li.nav__item
+          a(href=`#${item[1]}`).nav__link #{item[0]}
+
+mixin socials(modifyClass)
+  - var icons = ['inst', 'vk', 'github'];
+    .social(class=modifyClass)
+      ul.social__list
+        each item in icons
+          li.social__item
+            a(href="#" target="_blank").social__link
+              +icon(item, 'social__icon')
+
+mixin triangles(direction, className)
+  .triangles(class=className)
+    svg(viewBox="0 0 1000 100" preserveAspectRatio="none").triangles__item
+      if direction == 'bottom'
+        polygon(points="0,0 0,100 1000,100")
+      else
+        polygon(points="0,0 1000,0 1000,100")
+    svg(viewBox="0 0 1000 100" preserveAspectRatio="none").triangles__item
+      if direction == 'bottom'
+        polygon(points="0,100 1000,100 1000,0")
+      else
+        polygon(points="0,0 0,100 1000,0")
+
+mixin paralax(image)
+  .paralax
+    .paralax__container
+      .paralax__image
+        +image(`bg/${image}.jpg`, 'paralax__image-pic')