index.php

@@ -211,7 +211,7 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
 
             <div class="hero-row hero-contacts">
                 <?php foreach ($extra_contact_links as $label => $href): ?>
-                    <?= render_pill($href, $label, $pill_icons[$label] ?? '🔗', 'contact-pill' . ($label === 'CV' || $label === 'Resume' ? ' pill-cv' : '')) ?>
+                    <?= render_pill($href, $label, $pill_icons[$label] ?? '🔗', 'contact-pill' . ($label === 'CV' || $label === 'Resume' ? ' pill-cv-only-print' : '')) ?>
                 <?php endforeach; ?>
             </div>
 
@@ -222,6 +222,42 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
             </div>
         </section>
 
+        <?php if (!$isCvPath && $interests_showcase): ?>
+        <?php // Hardcoded palette of dark, varied tints
+            $bg_palette = [
+                '#1e2a33', // Dark Blue
+                '#1e332a', // Dark Green
+                '#2a1e33', // Dark Purple
+                '#331e2a', // Dark Red
+                '#1a3333', // Dark Teal
+                '#33331a', // Dark Olive
+            ];
+            $palette_size = count($bg_palette);
+        ?>
+        <section class="card interests-showcase">
+            <nav class="interests-nav">
+                <h2>Things I like to do</h2>
+                <ul>
+                    <?php foreach ($interests_showcase as $i => $item): ?>
+                        <li class="<?= $i === 0 ? 'active' : '' ?>" data-index="<?= $i ?>">
+                            <?= htmlspecialchars($item['name']) ?>
+                        </li>
+                    <?php endforeach; ?>
+                </ul>
+            </nav>
+            <div class="interests-display">
+                <?php foreach ($interests_showcase as $i => $item): ?>
+                    <div class="interest-slide <?= $i === 0 ? 'active' : '' ?>" data-index="<?= $i ?>" style="background-color: <?= $bg_palette[$i % $palette_size] ?>;">
+                        <?php if ($item['image']): ?>
+                            <img src="<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['name']) ?>">
+                        <?php endif; ?>
+                        <p class="caption"><?= htmlspecialchars($item['caption']) ?></p>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+        </section>
+        <?php endif; ?>
+
         <?php if ($isCvPath): ?>
             <?php if ($highlights): ?>
             <section class="card selected-work">
@@ -328,6 +364,34 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
             const el = document.getElementById("contact-mail");
             if (el) el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`;
         })('<?= base64_encode($email_user) ?>', 'dejvino', 'cz');
+
+        // Interests Showcase Logic
+        (() => {
+            const slides = document.querySelectorAll('.interest-slide');
+            const labels = document.querySelectorAll('.interests-nav li');
+            if (!slides.length) return;
+
+            let currentIndex = 0;
+            let interval = setInterval(next, 5000);
+
+            function show(index) {
+                slides.forEach(s => s.classList.remove('active'));
+                labels.forEach(l => l.classList.remove('active'));
+                slides[index].classList.add('active');
+                labels[index].classList.add('active');
+                currentIndex = index;
+            }
+
+            function next() { show((currentIndex + 1) % slides.length); }
+
+            labels.forEach((label, i) => {
+                label.addEventListener('click', () => {
+                    show(i);
+                    clearInterval(interval);
+                    interval = setInterval(next, 8000); // Slower auto-switch after manual interaction
+                });
+            });
+        })();
     </script>
     <!-- Cloudflare Web Analytics -->
     <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "90827cb740cd4b1db611be059f64daa9"}'></script><!-- End Cloudflare Web Analytics -->