improved design and made responsive

src/styles/_var.scss

@@ -22,7 +22,11 @@
   font-style: normal;
 }
 
-$primary: #1c1427;
+$primary: #1C1B20;
+$secondary: #5f5d630f;
+$highlight: #332f3c;
 $accent: #7eca9c;
 $link: #ccffbd;
-$highlight-primary: #40394a;
+
+$responsive-width: 1226px;
+$responsive-width-secondary: 750px;

src/styles/home.scss

@@ -1,21 +1,24 @@
+@import "./_var.scss";
+
 main {
   display: unset;
   flex-direction: unset;
   align-items: unset;
+  max-width: 100%;
 }
 
 .lines {
-  background-color: #1c1427;
+  background-color: $secondary;
   background-image: 
     repeating-linear-gradient(
       -45deg, 
       transparent, 
       transparent 2rem,
-      #1e162a 2rem,
-      #1e162a 4rem
+      $primary 2rem,
+      $primary 4rem
     );
   background-size: 100vw 99.3vh;
-  animation: barberpole 8s linear infinite;
+  animation: barberpole 11s linear infinite;
   background-repeat: repeat;
   min-height: 75vh;
   padding-inline: 10vw;
@@ -24,7 +27,6 @@ main {
   justify-content: space-evenly;
 
   .home-main-box {
-    padding-block: 7vh;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -33,9 +35,8 @@ main {
     .home-title-box {
       justify-self: flex-start;
       margin-right: 5vw;
-
       h1 {
-        font-size: 72px;
+        font-size: 110px;
         color: #e6e6e6;
         background: linear-gradient(to right, #e6e6e6 0, white 8%, #e6e6e6 16%);
         background-position: 0;
@@ -48,15 +49,34 @@ main {
         animation-fill-mode: forwards;
         text-size-adjust: none;
       }
-
+      h2{
+        font-size: 35px;
+      }
       .home-title {
         margin: 0;
         color: #fff;
         font-family: "Tanker-Regular", "Arial";
       }
 
-      .using-engines {
-        width: 21vw;
+      .continue {
+        margin-top: 100px;
+        padding: 15px 50px;
+        font-size: 22px;
+        &:hover{
+          svg{
+            transition: margin-left 0.2s;
+            margin-left: 30px !important;
+          }
+          &{
+            transition: padding-right 0.2s;
+            padding-right: 38px;
+            cursor: pointer;
+          }
+        }
+        .icon{
+          margin-left:18px; 
+          margin-bottom:-9px;
+        }
       }
     }
   }
@@ -65,24 +85,25 @@ main {
     justify-self: flex-end;
     margin: 0;
     margin-top: 2vh;
-    max-width: 500px;
+    max-width: 528px;
     &p {
       z-index: 2;
     }
     .avatar {
       position: absolute;
+      box-shadow: 0px 4px 4px 0px #00000040;
       top: 0%;
       right: 0%;
-      width: 4vw;
-      height: 4vw;
-      border-radius: 2.5vw;
+      width: 80px;
+      height: 80px;
+      border-radius: 40px;
       background-size: cover;
       transition: opacity 0.5s linear;
       background-image: url("/img/avatar.webp");
       z-index: 1;
       &.portrait {
-        top: 5%;
-        right: 5%;
+        top: 11%;
+        right: 10%;
         background-image: url("/img/portrait.webp");
         &:hover {
           opacity: 100;
@@ -90,11 +111,81 @@ main {
       }
       &:hover {
         opacity: 0;
+        box-shadow: none;
       }
     }
   }
 }
 
+@media (max-width: $responsive-width) {
+  .icon{
+    margin-left:18px; 
+    margin-bottom:-11px;
+  }
+  .lines {
+    flex-direction: column;
+
+    .home-main-box {
+      flex-direction: column;
+      align-items: center;
+
+      .home-title-box {
+        margin-right: 0;
+        margin-bottom: 2vh;
+        text-align: center;
+        h1 {
+          font-size: 75px;
+        }
+        h2 {
+          font-size: 25px;
+        }
+        .continue {
+          margin-top: 20px;
+          padding: 10px 30px;
+          padding-bottom: 15px;
+          font-size: 18px;
+
+          &:hover{
+            svg{
+              transition: margin-left 0.2s;
+              margin-left: 30px !important;
+            }
+            &{
+              transition: padding-right 0.2s;
+              padding-right: 18px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      .content {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        justify-self: center;
+      }
+    }
+  }
+  .lines{
+    margin-bottom: 50px;
+  }
+}
+
+@media (max-width: $responsive-width-secondary){
+  .avatar {
+    &.portrait {
+      left: 50%;
+      transform: translate(-50%, 0);
+      right: 0 !important;
+      top: 5% !important;
+    }
+  }
+  .content {
+    p{
+      margin-top: 120px;
+    }
+  }
+}
+
 @keyframes shine {
   0% {
     background-position: -200px;
@@ -108,4 +199,4 @@ main {
   100% {
     background-position: 100% 100%;
   }
-}
+}

src/styles/main.scss

@@ -34,9 +34,9 @@ main {
   flex-direction: column;
   position: relative;
   align-self: center;
-  background-color: $highlight-primary;
+  background-color: $highlight;
   border-radius: 25px;
-  border: 1px solid lighten($highlight-primary, 12%);
+  border: 1px solid lighten($highlight, 12%);
   box-shadow: 0px 4px 4px 0px #00000040;
   padding: 2vw;
   width: 65vw;
@@ -84,10 +84,6 @@ a {
     mask: $external_svg no-repeat center;
     background-color: $link; // This will color the SVG
   }
-  &.social::after {
-    content: none;
-    display: unset;
-  }
 }
 
 figure {
@@ -120,13 +116,15 @@ figure {
       }
     }
   }
-  position: relative;
-  overflow: scroll;
-  display: grid;
-  margin: 0;
-  max-width: 50vw;
-  background-color: #282a36;
-  border-radius: 20px;
+  & {
+    position: relative;
+    overflow: scroll;
+    display: grid;
+    margin: 0;
+    max-width: 50vw;
+    background-color: #282a36;
+    border-radius: 20px;
+  }
   .frame.is-terminal .header::before {
     background-color: gray !important;
   }
@@ -161,8 +159,7 @@ button {
   $button-color: #42b971;
   padding-block: 10px;
   padding-inline: 20px;
-  margin: 10px;
-  border-radius: 25px;
+  border-radius: 50px;
   font-family: "Satoshi-Bold";
   background-color: $button-color;
   border: 1px solid lighten($button-color, 12%);
@@ -179,4 +176,10 @@ button {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+@media (max-width: $responsive-width) {
+  .content{
+    min-width: 65vw !important;
+  }
 }

src/styles/navbar.scss

@@ -28,7 +28,7 @@ header {
                 color: lighten($accent,30);
                 text-decoration: none;
                 text-align: center;
-                margin-inline: .9vw;
+                margin-inline: 8px;
                 transition: color 0.5s;
                 font-family: "Satoshi-Bold";
                 &:hover{
@@ -48,19 +48,21 @@ header {
     }
 
     .social {
-        width: 22px;
-        margin-inline: .2vw;
-    }
-}
-
-.not-responsive-warning{
-    display: none;
-}
-
-@media (max-width: 1000px){
-    .not-responsive-warning{
-        display: flex;
-        font-family: "Satoshi-Bold";
-        padding-bottom: 10px;
+        margin-top: -15px;
+        a{
+            color: white;
+            transition: color 0.5s;
+            .icon{
+                margin: 0;
+                margin-bottom: -5px;
+            }
+            &:hover{
+                color: $accent !important;
+            }
+            &[target="_blank"]::after {
+                content: none;
+                display: unset;
+            }
+        }
     }
 }