CavyDev/my_portfolio
1
0
Fork 0
mirror of https://github.com/adam-benyekkou/my_portfolio.git synced 2026-01-15 20:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Corrected animation on history page to kickstart faster

Browse Source
This commit is contained in:
AdamBtech
2025-05-27 20:50:45 +02:00
parent 80444417d9
commit 44556b57e7
1 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/app/pages/experience/operative-history/operative-history.component.css
View File

@@ -9,9 +9,9 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
/* Initial fade-in animation */ /* Faster initial fade-in animation */
opacity: 0; opacity: 0;
animation: fadeInHost 0.8s ease-out 0.1s forwards; animation: fadeInHost 0.6s ease-out 0.05s forwards;
} }
/* CSS Custom Properties for reusability */ /* CSS Custom Properties for reusability */
@@ -22,8 +22,8 @@
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-hover: 0 8px 25px rgba(41, 41, 37, 0.15); --shadow-hover: 0 8px 25px rgba(41, 41, 37, 0.15);
--shadow-subtle: 0 4px 12px rgba(41, 41, 37, 0.1); --shadow-subtle: 0 4px 12px rgba(41, 41, 37, 0.1);
--animation-duration: 0.6s; --animation-duration: 0.5s;
--animation-delay-base: 0.15s; --animation-delay-base: 0.08s;
} }
/* Main Grid Layout */ /* Main Grid Layout */
@@ -37,11 +37,11 @@
/* Hide overflow initially to prevent scrollbar during animation */ /* Hide overflow initially to prevent scrollbar during animation */
overflow: hidden; overflow: hidden;
animation: enableScrollAfterAnimation 0s ease-out 5s forwards; animation: enableScrollAfterAnimation 0s ease-out 3s forwards;
/* Container fade-in */ /* Faster container fade-in */
opacity: 0; opacity: 0;
animation: fadeInContainer 0.6s ease-out 0.4s forwards, enableScrollAfterAnimation 0s ease-out 5s forwards; animation: fadeInContainer 0.5s ease-out 0.15s forwards, enableScrollAfterAnimation 0s ease-out 3s forwards;
} }
/* Column Base Styles */ /* Column Base Styles */
@@ -54,24 +54,24 @@
/* Hide overflow initially */ /* Hide overflow initially */
overflow: hidden; overflow: hidden;
animation: enableColumnScrollAfterAnimation 0s ease-out 5s forwards; animation: enableColumnScrollAfterAnimation 0s ease-out 3s forwards;
/* Initial state for animation */ /* Initial state for animation */
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
} }
/* Staggered column animations */ /* Faster staggered column animations */
.professional-column { .professional-column {
animation: fadeInUp var(--animation-duration) ease-out calc(var(--animation-delay-base) * 4) forwards, enableColumnScrollAfterAnimation 0s ease-out 5s forwards; animation: fadeInUp var(--animation-duration) ease-out calc(var(--animation-delay-base) * 3) forwards, enableColumnScrollAfterAnimation 0s ease-out 3s forwards;
} }
.education-column { .education-column {
animation: fadeInUp var(--animation-duration) ease-out calc(var(--animation-delay-base) * 6) forwards, enableColumnScrollAfterAnimation 0s ease-out 5s forwards; animation: fadeInUp var(--animation-duration) ease-out calc(var(--animation-delay-base) * 4) forwards, enableColumnScrollAfterAnimation 0s ease-out 3s forwards;
} }
.personal-column { .personal-column {
animation: fadeInUp var(--animation-duration) ease-out calc(var(--animation-delay-base) * 8) forwards, enableColumnScrollAfterAnimation 0s ease-out 5s forwards; animation: fadeInUp var(--animation-duration) ease-out calc(var(--animation-delay-base) * 5) forwards, enableColumnScrollAfterAnimation 0s ease-out 3s forwards;
} }
/* Sticky Column Titles */ /* Sticky Column Titles */
@@ -93,7 +93,7 @@
/* Title animation */ /* Title animation */
opacity: 0; opacity: 0;
transform: translateX(-10px); transform: translateX(-10px);
animation: slideInLeft 0.5s ease-out calc(var(--animation-delay-base) * 10) forwards; animation: slideInLeft 0.4s ease-out calc(var(--animation-delay-base) * 7) forwards;
} }
/* Base Card Styles */ /* Base Card Styles */
@@ -115,11 +115,11 @@
/* Staggered card animations */ /* Staggered card animations */
.experience-card { .experience-card {
animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 12) forwards; animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 9) forwards;
} }
.info-card { .info-card {
animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 14) forwards; animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 10) forwards;
} }
/* Enhanced Card Hover Effects */ /* Enhanced Card Hover Effects */
@@ -153,7 +153,7 @@
/* Active Training Highlight */ /* Active Training Highlight */
.active-training { .active-training {
border-color: var(--color-nier-accent); border-color: var(--color-nier-accent);
animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 12) forwards; animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 9) forwards;
} }
/* Optimized Card Headers */ /* Optimized Card Headers */
@@ -268,7 +268,7 @@
width: 0; width: 0;
height: 1px; height: 1px;
background: var(--color-nier-accent); background: var(--color-nier-accent);
animation: expandLine 0.8s ease-out calc(var(--animation-delay-base) * 16) forwards; animation: expandLine 0.6s ease-out calc(var(--animation-delay-base) * 12) forwards;
} }
.tech-grid { .tech-grid {
@@ -300,12 +300,12 @@
} }
/* Staggered animation delays for tech items */ /* Staggered animation delays for tech items */
.tech-item:nth-child(1) { animation-delay: calc(var(--animation-delay-base) * 18); } .tech-item:nth-child(1) { animation-delay: calc(var(--animation-delay-base) * 13); }
.tech-item:nth-child(2) { animation-delay: calc(var(--animation-delay-base) * 19); } .tech-item:nth-child(2) { animation-delay: calc(var(--animation-delay-base) * 14); }
.tech-item:nth-child(3) { animation-delay: calc(var(--animation-delay-base) * 20); } .tech-item:nth-child(3) { animation-delay: calc(var(--animation-delay-base) * 15); }
.tech-item:nth-child(4) { animation-delay: calc(var(--animation-delay-base) * 21); } .tech-item:nth-child(4) { animation-delay: calc(var(--animation-delay-base) * 16); }
.tech-item:nth-child(5) { animation-delay: calc(var(--animation-delay-base) * 22); } .tech-item:nth-child(5) { animation-delay: calc(var(--animation-delay-base) * 17); }
.tech-item:nth-child(n+6) { animation-delay: calc(var(--animation-delay-base) * 23); } .tech-item:nth-child(n+6) { animation-delay: calc(var(--animation-delay-base) * 18); }
.tech-item:hover, .tech-item:hover,
.trait-item:hover { .trait-item:hover {
@@ -316,7 +316,7 @@
.trait-item { .trait-item {
padding: 0.375rem 0.25rem; padding: 0.375rem 0.25rem;
text-align: center; text-align: center;
animation-delay: calc(var(--animation-delay-base) * 24); animation-delay: calc(var(--animation-delay-base) * 19);
} }
/* Enhanced Status Badges */ /* Enhanced Status Badges */
@@ -362,7 +362,7 @@
/* Interest item animation */ /* Interest item animation */
opacity: 0; opacity: 0;
transform: translateX(-10px); transform: translateX(-10px);
animation: slideInLeft 0.4s ease-out calc(var(--animation-delay-base) * 26) forwards; animation: slideInLeft 0.3s ease-out calc(var(--animation-delay-base) * 20) forwards;
} }
.interest-item:hover { .interest-item:hover {
@@ -398,7 +398,7 @@
/* Philosophy text animation */ /* Philosophy text animation */
opacity: 0; opacity: 0;
animation: fadeIn 0.8s ease-out calc(var(--animation-delay-base) * 28) forwards; animation: fadeIn 0.6s ease-out calc(var(--animation-delay-base) * 22) forwards;
} }
.philosophy-text::before { .philosophy-text::before {
@@ -409,7 +409,7 @@
font-size: 1.5rem; font-size: 1.5rem;
color: var(--color-nier-accent); color: var(--color-nier-accent);
opacity: 0; opacity: 0;
animation: fadeIn 0.6s ease-out calc(var(--animation-delay-base) * 30) forwards; animation: fadeIn 0.4s ease-out calc(var(--animation-delay-base) * 23) forwards;
} }
.philosophy-note { .philosophy-note {
@@ -421,7 +421,7 @@
padding-top: var(--card-gap); padding-top: var(--card-gap);
border-top: 1px solid var(--color-nier-border); border-top: 1px solid var(--color-nier-border);
line-height: 1.4; line-height: 1.4;
animation: fadeIn 0.6s ease-out calc(var(--animation-delay-base) * 32) forwards; animation: fadeIn 0.4s ease-out calc(var(--animation-delay-base) * 24) forwards;
} }
/* Visual Effects */ /* Visual Effects */
@@ -435,7 +435,7 @@
border-top: 10px solid var(--color-nier-accent); border-top: 10px solid var(--color-nier-accent);
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
animation: fadeIn 0.4s ease-out calc(var(--animation-delay-base) * 15) forwards; animation: fadeIn 0.3s ease-out calc(var(--animation-delay-base) * 11) forwards;
} }
.experience-card:hover .corner-accent { .experience-card:hover .corner-accent {
@@ -452,7 +452,7 @@
background: linear-gradient(90deg, transparent, var(--color-nier-accent), transparent); background: linear-gradient(90deg, transparent, var(--color-nier-accent), transparent);
will-change: transform; will-change: transform;
opacity: 0; opacity: 0;
animation: scanFadeIn 0.6s ease-out calc(var(--animation-delay-base) * 17) forwards, scan 4s ease-in-out calc(var(--animation-delay-base) * 20) infinite; animation: scanFadeIn 0.4s ease-out calc(var(--animation-delay-base) * 12) forwards, scan 4s ease-in-out calc(var(--animation-delay-base) * 15) infinite;
} }
/* Keyframe Animations */ /* Keyframe Animations */
@@ -745,24 +745,24 @@
/* Faster animations on mobile with earlier scrollbar appearance */ /* Faster animations on mobile with earlier scrollbar appearance */
:host { :host {
--animation-duration: 0.4s; --animation-duration: 0.3s;
--animation-delay-base: 0.08s; --animation-delay-base: 0.05s;
} }
.operative-history-container { .operative-history-container {
animation: fadeInContainer 0.4s ease-out 0.2s forwards, enableScrollAfterAnimation 0s ease-out 2.5s forwards; animation: fadeInContainer 0.3s ease-out 0.1s forwards, enableScrollAfterAnimation 0s ease-out 1.5s forwards;
} }
.professional-column { .professional-column {
animation: fadeInUp 0.4s ease-out calc(var(--animation-delay-base) * 4) forwards, enableColumnScrollAfterAnimation 0s ease-out 2.5s forwards; animation: fadeInUp 0.3s ease-out calc(var(--animation-delay-base) * 3) forwards, enableColumnScrollAfterAnimation 0s ease-out 1.5s forwards;
} }
.education-column { .education-column {
animation: fadeInUp 0.4s ease-out calc(var(--animation-delay-base) * 6) forwards, enableColumnScrollAfterAnimation 0s ease-out 2.5s forwards; animation: fadeInUp 0.3s ease-out calc(var(--animation-delay-base) * 4) forwards, enableColumnScrollAfterAnimation 0s ease-out 1.5s forwards;
} }
.personal-column { .personal-column {
animation: fadeInUp 0.4s ease-out calc(var(--animation-delay-base) * 8) forwards, enableColumnScrollAfterAnimation 0s ease-out 2.5s forwards; animation: fadeInUp 0.3s ease-out calc(var(--animation-delay-base) * 5) forwards, enableColumnScrollAfterAnimation 0s ease-out 1.5s forwards;
} }
} }