projects: enhacne card styles and fix reset filters
This commit is contained in:
@@ -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 */
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
Reference in New Issue
Block a user