diff --git a/index.php b/index.php
index 7df41fb..a1e5961 100644
--- a/index.php
+++ b/index.php
@@ -86,7 +86,7 @@ $cv_skills = [
-
+
@@ -150,7 +150,7 @@ $cv_skills = [
-
Modified:
+
Modified:
Skills
@@ -234,13 +234,14 @@ $cv_skills = [
}
};
- const toggleCV = (show, updateHash = true) => {
+ const toggleCV = (show, updateHash = true, animate = true) => {
const grid = document.querySelector('.bento-grid');
const labelText = document.getElementById('toggle-label-text');
if (labelText) labelText.innerText = show ? 'SYSTEM ACCESS: CV_DATA' : 'Looking to hire?';
const cvPanels = [
+ document.querySelector('.cv-modified'),
document.querySelector('.experience'),
document.querySelector('.skills'),
document.querySelector('.education')
@@ -250,29 +251,42 @@ $cv_skills = [
grid.classList.add('cv-mode');
cvPanels.forEach((el, index) => {
- setTimeout(() => {
+ const reveal = () => {
el.classList.remove('hidden', 'fade-out', 'reveal');
void el.offsetWidth; // Force reflow
el.classList.add('reveal');
- applyShifting(el, true, animationDuration);
- }, index * staggerDelay);
+ if (animate) applyShifting(el, true, animationDuration);
+ };
+ if (animate) setTimeout(reveal, index * staggerDelay);
+ else reveal();
});
} else {
- [...cvPanels].reverse().forEach((el, index) => {
- setTimeout(() => {
+ const panels = [...cvPanels].reverse();
+ panels.forEach((el, index) => {
+ const hide = () => {
el.classList.remove('reveal');
- el.classList.add('fade-out');
- applyShifting(el, false);
- setTimeout(() => {
+ if (animate) {
+ el.classList.add('fade-out');
+ applyShifting(el, false);
+ setTimeout(() => {
+ el.classList.add('hidden');
+ el.classList.remove('fade-out');
+ }, animationDuration);
+ } else {
el.classList.add('hidden');
- el.classList.remove('fade-out');
- }, animationDuration);
- }, (cvPanels.length - 1 - index) * staggerDelay);
+ }
+ };
+ if (animate) setTimeout(hide, index * staggerDelay);
+ else hide();
});
- // Remove cv-mode only after the longest-running shrink animation finishes
- const totalRollupTime = (cvPanels.length * staggerDelay) + animationDuration;
- setTimeout(() => grid.classList.remove('cv-mode'), totalRollupTime);
+ if (animate) {
+ // Remove cv-mode only after the longest-running shrink animation finishes
+ const totalRollupTime = (cvPanels.length * staggerDelay) + animationDuration;
+ setTimeout(() => grid.classList.remove('cv-mode'), totalRollupTime);
+ } else {
+ grid.classList.remove('cv-mode');
+ }
}
if (updateHash) {
@@ -285,10 +299,14 @@ $cv_skills = [
};
// Initialize state from URL
- const checkHash = () => toggleCV(window.location.hash === '#CV', false);
+ const checkHash = (animate = false) => toggleCV(window.location.hash === '#CV', false, animate);
- window.addEventListener('load', checkHash);
- window.addEventListener('hashchange', checkHash);
+ window.addEventListener('load', () => {
+ checkHash(false);
+ // Small delay to ensure initial styles are applied before enabling transitions
+ setTimeout(() => document.body.classList.remove('preload'), 20);
+ });
+ window.addEventListener('hashchange', () => checkHash(true));
const cvToggleInput = document.getElementById('cv-toggle');
cvToggleInput?.addEventListener('change', (e) => {
diff --git a/style.css b/style.css
index a3446c7..0eb1605 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,16 @@
--mono-font: 'SFMono-Regular', Consolas, Menlo, monospace;
}
+/* Prevent animations/transitions on initial load */
+.preload * {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -ms-transition: none !important;
+ -o-transition: none !important;
+ transition: none !important;
+ animation: none !important;
+}
+
@keyframes pulse-trace {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
@@ -257,7 +267,7 @@ body {
text-align: right;
font-size: 0.7rem;
opacity: 0.5;
- margin-top: -10px;
+ margin-top: 0px;
margin-bottom: 1rem;
font-family: var(--mono-font);
}