From 595b9ca233907eb87ee33f7530f7833b6d82ef25 Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Sun, 24 May 2026 22:50:56 +0200
Subject: [PATCH] CV design tuning

---
 index.php | 126 ++++++++++++++++++++++---------------------------
 style.css | 138 ++++++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 175 insertions(+), 89 deletions(-)

diff --git a/index.php b/index.php
index 47ef956..881b99f 100644
--- a/index.php
+++ b/index.php
@@ -299,77 +299,65 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
         <?php endif; ?>
 
         <?php if ($isCvPath): ?>
-        <section class="card cv-container">
-            <div class="cv-content">
-                <?php
-                $firstJob = $cv_experience[0] ?? null;
-                if ($firstJob):
-                ?>
-                    <section class="cv-section first-experience">
-                        <h2>Latest Experience</h2>
-                        <article class="cv-item">
-                            <header class="cv-item-header">
-                                <h3 class="cv-title"><?= $firstJob['title'] ?></h3>
-                                <span class="cv-date"><?= $firstJob['date'] ?> (<?= calculateYears($firstJob['date']) ?>)</span>
-                            </header>
-                            <p class="cv-org"><?= $firstJob['org'] ?></p>
-                            <p class="cv-desc"><?= $firstJob['desc'] ?></p>
-                        </article>
-                    </section>
-                <?php endif; ?>
-                <section class="cv-section skills">
-                    <h2>Skills</h2>
-                    <div class="skill-categories">
-                        <?php
-                        $global_i = 0;
-                        foreach ($cv_skills as $category => $skills): ?>
-                            <div class="skill-group">
-                                <h3><?= $category ?></h3>
-                                <div class="skill-tags">
-                                    <?php foreach ($skills as $skill):
-                                        $fontSize = 0.85 + (($global_i * 3) % 5) * 0.2;
-                                        $opacity = 0.6 + (($global_i * 2) % 4) * 0.1;
-                                    ?>
-                                        <span class="tag" style="transition-delay: <?= 0.6 + ($global_i * 0.05) ?>s; font-size: <?= $fontSize ?>rem; opacity: <?= $opacity ?>;"><?= $skill ?></span>
-                                    <?php $global_i++;
-                                    endforeach; ?>
-                                </div>
+            <?php
+            $firstJob = $cv_experience[0] ?? null;
+            if ($firstJob):
+            ?>
+                <section class="card first-experience">
+                    <h2>Latest Experience</h2>
+                    <article class="cv-item">
+                        <header class="cv-item-header">
+                            <h3 class="cv-title"><?= $firstJob['title'] ?></h3>
+                            <span class="cv-date"><?= $firstJob['date'] ?> (<?= calculateYears($firstJob['date']) ?>)</span>
+                        </header>
+                        <p class="cv-org"><?= $firstJob['org'] ?></p>
+                        <p class="cv-desc"><?= $firstJob['desc'] ?></p>
+                    </article>
+                </section>
+            <?php endif; ?>
+            <section class="card skills">
+                <h2>Skills</h2>
+                <div class="skill-categories">
+                    <?php foreach ($cv_skills as $category => $skills): ?>
+                        <div class="skill-group">
+                            <h3><?= $category ?></h3>
+                            <div class="skill-tags">
+                                <?php foreach ($skills as $skill): ?>
+                                    <span class="tag"><?= $skill ?></span>
+                                <?php endforeach; ?>
                             </div>
-                        <?php endforeach; ?>
-                    </div>
-                </section>
-
-                <section class="cv-section experience">
-                    <h2>Past Experience</h2>
-                    <?php foreach (array_slice($cv_experience, 1) as $job): ?>
-                        <article class="cv-item">
-                            <header class="cv-item-header">
-                                <h3 class="cv-title"><?= $job['title'] ?></h3>
-                                <span class="cv-date"><?= $job['date'] ?> (<?= calculateYears($job['date']) ?>)</span>
-                            </header>
-                            <p class="cv-org"><?= $job['org'] ?></p>
-                            <p class="cv-desc"><?= $job['desc'] ?></p>
-                        </article>
+                        </div>
                     <?php endforeach; ?>
-                </section>
-
-                <section class="cv-section education">
-                    <h2>Education</h2>
-                    <?php foreach ($cv_education as $edu): ?>
-                        <article class="cv-item">
-                            <header class="cv-item-header">
-                                <h3 class="cv-title"><?= $edu['title'] ?></h3>
-                                <time class="cv-date"><?= $edu['date'] ?></time>
-                            </header>
-                            <p class="cv-org"><?= $edu['org'] ?></p>
-                            <?php if ($edu['desc']): ?>
-                                <p class="cv-desc"><?= $edu['desc'] ?></p>
-                            <?php endif; ?>
-                        </article>
-                    <?php endforeach; ?>
-                </section>
-            </div>
-        </section>
+                </div>
+            </section>
+            <section class="card experience">
+                <h2>Past Experience</h2>
+                <?php foreach (array_slice($cv_experience, 1) as $job): ?>
+                    <article class="cv-item">
+                        <header class="cv-item-header">
+                            <h3 class="cv-title"><?= $job['title'] ?></h3>
+                            <span class="cv-date"><?= $job['date'] ?> (<?= calculateYears($job['date']) ?>)</span>
+                        </header>
+                        <p class="cv-org"><?= $job['org'] ?></p>
+                        <p class="cv-desc"><?= $job['desc'] ?></p>
+                    </article>
+                <?php endforeach; ?>
+            </section>
+            <section class="card education">
+                <h2>Education</h2>
+                <?php foreach ($cv_education as $edu): ?>
+                    <article class="cv-item">
+                        <header class="cv-item-header">
+                            <h3 class="cv-title"><?= $edu['title'] ?></h3>
+                            <time class="cv-date"><?= $edu['date'] ?></time>
+                        </header>
+                        <p class="cv-org"><?= $edu['org'] ?></p>
+                        <?php if ($edu['desc']): ?>
+                            <p class="cv-desc"><?= $edu['desc'] ?></p>
+                        <?php endif; ?>
+                    </article>
+                <?php endforeach; ?>
+            </section>
         <?php endif; ?>
     </main>
 
diff --git a/style.css b/style.css
index 9f97bd7..8ca739a 100644
--- a/style.css
+++ b/style.css
@@ -128,16 +128,16 @@ body {
         border-radius: 4px !important;
         margin-right: 16px !important;
     }
-    .hero { grid-column: span 3; }
-    .interests-showcase { grid-column: span 3; }
-    .hiring-toggle { grid-column: span 3; }
-    .selected-work { grid-column: span 2; }
-    body:not(.cv-mode) .personal { grid-column: span 3; }
-    .cv-mode .personal { grid-column: span 1; }
-    .cv-container { grid-column: span 3; }
-    .experience { grid-column: span 3; }
-    .skills { grid-column: span 3; }
-    .education { grid-column: span 3; }
+    .hero { grid-column: span 3; transform: none; }
+    .interests-showcase { grid-column: span 3; transform: none; }
+    .hiring-toggle { grid-column: span 3; transform: none; }
+    .selected-work { grid-column: span 2; transform: none; }
+    body:not(.cv-mode) .personal { grid-column: span 3; transform: none; }
+    .cv-mode .personal { grid-column: span 1; transform: none; }
+    .first-experience { grid-column: span 3; transform: none; }
+    .experience { grid-column: span 3; transform: none; }
+    .skills { grid-column: span 3; transform: none; }
+    .education { grid-column: span 3; transform: none; }
 
     /* Shuffle Logic */
     .avatar {
@@ -149,13 +149,14 @@ body {
         border-radius: 4px !important;
         margin-right: 16px !important;
     }
-    .hero { transform: rotate(0.1deg); }
-    .selected-work { transform: translate(2px, -2px) rotate(-0.2deg); }
-    .personal { transform: translate(1px, -1px) rotate(-0.15deg); }
-    .hiring-toggle { transform: translate(-2px, 3px) rotate(0.2deg); }
-    .experience { transform: translate(3px, -2px) rotate(-0.2deg); }
-    .skills { transform: translate(-3px, 4px) rotate(0.6deg); }
-    .education { transform: translate(2px, 3px) rotate(-0.4deg); }
+    .hero { transform: none; }
+    .selected-work { transform: translate(2px, -2px); }
+    .personal { transform: translate(1px, -1px); }
+    .hiring-toggle { transform: translate(-2px, 3px); }
+    .first-experience { transform: translate(3px, -2px); }
+    .experience { transform: translate(3px, -2px); }
+    .skills { transform: translate(-3px, 4px); }
+    .education { transform: translate(2px, 3px); }
 }
 
 
@@ -381,8 +382,8 @@ body {
 
 
 .hiring-toggle:hover {
-    filter: brightness(1.2);
-    transform: translate(-2px, 3px) rotate(0.2deg) scale(1.01);
+    filter: brightness(1.2); /* Keep brightness for hover effect */
+    transform: translate(-2px, 3px) scale(1.01); /* Remove rotation, keep translate and scale */
     background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                 linear-gradient(135deg, rgba(255, 0, 255, 0.6), rgba(0, 243, 255, 0.6)) border-box;
 }
@@ -703,7 +704,7 @@ a { color: var(--link-color); text-decoration: none; }
 @media (max-width: 768px) {
     .bento-grid { grid-template-columns: 1fr; }
     .profile, .about, .interests, .links, .contact,
-    .experience, .skills, .education { 
+    .first-experience, .experience, .skills, .education { 
         grid-column: span 1; 
     }
     .avatar {
@@ -723,6 +724,103 @@ a { color: var(--link-color); text-decoration: none; }
     .pill-url { display: inline; }
 }
 
+/* Tamed Cyberpunk Overrides for CV Mode */
+body.cv-mode {
+    --bg-color: #0d0e12;
+    --text-color: #cbd5e1; /* slaty blue-gray */
+    --accent-color: #00d2ff;
+    --secondary-accent: #f472b6; /* modern pink/magenta */
+    --card-bg: #15171e;
+    background-image: 
+        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
+    background-size: 60px 60px !important;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.cv-mode .card {
+    clip-path: none !important;
+    transform: none !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
+    box-shadow: none !important;
+    background: var(--card-bg) !important;
+    border-top: 2px solid #1e293b !important;
+    filter: none !important;
+    border-radius: 6px;
+}
+
+.cv-mode .card:hover {
+    border-top-color: var(--accent-color) !important; /* Visual feedback on focus */
+    background: #1a1c25 !important;
+}
+
+.cv-mode h1, .cv-mode h2, .cv-mode h3 {
+    font-family: inherit;
+    text-transform: uppercase;
+    letter-spacing: normal;
+    text-shadow: none !important;
+}
+
+.cv-mode h1 { 
+    color: #fff; 
+    text-transform: none; 
+    font-weight: 800; 
+    letter-spacing: -0.02em; 
+}
+
+.cv-mode h2 { 
+    color: var(--accent-color); 
+    font-size: 0.7rem; 
+    font-family: var(--mono-font);
+    letter-spacing: 0.15em;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
+    padding-bottom: 12px;
+    margin-bottom: 24px;
+}
+
+.cv-mode h3 { 
+    color: #f8fafc; 
+    text-transform: none; 
+    font-weight: 600; 
+    font-size: 1.05rem; 
+}
+
+.cv-mode .tag {
+    font-size: 0.72rem !important;
+    font-family: var(--mono-font);
+    font-weight: 500;
+    opacity: 1 !important;
+    border: 1px solid rgba(0, 210, 255, 0.15);
+    background: rgba(0, 210, 255, 0.04);
+    color: var(--accent-color);
+    padding: 4px 12px;
+    transform: none !important;
+    border-radius: 4px;
+}
+
+.cv-mode .cv-date { 
+    color: var(--secondary-accent); 
+    font-family: var(--mono-font);
+    font-weight: 600; 
+    font-size: 0.75rem;
+    background: rgba(244, 114, 182, 0.05);
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.cv-mode .cv-org {
+    font-size: 0.85rem;
+    color: var(--accent-color);
+    opacity: 0.9;
+    font-weight: 600;
+    margin: 4px 0 10px 0;
+}
+
+.cv-mode .cv-desc {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--text-color);
+}
 
 /* Print mode */
 /* Condensed Print Mode - White Background */