improved css and added some content

src/styles/home.scss

@@ -1,46 +1,96 @@
-main{
-    display: unset;
-    flex-direction: unset;
-    align-items: unset;
+main {
+  display: unset;
+  flex-direction: unset;
+  align-items: unset;
 }
 
 .lines {
-    background-image: url("/diagonal_lines_home.png");
-    background-size: cover;
-    background-repeat: repeat;
-    min-height: 75vh;
-    padding-inline: 10vw;
+  background-image: url("/diagonal_lines_home.png");
+  background-size: cover;
+  background-repeat: repeat;
+  min-height: 75vh;
+  padding-inline: 10vw;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 
-    .home-main-box {
-        padding-block: 7vh;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+  .home-main-box {
+    padding-block: 7vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100vw;
 
-        .home-title-box {
-            justify-self: flex-start;
-            margin-right: 5vw;
+    .home-title-box {
+      justify-self: flex-start;
+      margin-right: 5vw;
 
-            h1 {
-                font-size: 72px;
-            }
+      h1 {
+        font-size: 72px;
+        color: #e6e6e6;
+        background: linear-gradient(to right, #e6e6e6 0, white 8%, #e6e6e6 16%);
+        background-position: 0;
+        background-color: #e6e6e6;
+        background-repeat: no-repeat;
+        background-size: 500px;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: shine 5s infinite linear;
+        animation-fill-mode: forwards;
+        text-size-adjust: none;
+      }
 
-            .home-title {
-                margin: 0;
-                color: #FFF;
-                font-family: "Tanker-Regular";
-            }
-
-            .using-engines {
-                width: 21vw;
-            }
-        }
-    }
-
-    .content {
-        justify-self: flex-end;
+      .home-title {
         margin: 0;
-        margin-top: 2vh;
-        max-width: 500px;
+        color: #fff;
+        font-family: "Tanker-Regular";
+      }
+
+      .using-engines {
+        width: 21vw;
+      }
     }
-}
+  }
+
+  .content {
+    justify-self: flex-end;
+    margin: 0;
+    margin-top: 2vh;
+    max-width: 500px;
+    &p {
+      z-index: 2;
+    }
+    .avatar {
+      position: absolute;
+      top: 0%;
+      right: 0%;
+      width: 4vw;
+      height: 4vw;
+      border-radius: 2.5vw;
+      background-size: cover;
+      transition: opacity 0.5s linear;
+      background-image: url("/img/avatar.webp");
+      z-index: 1;
+      &.portrait {
+        top: 5%;
+        right: 5%;
+        background-image: url("/img/portrait.webp");
+        &:hover {
+          opacity: 100;
+        }
+      }
+      &:hover {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@keyframes shine {
+  0% {
+    background-position: -500px;
+  }
+  100% {
+    background-position: 500px;
+  }
+}

src/styles/main.scss

@@ -25,7 +25,7 @@ main {
 .content {
   display: flex;
   flex-direction: column;
-  position: inherit;
+  position: relative;
   align-self: center;
   background-color: $highlight-primary;
   border-radius: 25px;
@@ -42,10 +42,14 @@ main {
   background-color: $second-content-clr;
   border-radius: 25px;
   border: 1px solid lighten($second-content-clr, 16%);
-  width: 30vw;
+  min-width: 30vw;
   padding: 2vh;
+  padding-bottom: 30%;
   margin-inline: 10vw;
   margin-bottom: 11vh;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: 100% auto;
 }
 
 td {
@@ -53,6 +57,11 @@ td {
   border-color: #ffffff00;
 }
 
+table{
+  overflow: scroll;
+  display: block;
+}
+
 b {
   font-family: "Satoshi-Bold";
   color: $accent;
@@ -70,7 +79,7 @@ a {
       no-repeat center;
     mask: $external_svg
       no-repeat center;
-    background-color: $link; /* This will color the SVG */
+    background-color: $link; // This will color the SVG
   }
   &.social::after {
     content: none;
@@ -138,3 +147,8 @@ h3 {
 svg {
   margin-bottom: -2px;
 }
+
+img{
+  max-width: 100%;
+  max-height: 100%;
+}