From 9d6f0e21a241d30053de02c90a039e2d4fd320d5 Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Mon, 27 Jul 2026 17:40:22 +0200
Subject: [PATCH] tweak: selected work text in two columns

---
 data.json |  9 ++++++---
 index.php |  2 ++
 style.css | 47 +++++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/data.json b/data.json
index f19aeff..e760391 100644
--- a/data.json
+++ b/data.json
@@ -36,7 +36,8 @@
     {
       "title": "UI Performance & Bootstrap Optimization",
       "description": [
-        "Analyzed UI app bootstrap performance, driving improvements that gained 28% speed improvement. Eliminated redundant network requests by introducing TanStack Query network caching. Defined tiered JavaScript dependency loading mechanism for on-demand toolkit loading."
+        "Analyzed UI app bootstrap performance, driving improvements that gained 28% speed improvement.",
+        "Eliminated redundant network requests by introducing TanStack Query network caching. Defined tiered JavaScript dependency loading mechanism for on-demand toolkit loading."
       ],
       "date": "2025 – 2026"
     },
@@ -51,14 +52,16 @@
     {
       "title": "UI Testing Strategy & Architecture",
       "description": [
-        "Led senior QA engineers in defining and executing the long-term UI testing architecture strategy across platform teams. Established automated test suites and quality guardrails to elevate testing standards."
+        "Led senior QA engineers in defining and executing the long-term UI testing architecture strategy across platform teams.",
+        "Established automated test suites and quality guardrails to elevate testing standards."
       ],
       "date": "2021 – 2023"
     },
     {
       "title": "Pluggable Tax Calculation Engine",
       "description": [
-        "Architected and led the development of a pluggable tax calculation engine for NetSuite cloud ERP. Coordinated technical strategy across 20+ software engineers in 4 squads, standardizing global tax calculation pipelines."
+        "Architected and led the development of a pluggable tax calculation engine for NetSuite cloud ERP.",
+        "Coordinated technical strategy across 20+ software engineers in 4 squads, standardizing global tax calculation pipelines."
       ],
       "date": "2017 – 2020"
     }
diff --git a/index.php b/index.php
index 8bb8b4f..a29ff19 100644
--- a/index.php
+++ b/index.php
@@ -266,6 +266,7 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
                     <article class="highlight-item">
                         <h3><?= $h['title'] ?? '' ?><?php if ($h['date'] ?? ''): ?> <time class="highlight-date"><?= $h['date'] ?></time><?php endif; ?></h3>
                         <?php if ($h['description']): ?>
+                        <div class="highlight-descriptions">
                             <?php if (is_array($h['description'])): ?>
                                 <?php foreach ($h['description'] as $desc): ?>
                                     <p class="highlight-description"><?= $desc ?></p>
@@ -273,6 +274,7 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
                             <?php else: ?>
                                 <p class="highlight-description"><?= $h['description'] ?></p>
                             <?php endif; ?>
+                        </div>
                         <?php endif; ?>
                     </article>
                 <?php endforeach; ?>
diff --git a/style.css b/style.css
index 21bd7cf..d92e05a 100644
--- a/style.css
+++ b/style.css
@@ -131,12 +131,12 @@ body {
     .hero { grid-column: span 3; transform: none; }
     .interests-showcase { grid-column: span 3; transform: none; }
     .hiring-toggle { grid-column: span 3; transform: none; }
-    .selected-work { grid-column: span 2; transform: none; }
+    .selected-work { grid-column: span 3; transform: none; }
     body:not(.cv-mode) .personal { grid-column: span 3; transform: none; }
     .cv-mode .personal { grid-column: span 1; transform: none; }
     .first-experience { grid-column: span 3; transform: none; }
     .experience { grid-column: span 3; transform: none; }
-    .skills { grid-column: span 1; transform: none; }
+    .skills { grid-column: span 3; transform: none; }
     .education { grid-column: span 2; transform: none; }
 
     /* Shuffle Logic */
@@ -234,11 +234,29 @@ body {
 }
 
 
+.highlight-item {
+    margin-bottom: 28px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid rgba(0, 243, 255, 0.08);
+    border-left: 2px solid rgba(0, 243, 255, 0.15);
+    padding-left: 16px;
+    break-inside: avoid;
+}
+
+.highlight-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
 .highlight-item h3 {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 8px;
+    color: #fff;
+    font-size: 1.05rem;
+    margin: 0 0 10px 0;
 }
 
 .highlight-date {
@@ -248,6 +266,23 @@ body {
     white-space: nowrap;
 }
 
+.highlight-descriptions {
+    column-count: 2;
+    column-gap: 24px;
+}
+
+.highlight-description {
+    margin: 0 0 8px 0;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    opacity: 0.85;
+    break-inside: avoid;
+}
+
+.highlight-description:last-child {
+    margin-bottom: 0;
+}
+
 /**
  * Link pills – shared base
  */
@@ -512,8 +547,8 @@ address.mono-addr span {
 
 .skill-categories {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
     padding: 0;
 }
 
@@ -1025,6 +1060,7 @@ body.cv-mode {
         margin: 12px 0 !important;
         padding: 8px 0 !important;
         border-bottom: 1px solid #eee !important;
+        border-left: none !important;
     }
     .highlight-item:last-child {
         border-bottom: none !important;
@@ -1038,6 +1074,9 @@ body.cv-mode {
         margin: 0 0 6px 0 !important;
         font-style: italic !important;
     }
+    .highlight-descriptions {
+        column-count: 1 !important;
+    }
     .highlight-description {
         font-size: 0.9em !important;
         margin: 0 !important;