Added Explore button inside cards with fade-in animation and responsive…

index.html

@@ -121,27 +121,32 @@ <h1>Project Vault</h1>
 
     <main>
       <div class="category-container">
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.1s">
+        <div class="category-card fade-in" href="#" style="animation-delay: 0.1s">
           <h2>🌐 Static Websites</h2>
           <p>
             Explore beautiful, responsive websites built with modern web
             technologies and best practices
           </p>
-        </a>
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.2s">
+          <a href="./assets/html_files/website.html" class="project">View Projects</a>
+        </div>
+
+        <div class="category-card fade-in" href="#" style="animation-delay: 0.2s">
           <h2>🎮 Games</h2>
           <p>
-            Interactive games and entertainment projects showcasing creative
+            Interactive and open source gaming and game development with creative
             programming and user experience
           </p>
-        </a>
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.3s">
+          <a href="./assets/html_files/games.html" class="project">View Projects</a>
+        </div>
+
+        <div class="category-card fade-in" href="#" style="animation-delay: 0.3s">
           <h2>🤖 ML Projects</h2>
           <p>
             Cutting-edge machine learning applications and AI-powered solutions
             for real-world problems
           </p>
-        </a>
+          <a href="./assets/html_files/ml.html" class="project">View Projects</a>
+        </div>
       </div>
 
       <div class="add-project-section send-message">

style.css

@@ -650,14 +650,33 @@ transition: all 0.3s ease;
 }
 
 /* CATEGORY CARDS SECTION */
+.project{
+  display: inline-block;
+  margin-top: 1.5rem;
+  padding: 0.45em 1em;
+  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: background 0.2s, transform 0.2s;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+
+}
 .category-container {
   display: flex;
   justify-content: center;
-  align-items: stretch; /* Make cards equal height */
+  align-items: stretch; 
   gap: 2rem;
   margin: 3rem auto 0 auto;
   max-width: 1100px;
-  flex-wrap: wrap;
+  flex-wrap: wrap;transform: translateY(30px);
+  animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation-delay: 0.3s; /* Button fades in after card */
+  align-self: center;
+
 }
 
 /* Copyright */
@@ -687,20 +706,19 @@ transition: all 0.3s ease;
   padding: 2.2rem 2rem 1.7rem 2rem;
   min-width: 290px;
   max-width: 340px;
-  flex: 1 1 320px; /* All cards grow/shrink equally */
+  flex: 1 1 320px; 
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
   transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s cubic-bezier(.4,2,.6,1);
   text-align: left;
   margin-bottom: 1.5rem;
 }
 
   position: relative;
-  opacity: 0;
-  transform: translateY(30px);
-  animation: fadeInUp 0.7s forwards;
+
 }
 
 .category-card.fade-in {
@@ -739,6 +757,10 @@ transition: all 0.3s ease;
 
 /* Responsive for cards */
 @media (max-width: 900px) {
+  .Explore {
+    font-size: 1.1rem;
+    padding: 0.6rem 1.2rem;
+  }
   .category-container {
     flex-direction: column;
     align-items: center;
@@ -750,7 +772,6 @@ transition: all 0.3s ease;
     width: 100%;
     height: auto;
   }
-}
 
 /* Responsive Footer */
 @media (max-width: 900px) {
@@ -770,6 +791,7 @@ transition: all 0.3s ease;
   z-index: 10;
 }
 
+
 @media (max-width: 768px) {
   .nav-right {
     display: none;
@@ -844,4 +866,5 @@ button {
 
 @keyframes fadeOut {
   to { opacity: 0; transform: translateX(100%); }
+
 }