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

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

@@ -127,16 +127,30 @@ const ProjectDetail = () => {
className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative" className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
> >
{project.imageUrl ? ( {project.imageUrl ? (
<img <>
src={project.imageUrl} <img
alt={project.title} src={project.imageUrl}
className="w-full h-full object-cover" 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"> <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
<span className="text-9xl font-serif font-bold text-stone-500/20 select-none"> {/* Mesh Gradient Fallback */}
{project.title.charAt(0)} <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
</span> <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> </div>
)} )}
</motion.div> </motion.div>