update portfolio

styles.css

@@ -1,5 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap");
+
 * {
-  font-family: Lato;
+  font-family: "Roboto Slab", serif;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
@@ -37,11 +39,11 @@ i:hover {
 }
 
 .link__hover-effect:after {
-  content:"";
+  content: "";
   position: absolute;
   height: 3px;
   width: 0;
-  bottom: -3px; 
+  bottom: -3px;
   right: 0;
   transition: all 300ms ease;
 }
@@ -59,7 +61,6 @@ i:hover {
   background-color: black;
 }
 
-
 li {
   list-style-type: none;
 }
@@ -93,13 +94,15 @@ h1 {
 
 section:nth-child(even) {
   background-color: #f8f8f8;
-  ;
 }
 
 .section__title {
   margin-bottom: 20px;
 }
 
+#react {
+  height: 110px;
+}
 
 /* NAVIGATION BAR */
 nav {
@@ -110,7 +113,7 @@ nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 12px ;
+  padding: 0 12px;
 }
 
 .nav__link--list {
@@ -178,7 +181,7 @@ nav {
     transform: scale(0);
   }
   80% {
-    transform: scale(1.1) ;
+    transform: scale(1.1);
   }
 
   100% {
@@ -195,8 +198,9 @@ nav {
   animation: fade-up 650ms 400ms backwards;
 }
 
-.about-me__info--para {
-  font-size: 20px;
+.about-me-para {
+  text-align: justify;
+  font-size: 15px;
   margin-bottom: 28px;
   animation: fade-up 650ms 600ms backwards;
 }
@@ -308,25 +312,24 @@ nav {
   opacity: 1;
 }
 
-
 /* PROJECTS */
 
 .project {
-  margin-bottom: 135px;
+  margin-bottom: 30px;
 }
 
 .project:last-child {
   margin-bottom: 40px;
 }
 
-
-.project__img {
+.project-img {
   width: 100%;
   transition: all 500ms ease;
 }
 
-.project__wrapper {
+.project-wrapper {
   display: flex;
+  justify-content: center;
   box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
   border-radius: 20px;
   overflow: hidden;
@@ -356,11 +359,15 @@ nav {
 }
 
 .project:hover .project__description {
+  border-radius: 20px;
+  background-color: var(--van-gray-5);
+  padding: 5px;
+  border: 5px double black;
   opacity: 1;
+  color: whitesmoke;
   transform: translateY(-50%);
 }
 
-
 .project__list {
   padding-top: 40px;
 }
@@ -376,8 +383,10 @@ nav {
   transition: transform 450ms, opacity 300ms;
 }
 
-.project__description--title {
+.project-description-title {
   font-size: 40px;
+  color: #6030b1;
+  text-align: left;
 }
 
 .project__description--link {
@@ -390,14 +399,13 @@ nav {
 }
 
 .project__description--title,
-.project__description--sub-title,
+.project-description-subtitle,
 .project__description--para,
 .project__description--link {
   text-align: left;
-  color: white;
+  color: black;
 }
 
-
 /* FOOTER */
 footer {
   background-color: #242424;
@@ -427,7 +435,7 @@ footer {
 .footer__social--link,
 .footer__copyright,
 .footer__logo--popper {
-  color: #fff
+  color: #fff;
 }
 
 .footer__logo--popper {
@@ -509,4 +517,3 @@ footer {
     margin: 12px 0;
   }
 }
-