v2

styles.css

@@ -54,7 +54,7 @@ h3 {
 /* Typewriter Animation */
     @keyframes typing {
         from { width:0 }
-        to { width: 75% }
+        to { width: 60% }
     }
 
     @keyframes blink {
@@ -92,7 +92,7 @@ h3 {
 
 /* Navigation Bar Styling */
 .navbar {
-    background-color: var(--lightconsoleBackgroundColor);
+    background-color: var(--consoleBackgroundColor);
     width: 100%;
     border: 0;
     padding: 0;
@@ -111,7 +111,6 @@ h3 {
     border: 0;
     padding: 0;
     margin: 0;
-    position: relative;
 }
 
 /* Navbar Icon Styling */
@@ -124,24 +123,36 @@ h3 {
         font-size: 25px;
     }
 
-    .fa-envelope {
+        .fa-square-phone:hover {
+            color: lightgreen;
+        }
+
+    .fa-square-envelope {
         display: inline-block;
-        color: white;
+        color: #d3d3d3;
         border: 0;
         padding: 0;
         margin: 0px 10px 0 10px;
         font-size: 25px;
     }
 
-    .fa-square-github {
+        .fa-square-envelope:hover {
+            color: #ffffff;
+        }
+
+    .fa-github {
         display: inline-block;
-        color: white;
+        color: #d3d3d3;
         border: 0;
         padding: 0;
         margin: 0 10px 0 10px;
     }
 
-    .fa-twitter {
+        .fa-github:hover {
+            color: #ffffff;
+        }
+
+    .fa-square-twitter {
         display: inline-block;
         color: #1da1f2;
         border: 0;
@@ -149,6 +160,10 @@ h3 {
         margin: 0 10px 0 10px;
     }
 
+        .fa-square-twitter:hover {
+            color: lightblue;
+        }
+
     .fa-youtube {
         display: inline-block;
         color: #e62117;
@@ -157,6 +172,32 @@ h3 {
         margin: 0 10px 0 10px;
     }
 
+        .fa-youtube:hover {
+            color: lightcoral;
+        }
+/* Resume Button Styling */
+
+    .resumeDownload {
+        position: absolute;
+        right: 20px;
+        top: 5px;
+        bottom: 10px;
+        height: 25px;
+        width: 110px;
+        color: var(--primaryTextColor);
+        font-family: 'Ubuntu', sans-serif;
+        font-size: 15px;
+        letter-spacing: 2px;
+        white-space: nowrap;
+        border-radius: 5%;
+        background-color: var(--primaryBackgroundColor);
+    }
+
+    .resumeDownload:hover {
+        cursor: pointer;
+        background-color: #333f4a;
+    }
+
 /* Heading Styling */
 
 .heading {
@@ -164,22 +205,22 @@ h3 {
     width: 100%;
     background-color: var(--primaryBackgroundColor);
     border: 0;
-    padding: 0;
+    padding: 0 0 40px 0;
     margin: 0;
 }
 
 .typewriterArea {
     display: inline-block;
-    text-align: left;
-    margin: 0 auto;
+    text-align: center;
+    position: absolute;
+    left: 100px;
     border-right: .15em solid var(--elementColor);
     border-color: var(--elementColor);
     overflow: hidden;
     white-space: nowrap;
     letter-spacing: 3px;
-    animation-delay: 1s;
     animation:
-        typing 3s steps(46, end),
+        typing 2s steps(40, end),
         blink 0.9s step-end infinite;
 }
 
@@ -193,10 +234,13 @@ h3 {
 }
 
 .projectsGalleryGrid {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     color: var(--primaryTextColor);
     font-family: 'Ubuntu', sans-serif;
     display: grid;
-    gap: 1px;
+    gap: 10px;
     grid-template-columns: repeat(3, 33.3vw);
     opacity: 0;
     animation-name: fadeIn;
@@ -215,13 +259,24 @@ h3 {
 /* Technologies Section Styling */
 .technologies {
     background-color: var(--tertiaryBackgroundColor);
+    padding-bottom: 10px;
 }
 
 .technologiesIconsGrid {
-    display: grid;
+    display: flex;
     justify-content: center;
-    gap: 30px;
-    grid-template-columns: repeat(5, 5vw);
+    align-items: center;
+    color: var(--primaryTextColor);
+    font-family: 'Ubuntu', sans-serif;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(3, 20vw);
+}
+
+
+
+.fa-brands {
+    font-family: 'Righteous', cursive;
 }
 
 /* Brand Colors */
@@ -293,6 +348,10 @@ h3 {
         color: #dd1b16;
     }
 
+    .fa-bolt {
+        color: #8a2be2;
+    }
+
 /* Contact Section Styling */
 
 .contact {
@@ -303,11 +362,8 @@ h3 {
 }
 
 .contactForm {
-    background-color: var(--consoleBackgroundColor);
+    background-color: inherit;
     width: 60vw;
     height: 400px;
     border-radius: 5%;
-    display: grid;
-    place-content: center;
-    align-items: center;
 }