From adee14fabca441f34495419e4920728ea1d0ed81 Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Tue, 19 May 2026 07:33:17 +0200
Subject: [PATCH] CV as a scroll-out

---
 index.php | 122 ++++++++++++++++++++++++++++--------------------------
 style.css |  36 ++++++++++++++--
 2 files changed, 95 insertions(+), 63 deletions(-)

diff --git a/index.php b/index.php
index 54aa7b8..033dd81 100644
--- a/index.php
+++ b/index.php
@@ -95,10 +95,10 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
                     echo '<div class="avatar-placeholder"></div>';
                 }
             ?>
-            <div class="header-text">
+            <header class="header-text">
                 <h1><?= $name ?></h1>
                 <p class="subtitle"><?= $subtitle ?></p>
-            </div>
+            </header>
         </section>
 
         <section class="card about">
@@ -113,6 +113,18 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
             <p><?= $hardware_info ?></p>
         </section>
 
+        <section class="card contact">
+            <h2>Remote_Access</h2>
+            <address class="mono-addr">
+              Email: <span id="contact-mail">uncovering...</span>
+            </address>
+            <ul class="link-grid">
+                <?php foreach ($extra_contact_links as $label => $url): ?>
+                    <li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li>
+                <?php endforeach; ?>
+            </ul>
+        </section>
+
         <section class="card links">
             <h2>Navigation</h2>
             <ul class="link-grid">
@@ -122,65 +134,57 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
             </ul>
         </section>
 
-        <section class="card contact">
-            <h2>Remote_Access</h2>
-            <p class="mono-addr">
-              Contact email: <span id="contact-mail">uncovering...</span>
-            </p>
-            <ul class="link-grid">
-                <?php foreach ($extra_contact_links as $label => $url): ?>
-                    <li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li>
-                <?php endforeach; ?>
-            </ul>
-        </section>
-
-        <label class="card hiring-toggle" for="cv-toggle">
-            <div class="cv-toggle-container">
-                <span id="toggle-label-text">Looking to hire?</span>
-                <span class="switch">
-                    <input type="checkbox" id="cv-toggle">
-                    <span class="slider"></span>
-                </span>
-            </div>
-        </label>
-
-        <section class="card experience hidden">
-            <h2>Experience</h2>
-            <?php foreach ($cv_experience as $job): ?>
-                <div class="cv-item">
-                    <div class="cv-header">
-                        <span class="cv-title"><?= $job['title'] ?></span>
-                        <span class="cv-date"><?= $job['date'] ?></span>
-                    </div>
-                    <div class="cv-org"><?= $job['org'] ?></div>
-                    <div class="cv-desc"><?= $job['desc'] ?></div>
+        <section class="card cv-container">
+            <label class="cv-header" for="cv-toggle">
+                <div class="cv-toggle-container">
+                    <span id="toggle-label-text">Looking to hire?</span>
+                    <span class="switch">
+                        <input type="checkbox" id="cv-toggle">
+                        <span class="slider"></span>
+                    </span>
                 </div>
-            <?php endforeach; ?>
-        </section>
+            </label>
 
-        <section class="card skills hidden">
-            <h2>Skills</h2>
-            <div class="skill-tags">
-                <?php foreach ($cv_skills as $i => $skill): ?>
-                    <span class="tag" style="transition-delay: <?= 0.6 + ($i * 0.05) ?>s"><?= $skill ?></span>
-                <?php endforeach; ?>
-            </div>
-        </section>
-
-        <section class="card education hidden">
-            <h2>Education</h2>
-            <?php foreach ($cv_education as $edu): ?>
-                <div class="cv-item">
-                    <div class="cv-header">
-                        <span class="cv-title"><?= $edu['title'] ?></span>
-                        <span class="cv-date"><?= $edu['date'] ?></span>
+            <div class="cv-content">
+                <section class="cv-section skills hidden">
+                    <h2>Skills</h2>
+                    <div class="skill-tags">
+                        <?php foreach ($cv_skills as $i => $skill): ?>
+                            <span class="tag" style="transition-delay: <?= 0.6 + ($i * 0.05) ?>s"><?= $skill ?></span>
+                        <?php endforeach; ?>
                     </div>
-                    <div class="cv-org"><?= $edu['org'] ?></div>
-                    <?php if ($edu['desc']): ?>
-                        <div class="cv-desc"><?= $edu['desc'] ?></div>
-                    <?php endif; ?>
-                </div>
-            <?php endforeach; ?>
+                </section>
+                
+                <section class="cv-section experience hidden">
+                    <h2>Experience</h2>
+                    <?php foreach ($cv_experience as $job): ?>
+                        <article class="cv-item">
+                            <header class="cv-item-header">
+                                <h3 class="cv-title"><?= $job['title'] ?></h3>
+                                <time class="cv-date"><?= $job['date'] ?></time>
+                            </header>
+                            <p class="cv-org"><?= $job['org'] ?></p>
+                            <p class="cv-desc"><?= $job['desc'] ?></p>
+                        </article>
+                    <?php endforeach; ?>
+                </section>
+
+                <section class="cv-section education hidden">
+                    <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>
     </main>
 
@@ -274,7 +278,7 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
           
           // Only scroll to top if we are collapsing the CV and the user is scrolled down
           if (!e.target.checked && window.scrollY > 200) {
-              window.scrollTo({ top: document.querySelector('.hiring-toggle').offsetTop - 20, behavior: 'smooth' });
+              window.scrollTo({ top: document.querySelector('.cv-container').offsetTop - 20, behavior: 'smooth' });
           }
       });
     </script>
diff --git a/style.css b/style.css
index a2d8d1b..705c961 100644
--- a/style.css
+++ b/style.css
@@ -107,9 +107,10 @@ body {
     .profile { grid-column: span 3; }
     .about { grid-column: span 2; }
     .interests { grid-column: span 1; }
-    .contact { grid-column: span 2; }
-    .links { grid-column: span 1; }
+    .contact { grid-column: span 1; }
+    .links { grid-column: span 2; }
     .hiring-toggle { grid-column: span 3; }
+    .cv-container { grid-column: span 3; }
     .experience { grid-column: span 2; }
     .skills { grid-column: span 1; }
     .education { grid-column: span 3; }
@@ -188,6 +189,25 @@ body {
 }
 
 /* CV Specific Content Styles */
+.cv-section {
+    background: rgba(0, 243, 255, 0.03);
+    border: 1px solid rgba(0, 243, 255, 0.15);
+    padding: 20px;
+    margin-top: 15px;
+    clip-path: polygon(
+        0 10px, 10px 0, 
+        100% 0, 
+        100% calc(100% - 10px), calc(100% - 10px) 100%, 
+        0 100%
+    );
+    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);
@@ -196,14 +216,20 @@ body {
 
 .cv-item:last-child { margin-bottom: 0; }
 
-.cv-header {
+.cv-item-header, .cv-header {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     margin-bottom: 4px;
 }
 
+.address.mono-addr {
+    font-style: normal;
+    margin-bottom: 15px;
+}
+
 .cv-title {
+    margin: 0;
     font-weight: bold;
     color: #fff;
     font-size: 1rem;
@@ -215,12 +241,13 @@ body {
 }
 
 .cv-org {
+    margin: 0 0 8px 0;
     font-size: 0.8rem;
     color: var(--link-color);
-    margin-bottom: 8px;
 }
 
 .cv-desc {
+    margin: 0;
     font-size: 0.85rem;
     line-height: 1.4;
     opacity: 0.9;
@@ -304,6 +331,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
     font-size: 0.85rem;
     color: var(--accent-color);
     text-shadow: 0 0 10px var(--accent-color);