diff --git a/index.php b/index.php index ae9d8d1..54aa7b8 100644 --- a/index.php +++ b/index.php @@ -191,7 +191,7 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis" el.innerHTML = `${addr}`; })('', 'dejvino', 'cz'); - const animationDuration = 1000; // Matches CSS animation duration (1s) + const animationDuration = 500; // Matches CSS animation duration (0.5s) const staggerDelay = 200; // Delay between each panel unrolling (ms) const applyShifting = (el, flashAtEnd = true, delay = animationDuration) => { diff --git a/style.css b/style.css index ef09d95..a2d8d1b 100644 --- a/style.css +++ b/style.css @@ -19,15 +19,17 @@ 100% { transform: translateX(150%) skewX(-45deg); opacity: 0; } } -@keyframes grow-reveal { /* Slower grow transition */ +@keyframes grow-reveal { from { opacity: 0; max-height: 0; transform: scale(0.95); } + /* Start fading in early so the flash effect has content to highlight */ + 15% { opacity: 0.3; } to { opacity: 1; - max-height: 2000px; /* Sufficiently large to contain content */ + max-height: 1000px; /* Reduced to match content better and speed up animation */ transform: scale(1); } } @@ -35,7 +37,7 @@ @keyframes shrink-fade-away { /* New animation for shrinking */ from { opacity: 1; - max-height: 2000px; + max-height: 1000px; transform: scale(1); } to { @@ -45,15 +47,6 @@ } } -@keyframes flash-impact { - 0% { - filter: brightness(3) saturate(1.5); - box-shadow: 0 0 40px var(--accent-color); - border-color: var(--accent-color); - } - 100% { filter: brightness(1) saturate(1); } -} - * { box-sizing: border-box; } body { @@ -131,18 +124,14 @@ body { .experience { transform: translate(3px, -2px) rotate(-0.2deg); } .skills { transform: translate(-3px, 4px) rotate(0.6deg); } .education { transform: translate(2px, 3px) rotate(-0.4deg); } +} - /* Base states for CV elements */ - .experience, .skills, .education { - opacity: 0; - max-height: 0; - overflow: hidden; - } - - /* Visible states when CV mode is active */ - .cv-mode .experience, .cv-mode .skills, .cv-mode .education { - max-height: 2000px; - } +.experience, .skills, .education { + display: none; /* Keep out of layout entirely when off */ + opacity: 0; + max-height: 0; + overflow: hidden; + pointer-events: none; } @media (max-width: 768px) { @@ -175,30 +164,27 @@ body { .reveal { display: block !important; - animation: grow-reveal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards; + pointer-events: auto; + animation: grow-reveal 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; transition: none !important; will-change: opacity, max-height, transform; - transform: translateZ(0); + backface-visibility: hidden; } .fade-out { + display: block !important; /* This class will be applied when content is being hidden */ - animation: shrink-fade-away 1s cubic-bezier(0.23, 1, 0.32, 1) forwards; + animation: shrink-fade-away 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; transition: none !important; will-change: opacity, max-height, transform; - transform: translateZ(0); + backface-visibility: hidden; } .shifting { filter: blur(1px) grayscale(0.8) brightness(0.7); z-index: 10; pointer-events: none !important; - transition: filter 0.3s ease; -} - -.flash-glow { - animation: flash-impact 0.6s ease-out forwards; - pointer-events: none; + transition: filter 0.5s ease; } /* CV Specific Content Styles */ @@ -402,7 +388,6 @@ a { color: var(--link-color); text-decoration: none; } .profile, .about, .interests, .links, .contact, .experience, .skills, .education { grid-column: span 1; - transform: none; } .profile { flex-direction: column; text-align: center; } }