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/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