dejvino/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tune up transitions

Browse Source
This commit is contained in:
Dejvino 2026-05-18 22:51:34 +02:00
parent 0365b26e67
commit 229b5dee94
2 changed files with 20 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@ -191,7 +191,7 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`; el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`;
})('<?= $email_user ?>', 'dejvino', 'cz'); })('<?= $email_user ?>', '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 staggerDelay = 200; // Delay between each panel unrolling (ms)
const applyShifting = (el, flashAtEnd = true, delay = animationDuration) => { const applyShifting = (el, flashAtEnd = true, delay = animationDuration) => {

47
style.css
View File

@ -19,15 +19,17 @@
100% { transform: translateX(150%) skewX(-45deg); opacity: 0; } 100% { transform: translateX(150%) skewX(-45deg); opacity: 0; }
} }
@keyframes grow-reveal { /* Slower grow transition */ @keyframes grow-reveal {
from { from {
opacity: 0; opacity: 0;
max-height: 0; max-height: 0;
transform: scale(0.95); transform: scale(0.95);
} }
/* Start fading in early so the flash effect has content to highlight */
15% { opacity: 0.3; }
to { to {
opacity: 1; 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); transform: scale(1);
} }
} }
@ -35,7 +37,7 @@
@keyframes shrink-fade-away { /* New animation for shrinking */ @keyframes shrink-fade-away { /* New animation for shrinking */
from { from {
opacity: 1; opacity: 1;
max-height: 2000px; max-height: 1000px;
transform: scale(1); transform: scale(1);
} }
to { 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; } * { box-sizing: border-box; }
body { body {
@ -131,18 +124,14 @@ body {
.experience { transform: translate(3px, -2px) rotate(-0.2deg); } .experience { transform: translate(3px, -2px) rotate(-0.2deg); }
.skills { transform: translate(-3px, 4px) rotate(0.6deg); } .skills { transform: translate(-3px, 4px) rotate(0.6deg); }
.education { transform: translate(2px, 3px) rotate(-0.4deg); } .education { transform: translate(2px, 3px) rotate(-0.4deg); }
}
/* Base states for CV elements */ .experience, .skills, .education {
.experience, .skills, .education { display: none; /* Keep out of layout entirely when off */
opacity: 0; opacity: 0;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
} pointer-events: none;
/* Visible states when CV mode is active */
.cv-mode .experience, .cv-mode .skills, .cv-mode .education {
max-height: 2000px;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -175,30 +164,27 @@ body {
.reveal { .reveal {
display: block !important; 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; transition: none !important;
will-change: opacity, max-height, transform; will-change: opacity, max-height, transform;
transform: translateZ(0); backface-visibility: hidden;
} }
.fade-out { .fade-out {
display: block !important;
/* This class will be applied when content is being hidden */ /* 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; transition: none !important;
will-change: opacity, max-height, transform; will-change: opacity, max-height, transform;
transform: translateZ(0); backface-visibility: hidden;
} }
.shifting { .shifting {
filter: blur(1px) grayscale(0.8) brightness(0.7); filter: blur(1px) grayscale(0.8) brightness(0.7);
z-index: 10; z-index: 10;
pointer-events: none !important; pointer-events: none !important;
transition: filter 0.3s ease; transition: filter 0.5s ease;
}
.flash-glow {
animation: flash-impact 0.6s ease-out forwards;
pointer-events: none;
} }
/* CV Specific Content Styles */ /* CV Specific Content Styles */
@ -402,7 +388,6 @@ a { color: var(--link-color); text-decoration: none; }
.profile, .about, .interests, .links, .contact, .profile, .about, .interests, .links, .contact,
.experience, .skills, .education { .experience, .skills, .education {
grid-column: span 1; grid-column: span 1;
transform: none;
} }
.profile { flex-direction: column; text-align: center; } .profile { flex-direction: column; text-align: center; }
} }