Merge pull request #3 from mehulgoel873/experimental

Added footers, fixed particles js, improved svg coloring
mehulgoel873 · May 29, 2024 · e3e8f89 · e3e8f89
2 parents 1cf161b + bea6823
commit e3e8f89
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 28 deletions.
diff --git a/app.js b/app.js
@@ -10,7 +10,7 @@ particlesJS('particles-js',
         }
       },
       "color": {
-        "value": "#619b8A"
+        "value": "#5A6954"
       },
       "shape": {
         "type": "circle",
@@ -28,7 +28,7 @@ particlesJS('particles-js',
         }
       },
       "opacity": {
-        "value": 0.5,
+        "value": 0.8,
         "random": false,
         "anim": {
           "enable": false,
@@ -38,25 +38,25 @@ particlesJS('particles-js',
         }
       },
       "size": {
-        "value": 5,
+        "value": 6,
         "random": true,
         "anim": {
           "enable": false,
-          "speed": 40,
+          "speed": 10,
           "size_min": 0.1,
           "sync": false
         }
       },
       "line_linked": {
         "enable": true,
-        "distance": 150,
-        "color": "#a1c181",
-        "opacity": 0.7,
-        "width": 1
+        "distance": 125,
+        "color": "#5A6954",
+        "opacity": 1,
+        "width": 2
       },
       "move": {
         "enable": true,
-        "speed": 6,
+        "speed": 4,
         "direction": "none",
         "random": false,
         "straight": false,
@@ -112,7 +112,7 @@ particlesJS('particles-js',
       "background_color": "#b61924",
       "background_image": "",
       "background_position": "50% 50%",
-      "background_repeat": "no-repeat",
+      "background_repeat": "repeat",
       "background_size": "cover"
     }
   }

diff --git a/css/experience.css b/css/experience.css
@@ -16,7 +16,6 @@
 	line-height: 1.5;
 	min-height: 100vh;
 	font-family: "Outfit", sans-serif;
-	padding-bottom: 20vh;
 }
 
 .experience:hover .section_header h1 {
@@ -84,11 +83,11 @@
 }
 
 .experience .timeline-item:hover .card .button .hover-orange {
-	filter: invert(88%) sepia(94%) saturate(1799%) hue-rotate(305deg) brightness(101%) contrast(101%);
+	filter: invert(60%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%);
 }
 
 .experience .timeline-item:hover .icon {
-	filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%);
+	filter: invert(60%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%);
 }
 
 .experience .timeline-item-icon {

diff --git a/css/nav_home.css b/css/nav_home.css
@@ -99,7 +99,7 @@ nav .nav-links a:last-child:hover::before {
 /* Styling for the welcome text and image */
 .welcome-section {
     text-align: center;
-    padding: 6vh 0vh 0vh 0vh;
+    padding: 12vh 0vh 4vh 0vh;
     width: 100%;
     height: max-content;
 }
@@ -203,18 +203,22 @@ nav .nav-links a:last-child:hover::before {
     margin: 0px 8px;
 }
 
-#particles-js { 
-    width: 100%;
-    height: 84vh;
+#particles-js canvas {
+    display: block;
+    vertical-align: bottom;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
+    transition: opacity .8s ease, transform 1.4s ease
 }
 
-#particles-js .container {
-    position: absolute;
-    left: 0; 
-    right: 0; 
-    padding: 13vh 13vh 0vh 13vh;
-    height: 82vh;
-    margin-left: auto;
-    margin-right: auto;
-    width: max-content;
+#particles-js {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: -10;
+    top: 0;
+    left: 0
 }
diff --git a/css/utlities.css b/css/utlities.css
@@ -45,6 +45,10 @@ a {
   /*filter: invert(60%) sepia(64%) saturate(494%) hue-rotate(342deg) brightness(102%) contrast(101%);*/
   --orange: #ff7f2d;
   /* filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); */
+
+  --light-green: #d7e8ba;
+  --green: #a1c181;
+  --dark-green: #5A6954;
 }
 
 ::-webkit-scrollbar {
@@ -89,4 +93,17 @@ a {
   margin-bottom: 3rem;
   width: max-content;
 
-}
+}
+
+footer {
+  padding: 2vh 0vh;
+}
+
+footer p {
+  width: max-content;
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: 700;
+  color: var(--orange);
+}
+
diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
 	<link rel="icon" type="image/x-icon" href="logos\png\logo-no-background.png">
 </head>
 <body>
+	<div id="particles-js"></div>
 
 	<!-- Navigation bar -->
 	<nav>
@@ -26,7 +27,7 @@
     </nav>
 
 	<!-- Home page -->
-	<section class="welcome-section" id = "particles-js">
+	<section class="welcome-section">
 		<div class = "container">
 			<div class="image-wrapper">
 				<img src="Images\profile.jpg" alt="Mehul Goel">
@@ -164,6 +165,12 @@ <h2>CO-AUTHOR OF PAPER PRESENTED AT AAAI (2023, DC)</h2>
 		</ol>
 	</section>
 
+	<footer>
+		<p>
+		  Copyright © 2024 Mehul Goel. All Rights Reserved.
+		</p>
+	  </footer>
+
 	<script src="particles.js"></script>
 	<script src="app.js"></script>