From 26fa67a233d4d39ebc1b378442e31601e094d749 Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Tue, 19 May 2026 19:13:04 +0200
Subject: [PATCH] Tweak modified date

---
 index.php | 58 ++++++++++++++++++++++++++++++++++++-------------------
 style.css | 12 +++++++++++-
 2 files changed, 49 insertions(+), 21 deletions(-)
diff --git a/index.php b/index.php
index 7df41fb..a1e5961 100644
--- a/index.php
+++ b/index.php
@@ -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) => {
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);
 }
