denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: final UI polish, remove pink accents, improve project card interactivity

Browse Source
This commit is contained in:
denshooter
2026-01-10 01:19:12 +01:00
parent 632302fb54
commit dda3257a03
7 changed files with 105 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/components/Projects.tsx
View File

@@ -98,14 +98,15 @@ const Projects = () => {
<motion.div
key={project.id}
variants={fadeInUp}
whileHover={{
y: -8,
transition: { duration: 0.4, ease: "easeOut" },
}}
className="group relative flex flex-col bg-white/40 backdrop-blur-xl backdrop-saturate-150 rounded-2xl overflow-hidden 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 ease-out border border-white/50 ring-1 ring-white/30"
>
<Link
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
className="absolute inset-0 z-0"
/>
{/* Project Cover / Image 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 ? (
<>
<Image
@@ -141,41 +142,16 @@ const Projects = () => {
{/* Featured Badge */}
{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>
{/* Content */}
<div className="flex flex-col flex-1 p-6">
<div className="flex flex-col flex-1 p-6 relative z-10 pointer-events-none">
<div className="flex justify-between items-start mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-300 tracking-tight">
{project.title}
@@ -194,7 +170,7 @@ const Projects = () => {
{project.tags.slice(0, 3).map((tag, tIdx) => (
<span
key={`${project.id}-${tag}-${tIdx}`}
className="text-xs px-2.5 py-1 bg-white/50 border border-white/60 rounded-md text-stone-700 font-medium hover:bg-white/80 hover:border-white transition-all duration-300 ease-out shadow-sm"
className="text-xs px-2.5 py-1 bg-white/50 border border-white/60 rounded-md text-stone-700 font-medium transition-all duration-300 ease-out shadow-sm"
>
{tag}
</span>
@@ -206,20 +182,46 @@ const Projects = () => {
)}
</div>
<Link
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
className="inline-flex items-center text-sm font-bold text-stone-800 hover:gap-3 transition-all duration-300 ease-out group/link"
>
<div className="inline-flex items-center text-sm font-bold text-stone-800 group-hover:gap-3 transition-all duration-300 ease-out group/link">
Read more{" "}
<ArrowRight
size={16}
className="ml-1 transition-transform duration-300 ease-out group-hover/link:translate-x-1"
/>
</Link>
</div>
</div>
</div>
{/* External Overlay Links - positioned above the main Link */}
<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>
))}
))}
</motion.div>
<motion.div