style.scss

@use "sass:math";

@font-face {
   font-family: "Sen";
   src: url(./Sen/Sen-Regular.ttf);
   font-weight: 400;
}

@font-face {
   font-family: "Sen";
   src: url(./Sen/Sen-Bold.ttf);
   font-weight: 700;
}

* {
   box-sizing: border-box;
   transition: all 0.3s ease;
}

body {
   margin: 0;
   font-family: Sen, sans-serif;
   color: white;
   background-color: black;
   display: flex;
   flex-direction: column;
   align-items: center;

   > * {
      width: 100%;
   }
}

html {
   scroll-behavior: smooth !important;
}

a {
   color: inherit;
   text-decoration: none;
}

button {
   cursor: pointer;
}

h1 {
   font-size: 42px;
}

h2 {
   font-size: 32px;
}

h3 {
   font-size: 24px;
}

section {
   padding: 30px;
   max-width: 1440px;
}

.semi-transparent {
   opacity: 0.5;
}

.gradient-strip {
   width: 100%;
   height: 10px;
   background-color: #5221e6;
   background: linear-gradient(90deg, #5221e6, #8d21e6);
}

.highlight {
   color: #a6b0bd;
}

header,
footer {
   background-color: #181823;
}

$nav-height: 60px;
$menu-button-height: $nav-height;

header {
   background-image: url(./img/milad-fakurian-nY14Fs8pxT8-unsplash.jpg);
   background-size: cover;
   background-position: center;
   // min-height: 100vh;

   nav {
      position: relative;
      z-index: 10;
      height: $nav-height;
      background-color: black;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      img.logo {
         height: $nav-height * 0.4;
         margin-left: 20px;
      }

      .right {
         height: 100%;

         .nav-links-container {
            .nav-links {
               margin: 0;

               a {
                  font-weight: 600;
                  font-size: smaller;
                  text-decoration: none;
                  color: white;
                  height: 100%;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
               }
            }
         }

         @media screen and (max-width: 750px) {
            .nav-links-container {
               position: absolute;
               overflow: hidden;
               height: 0;
               width: 100%;
               top: $nav-height;
               left: 0;

               .nav-links {
                  width: 100%;
                  overflow: hidden;
                  position: absolute;
                  left: 0;
                  top: -180px;
                  padding: 0;
                  background-color: #181823;

                  li {
                     width: 100%;
                     height: 90px;
                     display: block;
                     border-bottom: #30303d 1px solid;

                     a {
                        width: 100%;
                        padding: 0 30px;
                     }

                     a:hover {
                        background-color: #1f1f2b;
                        color: #25c4c4;
                     }
                  }
               }
            }

            .menu-button {
               height: $menu-button-height;
               width: $menu-button-height;
               padding: 0;
               border: none;
               background-color: transparent;
               cursor: pointer;
               position: relative;

               div {
                  position: absolute;
                  background-color: #8491a0;
                  height: math.div($menu-button-height, 20);
               }

               div.first {
                  top: math.div($menu-button-height * 24, 60);
                  left: math.div($menu-button-height * 18, 60);
                  width: math.div($menu-button-height * 24, 60);
               }

               div.second {
                  top: math.div($menu-button-height * 33, 60);
                  left: math.div($menu-button-height * 24, 60);
                  width: math.div($menu-button-height * 18, 60);
               }
            }
         }

         @media screen and (min-width: 750px) {
            .nav-links-container {
               height: 100%;

               .nav-links {
                  height: 100%;

                  li {
                     display: inline-flex;
                     height: 100%;

                     a {
                        height: 100%;
                        padding: 20px;
                     }

                     a:hover {
                        color: #5221e6;
                        background-color: #161616;
                     }
                  }
               }
            }

            .menu-button {
               display: none;
            }
         }
      }

      @media screen and (min-width: 750px) {
         padding: 0 40px;
      }
   }

   @media screen and (max-width: 750px) {
      nav.menu-open {
         .right {
            .nav-links-container {
               height: 180px;

               .nav-links {
                  top: 0;
               }
            }

            .menu-button {
               div {
                  top: math.div($menu-button-height * 28, 60);
                  left: math.div($menu-button-height * 18, 60);
                  width: math.div($menu-button-height * 24, 60);
               }

               div.first {
                  transform: rotate(-135deg);
               }

               div.second {
                  transform: rotate(135deg);
               }
            }
         }
      }
   }

   .content {
      padding: 150px 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      @media screen and (min-width: 750px) {
         min-height: 700px;
         padding: 50px;
      }

      h1 {
         margin: 0;
      }

      p {
         font-size: 18px;
      }
   }
}

#skillset {
   p {
      color: #8491a0;
   }

   .intro {
      p {
         font-size: 18px;
      }
   }

   .skill {
      margin: 60px 0;

      img.skillset-icon {
         width: 40px;
      }

      p {
         font-size: 16px;
      }

      &:hover {
         img.skillset-icon {
            transform: scale(115%);
         }
      }

      ul.technologies {
         list-style-type: none;
         padding: 0;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         gap: 12px;

         li {
            margin: 0;
            border: 1px solid #3e464e;
            color: #a8b5c4;
            padding: 12px 16px;
            border-radius: 6px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;

            img {
               max-width: 24px;
               max-height: 24px;
            }

            &:hover {
               img {
                  transform: scale(120%);
               }
            }
         }
      }
   }
}

#projects {
   border-top: #181823 2px solid;

   a.project {
      display: block;
      background-color: #1f1f2b;
      margin: 50px 0;

      img {
         width: 100%;
      }

      .text {
         padding: 30px;

         h3 {
            margin: 0;
         }

         p {
            font-size: 18px;
            color: #8491a0;
         }
      }
   }

   a.project:hover {
      transform: scale(103%);

      .text {
         h3 {
            margin: 0 0 0 10px;
            color: #25c4c4;
         }

         p {
            color: #8491a0;
         }
      }
   }

   .button-container {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
      margin-bottom: 70px;

      a {
         position: relative;
         font-size: 18px;
         font-family: inherit;
         font-weight: 700;
         color: inherit;
         background-color: black;
         padding: 25px 35px;
         border: #5221e6 1px solid;

         .hover-shadow {
            height: 20px;
            border-radius: 40px;
            width: 100%;
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
         }
      }

      a:hover {
         background-color: #5221e6;
         transform: translateY(-6px);

         .hover-shadow {
            box-shadow: 0 0 50px 15px #5221e650;
         }
      }
   }
}

footer {
   padding: 70px 50px 50px 50px;
   text-align: center;

   .logo {
      img {
         height: 30px;
         margin: 10px;
      }
   }

   .social-links img {
      height: 20px;
      margin: 10px;
   }

   .copyright {
      color: #8491a0;

      a {
         color: #25c4c4;
      }
   }
}

.animate-slide-in {
   transform: translateX(-150px);
   opacity: 0;
   @extend %animate;
}

.animate-expand-in {
   transform: scale(60%);
   opacity: 0;
   @extend %animate;
}

.animate-slide-in.in-view {
   transform: translateX(0);
   opacity: 1;
}

.animate-expand-in.in-view {
   transform: scale(100%);
   opacity: 1;
}

%animate {
   transition-duration: 1s;
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@media screen and (min-width: 750px) {
   h1 {
      font-size: 72px;
   }

   section h2 {
      font-size: 55px;
   }

   #skillset {
      .intro {
         h2 {
            margin: 20px 0;
         }
      }

      .skills {
         margin: 30px 0;
         display: grid;
         grid-template-columns: 50% 50%;
      }
   }
}

@media screen and (min-width: 980px) {
   #skillset {
      display: grid;
      grid-template-columns: 33% 67%;
      padding: 48px 72px;

      .intro,
      .skill {
         margin: 20px;
      }
   }

   #projects {
      display: grid;
      grid-template-columns: 50% 50%;
      padding: 0 72px;

      .column {
         margin: 0;
         padding: 20px;
      }
   }
}