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

fix: restore avatar color shift animation and handle cv mode

Browse Source 
Co-authored-by: aider (openai/qwen3.6) <aider@aider.chat>
This commit is contained in:
Dejvino 2026-05-23 09:25:50 +02:00
parent 9628205375
commit c751b91bbb
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@ -137,7 +137,7 @@ $cv_skills = $cvData['skills'] ?? [];
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<body class="<?= $isCvPath ? 'cv-mode' : '' ?>">
<main class="bento-grid">

16
style.css
View File

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