feat: add notable creations section and restructure data.json

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

data.json

@@ -0,0 +1,143 @@
+{
+  "name": "David Hrdina Němeček",
+  "photo": "photo.png",
+  "headline": "Principal Software Engineer at Oracle NetSuite",
+  "summary": "Working on the UI platform architecture for 40k+ companies. Focused on AI-assisted engineering, observability, and performance.",
+  "email": "explosive@dejvino.cz",
+  "location": "Brno, Czechia",
+  "phone": "+420 775 26 26 32",
+  "contact_links": {
+    "Website": "https://www.dejvino.cz",
+    "Email": "mailto:explosive@dejvino.cz",
+    "Resume": "https://dejvino.cz/cv"
+  },
+  "about": [
+    "Principal Software Engineer at Oracle NetSuite, working on the UI platform for 40k+ companies."
+  ],
+  "highlights": [
+    {
+      "title": "Telemetry stack architecture",
+      "description": [
+        "Shaped telemetry direction across user behavior and performance.",
+        "Designed and rolled out a custom OpenTelemetry-based tracing library to gain rich and reliable insights across multiple front-ends and back-end."
+      ],
+      "date": "2024 – 2026"
+    },
+    {
+      "title": "UI performance optimizations",
+      "description": "Tiered JS bundle dependency loading for shorter page load times.",
+      "date": "2025 – 2026"
+    }
+  ],
+  "outside_work": [
+    "Mandolin",
+    "Synthwave",
+    "Electronics",
+    "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": [
+      {
+        "title": "Principal Software Engineer (UI Platform Architecture)",
+        "company": "Oracle|NetSuite",
+        "date": "2023 – present",
+        "description": "UI Architect working on feature discovery, solution prototyping and technical designs. Mainly focused on UI telemetry, performance, CI/CD tooling and pipelines."
+      },
+      {
+        "title": "Senior Software Development Manager (UI Platform)",
+        "company": "Oracle|NetSuite",
+        "date": "2022 – 2023",
+        "description": "Engineering lead for multiple UI Platform teams who designed, developed and released a UI framework and tooling used by the rest of the organization. Leader of a UI testing architecture group responsible for defining a testing strategy across the UI Platform."
+      },
+      {
+        "title": "Software Development Manager (UI Platform)",
+        "company": "Oracle|NetSuite",
+        "date": "2020 – 2022",
+        "description": "Engineering lead for a UI Platform team who developed components for a UI toolkit used by the rest of the organization. Technical product owner while bootstrapping a team."
+      },
+      {
+        "title": "Software Development Manager (ERP, Tax)",
+        "company": "Oracle|NetSuite",
+        "date": "2017 – 2020",
+        "description": "Lead developer for ERP: Tax. Design and implementation of a pluggable Tax calculation engine. Coordination of multiple squads supporting both the legacy and the next-gen systems concurrently."
+      },
+      {
+        "title": "Senior Software Engineer (ERP, Tax)",
+        "company": "Oracle|NetSuite",
+        "date": "2013 – 2017",
+        "description": "Development of Tax calculation and reporting modules in a cloud ERP system. Large-scale refactoring of legacy code. Introduction of a pluggable architecture."
+      },
+      {
+        "title": "Software Engineer",
+        "company": "Q2 Interactive",
+        "date": "2009 – 2013",
+        "description": "Development and project leadership of multiple web applications and services: CRM system (PHP backend server, JavaScript frontend, Android client app), Accounting web app (PHP, JavaScript), e-commerce sites (Magento) and Linux server maintenance."
+      }
+    ],
+    "skills": {
+      "Main": [
+        "TypeScript",
+        "Java",
+        "Linux",
+        "NodeJs"
+      ],
+      "Support": [
+        "Kotlin",
+        "Go",
+        "JavaScript",
+        "Oracle",
+        "SQL",
+        "Git",
+        "React",
+        "Preact",
+        "Python"
+      ],
+      "Languages": [
+        "Czech (native)",
+        "English (proficient)",
+        "German (elementary)"
+      ],
+      "Other": [
+        "C/C++",
+        "Supercomputers",
+        "OpenMPI",
+        "Visualization",
+        "Data science",
+        "Embedded",
+        "OpenSCAD"
+      ]
+    },
+    "education": [
+      {
+        "degree": "Master's degree",
+        "field": "Parallel and Distributed Systems",
+        "institution": "Faculty of Informatics, Masaryk University Brno",
+        "date": "2011 – 2013",
+        "thesis": "Efficient computation and visualization of correlations in medical signals. The first part consisted of high-performance computation of correlations on large volumes of analog data using supercomputers. The second part covered the visualization of the computed results which allowed interactive exploration and processing of the data by a researcher."
+      },
+      {
+        "degree": "Bachelor's degree",
+        "field": "Parallel and Distributed Systems",
+        "institution": "Faculty of Informatics, Masaryk University Brno",
+        "date": "2008 – 2011",
+        "thesis": "Parallel implementation of force-field decompression algorithm. The solution executed on a supercomputer cluster to perform real-time simulation of molecular forces. This in turn provided haptic feedback to a 3D pointing device."
+      }
+    ],
+    "philosophy": "I design platform layers that stay out of the way while enabling everything else. Quiet infrastructure. Measurable value."
+  }
+}

index.php

@@ -3,7 +3,7 @@
 /**
  * Content config:
  */
-$cvData = json_decode(file_get_contents(__DIR__ . '/cv.json'), true);
+$cvData = json_decode(file_get_contents(__DIR__ . '/data.json'), true);
 
 $isCvPath = strpos($_SERVER['REQUEST_URI'], '/cv') !== false;
 
@@ -72,7 +72,7 @@ $cv_experience = array_map(function ($e) {
         'date'  => $e['date'] ?? '',
         'desc'  => $e['description'] ?? '',
     ];
-}, $cvData['experience'] ?? []);
+}, $cvData['cv']['experience'] ?? []);
 
 // Helper to calculate years between start and end dates
 function calculateYears($dateStr) {
@@ -100,10 +100,10 @@ $cv_education = array_map(function ($e) {
         'date'  => $e['date'] ?? '',
         'desc'  => $e['thesis'] ?? '',
     ];
-}, $cvData['education'] ?? []);
+}, $cvData['cv']['education'] ?? []);
 
 // Keep skills categories as provided
-$cv_skills = $cvData['skills'] ?? [];
+$cv_skills = $cvData['cv']['skills'] ?? [];
 
 /**
  * Page design:
@@ -207,8 +207,8 @@ $cv_skills = $cvData['skills'] ?? [];
                     <?php endif; ?>
                 </article>
             <?php endforeach; ?>
-            <?php if ($cvData['philosophy'] ?? []): ?>
+            <?php if ($cvData['cv']['philosophy'] ?? []): ?>
-            <p class="philosophy"><?= $cvData['philosophy'] ?></p>
+            <p class="philosophy"><?= $cvData['cv']['philosophy'] ?></p>
             <?php endif; ?>
         </section>
         <?php endif; ?>
@@ -224,6 +224,25 @@ $cv_skills = $cvData['skills'] ?? [];
         </section>
         <?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

@@ -132,6 +132,7 @@ body {
     .hiring-toggle { grid-column: span 3; }
     .selected-work { grid-column: span 2; }
     .personal { grid-column: span 1; }
+    .creations { grid-column: span 2; }
     .cv-container { grid-column: span 3; }
     .experience { grid-column: span 3; }
     .skills { grid-column: span 3; }
@@ -150,6 +151,7 @@ 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); }
@@ -348,6 +350,56 @@ body {
 }
 
 
+/**
+ * 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-radius: 6px;
+    padding: 12px;
+    text-decoration: none;
+    color: var(--text-color);
+    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);
+}
+
+.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;
+}
+
+
 .hiring-toggle {
     padding: 12px 24px;
     cursor: pointer;
@@ -678,7 +730,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 { 
+    .experience, .skills, .education, .creations { 
         grid-column: span 1; 
     }
     .avatar {
@@ -696,6 +748,7 @@ 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; }
 }