Update style.css

style.css

@@ -8,6 +8,7 @@ body{
    text-align: left;
    font-family: "open sans", sans-serif;
    scroll-behavior: smooth;
+   overflow-x: hidden;
    --theme1: #3498db;
    --theme2: #2980b9;
    --background: #181818;
@@ -28,6 +29,56 @@ body{
      margin: auto;
    }
 
+   /* Loading screen & effects*/
+   #loadingScreen{
+     display: flex;
+     background: var(--theme1);
+     width: 100%;
+     height: 100vh;
+     position: fixed;
+     z-index: 1001;
+     justify-content: center;
+     align-items: center;
+     text-align: center;
+   }
+
+   #loader{
+     width: 60px;
+     height: 60px;
+     background: none;
+     border: 8px solid #fff;
+     border-radius: 50%;
+     border-top-color: transparent;
+     border-style: dotted;
+     animation: loading 1000ms infinite;
+   }
+
+   @keyframes loading{
+     from{
+       transform: rotate(0deg);
+     }
+     to{
+       transform: rotate(360deg);
+     }
+   }
+
+   .loadEffect{
+     background: #eee;
+     background-image: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 33%, rgba(238,238,238,1) 62%, rgba(221,221,221,1) 100%);;
+     background-size: 400%;
+     animation: loadEffect 1500ms infinite;
+     color: transparent;
+   }
+
+   @keyframes loadEffect{
+     from{
+       background-position: 100%;
+     }
+     to{
+       background-position: 0;
+     }
+   }
+
    /* Navbar */
    #navbar{
      width: 100%;
@@ -181,30 +232,76 @@ body{
      max-width: 80%;
    }
 
+   .socialTab button{
+     width: 80%;
+     height: auto;
+     min-height: 40px;
+     margin: var(--margin);
+     background: var(--theme2);
+     color: #fff;
+     border: 2px solid #fff;
+     border-radius: var(--borderRadius);
+     font-size: 1rem;
+   }
+
+   .socialTab button:hover{
+     background: var(--theme1);
+   }
+
+   #insta1Container{
+     width: 100%;
+     height: auto;
+     margin: auto;
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+     flex-grow: 1;
+     justify-content: space-around;
+     align-content: center;
+     align-items: center;
+   }
+
+   #insta1Container div{
+     width: 50%;
+   }
+
    #insta2Container{
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
+     flex-grow: 1;
      justify-content: space-around;
      align-content: stretch;
      align-items: stretch;
    }
 
+   #insta2Container div{
+     width: 100%;
+     align-self: center;
+   }
+
+   #insta2Container div:nth-child(1){
+     margin: auto auto auto 10%;
+   }
+
    #insta2Container img{
-     width: 50%;
+     width: 70%;
+     margin: auto 20%;
      border-radius: var(--borderRadius);
      transition: all 300ms linear;
+     user-select: none;
    }
 
    #insta2ImgContainer{
-     width: 80%;
+     width: 100%;
      height: auto;
-     margin: 10px 10%;
+     margin: 0;
      display: flex;
      flex-direction: row;
-     flex-wrap: nowrap;
+     flex-wrap: wrap;
+     flex-grow: 1;
      justify-content: space-around;
      align-content: center;
      align-items: baseline;
@@ -213,15 +310,45 @@ body{
    #insta2ImgContainer img{
      width: 30%;
      height: auto;
-     flex-shrink: 1;
+     margin: var(--margin) auto;
      border-radius: var(--borderRadius);
      transition: all 300ms linear;
+     user-select: none;
    }
 
    #insta2ImgContainer img:hover, #socialInstagram2 img:hover{
      border-radius: 50%;
    }
 
+   #githubContainer{
+     width: 100%;
+     height: auto;
+     margin: auto;
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+     flex-grow: 1;
+     justify-content: space-around;
+     align-content: center;
+     align-items: center;
+   }
+
+   #githubContainer div{
+     width: 50%;
+     align-self: center;
+     align-content: center;
+   }
+
+   #githubContainer div:nth-child(2){
+     text-align: center;
+   }
+
+   #githubContainer img{
+     width: 100%;
+     height: auto;
+     user-select: none;
+   }
+
    /* Project Section */
    #projects{
      margin: auto;
@@ -559,6 +686,19 @@ body{
        margin: 5%;
      }
 
+     #insta2Container{
+       flex-wrap: wrap;
+     }
+
+     #insta2Container img{
+       width: 100%;
+       margin: var(--margin) 10%;
+     }
+
+     #insta1Container div, #insta2ImgContainer img, #githubContainer div{
+       width: 100%;
+     }
+
      /* Projects Section */
      #projectRow2{
        padding-top: 0;