style: modernize project pages with warm organic design and improved readability

This commit is contained in:
2026-01-10 01:13:07 +01:00
parent 82b5ca4514
commit 2844b981bb
3 changed files with 280 additions and 204 deletions

View File

@@ -114,11 +114,13 @@ const Projects = () => {
className="object-cover transition-transform duration-1000 ease-out group-hover:scale-105"
/>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-stone-100/50 to-stone-200/50 flex items-center justify-center p-8 group-hover:from-stone-50/50 group-hover:to-stone-100/50 transition-colors duration-700 ease-out">
<div className="w-full h-full border-2 border-dashed border-stone-300/50 rounded-xl flex items-center justify-center">
<Layers className="text-stone-300 w-12 h-12" />
<div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center p-8 group-hover:from-stone-100 group-hover:to-stone-200 transition-colors duration-700 ease-out">
<div className="relative z-10 text-center">
<span className="text-6xl font-serif font-bold text-stone-500/20 group-hover:text-stone-500/30 transition-colors duration-500 select-none">
{project.title.charAt(0)}
</span>
</div>
<div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint/10 via-transparent to-liquid-rose/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="absolute inset-0 bg-gradient-to-tr from-white/10 via-transparent to-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
</div>
)}