projects: enhacne card styles and fix reset filters

src/app/projects/page.module.css

@@ -186,30 +186,33 @@
 /* Projects Grid */
 .projectsGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 32px;
   margin-bottom: 60px;
 }
 
 .projectCard {
   background: white;
-  border-radius: 16px;
+  border-radius: 20px !important;
   overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cursor: pointer;
-  border: none;
-  height: fit-content;
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  height: 100%;
+  display: flex !important;
+  flex-direction: column;
 }
 
 .projectCard:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(116, 0, 184, 0.15);
+  border-color: rgba(116, 0, 184, 0.2) !important;
 }
 
 .projectImageContainer {
   position: relative;
-  height: 200px;
+  height: 240px;
   overflow: hidden;
 }
 
@@ -217,22 +220,23 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.3s ease;
+  transition: transform 0.6s ease;
 }
 
 .projectCard:hover .projectImage {
-  transform: scale(1.05);
+  transform: scale(1.1);
 }
 
 .projectOverlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(15, 5, 37, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(2px);
 }
 
 .projectCard:hover .projectOverlay {
@@ -240,11 +244,23 @@
 }
 
 .viewButton {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-  border: none;
-  width: 50px;
-  height: 50px;
-  font-size: 18px;
+  background: white !important;
+  color: #7400b8 !important;
+  border: none !important;
+  width: 56px !important;
+  height: 56px !important;
+  font-size: 20px !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
+  transform: scale(0.8);
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
+}
+
+.projectCard:hover .viewButton {
+  transform: scale(1);
 }
 
 .featuredBadge {
@@ -255,65 +271,98 @@
 }
 
 .projectContent {
-  padding: 20px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .categoryTag {
   margin-bottom: 12px;
 }
 
-.projectTitle {
-  font-size: 1.1rem;
+.categoryTag :global(.ant-tag) {
+  background: #f0fdf4 !important; /* Minty fresh background example */
+  color: #166534 !important;
+  border-color: #dcfce7 !important;
+  border-radius: 12px;
+  padding: 2px 10px;
   font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 8px;
-  line-height: 1.3;
+  border: none;
+}
+
+/* Dynamic colors for tags could be handled in JS, but static CSS here for now */
+.projectContent .categoryTag :global(.ant-tag-blue) {
+   background: rgba(116, 0, 184, 0.08) !important;
+   color: #7400b8 !important;
+   border: none !important;
+}
+
+.projectTitle {
+  font-size: 1.25rem !important;
+  font-weight: 700 !important;
+  color: #1e293b !important;
+  margin-bottom: 12px !important;
+  line-height: 1.4 !important;
+  transition: color 0.3s ease;
+}
+
+.projectCard:hover .projectTitle {
+  color: #7400b8 !important;
 }
 
 .projectDescription {
-  color: #64748b;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  font-size: 0.85rem;
+  color: #64748b !important;
+  line-height: 1.6 !important;
+  margin-bottom: 20px !important;
+  font-size: 0.95rem !important;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  flex-grow: 1;
 }
 
 .technologiesList {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 12px;
+  gap: 8px;
+  margin-bottom: 20px;
 }
 
 .techTag {
-  background: #f8fafc;
-  color: #475569;
-  border: 1px solid #e2e8f0;
-  font-size: 0.75rem;
-  padding: 2px 6px;
-  border-radius: 8px;
+  background: #f8fafc !important;
+  color: #64748b !important;
+  border: 1px solid #e2e8f0 !important;
+  font-size: 0.75rem !important;
+  padding: 4px 10px !important;
+  border-radius: 20px !important;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.projectCard:hover .techTag {
+  border-color: #a855f7 !important;
+  color: #7400b8 !important;
+  background: #faf5ff !important;
 }
 
 .projectMeta {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 12px;
+  padding-top: 16px;
   border-top: 1px solid #f1f5f9;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
+  color: #94a3b8;
+  margin-top: auto;
 }
 
-.projectDuration {
-  font-size: 0.75rem;
-  color: #64748b;
-}
-
-.projectTeam {
-  font-size: 0.75rem;
-  color: #64748b;
+.projectDuration, .projectTeam {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
 }
 
 /* Load More Section */

src/app/projects/page.tsx

@@ -314,6 +314,12 @@ export default function ProjectsPage() {
   };
 
   const handleCategoryClick = (category: string) => {
+    if (category === "All") {
+      setSelectedCategory("All");
+      setVisibleProjects(9);
+      return;
+    }
+
     if (selectedCategory === category) {
       // If clicking on the same category, remove the filter
       setSelectedCategory("All");
@@ -427,10 +433,10 @@ export default function ProjectsPage() {
 
           {/* Projects Grid */}
           <motion.div
+            key={selectedCategory}
             variants={containerVariants}
             initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true }}
+            animate="visible"
             className={styles.projectsGrid}
           >
             {displayedProjects.map((project) => (