refactor: update CV styling and documentation to include a detailed professional profile

data.json

@@ -16,17 +16,32 @@
   ],
   "highlights": [
     {
-      "title": "Telemetry stack architecture",
+      "title": "Designed the Telemetry stack architecture",
       "description": [
-        "Shaped telemetry direction across user behavior and performance.",
+        "I shaped the product's telemetry direction, spanning the UI, backend and the AI agents. We gained a unified cross-system view informing 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."
+        "Product teams gained insigths through live dashboards. Details went from a user's click down to AI agents' internal processing."
       ],
       "date": "2024 – 2026"
     },
     {
       "title": "UI performance optimizations",
-      "description": "Tiered JS bundle dependency loading for shorter page load times.",
+      "description": [
+        "I continually reviewed the UI–backend network traffic for performance bottleneck, working with teams to improve them.",
+        "I rolled out a persistent client-side caching library, cutting down 43% on page load times.",
+        "A tiered bundle dependency loading mechanism made the first-time visitor's page size 72% smaller, improving their experience.",
+        "I identified a design flaw causing an endpoint to return a 1000 times or more larger payload than expected, for some users on production. We redesigned the endpoint before this became a problem."
+      ],
       "date": "2025 – 2026"
+    },
+    {
+      "title": "UI testing architecture lead",
+      "description": "I led a group of senior QA engineers, forming the UI testing strategy. I gained support for rolling out ----",
+      "date": "2021 – 2023"
+    },
+    {
+      "title": "Pluggable tax calculation engine",
+      "description": "Tiered JS bundle dependency loading for shorter page load times.",
+      "date": "2017 – 2020"
     }
   ],
   "outside_work": [
@@ -42,7 +57,7 @@
         "title": "Principal Software Engineer (UI Platform Architecture)",
         "company": "Oracle|NetSuite",
         "date": "2023 – present",
-        "description": "UI Platform Architect. Feature discovery, prototyping and technical design. Focused on product analytics, UI telemetry, performance, CI/CD tooling and pipelines."
+        "description": "Driving the technical vision for the UI Platform. Responsible for feature discovery, high-level technical design, and architectural prototypes. Leading initiatives in product analytics, performance optimization, and AI-assisted developer experience. Mentoring senior staff and defining standards for CI/CD pipelines."
       },
       {
         "title": "Senior Software Development Manager (UI Platform)",

index.php

@@ -268,41 +268,46 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
         </section>
         <?php endif; ?>
 
-        <?php if ($isCvPath && $highlights): ?>
-        <section class="card selected-work">
-            <h2>Selected Work</h2>
-            <?php foreach ($highlights as $h): ?>
-                <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']): ?>
-                        <?php if (is_array($h['description'])): ?>
-                            <?php foreach ($h['description'] as $desc): ?>
-                                <p class="highlight-description"><?= $desc ?></p>
-                            <?php endforeach; ?>
-                        <?php else: ?>
-                            <p class="highlight-description"><?= $h['description'] ?></p>
-                        <?php endif; ?>
-                    <?php endif; ?>
-                </article>
-            <?php endforeach; ?>
-            <?php if ($cvData['cv']['philosophy'] ?? []): ?>
-            <p class="philosophy"><?= $cvData['cv']['philosophy'] ?></p>
-            <?php endif; ?>
-        </section>
-        <?php endif; ?>
-
-        <?php if ($isCvPath && $interests_showcase): ?>
-        <section class="card personal">
-            <h2>Interests</h2>
-            <div class="personal-tags">
-                <?php foreach ($interests_showcase as $item): ?>
-                    <span class="personal-tag"><?= htmlspecialchars($item['name']) ?></span>
-                <?php endforeach; ?>
-            </div>
-        </section>
-        <?php endif; ?>
-
         <?php if ($isCvPath): ?>
+            <?php if ($highlights): ?>
+            <section class="card selected-work">
+                <h2>Selected Work</h2>
+                <?php foreach ($highlights as $h): ?>
+                    <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']): ?>
+                            <?php if (is_array($h['description'])): ?>
+                                <?php foreach ($h['description'] as $desc): ?>
+                                    <p class="highlight-description"><?= $desc ?></p>
+                                <?php endforeach; ?>
+                            <?php else: ?>
+                                <p class="highlight-description"><?= $h['description'] ?></p>
+                            <?php endif; ?>
+                        <?php endif; ?>
+                    </article>
+                <?php endforeach; ?>
+                <?php if ($cvData['cv']['philosophy'] ?? []): ?>
+                <p class="philosophy"><?= $cvData['cv']['philosophy'] ?></p>
+                <?php endif; ?>
+            </section>
+            <?php endif; ?>
+
+            <section class="card skills">
+                <h2>Skills</h2>
+                <div class="skill-categories">
+                    <?php foreach ($cv_skills as $category => $skills): ?>
+                        <div class="skill-group">
+                            <h3><?= $category ?></h3>
+                            <div class="skill-tags">
+                                <?php foreach ($skills as $skill): ?>
+                                    <span class="tag"><?= $skill ?></span>
+                                <?php endforeach; ?>
+                            </div>
+                        </div>
+                    <?php endforeach; ?>
+                </div>
+            </section>
+            
             <?php
             $firstJob = $cv_experience[0] ?? null;
             if ($firstJob):
@@ -319,21 +324,6 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
                     </article>
                 </section>
             <?php endif; ?>
-            <section class="card skills">
-                <h2>Skills</h2>
-                <div class="skill-categories">
-                    <?php foreach ($cv_skills as $category => $skills): ?>
-                        <div class="skill-group">
-                            <h3><?= $category ?></h3>
-                            <div class="skill-tags">
-                                <?php foreach ($skills as $skill): ?>
-                                    <span class="tag"><?= $skill ?></span>
-                                <?php endforeach; ?>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
-                </div>
-            </section>
             <section class="card experience">
                 <h2>Past Experience</h2>
                 <?php foreach (array_slice($cv_experience, 1) as $job): ?>
@@ -362,6 +352,17 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
                     </article>
                 <?php endforeach; ?>
             </section>
+
+            <?php if ($interests_showcase): ?>
+            <section class="card personal">
+                <h2>Interests</h2>
+                <div class="personal-tags">
+                    <?php foreach ($interests_showcase as $item): ?>
+                        <span class="personal-tag"><?= htmlspecialchars($item['name']) ?></span>
+                    <?php endforeach; ?>
+                </div>
+            </section>
+            <?php endif; ?>
         <?php endif; ?>
     </main>
 

style.css

@@ -136,8 +136,8 @@ body {
     .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 3; transform: none; }
+    .skills { grid-column: span 1; transform: none; }
-    .education { grid-column: span 3; transform: none; }
+    .education { grid-column: span 2; transform: none; }
 
     /* Shuffle Logic */
     .avatar {
@@ -384,7 +384,7 @@ body {
 }
 
 .personal-tag:hover {
-    background: rgba(0, 243, 255, 0.15);
+    /*background: rgba(0, 243, 255, 0.15);*/
     border-color: rgba(0, 243, 255, 0.4);
 }
 
@@ -393,22 +393,6 @@ body {
 .personal-tag:nth-child(3n+2) { opacity: 0.8; }
 .personal-tag:nth-child(3n)   { opacity: 1.0; }
 
-
-.hiring-toggle {
-    padding: 12px 24px;
-    cursor: pointer;
-    transition: transform 0.2s ease, filter 0.3s ease;
-}
-
-
-.hiring-toggle:hover {
-    filter: brightness(1.2); /* Keep brightness for hover effect */
-    transform: translate(-2px, 3px) scale(1.01); /* Remove rotation, keep translate and scale */
-    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
-                linear-gradient(135deg, rgba(255, 0, 255, 0.6), rgba(0, 243, 255, 0.6)) border-box;
-}
-
-
 .hidden {
     display: none !important;
 }
@@ -451,7 +435,7 @@ body {
 
 
 .cv-section:hover {
-    background: rgba(0, 243, 255, 0.07);
+    /*background: rgba(0, 243, 255, 0.07);*/
     border-color: rgba(0, 243, 255, 0.3);
 }
 
@@ -773,7 +757,6 @@ body.cv-mode {
 }
 
 .cv-mode .card {
-    clip-path: none !important;
     transform: none !important;
     border: 1px solid rgba(255, 255, 255, 0.05) !important;
     box-shadow: none !important;
@@ -784,8 +767,7 @@ body.cv-mode {
 }
 
 .cv-mode .card:hover {
-    border-top-color: var(--accent-color) !important; /* Visual feedback on focus */
+    background: var(--card-bg) !important;
-    background: #1a1c25 !important;
 }
 
 .cv-mode h1, .cv-mode h2, .cv-mode h3 {