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> </style>
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
</head> </head>
<body> <body class="preload">
<main class="bento-grid"> <main class="bento-grid">
<section class="card profile"> <section class="card profile">
@ -150,7 +150,7 @@ $cv_skills = [
<div class="cv-content"> <div class="cv-content">
<?php $file_mod_time = filemtime(__FILE__); ?> <?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"> <section class="cv-section skills hidden">
<h2>Skills</h2> <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 grid = document.querySelector('.bento-grid');
const labelText = document.getElementById('toggle-label-text'); const labelText = document.getElementById('toggle-label-text');
if (labelText) labelText.innerText = show ? 'SYSTEM ACCESS: CV_DATA' : 'Looking to hire?'; if (labelText) labelText.innerText = show ? 'SYSTEM ACCESS: CV_DATA' : 'Looking to hire?';
const cvPanels = [ const cvPanels = [
document.querySelector('.cv-modified'),
document.querySelector('.experience'), document.querySelector('.experience'),
document.querySelector('.skills'), document.querySelector('.skills'),
document.querySelector('.education') document.querySelector('.education')
@ -250,29 +251,42 @@ $cv_skills = [
grid.classList.add('cv-mode'); grid.classList.add('cv-mode');
cvPanels.forEach((el, index) => { cvPanels.forEach((el, index) => {
setTimeout(() => { const reveal = () => {
el.classList.remove('hidden', 'fade-out', 'reveal'); el.classList.remove('hidden', 'fade-out', 'reveal');
void el.offsetWidth; // Force reflow void el.offsetWidth; // Force reflow
el.classList.add('reveal'); el.classList.add('reveal');
applyShifting(el, true, animationDuration); if (animate) applyShifting(el, true, animationDuration);
}, index * staggerDelay); };
if (animate) setTimeout(reveal, index * staggerDelay);
else reveal();
}); });
} else { } else {
[...cvPanels].reverse().forEach((el, index) => { const panels = [...cvPanels].reverse();
setTimeout(() => { panels.forEach((el, index) => {
const hide = () => {
el.classList.remove('reveal'); el.classList.remove('reveal');
el.classList.add('fade-out'); if (animate) {
applyShifting(el, false); el.classList.add('fade-out');
setTimeout(() => { applyShifting(el, false);
setTimeout(() => {
el.classList.add('hidden');
el.classList.remove('fade-out');
}, animationDuration);
} else {
el.classList.add('hidden'); 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 if (animate) {
const totalRollupTime = (cvPanels.length * staggerDelay) + animationDuration; // Remove cv-mode only after the longest-running shrink animation finishes
setTimeout(() => grid.classList.remove('cv-mode'), totalRollupTime); const totalRollupTime = (cvPanels.length * staggerDelay) + animationDuration;
setTimeout(() => grid.classList.remove('cv-mode'), totalRollupTime);
} else {
grid.classList.remove('cv-mode');
}
} }
if (updateHash) { if (updateHash) {
@ -285,10 +299,14 @@ $cv_skills = [
}; };
// Initialize state from URL // 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('load', () => {
window.addEventListener('hashchange', checkHash); 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'); const cvToggleInput = document.getElementById('cv-toggle');
cvToggleInput?.addEventListener('change', (e) => { cvToggleInput?.addEventListener('change', (e) => {

12
style.css
View File

@ -7,6 +7,16 @@
--mono-font: 'SFMono-Regular', Consolas, Menlo, monospace; --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 { @keyframes pulse-trace {
0%, 100% { opacity: 0.3; } 0%, 100% { opacity: 0.3; }
50% { opacity: 1; } 50% { opacity: 1; }
@ -257,7 +267,7 @@ body {
text-align: right; text-align: right;
font-size: 0.7rem; font-size: 0.7rem;
opacity: 0.5; opacity: 0.5;
margin-top: -10px; margin-top: 0px;
margin-bottom: 1rem; margin-bottom: 1rem;
font-family: var(--mono-font); font-family: var(--mono-font);
} }