Update styles.css

styles.css

@@ -6,9 +6,11 @@
   --text-color-2: rgba(214, 255, 127, 1);
   --headline-color: white;
 }
+
 html {
   scroll-behavior: smooth;
 }
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -20,41 +22,44 @@ body {
   background-color: var(--bg-color);
   text-align: center;
   font-family: "Work Sans", sans-serif;
-  /* remove scroll bar and disable scroll */
-  /* overflow: hidden; */
   color: var(--font-color);
 }
-h1,
-h2,
-h3 {
+
+h1, h2, h3 {
   font-family: "Montserrat", sans-serif;
 }
+
 h1 {
   font-size: 36px;
   color: var(--headline-color);
   animation: fadeInLeft 1s ease;
 }
+
 h2 {
   color: var(--font-color);
   font-weight: 900;
 }
+
 h3 {
   color: var(--text-color-1);
 }
+
 a {
   color: var(--link-color);
   text-decoration: none;
 }
+
 p {
   color: var(--font-color);
   font-size: 14px;
   line-height: 1.1rem;
 }
+
 ul {
   list-style: none;
 }
 
-/* NAVIGATION */
+/* Navigation */
 nav {
   position: fixed;
   top: 0;
@@ -64,30 +69,31 @@ nav {
   z-index: 6;
   width: 100%;
 }
+
 nav ul {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
-  justify-content: center;
   margin: 0 1rem;
 }
+
 nav li {
   display: block;
 }
+
 nav li a {
   display: block;
   text-align: center;
   padding: 1rem;
   font-size: 13px;
   color: #fff;
 }
+
 nav ul li:nth-child(1) {
   justify-self: start;
   margin-right: 2rem;
 }
 
-/* HOME */
-
-/* edit this to center the contents */
+/* Main Section */
 main {
   padding: 0 10vw;
   display: flex;
@@ -98,35 +104,29 @@ main {
 
 .img-info-container {
   display: flex;
-  flex-direction: row;
   justify-content: center;
   gap: 0.7rem;
 }
+
 .img-container {
   display: flex;
   justify-content: center;
   animation: fadeInUp 1s ease;
-  /* padding-right: 0px;
-  background-color: rgb(64, 68, 105);
-  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */
 }
 
-/* .img-container:hover{
-  padding: 5px 5px 5px 50px;
-} */
 .img-container img {
   z-index: 1;
 }
+
 .info-container {
   display: flex;
   flex-direction: column;
   justify-content: end;
   position: relative;
 }
 
-/* SOCIAL SVG CONTAINER */
+/* Social SVG Container */
 .social-container {
-  /* transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */
   position: absolute;
   top: 0px;
   right: -20px;
@@ -137,28 +137,18 @@ main {
   background-color: var(--bg-color);
 }
 
-/* .social-container:hover{
-  background-color: rgb(64, 68, 105);
-  padding-left: 100px;
-
-} */
-
 main hr {
   display: block;
   height: 1px;
   border: 0;
   width: 0;
   border-top: 1px solid #cdced5;
   position: absolute;
-
   bottom: 8px;
-
   animation: slide-in 1s cubic-bezier(0.42, 0, 1, 1) forwards;
 }
 
 .user-bio {
-  /* margin-top: 4rem;
-  margin-bottom: 2rem; */
   opacity: 0;
   animation: fadeInUp 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1s forwards;
 }
@@ -168,12 +158,10 @@ main hr {
   background-color: #838596;
   opacity: 0;
   border-radius: 3px;
-  filter: drop-shadow(0 0 0 rgba(54, 54, 54, 0.2));
   transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1);
-  transform-origin: right;
-  will-change: filter;
   animation: dropShadow 1s ease forwards 1.5s;
 }
+
 .quote-container p {
   color: black;
 }
@@ -182,38 +170,38 @@ main hr {
   filter: drop-shadow(10px 10px 2px rgba(255, 255, 255, 0.25));
 }
 
-/* Project Styles */
-
+/* Projects */
 #project {
   padding: 15vh 16px;
 }
+
 #project h2 {
   font-size: xx-large;
   text-align: left;
   margin-left: 1rem;
 }
+
 .project-container {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
   padding-top: 5vh;
 }
 
-/* Per Repo Styles*/
-
 .repository-container {
   border: 1px solid #7b8383;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
   gap: 8px;
   padding: 16px;
   border-radius: 5px;
   background: #222431;
 }
+
 .repository-container h3 {
   text-align: left;
 }
+
 .repository-container img {
   vertical-align: bottom;
 }
@@ -222,66 +210,63 @@ main hr {
   font-size: 12px;
 }
 
-/* Repo Head */
 .repository-head {
   display: flex;
   flex-direction: row;
   gap: 3px;
   justify-content: flex-start;
 }
 
-/* Repo Description */
-.repository-description {
-  text-align: left;
-}
-
-/* Repo Langauges */
 .repository-language-used-container {
   display: flex;
-  flex-direction: row;
-  font-weight: lighter;
   gap: 8px;
+  font-weight: lighter;
 }
+
 .language-used {
   font-size: 12px;
   color: #1bb6b6;
 }
+
 .more-repo {
   margin-top: 10px;
-  display: block;
 }
+
 .more-repo a {
   font-weight: 800;
   color: var(--link-color);
 }
 
-/* about */
-
+/* About Section */
 #about {
   padding-top: 15vh;
 }
+
 .about-img-container {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
 }
+
 .about-img-container img {
   border-radius: 50%;
   border: 2px solid white;
 }
+
 .about-social-container {
   margin: 10px 0;
   display: flex;
   justify-content: space-around;
   padding: 0 1em;
 }
+
 #about p {
   margin: 20px;
 }
+
 .about-social-container li {
   display: flex;
   gap: 5px;
-  justify-content: space-between;
 }
 
 .skill {
@@ -290,29 +275,28 @@ main hr {
   text-align: left;
   margin: 0 30px;
 }
+
 #about h3 {
   text-align: left;
   margin: 10px 20px;
 }
+
 .skill li {
   line-height: 30px;
 }
+
 #about ul.skill li:before {
   font-size: 10px;
   padding-right: 10px;
   content: "▸";
-  vertical-align: bottom;
 }
 
 footer {
   padding: 10vh;
 }
 
-/* MEDIA QUERIES */
-
-/* FOR TABLET */
+/* Media Queries */
 @media screen and (min-width: 768px) {
-  /* add margin left and rigth make it centered */
   main {
     margin-left: 20%;
     margin-right: 20%;
@@ -325,21 +309,18 @@ footer {
     margin-right: 30%;
   }
 }
-/* FOR DESKTOP */
+
 @media screen and (min-width: 1025px) {
-  /* project style */
   .project-container {
     grid-template-columns: repeat(2, 1fr);
   }
-  .more-repo {
-    display: block;
-  }
+
   .skill {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
-/* KEYFRAMES */
+/* Animations */
 @keyframes slide-in {
   to {
     width: 115%;
@@ -405,15 +386,9 @@ footer {
   animation: animated_text 10s ease-in-out infinite;
 }
 
-/* must have 1 inner div that wrap all content to work */
 .center {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }
-
-/* .flex-end {
-  align-items: flex-end;
-  padding-bottom: 15vh;
-} */