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

style: enhance glassmorphism for projects and chat widget with improved transparency and readability

Browse Source
This commit is contained in:
denshooter
2026-01-10 01:07:49 +01:00
parent 792f0c8aae
commit 98f1a07b08
2 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/Projects.tsx
View File

@@ -99,23 +99,23 @@ const Projects = () => {
key={project.id}
variants={fadeInUp}
whileHover={{
y: -12,
transition: { duration: 0.5, ease: "easeOut" },
y: -8,
transition: { duration: 0.4, ease: "easeOut" },
}}
className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-700 ease-out border border-stone-100 hover:border-stone-200"
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"
>
{/* Project Cover / Header */}
<div className="relative aspect-[4/3] overflow-hidden bg-gradient-to-br from-stone-50 to-stone-100">
<div className="relative aspect-[4/3] overflow-hidden bg-stone-100/50">
{project.imageUrl ? (
<Image
src={project.imageUrl}
alt={project.title}
fill
className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
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 to-stone-200 flex items-center justify-center p-8 group-hover:from-stone-50 group-hover:to-stone-100 transition-colors duration-700 ease-out">
<div className="w-full h-full border-2 border-dashed border-stone-300 rounded-xl flex items-center justify-center">
<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>
<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" />
@@ -123,13 +123,13 @@ const Projects = () => {
)}
{/* Overlay Links */}
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-700 ease-out flex items-center justify-center gap-4 backdrop-blur-sm">
<div className="absolute inset-0 bg-stone-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px]">
{project.github && (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
className="p-3 bg-white/90 backdrop-blur-md rounded-full text-stone-800 hover:scale-110 transition-all duration-300 ease-out shadow-lg hover:shadow-xl border border-white/50"
aria-label="GitHub"
>
<Github size={20} />
@@ -140,7 +140,7 @@ const Projects = () => {
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
className="p-3 bg-white/90 backdrop-blur-md rounded-full text-stone-800 hover:scale-110 transition-all duration-300 ease-out shadow-lg hover:shadow-xl border border-white/50"
aria-label="Live Demo"
>
<ExternalLink size={20} />
@@ -152,15 +152,15 @@ const Projects = () => {
{/* Content */}
<div className="flex flex-col flex-1 p-6">
<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-500">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-300 tracking-tight">
{project.title}
</h3>
<span className="text-xs font-mono text-stone-400 bg-stone-100 px-2 py-1 rounded">
<span className="text-xs font-mono text-stone-500 bg-white/60 border border-stone-200/50 px-2 py-1 rounded backdrop-blur-sm">
{new Date(project.date).getFullYear()}
</span>
</div>
<p className="text-stone-700 text-sm leading-relaxed mb-6 line-clamp-3 flex-1">
<p className="text-stone-700 font-medium text-sm leading-relaxed mb-6 line-clamp-3 flex-1 opacity-90">
{project.description}
</p>
@@ -169,13 +169,13 @@ 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-stone-50 border border-stone-100 rounded-md text-stone-600 font-medium hover:bg-stone-100 hover:border-stone-200 transition-all duration-400 ease-out"
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"
>
{tag}
</span>
))}
{project.tags.length > 3 && (
<span className="text-xs px-2 py-1 text-stone-400">
<span className="text-xs px-2 py-1 text-stone-500 font-medium">
+ {project.tags.length - 3}
</span>
)}
@@ -183,12 +183,12 @@ const Projects = () => {
<Link
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
className="inline-flex items-center text-sm font-semibold text-stone-900 hover:gap-3 transition-all duration-500 ease-out group/link"
className="inline-flex items-center text-sm font-bold text-stone-800 hover:gap-3 transition-all duration-300 ease-out group/link"
>
Read more{" "}
<ArrowRight
size={16}
className="ml-1 transition-transform duration-500 ease-out group-hover/link:translate-x-2"
className="ml-1 transition-transform duration-300 ease-out group-hover/link:translate-x-1"
/>
</Link>
</div>