feat: optimize mobile layout with unified design system

Comprehensive mobile optimization (≤768px) for improved consistency and readability:

- Center profile photo between name and intro text on mobile
- Unify all logo/icon sizes to 60×60px for visual consistency
- Standardize spacing across experience, courses, projects, and awards
- Reduce font sizes proportionally for better mobile readability
- Remove justified text alignment (except intro/skills) to prevent awkward spacing
- Apply consistent 1rem gaps and 1.5rem padding throughout
- Optimize sidebar items with reduced margins and font sizes

Technical improvements:
- Add comprehensive mobile breakpoint rules at 768px
- Implement flexible photo positioning (absolute on desktop, static on mobile)
- Ensure uniform typography scale across all content types

templates/cv-content.html

@@ -41,12 +41,15 @@
                     <div class="cv-header-left">
                         <h1 class="cv-name">Moreno Rubio, Juan Andrés</h1>
                         <p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
+
+                        <!-- Photo positioned for mobile (centered between name and intro) -->
+                        <div class="cv-photo">
+                            <img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
+                        </div>
+
                         <!-- Intro/Excerpt Text - No section heading, just the text -->
                         <div class="intro-text">{{.CV.Summary}}</div>
                     </div>
-                    <div class="cv-photo">
-                        <img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
-                    </div>
                 </div>
             </div>
 

templates/index.html

@@ -99,20 +99,25 @@
         <div class="action-bar-content">
             <!-- Left: Site Title + Hamburger Menu + Language -->
             <div class="site-title">
-                <a href="/" class="site-logo-link" id="logoLink" aria-label="Home">
-                    <iconify-icon icon="mdi:file-account" width="24" height="24" class="site-icon"></iconify-icon>
-                </a>
+                <!-- Left group: Logo + Hamburger -->
+                <div class="site-title-left">
+                    <a href="/" class="site-logo-link" id="logoLink" aria-label="Home">
+                        <iconify-icon icon="mdi:file-account" width="24" height="24" class="site-icon"></iconify-icon>
+                    </a>
 
-                <!-- Hamburger Menu Button -->
-                <button class="hamburger-btn" aria-label="Toggle navigation menu">
-                    <iconify-icon icon="mdi:menu" width="24" height="24"></iconify-icon>
-                </button>
+                    <!-- Hamburger Menu Button -->
+                    <button class="hamburger-btn" aria-label="Toggle navigation menu">
+                        <iconify-icon icon="mdi:menu" width="24" height="24"></iconify-icon>
+                    </button>
+                </div>
 
+                <!-- Center: Title -->
                 <a href="/" class="site-title-link" id="titleLink">
-                    <span class="site-title-text">CV JAMR - {{.CurrentYear}}</span>
+                    <iconify-icon icon="mdi:file-account" width="20" height="20" class="site-icon-mobile"></iconify-icon>
+                    <span class="site-title-text">CV JAMR<span class="site-title-year"> - {{.CurrentYear}}</span></span>
                 </a>
 
-                <!-- Language selector (next to title) -->
+                <!-- Right: Language selector -->
                 <div class="language-selector">
                     <button class="selector-btn {{if eq .Lang "en"}}active{{end}}" data-short="EN" onclick="selectLanguage('en')" aria-label="English">
                         English