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>`;
})('<?= $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 applyShifting = (el, flashAtEnd = true, delay = animationDuration) => {

53
style.css
View File

@ -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; }
}