Final styling

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

@@ -1,4 +1,4 @@
-section.about
+section.about(id="about")
   .container.about__container
     .about__content
       .about__user

src/components/contacts.pug

@@ -1,4 +1,4 @@
-section.contacts
+section.contacts(id="contacts")
   .container
     h2.section__title.contacts__title Связаться со мной
     .contacts__form

src/components/hero.pug

@@ -1,4 +1,4 @@
-section.hero.fullscreen-section
+section.hero.fullscreen-section(id="hero")
   .container.hero__container
     header.header
       .header__logo
@@ -12,4 +12,4 @@ section.hero.fullscreen-section
         h1.user-info__desc !{desc}
         .user-info__username #{username}
     .hero__btns
-      a(href="#").scroll-down Скролл
+      a(href="#about").scroll-down Скролл

src/components/reviews.pug

@@ -1,4 +1,4 @@
-section.reviews
+section.reviews(id="reviews")
   .container
     .reviews__title
       h2.section__title.reviews__title-text Что обо мне говорят

src/components/skills.pug

@@ -1,4 +1,4 @@
-section.skills
+section.skills(id="skills")
   .container.skills__container
     .skills__image
       +image('decor/bag.jpg', 'skills__image-pic')

src/components/works.pug

@@ -1,4 +1,4 @@
-section.works
+section.works(id="works")
   .container
     h2.section__title.works__title Мои работы
     .works__content
@@ -9,7 +9,7 @@ section.works
             ul.works-slider__previews
               - var previews = [1,2,3,4]
               each preview in previews
-                li.works-slider__preview-item
+                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

src/index.pug

@@ -19,7 +19,7 @@ html(lang="en")
         include ./components/works
       +triangles('top', 'triangles--bottom')
       .feedback
-        +paralax('budda', 'paralax--features')
+        +paralax('budda')
         include ./components/reviews
         include ./components/contacts
 

src/mixins.pug

@@ -10,11 +10,19 @@ mixin image(path, className)
 
 mixin menu
   nav.nav
-    - var menu = ['Главная', 'Обо мне', 'Навыки', 'Работы', 'Отзывы', 'Связаться'];
+    - 
+      var menu = [
+        ['Главная', 'hero'],
+        ['Обо мне', 'about'],
+        ['Навыки', 'skills'],
+        ['Работы', 'works'],
+        ['Отзывы', 'reviews'],
+        ['Связаться', 'contacts']
+      ];
     ul.nav__list
       each item in menu
         li.nav__item
-          a(href="#").nav__link #{item}
+          a(href=`#${item[1]}`).nav__link #{item[0]}
 
 mixin socials(modifyClass)
   - var icons = ['inst', 'vk', 'github'];
@@ -38,8 +46,8 @@ mixin triangles(direction, className)
       else
         polygon(points="0,0 0,100 1000,0")
 
-mixin paralax(image, className)
-  .paralax(class=className)
+mixin paralax(image)
+  .paralax
     .paralax__container
       .paralax__image
         +image(`bg/${image}.jpg`, 'paralax__image-pic')

src/styles/blocks/custom-btn.pcss

@@ -6,4 +6,8 @@
   font-size: 18px;
   font-weight: 700;
   padding: 30px 120px;
+
+  &:hover {
+    background: linear-gradient(to right, #bb00ff 0%, #5900ff 100%);
+  }
 }

src/styles/blocks/features.pcss

@@ -2,4 +2,5 @@
   position: relative;
   padding-top: 150px;
   background: $white;
+  padding-bottom: 120px;
 }

src/styles/blocks/form.pcss

@@ -35,7 +35,7 @@
   opacity: .3;
   font-weight: 600;
   margin-bottom: 20px;
-  margin-left: 50px;
+  margin-left: 45px;
 }
 
 .form__block-wrap {
@@ -53,7 +53,7 @@
   height: 30px;
   fill: currentColor;
   opacity: .3;
-  margin-right: 20px;
+  margin-right: 15px;
 }
 
 .form__block-field {

src/styles/blocks/nav.pcss

@@ -5,6 +5,16 @@
 .nav__item {
   margin-right: 50px;
 
+  &:hover,
+  &:active {
+    font-weight: 600;
+  }
+
+  &:active {
+    border-bottom: 3px solid $main;
+    color: $main;
+  }
+
   &:last-child {
     margin-right: 0;
   }

src/styles/blocks/paralax.pcss

@@ -4,10 +4,8 @@
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 1800px;
-
-  &--features {
-    top: 48.6%
-  }
+  width: 100%;
+  height: 100%;
 }
 
 .paralax__image-pic {

src/styles/blocks/reviews.pcss

@@ -1,7 +1,7 @@
 .reviews {
   position: relative;
-  margin-bottom: 145px;
-  padding-top: 165px;
+  margin-bottom: 155px;
+  padding-top: 230px;
 }
 
 .reviews__title {

src/styles/blocks/slider-btn.pcss

@@ -6,6 +6,13 @@
   outline: none;
   border: none;
 
+  &:hover {
+    background-color: #5500f2;
+    .slider-btn__icon {
+      opacity: 1;
+    }
+  }
+
   &--prev {
     .slider-btn__icon {
       transform: rotate(90deg);

src/styles/blocks/socials.pcss

@@ -14,6 +14,12 @@
       border-radius: 50%;
       opacity: .3;
 
+      &:hover {
+        .social__icon {
+          fill: currentColor;
+        }
+      }
+
       &:last-child {
         margin-right: 0;
       }
@@ -28,6 +34,12 @@
 .social__item {
   margin-right: 40px;
 
+  &:hover {
+    .social__icon {
+      fill: $main;
+    }
+  }
+
   &:last-child {
     margin-right: 0;
   }

src/styles/blocks/triangles.pcss

@@ -6,6 +6,7 @@
 
   &--bottom {
     margin-top: 0;
+    margin-bottom: -89px;
 
     .triangles__item {
       height: 90px;

src/styles/blocks/works-slider.pcss

@@ -73,16 +73,38 @@
 
 .works-slider__preview-item {
   height: 100px;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: transparent;
+    z-index: 5;
+  }
+
+  &.active {
+    &:after {
+      outline: 3px solid #dc9322;
+    }
+  }
+
 
-  &.active,
   &:hover {
-    outline: 3px solid #dc9322;
+    &::after {
+      outline: 3px solid #dc9322;
+      background-color: rgba(85, 0, 242, 0.3);
+    }
   }
 }
 
 .works-slider__preview-btn {
   display: block;
   height: 100%;
+  width: 100%;
   outline: none;
   border: none;
   padding: 0;
@@ -99,40 +121,6 @@
   right: 0;
 }
 
-.works-slider__button {
-  width: 50px;
-  height: 50px;
-  background: #353e4e;
-  padding: 0;
-  outline: none;
-  border: none;
-
-  &:hover {
-    .works-slider__button-icon {
-      opacity: 1;
-    }
-  }
-
-  &--prev {
-    .works-slider__button-icon {
-      transform: rotate(90deg);
-    }
-  }
-
-  &--next {
-    .works-slider__button-icon {
-      transform: rotate(-90deg);
-    }
-  }
-}
-
-.works-slider__button-icon {
-  width: 10px;
-  height: 10px;
-  opacity: .3;
-  fill: $white;
-}
-
 .works-slider__link {
   font-size: 18px;
   font-weight: 700;

src/styles/blocks/works.pcss

@@ -1,7 +1,3 @@
-.works {
-  padding-bottom: 120px;
-} 
-
 .works__title {
   margin-bottom: 90px;
 }

src/styles/variables.json

@@ -8,6 +8,7 @@
   "main": "#5500f2",
   "font": "#464d62",
   "footer": "#252830",
-  "href": "#4b6f47",
-  "white": "#fff"
+  "href": "#586ed3",
+  "white": "#fff",
+  "tag": "#859ec2"
 }

webpack.config.js

@@ -9,7 +9,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = (env, argv) => {
   const isProductionBuild = argv.mode === "production";
-  const publicPath = '/';
+  const publicPath = '/stogniy-ls/';
 
   const pcss = {
     test: /\.(p|post|)css$/,