From cfd178cea6c1f7b6ad3a536ca0d41d6409538041 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Sat, 7 Feb 2026 00:31:55 +0300 Subject: [PATCH] projects: enhacne card styles and fix reset filters --- src/app/projects/page.module.css | 143 +++++++++++++++++++++---------- src/app/projects/page.tsx | 10 ++- 2 files changed, 104 insertions(+), 49 deletions(-) diff --git a/src/app/projects/page.module.css b/src/app/projects/page.module.css index 92d6b4f..59be03a 100644 --- a/src/app/projects/page.module.css +++ b/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 */ diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx index 54e147c..7020791 100644 --- a/src/app/projects/page.tsx +++ b/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 */} {displayedProjects.map((project) => (