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

fix(ui): reduce framer-motion flicker by narrowing CSS transitions

Browse Source 
Co-authored-by: dennis <dennis@konkol.net>
This commit is contained in:
Cursor Agent
2026-01-15 10:06:23 +00:00
parent a617f6eb92
commit 6d5617cd08
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/About.tsx
View File

@@ -162,7 +162,7 @@ const About = () => {
scale: 1.02, scale: 1.02,
transition: { duration: 0.4, ease: "easeOut" }, transition: { duration: 0.4, ease: "easeOut" },
}} }}
className={`p-5 rounded-xl border-2 transition-all duration-500 ease-out ${ className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
idx === 0 idx === 0
? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15" ? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
: idx === 1 : idx === 1
@@ -221,7 +221,7 @@ const About = () => {
scale: 1.02, scale: 1.02,
transition: { duration: 0.4, ease: "easeOut" }, transition: { duration: 0.4, ease: "easeOut" },
}} }}
className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-all duration-500 ease-out ${ className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
idx === 0 idx === 0
? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15" ? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
: idx === 1 : idx === 1

2
app/components/Contact.tsx
View File

@@ -228,7 +228,7 @@ const Contact = () => {
x: 8, x: 8,
transition: { duration: 0.4, ease: "easeOut" }, transition: { duration: 0.4, ease: "easeOut" },
}} }}
className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/80 transition-all duration-500 ease-out group border-transparent hover:border-white/70" className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/80 transition-[background-color,border-color,box-shadow] duration-500 ease-out group border-transparent hover:border-white/70"
> >
<div className="p-3 bg-white rounded-xl shadow-sm group-hover:shadow-md transition-all"> <div className="p-3 bg-white rounded-xl shadow-sm group-hover:shadow-md transition-all">
<info.icon className="w-6 h-6 text-stone-700" /> <info.icon className="w-6 h-6 text-stone-700" />

2
app/components/Projects.tsx
View File

@@ -102,7 +102,7 @@ const Projects = () => {
key={project.id} key={project.id}
variants={fadeInUp} variants={fadeInUp}
whileHover={{ y: -8 }} whileHover={{ y: -8 }}
className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 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" className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-[box-shadow,border-color,background-color] duration-500"
> >
{/* Project Cover / Image Area */} {/* 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">