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

Tweak modified date

Browse Source
This commit is contained in:
Dejvino 2026-05-19 19:13:04 +02:00
parent ebc81f5d8e
commit 26fa67a233
2 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
index.php
View File

@ -86,7 +86,7 @@ $cv_skills = [
</style>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<body class="preload">
<main class="bento-grid">
<section class="card profile">
@ -150,7 +150,7 @@ $cv_skills = [
<div class="cv-content">
<?php $file_mod_time = filemtime(__FILE__); ?>
<p class="cv-modified">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
<p class="cv-modified hidden">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
<section class="cv-section skills hidden">
<h2>Skills</h2>
@ -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) => {

12
style.css
View File

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