Files
cv-site/templates/cv-content.html
T
juanatsap a8d6805e27 feat: enhance shortcuts modal and complete logos-to-icons rename
This commit includes graphical keyboard icons integration, modal styling
improvements, and comprehensive "Logos" to "Icons" terminology update.

Changes:
- Add graphical keyboard icons using Iconify MDI (Tab, Ctrl, Cmd, Esc, etc.)
- Implement color scheme: black title, green subtitle/headers, blue kbd elements
- Add visual boxes with borders and shadows for section grouping
- Change modal from 3-column to 2-column grid layout (900px width)
- Fix critical bug: all 5 sections now render (was only showing 2)

Rename "Logos" to "Icons" across entire codebase:
- Go models: ToggleLogos → ToggleIcons, ShowLogos → ShowIcons
- Routes: /toggle/logos → /toggle/icons
- Templates: desktop-logo-toggle → desktop-icon-toggle, #logoToggle → #iconToggle
- JavaScript: logoToggles → iconToggles, sync logic updated
- CSS: .show-logos → .show-icons
- UI JSON: toggleLogos → toggleIcons
- Comments and labels updated

Technical details:
- Rebuilt Go binary to fix template rendering error
- Fixed JSON struct tag: json:"toggleLogos" → json:"toggleIcons"
- Updated kbd element styling for icon alignment (inline-flex)
- Added margin-bottom to subtitle (0.5rem)
- Grid now 2 columns for better 5-section layout

All 5 sections now render correctly:
1. Zoom Control
2. View Controls
3. Navigation
4. Actions
5. Browser Defaults
2025-11-15 18:42:35 +00:00

95 lines
3.6 KiB
HTML

<main id="cv-content"
class="cv-paper {{.CVLengthClass}} {{if .ShowIcons}}show-icons{{end}}"
role="main"
aria-live="polite">
<!-- PAGE 1 -->
<div class="cv-page page-1">
<div id="cv-inner-content-page-1" class="cv-page-content-wrapper">
{{template "title-badges" .}}
<!-- Page 1 Content Grid: Left Sidebar + Main Content -->
<div class="page-content">
<!-- Left Sidebar - Skills (first half) -->
<aside class="cv-sidebar cv-sidebar-left">
<details class="sidebar-accordion" open>
<summary class="sidebar-accordion-header">
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
<span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
</summary>
<div class="sidebar-accordion-content">
{{range .SkillsLeft}}
<section class="sidebar-section">
<details open>
<summary>
<h3 class="sidebar-title">{{.Category}}</h3>
</summary>
<div class="sidebar-content">
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
</div>
</details>
</section>
{{end}}
</div>
</details>
</aside>
<!-- Main Content Area - Page 1 -->
<main class="cv-main">
{{template "section-header" .}}
{{template "section-education" .}}
{{template "section-skills-summary" .}}
{{template "section-experience" .}}
</main>
</div>
</div>
</div>
<!-- PAGE 2 -->
<div class="cv-page page-2">
<div id="cv-inner-content-page-2" class="cv-page-content-wrapper">
{{template "title-badges" .}}
<!-- Page 2 Content Grid: Main Content + Right Sidebar -->
<div class="page-content">
<!-- Main Content Area - Page 2 -->
<main class="cv-main">
{{template "section-awards" .}}
{{template "section-projects" .}}
{{template "section-courses" .}}
{{template "section-languages" .}}
{{template "section-references" .}}
{{template "section-other" .}}
</main>
<!-- Right Sidebar - Skills (second half) -->
<aside class="cv-sidebar cv-sidebar-right">
<details class="sidebar-accordion" open>
<summary class="sidebar-accordion-header">
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
<span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
</summary>
<div class="sidebar-accordion-content">
{{range .SkillsRight}}
<section class="sidebar-section">
<details open>
<summary>
<h3 class="sidebar-title">{{.Category}}</h3>
</summary>
<div class="sidebar-content">
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
</div>
</details>
</section>
{{end}}
</div>
</details>
</aside>
</div>
{{template "cv-footer" .}}
</div>
</div>
</main>