style: final UI polish, remove pink accents, improve project card interactivity
This commit is contained in:
@@ -148,11 +148,15 @@ const ProjectsPage = () => {
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
|
||||
className="group relative flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
|
||||
>
|
||||
<Link
|
||||
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
|
||||
className="absolute inset-0 z-0"
|
||||
/>
|
||||
|
||||
{/* Image / Fallback / Cover Area */}
|
||||
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
|
||||
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100 pointer-events-none">
|
||||
{project.imageUrl ? (
|
||||
<>
|
||||
<img
|
||||
@@ -184,40 +188,15 @@ const ProjectsPage = () => {
|
||||
|
||||
{project.featured && (
|
||||
<div className="absolute top-3 left-3 z-20">
|
||||
<div className="px-3 py-1 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full shadow-lg border border-red-400/50">
|
||||
<div className="px-3 py-1.5 bg-white/90 backdrop-blur-md text-stone-800 text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg border border-white/50 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
|
||||
Featured
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Overlay Links */}
|
||||
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-10">
|
||||
{project.github && (
|
||||
<a
|
||||
href={project.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<Github size={20} />
|
||||
</a>
|
||||
)}
|
||||
{project.live && (
|
||||
<a
|
||||
href={project.live}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
|
||||
aria-label="Live Demo"
|
||||
>
|
||||
<ExternalLink size={20} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 flex flex-col flex-1">
|
||||
<div className="p-6 flex flex-col flex-1 relative z-10 pointer-events-none">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
|
||||
{project.title}
|
||||
@@ -247,28 +226,53 @@ const ProjectsPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-3 pointer-events-auto">
|
||||
{project.github && (
|
||||
<a href={project.github} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors">
|
||||
<a href={project.github} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="text-stone-400 hover:text-stone-900 transition-colors">
|
||||
<Github size={18} />
|
||||
</a>
|
||||
)}
|
||||
{project.live && (
|
||||
<a href={project.live} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors">
|
||||
<a href={project.live} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="text-stone-400 hover:text-stone-900 transition-colors">
|
||||
<ExternalLink size={18} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
|
||||
className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all"
|
||||
>
|
||||
<div className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all">
|
||||
<span>Read More</span>
|
||||
<ArrowLeft size={16} className="rotate-180" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* External Overlay Links for full width on hover if you want to keep that style */}
|
||||
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none group-hover:pointer-events-auto">
|
||||
{project.github && (
|
||||
<a
|
||||
href={project.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<Github size={20} />
|
||||
</a>
|
||||
)}
|
||||
{project.live && (
|
||||
<a
|
||||
href={project.live}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
|
||||
aria-label="Live Demo"
|
||||
>
|
||||
<ExternalLink size={20} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user