From b574e2531c9667e8c818fad823c7e0cc8a5600dc Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Sat, 23 May 2026 20:42:55 +0200
Subject: [PATCH] style: drop notable creations and redesign interests as wide
 tag cloud

Co-authored-by: aider (openai/qwen3.6) <aider@aider.chat>
---
 data.json | 14 -----------
 index.php | 19 ---------------
 style.css | 71 +++++++++++++------------------------------------------
 3 files changed, 16 insertions(+), 88 deletions(-)

diff --git a/data.json b/data.json
index b61ea00..e123850 100644
--- a/data.json
+++ b/data.json
@@ -36,20 +36,6 @@
     "3D Printing",
     "Mountain Biking"
   ],
-  "creations": [
-    {
-      "title": "Neon Drift (Synthwave)",
-      "description": "Original composition & video edit",
-      "thumbnail": "thumb_neon.jpg",
-      "url": "https://youtube.com/watch?v=example1"
-    },
-    {
-      "title": "Analog Dreams",
-      "description": "Live mandolin session & synth layers",
-      "thumbnail": "thumb_analog.jpg",
-      "url": "https://youtube.com/watch?v=example2"
-    }
-  ],
   "cv": {
     "experience": [
       {
diff --git a/index.php b/index.php
index 229ee8d..4b1ab1f 100644
--- a/index.php
+++ b/index.php
@@ -248,25 +248,6 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
             <?php endif; ?>
         <?php endif; ?>
 
-        <?php if (!$isCvPath && ($cvData['creations'] ?? [])): ?>
-        <section class="card creations">
-            <h2>Notable Creations</h2>
-            <div class="creations-grid">
-                <?php foreach ($cvData['creations'] as $c): ?>
-                    <a href="<?= $c['url'] ?? '#' ?>" target="_blank" class="creation-item">
-                        <?php if ($c['thumbnail'] ?? ''): ?>
-                            <img src="<?= $c['thumbnail'] ?>" alt="<?= $c['title'] ?? '' ?>" loading="lazy">
-                        <?php endif; ?>
-                        <div class="creation-info">
-                            <h3><?= $c['title'] ?? '' ?></h3>
-                            <p><?= $c['description'] ?? '' ?></p>
-                        </div>
-                    </a>
-                <?php endforeach; ?>
-            </div>
-        </section>
-        <?php endif; ?>
-
         <?php if ($isCvPath): ?>
         <section class="card cv-container">
             <div class="cv-content">
diff --git a/style.css b/style.css
index 2b3c67d..bee0ccd 100644
--- a/style.css
+++ b/style.css
@@ -131,8 +131,8 @@ body {
     .hero { grid-column: span 3; }
     .hiring-toggle { grid-column: span 3; }
     .selected-work { grid-column: span 2; }
-    .personal { grid-column: span 1; }
-    .creations { 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; }
@@ -151,7 +151,6 @@ body {
     .hero { transform: rotate(0.1deg); }
     .selected-work { transform: translate(2px, -2px) rotate(-0.2deg); }
     .personal { transform: translate(1px, -1px) rotate(-0.15deg); }
-    .creations { transform: translate(-1px, 2px) rotate(0.1deg); }
     .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); }
@@ -343,71 +342,34 @@ body {
 
 
 /**
- * Personal interests – narrow side panel, non-interactive
+ * Personal interests – tag cloud
  */
 .personal-tags {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: 10px;
+    justify-content: center;
 }
 
 .personal-tag {
     font-size: 0.9rem;
     color: var(--text-color);
-    opacity: 0.85;
-    padding-left: 10px;
-    border-left: 2px solid rgba(0, 243, 255, 0.15);
-}
-
-
-/**
- * Notable Creations
- */
-.creations-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
-}
-
-.creation-item {
-    display: flex;
-    flex-direction: column;
+    padding: 6px 14px;
+    border-radius: 20px;
     background: rgba(0, 243, 255, 0.05);
-    border: 1px solid rgba(0, 243, 255, 0.2);
-    border-radius: 6px;
-    padding: 12px;
-    text-decoration: none;
-    color: var(--text-color);
+    border: 1px solid rgba(0, 243, 255, 0.15);
     transition: all 0.2s ease;
 }
 
-.creation-item:hover {
-    background: rgba(0, 243, 255, 0.1);
-    border-color: rgba(0, 243, 255, 0.5);
-    transform: translateY(-2px);
-    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
+.personal-tag:hover {
+    background: rgba(0, 243, 255, 0.15);
+    border-color: rgba(0, 243, 255, 0.4);
 }
 
-.creation-item img {
-    width: 100%;
-    height: 120px;
-    object-fit: cover;
-    border-radius: 4px;
-    margin-bottom: 10px;
-    border: 1px solid rgba(0, 243, 255, 0.3);
-}
-
-.creation-info h3 {
-    margin: 0 0 4px 0;
-    font-size: 0.95rem;
-    color: #fff;
-}
-
-.creation-info p {
-    margin: 0;
-    font-size: 0.8rem;
-    opacity: 0.7;
-}
+/* Varying shades for tag cloud */
+.personal-tag:nth-child(3n+1) { opacity: 0.6; }
+.personal-tag:nth-child(3n+2) { opacity: 0.8; }
+.personal-tag:nth-child(3n)   { opacity: 1.0; }
 
 
 .hiring-toggle {
@@ -740,7 +702,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, .creations { 
+    .experience, .skills, .education { 
         grid-column: span 1; 
     }
     .avatar {
@@ -758,7 +720,6 @@ a { color: var(--link-color); text-decoration: none; }
     .hero-contacts, .hero-nav { justify-content: center; }
     .pill { white-space: normal; gap: 4px 6px; padding: 5px 10px; }
     .pill-url { display: inline; }
-    .creations-grid { grid-template-columns: 1fr; }
 }