Reorder cv-short: education in right column, hobby strip at bottom

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

cv-short.html

@@ -296,19 +296,52 @@
   .pj .pj-stack .chip.accent { color: var(--accent); border-color: var(--accent); }
 
   .formations {
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr;
+    flex-direction: column;
-    border-top: 1px solid var(--ink);
   }
   .formations .fo {
-    padding: 8px 14px;
+    padding: 5px 14px;
-    border-right: 1px solid var(--ink);
+    border-bottom: 1px solid var(--ink);
     display: grid;
-    grid-template-columns: 28px 1fr auto;
+    grid-template-columns: 24px 1fr auto;
-    gap: 10px;
+    gap: 8px;
     align-items: center;
   }
-  .formations .fo:last-child { border-right: none; }
+  .formations .fo:last-child { border-bottom: none; }
+
+  .hobbies {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    border-top: 1px solid var(--ink);
+  }
+  .hobbies .hb {
+    padding: 5px 12px;
+    border-right: 1px solid var(--ink);
+  }
+  .hobbies .hb:last-child { border-right: none; }
+  .hobbies .hb .hb-label {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 6.5pt;
+    color: var(--accent);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .hobbies .hb h4 {
+    margin: 2px 0 0;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    font-size: 8.5pt;
+    line-height: 1.15;
+  }
+  .hobbies .hb .hb-desc {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 6.3pt;
+    color: var(--muted);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    margin-top: 2px;
+    line-height: 1.35;
+  }
   .formations .fo .num {
     font-family: 'JetBrains Mono', ui-monospace, monospace;
     font-size: 8pt;
@@ -388,6 +421,10 @@
     .formations .fo h4 { font-size: 8.5pt; }
     .formations .fo .school { font-size: 6.3pt; }
     .formations .fo .when { font-size: 6.3pt; }
+    .hobbies .hb { padding: 5px 12px; }
+    .hobbies .hb h4 { font-size: 8.5pt; }
+    .hobbies .hb .hb-label { font-size: 6.3pt; }
+    .hobbies .hb .hb-desc { font-size: 6.3pt; margin-top: 2px; }
     .footer > div { padding: 4px 12px; font-size: 6.5pt; }
     .topbar > div { padding: 4px 10px; font-size: 6.5pt; }
 
@@ -592,7 +629,31 @@
 
       <div class="col-right">
         <div class="col-section-title">
-          <span><span class="num-tag">[ 02 ]</span> &nbsp; <span data-en="Projects &amp; Freelance">Projets &amp; Freelance</span></span>
+          <span><span class="num-tag">[ 02 ]</span> &nbsp; <span data-en="Education">Formations</span></span>
+          <span class="count">02 items · 2018 — 2023</span>
+        </div>
+
+        <div class="formations">
+          <div class="fo">
+            <div class="num">01</div>
+            <div>
+              <h4 data-en='Software Architect <span style="color:var(--muted);font-weight:300;">— Master&#39;s</span>'>Architecte Logiciel <span style="color:var(--muted);font-weight:300;">— Master 2</span></h4>
+              <div class="school">Epitech · Marseille</div>
+            </div>
+            <div class="when">2021<br/>2023</div>
+          </div>
+          <div class="fo">
+            <div class="num">02</div>
+            <div>
+              <h4 data-en='Multimedia Project Manager <span style="color:var(--muted);font-weight:300;">— Bachelor&#39;s</span>'>Chef de Projet Multimédia <span style="color:var(--muted);font-weight:300;">— Bachelor</span></h4>
+              <div class="school">Hetic · Paris</div>
+            </div>
+            <div class="when">2018<br/>2021</div>
+          </div>
+        </div>
+
+        <div class="col-section-title" style="border-top: 1px solid var(--ink);">
+          <span><span class="num-tag">[ 03 ]</span> &nbsp; <span data-en="Projects &amp; Freelance">Projets &amp; Freelance</span></span>
           <span class="count">03 selects</span>
         </div>
 
@@ -648,22 +709,21 @@
       </div>
     </div>
 
-    <div class="formations">
+    <div class="hobbies">
-      <div class="fo">
+      <div class="hb">
-        <div class="num">01</div>
+        <div class="hb-label">[ A ] · Hobby</div>
-        <div>
+        <h4>Cuisine</h4>
-          <h4 data-en='Software Architect <span style="color:var(--muted);font-weight:300;">— Master&#39;s</span>'>Architecte Logiciel <span style="color:var(--muted);font-weight:300;">— Master 2</span></h4>
+        <div class="hb-desc" data-en="Extra · passion">Extra · passion</div>
-          <div class="school">Epitech · Marseille</div>
-        </div>
-        <div class="when">2021<br/>2023</div>
       </div>
-      <div class="fo">
+      <div class="hb">
-        <div class="num">02</div>
+        <div class="hb-label">[ B ] · Hobby</div>
-        <div>
+        <h4>Self hosting</h4>
-          <h4 data-en='Multimedia Project Manager <span style="color:var(--muted);font-weight:300;">— Bachelor&#39;s</span>'>Chef de Projet Multimédia <span style="color:var(--muted);font-weight:300;">— Bachelor</span></h4>
+        <div class="hb-desc">Proxmox · cluster · k3s · CI · homelab</div>
-          <div class="school">Hetic · Paris</div>
+      </div>
-        </div>
+      <div class="hb">
-        <div class="when">2018<br/>2021</div>
+        <div class="hb-label">[ C ] · Hobby</div>
+        <h4>DIY</h4>
+        <div class="hb-desc" data-en="AI robot building · 3D printing · electronics">Création de robot IA · impression 3D · électronique</div>
       </div>
     </div>