Merge pull request #7 from mehulgoel873/experimental

Added projects and styels

css/experience.css

@@ -9,6 +9,9 @@
 
 #experience {
 	scroll-behavior: smooth;
+	margin-left: auto;
+	margin-right: auto;
+	width: 85%;
 }
 
 /* Some basic CSS overrides */
@@ -18,9 +21,6 @@
 	font-family: "Outfit", sans-serif;
 }
 
-.experience:hover .section_header h1 {
-	color: var(--orange-light);
-}
 
 .experience button,
 .experience input,
@@ -45,15 +45,14 @@
 /* End basic CSS override */
 
 .experience .timeline {
-	width: 85%;
-	max-width: 70vw;
 	margin-left: auto;
 	margin-right: auto;
 	display: flex;
 	flex-direction: column;
 	padding: 32px 0 32px 32px;
 	border-left: 4px solid var(--navy-blue);
 	font-size: 1.125rem;
+	margin-bottom: -3rem;
 }
 
 
@@ -102,6 +101,7 @@
 	overflow: hidden;
 	background-color: var(--background);
 	box-shadow: 0 0 0 8px var(--background);
+	margin-top: 24px;
 }
 
 .experience .timeline-item-icon img {
@@ -112,8 +112,6 @@
 }
 
 .experience .card {
-	margin-top: -24px;
-	margin-bottom: 36px;
 	color: var(--navy-blue-light);
 	border: 3px solid var(--navy-blue);
 	box-shadow: 0 4px 4px 0 var(--navy-blue-light);
@@ -169,10 +167,10 @@
 	height: max-content;
 	padding: 4px 12px;
 
-	border: 5px solid var(--offwhite);
+	border: 5px solid var(--navy-blue);
 	border-radius: 15px;
 	background-color: var(--background);
-	color: var(--offwhite);
+	color: var(--navy-blue);
 	flex-shrink: 0;
 	cursor: pointer;
 
@@ -186,7 +184,7 @@
 	width: 1.5rem;
 	height: 1.5rem;
 	margin: 0px 16px 0px 8px;
-	filter: invert(100%) sepia(1%) saturate(4960%) hue-rotate(173deg) brightness(89%) contrast(101%);
+	filter: invert(54%) sepia(17%) saturate(958%) hue-rotate(160deg) brightness(90%) contrast(91%);
 }
 
 .experience .button:hover {
@@ -204,12 +202,7 @@
 }
 
 @media (max-width: 1200px) {
-    .section_header h1 {
-		margin-left: auto;
-		margin-right: auto;
-		left: 0;
-	}
-
+
 	.experience .timeline {
 		width: 95%;
 		max-width: 90%;

css/nav_home.css

@@ -12,20 +12,22 @@ nav {
     left: 0;
     z-index: 1;
     display: flex;
-    height: 7rem;
+    height: 5rem;
     width: 100%;
-    background-color: rgba(215, 232, 186, 0.4);
+    background-color: var(--dark-green);
     align-items: center;
     font-weight: bold;
+    margin-bottom: 5rem;
 }
 
 nav .logo-container {
-    margin-right: auto; /* Set margin-right to auto to push the nav links to the right */
+    margin-right: auto;
+    /* Set margin-right to auto to push the nav links to the right */
     margin-left: 60px;
 }
 
 nav .logo-container img {
-    height: 6rem;
+    height: 4rem;
 }
 
 nav .nav-links {
@@ -34,10 +36,10 @@ nav .nav-links {
     align-items: center;
     margin-right: 60px;
 }
-    
+
 nav .nav-links a {
     display: inline-block;
-    font-size: 3rem;
+    font-size: 2rem;
     text-decoration: none;
     color: var(--offwhite);
     padding: 20px 5px;
@@ -65,7 +67,7 @@ nav .nav-links a:hover {
 nav .nav-links a:hover::before {
     transform: scaleX(1);
 }
-    
+
 nav .nav-links a:last-child {
     padding: 0.5vh;
     border-radius: 1.5vh;
@@ -93,23 +95,25 @@ nav .nav-links a:last-child:hover {
 nav .nav-links a:last-child:hover::before {
     transform: scaleX(1);
 }
-
 
-
+
+
 /* Styling for the welcome text and image */
 .welcome-section {
     text-align: center;
-    margin-top: 7rem;
-    padding: 4vh 0vh 4vh 0vh;
+    padding: 9rem 0vh 4vh 0vh;
     width: 100%;
     height: max-content;
+    margin-bottom: -4rem;
 }
+
 .image-wrapper {
     display: inline-block;
     margin-right: 10vw;
     vertical-align: middle;
     height: 50vh;
 }
+
 .image-wrapper img {
     display: block;
     max-width: 100%;
@@ -125,19 +129,22 @@ nav .nav-links a:last-child:hover::before {
     margin: 0 auto;
     color: var(--offwhite);
 }
+
 .text-wrapper h1 {
     margin-top: 0;
     margin-bottom: 0;
     font-size: 10rem;
     line-height: 1;
 }
+
 .text-wrapper h3 {
     margin-top: 0;
     margin-bottom: 0;
     font-size: 6rem;
     line-height: 1;
     font-family: 'Righteous', cursive;
 }
+
 .text-wrapper p {
     font-size: 3.75vh;
     margin-top: 2vh;
@@ -157,7 +164,7 @@ nav .nav-links a:last-child:hover::before {
     margin-right: auto;
 }
 
-.typing-container .text_hide{
+.typing-container .text_hide {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -167,7 +174,7 @@ nav .nav-links a:last-child:hover::before {
     height: 2.25rem;
 }
 
-.typing-container .text_cursor{
+.typing-container .text_cursor {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -184,20 +191,21 @@ nav .nav-links a:last-child:hover::before {
     margin-right: auto;
     margin-left: auto;
 }
-    
+
 .welcome-section .nav-links a {
     display: inline-block;
     text-decoration: none;
     color: var(--offwhite);
     padding: 32px 5px;
     position: relative;
 }
- 
+
 .text-wrapper img {
     height: 48px;
     width: 48px;
     margin: 8px 12px;
 }
+
 .text-wrapper img:hover {
     height: 56px;
     width: 56px;
@@ -228,12 +236,14 @@ nav .nav-links a:last-child:hover::before {
     .welcome-section {
         width: 100%;
     }
-    .image-wrapper{
+
+    .image-wrapper {
         display: block;
         margin: 0px 0px 0px 0px;
         height: max-content;
     }
-    .image-wrapper img{
+
+    .image-wrapper img {
         margin-left: auto;
         margin-right: auto;
         padding: 0;
@@ -245,7 +255,7 @@ nav .nav-links a:last-child:hover::before {
     .text-wrapper {
         width: max-content;
     }
-    
+
     .typing-container {
         display: none;
     }
@@ -255,4 +265,4 @@ nav .nav-links a:last-child:hover::before {
         width: 80px;
         margin: 12px 18px;
     }
-}
+}