diff --git a/index.php b/index.php index b753de2..11b2ec8 100644 --- a/index.php +++ b/index.php @@ -137,7 +137,7 @@ $cv_skills = $cvData['skills'] ?? []; - +
diff --git a/style.css b/style.css index d5198ab..64508e1 100644 --- a/style.css +++ b/style.css @@ -51,9 +51,9 @@ @keyframes avatar-color-shift { - 0%, 100% { filter: brightness(0.85) contrast(1.1) sepia(1) hue-rotate(180deg); } - 33% { filter: brightness(0.85) contrast(1.1) sepia(1) hue-rotate(210deg); } - 66% { filter: brightness(0.85) contrast(1.1) sepia(1) hue-rotate(50deg); } + 0%, 100% { filter: grayscale(0.5) sepia(0.8) hue-rotate(180deg) brightness(0.9); } + 33% { filter: grayscale(0.5) sepia(0.8) hue-rotate(210deg) brightness(0.9); } + 66% { filter: grayscale(0.5) sepia(0.8) hue-rotate(50deg) brightness(0.9); } } @@ -125,7 +125,6 @@ body { object-fit: cover !important; border: 2px solid #ccc !important; border-radius: 4px !important; - filter: none !important; margin-right: 16px !important; } .hero { grid-column: span 3; } @@ -145,7 +144,6 @@ body { object-fit: cover !important; border: 2px solid #ccc !important; border-radius: 4px !important; - filter: none !important; margin-right: 16px !important; } .hero { transform: rotate(0.1deg); } @@ -645,7 +643,12 @@ input:checked + .slider:before { height: 160px; /* Explicit height for aspect ratio 3:4 */ object-fit: cover; border: 1px solid var(--text-color); - animation: avatar-color-shift 15s infinite linear; + animation: avatar-color-shift 20s infinite linear; +} + +body.cv-mode .avatar { + animation: none; + filter: none; } @@ -684,7 +687,6 @@ a { color: var(--link-color); text-decoration: none; } object-fit: cover !important; border: 2px solid #ccc !important; border-radius: 4px !important; - filter: none !important; margin-right: 16px !important; } .profile { flex-direction: column; text-align: center; }