fixed Modified location

index.php

@@ -228,8 +228,6 @@ $cv_skills = $cvData['skills'] ?? [];
             </label>
 
             <div class="cv-content">
-                <?php $file_mod_time = filemtime(__FILE__); ?>
-                <p class="cv-modified hidden hidden-toggle">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
                 <?php
                 $firstJob = $cv_experience[0] ?? null;
                 if ($firstJob):
@@ -393,6 +391,8 @@ $cv_skills = $cvData['skills'] ?? [];
     </script>
     <!-- Cloudflare Web Analytics -->
     <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "90827cb740cd4b1db611be059f64daa9"}'></script><!-- End Cloudflare Web Analytics -->
+        <?php $file_mod_time = filemtime(__FILE__); ?>
+        <p class="page-footer">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
 </body>
 
 </html>

style.css

@@ -7,6 +7,7 @@
     --mono-font: 'SFMono-Regular', Consolas, Menlo, monospace;
 }
 
+
 /* Prevent animations/transitions on initial load */
 .preload * {
     -webkit-transition: none !important;
@@ -17,11 +18,13 @@
     animation: none !important;
 }
 
+
 @keyframes pulse-trace {
     0%, 100% { opacity: 0.3; }
     50% { opacity: 1; }
 }
 
+
 @keyframes scan-line {
     0% { transform: translateX(-150%) skewX(-45deg); opacity: 0; }
     10% { opacity: 0.5; }
@@ -29,6 +32,7 @@
     100% { transform: translateX(150%) skewX(-45deg); opacity: 0; }
 }
 
+
 @keyframes grow-reveal {
     from { 
         opacity: 0; 
@@ -42,6 +46,7 @@
     }
 }
 
+
 @keyframes shrink-fade-away { /* New animation for shrinking */
     from {
         opacity: 1;
@@ -55,6 +60,7 @@
     }
 }
 
+
 * { box-sizing: border-box; }
 
 body {
@@ -65,13 +71,15 @@ body {
     background-size: 24px 24px;
     color: var(--text-color);
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
-    align-items: flex-start;
+    align-items: center;
     min-height: 100vh;
     padding: 40px 20px;
+    flex-direction: column;
     overflow-x: hidden;
 }
 
+
 .bento-grid {
     display: grid;
     max-width: 1000px;
@@ -79,6 +87,7 @@ body {
     grid-template-columns: repeat(3, 1fr);
 }
 
+
 .card {
     background: var(--card-bg);
     padding: 24px;
@@ -97,6 +106,7 @@ body {
     );
 }
 
+
 /* Desktop-only effects: Shuffle and Gradient Borders */
 @media (min-width: 769px) {
     .card {
@@ -151,6 +161,7 @@ body {
     .education { transform: translate(2px, 3px) rotate(-0.4deg); }
 }
 
+
 .experience, .skills, .education {
     display: none; /* Keep out of layout entirely when off */
     opacity: 0;
@@ -159,6 +170,7 @@ body {
     pointer-events: none;
 }
 
+
 @media (max-width: 768px) {
     .card {
         border-color: rgba(0, 243, 255, 0.3);
@@ -168,6 +180,7 @@ body {
     }
 }
 
+
 .profile { display: flex; align-items: center; gap: 32px; }
 
 .hero {
@@ -175,34 +188,42 @@ body {
     flex-direction: column;
     gap: 16px;
 }
+
 .hero-identity {
     display: flex;
     align-items: center;
     gap: 20px;
 }
+
 .hero-name {
     flex: 1;
 }
+
 .hero-name h1 {
     margin: 0 0 4px 0;
 }
+
 .hero-name .headline {
     margin: 0 0 4px 0;
     font-size: 1rem;
     color: var(--accent-color);
 }
+
 .hero-name .location {
     margin: 0;
     font-size: 0.85rem;
     opacity: 0.7;
 }
+
 .hero-description {
     margin: 0;
 }
+
 .hero-description p {
     margin: 0;
     line-height: 1.5;
 }
+
 /**
  * Link pills – shared base
  */
@@ -220,22 +241,26 @@ body {
     white-space: nowrap;
 }
 
+
 .pill-icon {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
 }
 
+
 .pill-label {
     font-weight: 600;
 }
 
+
 .pill-url {
     font-size: 0.72rem;
     opacity: 0.5;
     margin-left: 2px;
 }
 
+
 /**
  * Contact pills – gold accent
  */
@@ -245,22 +270,26 @@ body {
     gap: 10px;
 }
 
+
 .contact-pill {
     color: var(--link-color);
     background: rgba(255, 215, 0, 0.06);
     border-color: rgba(255, 215, 0, 0.2);
 }
 
+
 .contact-pill:hover {
     background: rgba(255, 215, 0, 0.12);
     border-color: rgba(255, 215, 0, 0.5);
     box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
 }
 
+
 .contact-pill .pill-url {
     color: var(--link-color);
 }
 
+
 /**
  * Nav pills – cyan accent
  */
@@ -272,22 +301,26 @@ body {
     border-top: 1px solid rgba(0, 243, 255, 0.12);
 }
 
+
 .nav-pill {
     color: var(--text-color);
     background: rgba(0, 243, 255, 0.04);
     border-color: rgba(0, 243, 255, 0.15);
 }
 
+
 .nav-pill:hover {
     background: rgba(0, 243, 255, 0.1);
     border-color: rgba(0, 243, 255, 0.4);
     box-shadow: 0 0 12px rgba(0, 243, 255, 0.15);
 }
 
+
 .nav-pill .pill-url {
     color: var(--text-color);
 }
 
+
 /**
  * Personal interests – narrow side panel, non-interactive
  */
@@ -296,6 +329,7 @@ body {
     flex-direction: column;
     gap: 10px;
 }
+
 .personal-tag {
     font-size: 0.9rem;
     color: var(--text-color);
@@ -304,12 +338,14 @@ body {
     border-left: 2px solid rgba(0, 243, 255, 0.15);
 }
 
+
 .hiring-toggle {
     padding: 12px 24px;
     cursor: pointer;
     transition: transform 0.2s ease, filter 0.3s ease;
 }
 
+
 .hiring-toggle:hover {
     filter: brightness(1.2);
     transform: translate(-2px, 3px) rotate(0.2deg) scale(1.01);
@@ -317,10 +353,12 @@ body {
                 linear-gradient(135deg, rgba(255, 0, 255, 0.6), rgba(0, 243, 255, 0.6)) border-box;
 }
 
+
 .hidden {
     display: none !important;
 }
 
+
 .reveal {
     display: block !important;
     pointer-events: auto;
@@ -330,6 +368,7 @@ body {
     backface-visibility: hidden;
 }
 
+
 .fade-out {
     display: block !important;
     /* This class will be applied when content is being hidden */
@@ -339,6 +378,7 @@ body {
     backface-visibility: hidden;
 }
 
+
 /* CV Specific Content Styles */
 .cv-section {
     background: rgba(0, 243, 255, 0.03);
@@ -354,17 +394,20 @@ body {
     transition: all 0.3s ease;
 }
 
+
 .cv-section:hover {
     background: rgba(0, 243, 255, 0.07);
     border-color: rgba(0, 243, 255, 0.3);
 }
 
+
 .cv-item {
     margin-bottom: 20px;
     border-left: 2px solid rgba(0, 243, 255, 0.2);
     padding-left: 15px;
 }
 
+
 .cv-item:last-child { margin-bottom: 0; }
 
 .cv-item-header, .cv-header {
@@ -374,15 +417,18 @@ body {
     margin-bottom: 4px;
 }
 
+
 address.mono-addr {
     font-style: normal;
     margin-bottom: 15px;
     padding-top: 5px;
 }
+
 address.mono-addr span {
     display: block;
 }
 
+
 .cv-title {
     margin: 0;
     font-weight: bold;
@@ -390,17 +436,20 @@ address.mono-addr span {
     font-size: 1rem;
 }
 
+
 .cv-date {
     font-size: 0.7rem;
     color: var(--accent-color);
 }
 
+
 .cv-org {
     margin: 0 0 8px 0;
     font-size: 0.8rem;
     color: var(--link-color);
 }
 
+
 .cv-desc {
     margin: 0;
     font-size: 0.85rem;
@@ -408,6 +457,7 @@ address.mono-addr span {
     opacity: 0.9;
 }
 
+
 .cv-modified {
     text-align: right;
     font-size: 0.7rem;
@@ -417,6 +467,7 @@ address.mono-addr span {
     font-family: var(--mono-font);
 }
 
+
 .skill-categories {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -424,6 +475,7 @@ address.mono-addr span {
     padding: 1rem 0;
 }
 
+
 .skill-group h3 {
     font-size: 0.6rem;
     text-transform: uppercase;
@@ -434,14 +486,16 @@ address.mono-addr span {
     color: var(--text-color);
 }
 
+
 .skill-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem 1.5rem;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
 }
 
+
 .tag {
     display: inline-block;
     opacity: 0;
@@ -449,11 +503,13 @@ address.mono-addr span {
     transition: opacity 0.4s ease, transform 0.4s ease;
 }
 
+
 .reveal .tag {
     opacity: 1;
     transform: translateX(0);
 }
 
+
 .profile::before {
     content: "";
     position: absolute;
@@ -466,11 +522,13 @@ address.mono-addr span {
     pointer-events: none;
 }
 
+
 .link-grid {
     list-style: none; padding: 0; display: grid; gap: 10px;
 }
 
 
+
 .link-grid a { 
     font-size: 0.75rem;
     display: block;
@@ -485,6 +543,7 @@ address.mono-addr span {
     text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
 }
 
+
 .link-grid a:hover {
     background: rgba(0, 243, 255, 0.25);
     border-left-color: var(--accent-color);
@@ -492,12 +551,14 @@ address.mono-addr span {
     transform: translateY(-2px);
 }
 
+
 /* Specific styling for the small contact buttons */
 .contact .link-grid {
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     margin-top: 15px;
 }
 
+
 .links::after {
     content: "";
     position: absolute;
@@ -509,6 +570,7 @@ address.mono-addr span {
     animation: pulse-trace 1s infinite;
 }
 
+
 /* Cyberpunk Toggle Switch */
 .cv-toggle-container {
     display: flex;
@@ -523,10 +585,12 @@ address.mono-addr span {
     font-weight: bold;
 }
 
+
 .cv-mode .cv-toggle-container span {
     color: #fff;
 }
 
+
 .switch {
     position: relative;
     display: inline-block;
@@ -534,6 +598,7 @@ address.mono-addr span {
     height: 20px;
 }
 
+
 .switch input { opacity: 0; width: 0; height: 0; }
 
 .slider {
@@ -545,6 +610,7 @@ address.mono-addr span {
     border: 1px solid var(--accent-color);
 }
 
+
 .slider:before {
     position: absolute;
     content: "";
@@ -555,6 +621,7 @@ address.mono-addr span {
     box-shadow: 0 0 10px var(--accent-color);
 }
 
+
 input:checked + .slider { background-color: rgba(0, 243, 255, 0.2); border-color: var(--text-color); }
 input:checked + .slider:before { 
     transform: translateX(20px); 
@@ -562,6 +629,7 @@ input:checked + .slider:before {
     box-shadow: 0 0 10px var(--text-color);
 }
 
+
 .avatar {
     width: 120px;
     height: 160px; /* Explicit height for aspect ratio 3:4 */
@@ -570,6 +638,7 @@ input:checked + .slider:before {
     border: 1px solid var(--text-color);
 }
 
+
 h1 { 
     margin: 0; 
     font-size: clamp(1.5rem, 5vw, 2.2rem); 
@@ -578,6 +647,7 @@ h1 {
     letter-spacing: 1px;
 }
 
+
 h2 { 
     font-size: 0.75rem; 
     text-transform: uppercase; 
@@ -588,6 +658,7 @@ h2 {
     letter-spacing: 2px;
 }
 
+
 a { color: var(--link-color); text-decoration: none; }
 
 @media (max-width: 768px) {
@@ -614,6 +685,7 @@ a { color: var(--link-color); text-decoration: none; }
     .pill-url { display: inline; }
 }
 
+
 /* Print mode */
 /* Condensed Print Mode - White Background */
 @media print {
@@ -769,6 +841,43 @@ a { color: var(--link-color); text-decoration: none; }
         flex-wrap: wrap !important;
     }
     
+    /* Hero layout – keep photo left, name right (like desktop) */
+    .hero {
+        display: flex !important;
+        flex-direction: column !important;
+        gap: 12px !important;
+    }
+    .hero-identity {
+        display: flex !important;
+        flex-direction: row !important;
+        align-items: center !important;
+        gap: 16px !important;
+    }
+    
+    
+    /* Selected Work highlights – give titles and items room */
+    .highlight-item {
+        margin: 12px 0 !important;
+        padding: 8px 0 !important;
+        border-bottom: 1px solid #eee !important;
+    }
+    .highlight-item:last-child {
+        border-bottom: none !important;
+    }
+    .highlight-item h3 {
+        font-size: 13px !important;
+        margin: 0 0 4px 0 !important;
+    }
+    .highlight-subtitle {
+        font-size: 0.85em !important;
+        margin: 0 0 6px 0 !important;
+        font-style: italic !important;
+    }
+    .highlight-description {
+        font-size: 0.9em !important;
+        margin: 0 !important;
+        line-height: 1.5 !important;
+    }
     /* Links grid */
     .link-grid a {
         color: #000 !important;
@@ -863,4 +972,21 @@ a { color: var(--link-color); text-decoration: none; }
         border-radius: 3px !important;
         background: #f7f7f7 !important;
     }
+
+    .page-footer {
+        font-size: 0.7rem !important;
+        color: #888 !important;
+        margin: 16px 0 0 !important;
+        opacity: 0.5 !important;
+    }
+}
+
+
+.page-footer {
+    text-align: center;
+    font-size: 0.75rem;
+    color: #666;
+    margin: 24px 0 0;
+    padding: 0;
+    opacity: 0.6;
 }