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

style: apply mesh gradient and texture to project detail page fallback

Browse Source
This commit is contained in:
denshooter
2026-01-10 01:27:51 +01:00
parent 2f12483ff6
commit 24ad7ca9d8
1 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/projects/[slug]/page.tsx
View File

@@ -127,17 +127,31 @@ const ProjectDetail = () => {
className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
>
{project.imageUrl ? (
<>
<img
src={project.imageUrl}
alt={project.title}
className="w-full h-full object-cover"
/>
{/* Texture/Grain Overlay */}
<div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
</>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
<span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
<div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
{/* Mesh Gradient Fallback */}
<div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
{/* Texture/Grain Overlay */}
<div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
<div className="relative z-10">
<span className="text-9xl font-serif font-black text-stone-800/10 select-none tracking-tighter">
{project.title.charAt(0)}
</span>
</div>
</div>
)}
</motion.div>