About view done. all styled and animated. some minor animation fixes overall and codecleaning

src/css/TechStack.css

@@ -1,51 +1,66 @@
 .techStackContainer {
-  grid-area: 4 / 1 / 8 / 5;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  animation-duration: 1s;
-}
-
-
-
-.techStackContainer h2 {
-  margin-bottom: 10px;
-  align-self: flex-start;
-}
-
-.techIcon {
-  width: 4rem;
-  height: 4rem;
-  filter: grayscale(0.7);
-  transition: transform 0.3s ease, filter 0.3s ease;
-}
-
-.techIcon:hover {
-  filter: none;
-  animation: tada 1s;
-  cursor: pointer;
-}
-
-.techStack {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-bottom: 1rem;
-}
-
-.techStackShowMore {
-  font-size: 1.2rem;
-  color: rgb(151, 151, 151);
-  text-decoration: none;
-  border-bottom: 1px solid rgb(151, 151, 151);
-  /*   align-self: flex-start; */
-}
-
-@keyframes techIconHover {
-  10% {
-    transform: scale();
+    grid-area: 4 / 1 / 8 / 5;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    animation-duration: 1s;
   }
-}
+  
+  .techStackContainer.expanded {
+    grid-area: 4 / 1 / 10 / 5;
+    min-width: 356.43px;
+  }
+  
+  .techStackContainer h2 {
+    margin-bottom: 10px;
+    align-self: flex-start;
+  }
+  
+  .techIcon {
+    width: 4rem;
+    height: 4rem;
+    filter: grayscale(0.7);
+    transition: transform 0.3s ease, filter 0.3s ease;
+  }
+  
+  .techIcon:hover {
+    filter: none;
+    animation: tada 1s;
+    cursor: pointer;
+  }
+  
+  .techStack {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 1rem;
+  }
+  
+  .techStackShowMore {
+    font-size: 1.2rem;
+    color: rgb(151, 151, 151);
+    text-decoration: none;
+    border-bottom: 1px solid rgb(151, 151, 151);
+    /*   align-self: flex-start; */
+  }
+  
+  @keyframes techIconHover {
+    10% {
+      transform: scale();
+    }
+  }
+  
+  /* Smooth expand/collapse animations */
+  .techStackContainer {
+    max-height: 320px; /* Initial max-height */
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+  }
+  
+  .techStackContainer.expanded {
+    max-height: 600px; /* Expanded max-height */
+  }
+