feat: add explicit sidebar placement control and responsive design (1024-1280px)

- Add sidebar field to SkillCategory model for explicit left/right control
- Update splitSkills to respect sidebar field instead of automatic splitting
- Add responsive CSS for 1024-1280px: collapse labels, icons-only buttons, EN/ES language selector
- Remove language switcher animations
- Ensure desktop view (>1280px) always shows full sidebar content
- Move Databases and Infrastructure to right sidebar
- Reduce font sizes in responsive range
- Update project logos (Lidering, Jorpack, Delivery Bikes)

static/css/main.css

@@ -1899,3 +1899,158 @@ html {
         height: 45px;
     }
 }
+
+/* ========================================
+   Desktop: Ensure Sidebar Content Visible (>1280px)
+   ======================================== */
+
+@media (min-width: 1281px) {
+    /* Ensure sidebar content is always visible in desktop view */
+    .sidebar-content {
+        max-height: none !important;
+        opacity: 1 !important;
+        overflow: visible !important;
+        display: block !important;
+        margin-top: 10px !important;
+    }
+
+    .skill-category .sidebar-content,
+    .cv-sidebar-section .sidebar-content {
+        max-height: none !important;
+        opacity: 1 !important;
+        overflow: visible !important;
+    }
+
+    .sidebar-title::after {
+        display: none !important;
+    }
+
+    .sidebar-title {
+        cursor: default !important;
+    }
+}
+
+/* ========================================
+   Responsive: Medium Screens (1024px - 1280px)
+   ======================================== */
+
+@media (min-width: 1024px) and (max-width: 1280px) {
+
+    /* ========== Global Font Size Reduction ========== */
+    html {
+        font-size: 14px; /* Reduced from default 16px */
+    }
+
+    .cv-name {
+        font-size: 1.8em; /* Reduced from 2.2em */
+    }
+
+    .sidebar-title {
+        font-size: 0.95rem;
+    }
+
+    .sidebar-content {
+        font-size: 0.9rem;
+    }
+
+    .experience-item h3,
+    .project-item h3 {
+        font-size: 1rem;
+    }
+
+    .experience-item p,
+    .project-item p,
+    .experience-item li,
+    .project-item li {
+        font-size: 0.85rem;
+    }
+    
+    /* ========== Selector Labels - Hide, Show on Hover ========== */
+    .selector-label {
+        max-width: 0;
+        overflow: hidden;
+        opacity: 0;
+        transition: all 0.3s ease;
+        white-space: nowrap;
+    }
+    
+    .selector-group:hover .selector-label {
+        max-width: 200px;
+        opacity: 1;
+        margin-right: 0.75rem;
+    }
+    
+    /* ========== Language Selector - Collapse to EN/ES ========== */
+    .language-selector .selector-btn {
+        position: relative;
+        padding: 0.4rem 0.8rem;
+        min-width: 50px;
+        font-size: 0; /* Hide actual text */
+        overflow: visible;
+    }
+
+    /* Show only short version (EN/ES) */
+    .language-selector .selector-btn::before {
+        content: attr(data-short);
+        font-size: 1rem; /* Restore font size for pseudo-element */
+        opacity: 1;
+    }
+
+    /* On hover, show full text */
+    .language-selector:hover .selector-btn,
+    .language-selector .selector-btn:hover {
+        font-size: 1rem; /* Restore font size */
+        padding: 0.4rem 1rem;
+        min-width: auto;
+    }
+
+    .language-selector:hover .selector-btn::before,
+    .language-selector .selector-btn:hover::before {
+        content: ''; /* Hide short version */
+        opacity: 0;
+    }
+    
+    /* ========== Action Buttons - Icon Only, Expand on Hover ========== */
+    .action-btn {
+        position: relative;
+        width: 45px;
+        overflow: hidden;
+        transition: width 0.3s ease, padding 0.3s ease;
+        white-space: nowrap;
+        text-indent: 0;
+    }
+    
+    /* Hide button text, keep icon */
+    .action-btn iconify-icon {
+        flex-shrink: 0;
+    }
+    
+    .action-btn {
+        font-size: 0;
+        padding: 0 0.65rem;
+        justify-content: center;
+    }
+    
+    /* On hover, show text */
+    .action-btn:hover {
+        width: auto;
+        font-size: 0.95rem;
+        padding: 0.65rem 1.5rem;
+        gap: 0.5rem;
+    }
+    
+    /* ========== Sidebar Content - Hide Text, Show on Hover ========== */
+    .sidebar-content {
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+    }
+
+    /* Show sidebar content on hover */
+    .skill-category:hover .sidebar-content,
+    .cv-sidebar-section:hover .sidebar-content {
+        max-height: 1000px;
+        opacity: 1;
+        margin-top: 10px;
+    }
+}