style: drop notable creations and redesign interests as wide tag cloud

Co-authored-by: aider (openai/qwen3.6) <aider@aider.chat>

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": [
       {

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">

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; }
+    body:not(.cv-mode) .personal { grid-column: span 3; }
-    .creations { grid-column: span 2; }
+    .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: 6px 14px;
-    padding-left: 10px;
+    border-radius: 20px;
-    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;
     background: rgba(0, 243, 255, 0.05);
-    border: 1px solid rgba(0, 243, 255, 0.2);
+    border: 1px solid rgba(0, 243, 255, 0.15);
-    border-radius: 6px;
-    padding: 12px;
-    text-decoration: none;
-    color: var(--text-color);
     transition: all 0.2s ease;
 }
 
-.creation-item:hover {
+.personal-tag:hover {
-    background: rgba(0, 243, 255, 0.1);
+    background: rgba(0, 243, 255, 0.15);
-    border-color: rgba(0, 243, 255, 0.5);
+    border-color: rgba(0, 243, 255, 0.4);
-    transform: translateY(-2px);
-    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
 }
 
-.creation-item img {
+/* Varying shades for tag cloud */
-    width: 100%;
+.personal-tag:nth-child(3n+1) { opacity: 0.6; }
-    height: 120px;
+.personal-tag:nth-child(3n+2) { opacity: 0.8; }
-    object-fit: cover;
+.personal-tag:nth-child(3n)   { opacity: 1.0; }
-    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;
-}
 
 
 .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; }
 }