phase ii and phase iii

2025-11-12 18:55:06 +00:00
parent d36b67d1f1
commit 8f2704e10a
9 changed files with 1303 additions and 191 deletions
@@ -1,3 +1,7 @@
+<main id="cv-content"
+      class="cv-paper {{.CVLengthClass}} {{if .ShowLogos}}show-logos{{end}}"
+      role="main"
+      aria-live="polite">
 <!-- PAGE 1 -->
 <div class="cv-page page-1">
    {{template "title-badges" .}}
@@ -79,3 +83,4 @@

    {{template "cv-footer" .}}
 </div>
+</main>
@@ -98,7 +98,7 @@
    }
    </script>
 </head>
-<body>
+<body {{if .ThemeClean}}class="theme-clean"{{end}}>
    {{template "action-bar" .}}
    {{template "hamburger-menu" .}}

@@ -106,12 +106,7 @@
    <div id="zoom-wrapper" class="zoom-wrapper">
        <!-- CV Content Container -->
        <div class="cv-container">
-            <main id="cv-content"
-                  class="cv-paper"
-                  role="main"
-                  aria-live="polite">
-                {{template "cv-content.html" .}}
-            </main>
+            {{template "cv-content.html" .}}
        </div>

        {{template "page-footer" .}}
@@ -10,39 +10,39 @@
                <iconify-icon icon="mdi:chevron-right" width="16" height="16" class="submenu-arrow"></iconify-icon>
            </a>
            <div class="submenu-content">
-                <a href="#education" class="menu-item" onclick="scrollToSection('education')">
+                <a href="#education" class="menu-item">
                    <iconify-icon icon="mdi:school" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Formación{{else}}Training{{end}}</span>
                </a>
-                <a href="#skills" class="menu-item" onclick="scrollToSection('skills')">
+                <a href="#skills" class="menu-item">
                    <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}</span>
                </a>
-                <a href="#experience" class="menu-item" onclick="scrollToSection('experience')">
+                <a href="#experience" class="menu-item">
                    <iconify-icon icon="mdi:office-building" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}</span>
                </a>
-                <a href="#awards" class="menu-item" onclick="scrollToSection('awards')">
+                <a href="#awards" class="menu-item">
                    <iconify-icon icon="mdi:trophy" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}</span>
                </a>
-                <a href="#projects" class="menu-item" onclick="scrollToSection('projects')">
+                <a href="#projects" class="menu-item">
                    <iconify-icon icon="mdi:web" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}</span>
                </a>
-                <a href="#courses" class="menu-item" onclick="scrollToSection('courses')">
+                <a href="#courses" class="menu-item">
                    <iconify-icon icon="mdi:school" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}</span>
                </a>
-                <a href="#languages" class="menu-item" onclick="scrollToSection('languages')">
+                <a href="#languages" class="menu-item">
                    <iconify-icon icon="mdi:translate" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}</span>
                </a>
-                <a href="#references" class="menu-item" onclick="scrollToSection('references')">
+                <a href="#references" class="menu-item">
                    <iconify-icon icon="mdi:link-variant" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Referencias{{else}}References{{end}}</span>
                </a>
-                <a href="#other" class="menu-item" onclick="scrollToSection('other')">
+                <a href="#other" class="menu-item">
                    <iconify-icon icon="mdi:information" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Otros{{else}}Other{{end}}</span>
                </a>
@@ -84,7 +84,13 @@
                    <span>{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}</span>
                </label>
                <label class="icon-toggle">
-                    <input type="checkbox" id="lengthToggleMenu" onchange="toggleCVLength()">
+                    <input type="checkbox"
+                           id="lengthToggleMenu"
+                           {{if eq .CVLengthClass "cv-long"}}checked{{end}}
+                           hx-post="/toggle/length"
+                           hx-target=".cv-paper"
+                           hx-swap="outerHTML"
+                           hx-indicator="#loading">
                    <span class="icon-toggle-slider">
                        <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
                        <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -99,7 +105,13 @@
                    <span>{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}</span>
                </label>
                <label class="icon-toggle">
-                    <input type="checkbox" id="logoToggleMenu" checked onchange="toggleLogos()">
+                    <input type="checkbox"
+                           id="logoToggleMenu"
+                           {{if .ShowLogos}}checked{{end}}
+                           hx-post="/toggle/logos"
+                           hx-target=".cv-paper"
+                           hx-swap="outerHTML"
+                           hx-indicator="#loading">
                    <span class="icon-toggle-slider">
                        <iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
                        <iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -114,7 +126,13 @@
                    <span>{{if eq .Lang "es"}}Vista{{else}}View{{end}}</span>
                </label>
                <label class="icon-toggle">
-                    <input type="checkbox" id="themeToggleMenu" onchange="toggleTheme()">
+                    <input type="checkbox"
+                           id="themeToggleMenu"
+                           {{if .ThemeClean}}checked{{end}}
+                           hx-post="/toggle/theme"
+                           hx-target="body"
+                           hx-swap="outerHTML"
+                           hx-indicator="#loading">
                    <span class="icon-toggle-slider">
                        <iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
                        <iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
@@ -1,10 +1,24 @@
 {{define "language-selector"}}
 <!-- 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">
+    <button class="selector-btn {{if eq .Lang "en"}}active{{end}}"
+            data-short="EN"
+            hx-get="/?lang=en"
+            hx-target="body"
+            hx-swap="outerHTML"
+            hx-indicator="#loading"
+            hx-push-url="true"
+            aria-label="English">
        English
    </button>
-    <button class="selector-btn {{if eq .Lang "es"}}active{{end}}" data-short="ES" onclick="selectLanguage('es')" aria-label="Español">
+    <button class="selector-btn {{if eq .Lang "es"}}active{{end}}"
+            data-short="ES"
+            hx-get="/?lang=es"
+            hx-target="body"
+            hx-swap="outerHTML"
+            hx-indicator="#loading"
+            hx-push-url="true"
+            aria-label="Español">
        Español
    </button>
 </div>
@@ -5,7 +5,13 @@
    <div class="selector-group">
        <label class="selector-label">{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}:</label>
        <label class="icon-toggle">
-            <input type="checkbox" id="lengthToggle" onchange="toggleCVLength()">
+            <input type="checkbox"
+                   id="lengthToggle"
+                   {{if eq .CVLengthClass "cv-long"}}checked{{end}}
+                   hx-post="/toggle/length"
+                   hx-target=".cv-paper"
+                   hx-swap="outerHTML"
+                   hx-indicator="#loading">
            <span class="icon-toggle-slider">
                <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
                <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -17,7 +23,13 @@
    <div class="selector-group">
        <label class="selector-label">{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}:</label>
        <label class="icon-toggle">
-            <input type="checkbox" id="logoToggle" checked onchange="toggleLogos()">
+            <input type="checkbox"
+                   id="logoToggle"
+                   {{if .ShowLogos}}checked{{end}}
+                   hx-post="/toggle/logos"
+                   hx-target=".cv-paper"
+                   hx-swap="outerHTML"
+                   hx-indicator="#loading">
            <span class="icon-toggle-slider">
                <iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
                <iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -29,7 +41,13 @@
    <div class="selector-group">
        <label class="selector-label">{{if eq .Lang "es"}}Vista{{else}}View{{end}}:</label>
        <label class="icon-toggle">
-            <input type="checkbox" id="themeToggle" onchange="toggleTheme()">
+            <input type="checkbox"
+                   id="themeToggle"
+                   {{if .ThemeClean}}checked{{end}}
+                   hx-post="/toggle/theme"
+                   hx-target="body"
+                   hx-swap="outerHTML"
+                   hx-indicator="#loading">
            <span class="icon-toggle-slider">
                <iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
                <iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>