poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep hero hover image size stable

Browse Source
This commit is contained in:
poyrazavsever
2026-07-29 20:31:32 +03:00
parent 4802c4764a
commit b82a5af8d8
2 changed files with 14 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+11 -19
View File
@@ -27,47 +27,39 @@
animation-play-state: paused; animation-play-state: paused;
} }
@keyframes hero-wave-primary { @keyframes hero-image-cycle-primary {
0%, 49.99% { opacity: 1; } 0%, 49.99% { opacity: 1; }
50%, 100% { opacity: 0; } 50%, 100% { opacity: 0; }
} }
@keyframes hero-wave-secondary { @keyframes hero-image-cycle-secondary {
0%, 49.99% { opacity: 0; } 0%, 49.99% { opacity: 0; }
50%, 100% { opacity: 1; } 50%, 100% { opacity: 1; }
} }
@keyframes hero-wave-sway { .hero-image-cycle-frame {
0%, 100% { transform: rotate(0deg) translateY(0); } will-change: opacity;
25% { transform: rotate(-2deg) translateY(-1px); }
50% { transform: rotate(2.5deg) translateY(0); }
75% { transform: rotate(-1deg) translateY(-1px); }
} }
.hero-wave-frame { .hero-image-cycle-secondary {
transform-origin: 70% 88%;
will-change: opacity, transform;
}
.hero-wave-frame-secondary {
opacity: 0; opacity: 0;
} }
.hero-wave:hover .hero-wave-frame-primary { .hero-image-cycle:hover .hero-image-cycle-primary {
animation: hero-wave-primary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite; animation: hero-image-cycle-primary 650ms steps(1, end) infinite;
} }
.hero-wave:hover .hero-wave-frame-secondary { .hero-image-cycle:hover .hero-image-cycle-secondary {
animation: hero-wave-secondary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite; animation: hero-image-cycle-secondary 650ms steps(1, end) infinite;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.hero-wave:hover .hero-wave-frame-primary { .hero-image-cycle:hover .hero-image-cycle-primary {
animation: none; animation: none;
opacity: 0; opacity: 0;
} }
.hero-wave:hover .hero-wave-frame-secondary { .hero-image-cycle:hover .hero-image-cycle-secondary {
animation: none; animation: none;
opacity: 1; opacity: 1;
} }
components/home-hero.tsx
+3 -3
View File
@@ -88,7 +88,7 @@ export function HomeHero({ news }: HomeHeroProps) {
</div> </div>
</div> </div>
<div className="hero-wave group absolute right-0 bottom-0 hidden h-full w-44 overflow-hidden sm:block"> <div className="hero-image-cycle absolute right-0 bottom-0 hidden h-full w-44 overflow-hidden sm:block">
<Image <Image
src="/images/hero1.png" src="/images/hero1.png"
alt="Poyraz Avsever" alt="Poyraz Avsever"
@@ -96,7 +96,7 @@ export function HomeHero({ news }: HomeHeroProps) {
height={220} height={220}
sizes="180px" sizes="180px"
priority priority
className="hero-wave-frame hero-wave-frame-primary absolute right-0 bottom-0 h-auto w-36 object-contain" className="hero-image-cycle-frame hero-image-cycle-primary absolute right-0 bottom-0 h-auto w-36 object-contain"
/> />
<Image <Image
src="/images/hero2.png" src="/images/hero2.png"
@@ -105,7 +105,7 @@ export function HomeHero({ news }: HomeHeroProps) {
height={220} height={220}
sizes="180px" sizes="180px"
aria-hidden="true" aria-hidden="true"
className="hero-wave-frame hero-wave-frame-secondary absolute right-0 bottom-0 h-auto w-36 object-contain" className="hero-image-cycle-frame hero-image-cycle-secondary absolute right-0 bottom-0 h-auto w-36 object-contain"
/> />
<div <div
aria-hidden="true" aria-hidden="true"