cv-site/templates/cv-content.html

<!-- PAGE 1 -->
<div class="cv-page page-1">
    <!-- Professional Title Badges - Full Width Top Bar -->
    <div class="cv-title-badges-header">
        <span class="title-badge">{{if eq .Lang "es"}}CONSULTOR TÉCNICO{{else}}TECHNICAL CONSULTANT{{end}}</span>
        <span class="badge-separator">|</span>
        <span class="title-badge">{{if eq .Lang "es"}}INGENIERO FULL-STACK{{else}}FULL-STACK ENGINEER{{end}}</span>
        <span class="badge-separator">|</span>
        <span class="title-badge">{{if eq .Lang "es"}}ESPECIALISTA EN AUTENTICACIÓN{{else}}AUTHENTICATION SPECIALIST{{end}}</span>
        <span class="badge-separator">|</span>
        <span class="title-badge">{{if eq .Lang "es"}}ARQUITECTO DE SOLUCIONES{{else}}SOLUTION ARCHITECT{{end}}</span>
    </div>

    <!-- Page 1 Content Grid: Left Sidebar + Main Content -->
    <div class="page-content">
        <!-- Left Sidebar - Skills (first half) -->
        <aside class="cv-sidebar cv-sidebar-left">
            <div class="sidebar-accordion-header" onclick="toggleSidebar(this)">
                <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>
            </div>
            <div class="sidebar-accordion-content">
                {{range $index, $category := .SkillsLeft}}
                <section class="sidebar-section">
                    <details open>
                        <summary>
                            <h3 class="sidebar-title">{{$category.Category}}</h3>
                        </summary>
                        <div class="sidebar-content">
                            {{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
                        </div>
                    </details>
                </section>
                {{end}}
            </div>
        </aside>

        <!-- Main Content Area - Page 1 -->
        <main class="cv-main">
            <!-- Header with Name and Photo -->
            <div class="cv-header">
                <div class="cv-header-content">
                    <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>
            </div>

            <!-- Education -->
            <section id="education" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Formación{{else}}Training{{end}}
                        </h3>
                    </summary>
                {{range .CV.Education}}
                <div class="education-item">
                    <strong>{{.Degree}}</strong> ({{.StartDate}}-{{.EndDate}}) {{if eq $.Lang "es"}}obtenido de{{else}}obtained from the{{end}} <strong>{{.Institution}}</strong> ({{.Location}})
                </div>
                {{end}}
                </details>
            </section>

            <!-- Skills Summary -->
            <section id="skills" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:brain" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}
                        </h3>
                    </summary>
                <p class="summary-text">
                    {{if eq .Lang "es"}}
                    Desarrollador <strong>full-stack</strong> con experiencia en <strong>Go</strong>, <strong>Node.js</strong>, <strong>React</strong> y <strong>HTMX</strong> para <strong>aplicaciones modernas</strong>, además de conocimientos en Java y PHP para proyectos legacy. He trabajado en <strong>unos 20 sitios web</strong> y realizado <strong>consultoría para 35-40 clientes internacionales</strong>, desde e-commerce y plataformas empresariales hasta <strong>sistemas de autenticación</strong> que gestionan <strong>millones de usuarios</strong>. Familiarizado con flujos de trabajo asistidos por <strong>IA</strong> y gestión de infraestructura (<strong>Linux</strong>, <strong>Docker</strong>, <strong>CI/CD</strong>). Me adapto bien tanto al trabajo independiente como colaborativo en equipos internacionales.
                    {{else}}
                    <strong>Full-stack</strong> developer with experience in <strong>Go</strong>, <strong>Node.js</strong>, <strong>React</strong>, and <strong>HTMX</strong> for <strong>modern applications</strong>, plus Java and PHP knowledge for legacy projects. I've worked on <strong>around 20 websites</strong> and provided <strong>consulting for 35-40 international clients</strong>, from e-commerce and enterprise platforms to <strong>authentication systems</strong> managing <strong>millions of users</strong>. Familiar with <strong>AI-assisted development</strong> workflows and infrastructure management (<strong>Linux</strong>, <strong>Docker</strong>, <strong>CI/CD</strong>). I adapt well to both independent work and collaborative teams across different countries.
                    {{end}}
                </p>
                </details>
            </section>

            <!-- Experience -->
            <section id="experience" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:office-building" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
                        </h3>
                    </summary>

                {{range .CV.Experience}}
                <div class="experience-item">
                    <div class="company-logo">
                        {{if .CompanyLogo}}
                        <img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:office-building\' width=\'60\' height=\'60\' class=\'default-company-icon\'></iconify-icon>'">
                        {{else}}
                        <iconify-icon icon="mdi:office-building" width="60" height="60" class="default-company-icon"></iconify-icon>
                        {{end}}
                    </div>
                    <div class="experience-content">
                        <strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} - <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong>
                        {{if .Current}}<span class="current-badge">{{if eq $.Lang "es"}}ACTUAL{{else}}CURRENT{{end}}</span>{{end}}
                        {{if .Expired}}<span class="expired-badge">{{if eq $.Lang "es"}}EXPIRADO{{else}}EXPIRED{{end}}</span>{{end}}
                        <br>
                        <small>{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}} - ({{.Location}})</small>

                        {{if .ShortDescription}}
                        <p class="experience-desc short-desc">{{.ShortDescription}}</p>
                        {{end}}

                        {{if .Responsibilities}}
                        <ul class="responsibilities long-only">
                            {{range .Responsibilities}}
                            <li>{{.}}</li>
                            {{end}}
                        </ul>
                        {{end}}
                    </div>
                </div>
                {{end}}
                </details>
            </section>
        </main>
    </div>
</div>

<!-- PAGE 2 -->
<div class="cv-page page-2">
    <!-- Professional Title Badges - Same as Page 1 -->
    <div class="cv-title-badges-header">
        <span class="title-badge">{{if eq .Lang "es"}}CONSULTOR TÉCNICO{{else}}TECHNICAL CONSULTANT{{end}}</span>
        <span class="badge-separator">|</span>
        <span class="title-badge">{{if eq .Lang "es"}}INGENIERO FULL-STACK{{else}}FULL-STACK ENGINEER{{end}}</span>
        <span class="badge-separator">|</span>
        <span class="title-badge">{{if eq .Lang "es"}}ESPECIALISTA EN AUTENTICACIÓN{{else}}AUTHENTICATION SPECIALIST{{end}}</span>
        <span class="badge-separator">|</span>
        <span class="title-badge">{{if eq .Lang "es"}}ARQUITECTO DE SOLUCIONES{{else}}SOLUTION ARCHITECT{{end}}</span>
    </div>

    <!-- Page 2 Content Grid: Main Content + Right Sidebar -->
    <div class="page-content">
        <!-- Main Content Area - Page 2 -->
        <main class="cv-main">
            <!-- Awards Section -->
            {{if .CV.Awards}}
            <section id="awards" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:trophy" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}
                        </h3>
                    </summary>
                {{range .CV.Awards}}
                <div class="award-item">
                    {{if .AwardLogo}}
                    <div class="award-logo">
                        <img src="/static/images/companies/{{.AwardLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:trophy\' width=\'60\' height=\'60\' class=\'default-award-icon\'></iconify-icon>'">
                    </div>
                    {{end}}
                    <div class="award-content">
                        <strong>{{.Title}}</strong><br>
                        <small>{{.Issuer}} - {{.Date}}</small>

                        {{if .ShortDescription}}
                        <p class="award-desc short-desc">{{.ShortDescription}}</p>
                        {{end}}

                        {{if .Responsibilities}}
                        <ul class="responsibilities long-only">
                            {{range .Responsibilities}}
                            <li>{{.}}</li>
                            {{end}}
                        </ul>
                        {{end}}
                    </div>
                </div>
                {{end}}
                </details>
            </section>
            {{end}}

            <!-- Projects Section -->
            {{if .CV.Projects}}
            <section id="projects" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:web" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}
                        </h3>
                    </summary>
                {{range .CV.Projects}}
                <div class="project-item">
                    {{if .ProjectLogo}}
                    <div class="project-icon">
                        <img src="/static/images/projects/{{.ProjectLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:web\' width=\'80\' height=\'80\' class=\'default-project-icon\'></iconify-icon>'">
                    </div>
                    {{else}}
                    <div class="project-icon">
                        <iconify-icon icon="mdi:web" width="80" height="80" class="default-project-icon"></iconify-icon>
                    </div>
                    {{end}}
                    <div class="project-content">
                        <strong>
                            {{if .ProjectName}}
                                {{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.ProjectName}}</a>{{else}}{{.ProjectName}}{{end}}{{if .ProjectDesc}} - {{.ProjectDesc}}{{end}}
                            {{else}}
                                {{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>{{else}}{{.Title}}{{end}}
                            {{end}}
                        </strong>
                        {{if .Current}}<span class="live-badge"><iconify-icon icon="mdi:wifi" width="14" height="14"></iconify-icon>LIVE</span>{{end}}
                        {{if .MaintainedBy}}<span class="maintained-badge">{{if eq $.Lang "es"}}MANTENIDO POR{{else}}MAINTAINED BY{{end}} {{.MaintainedBy}}</span>{{end}}
                        <br>
                        <small>{{if .StartDate}}{{.StartDate}}{{if .Current}}{{if .DynamicDate}} / {{.DynamicDate}}{{else}} / {{if eq $.Lang "es"}}presente{{else}}ahora{{end}}{{end}}{{end}}{{end}} - ({{.Location}})</small>

                        {{if .ShortDescription}}
                        <p class="project-desc short-desc">{{.ShortDescription}}</p>
                        {{end}}

                        {{if .Responsibilities}}
                        <ul class="responsibilities long-only">
                            {{range .Responsibilities}}
                            <li>{{.}}</li>
                            {{end}}
                        </ul>
                        {{end}}

                        {{if .Technologies}}
                        <div class="project-technologies long-only">
                            <strong>{{if eq $.Lang "es"}}Tecnologías:{{else}}Technologies:{{end}}</strong>
                            {{range $index, $tech := .Technologies}}{{if $index}}, {{end}}{{$tech}}{{end}}
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}

                <!-- Link to full portfolio -->
                <div class="projects-footer">
                    <p>{{if eq .Lang "es"}}Ver todos los proyectos en mi{{else}}See all projects on my{{end}}
                    <a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{if eq .Lang "es"}}portfolio de Domestika{{else}}Domestika portfolio{{end}}</strong></a></p>
                </div>
                </details>
            </section>
            {{end}}

            <!-- Courses Section -->
            {{if .CV.Courses}}
            <section id="courses" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}
                        </h3>
                    </summary>
                {{range .CV.Courses}}
                <div class="course-item">
                    {{if .CourseLogo}}
                    <div class="course-icon">
                        <img src="/static/images/courses/{{.CourseLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:school\' width=\'80\' height=\'80\' class=\'default-course-icon\'></iconify-icon>'">
                    </div>
                    {{else}}
                    <div class="course-icon">
                        <iconify-icon icon="mdi:school" width="80" height="80" class="default-course-icon"></iconify-icon>
                    </div>
                    {{end}}
                    <div class="course-content">
                        <strong>{{.Title}}</strong><br>
                        <small>{{.Institution}} - {{.Date}} - ({{.Location}})</small>

                        {{if .ShortDescription}}
                        <p class="course-desc short-desc">{{.ShortDescription}}</p>
                        {{end}}

                        {{if .Responsibilities}}
                        <ul class="responsibilities long-only">
                            {{range .Responsibilities}}
                            <li>{{.}}</li>
                            {{end}}
                        </ul>
                        {{end}}
                    </div>
                </div>
                {{end}}
                </details>
            </section>
            {{end}}

            <!-- Languages Section -->
            <section id="languages" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:translate" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}
                        </h3>
                    </summary>
                {{range .CV.Languages}}
                <div class="language-item">
                    <strong>{{.Language}}:</strong> {{.Proficiency}}{{if .Detail}} {{.Detail}}{{end}}
                </div>
                {{end}}
                </details>
            </section>

            <!-- References Section -->
            {{if .CV.References}}
            <section id="references" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:link-variant" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Referencias{{else}}References{{end}}
                        </h3>
                    </summary>
                {{range .CV.References}}
                <div class="reference-item">
                    {{if .TextBefore}}{{.TextBefore}} {{end}}{{if eq .Action "downloadPDF"}}<a href="{{.URL}}" onclick="event.preventDefault(); openPdfModal(); return false;"><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{else}}<a href="{{.URL}}" {{if and (eq .Type "cv") (ne .URL "/?lang=en") (ne .URL "/?lang=es")}}download{{else}}target="_blank" rel="noopener noreferrer"{{end}}><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{end}}{{if .TextAfter}} {{.TextAfter}}{{end}}
                </div>
                {{end}}
                </details>
            </section>
            {{end}}

            <!-- Other Section (Driver's License) -->
            {{if .CV.Other.DriverLicense}}
            <section id="other" class="cv-section">
                <details open>
                    <summary>
                        <h3 class="section-title">
                            <iconify-icon icon="mdi:information" width="24" height="24" class="section-icon"></iconify-icon>
                            {{if eq .Lang "es"}}Otros{{else}}Other{{end}}
                        </h3>
                    </summary>
                <div class="other-content">
                    {{if eq .Lang "es"}}Carnet de conducir tipo <strong>{{.CV.Other.DriverLicense}}</strong>{{else}}Driving License type <strong>{{.CV.Other.DriverLicense}}</strong>{{end}}
                </div>
                </details>
            </section>
            {{end}}
        </main>

        <!-- Right Sidebar - Skills (second half) -->
        <aside class="cv-sidebar cv-sidebar-right">
            <div class="sidebar-accordion-header" onclick="toggleSidebar(this)">
                <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>
            </div>
            <div class="sidebar-accordion-content">
                {{range $index, $category := .SkillsRight}}
                <section class="sidebar-section">
                    <details open>
                        <summary>
                            <h3 class="sidebar-title">{{$category.Category}}</h3>
                        </summary>
                        <div class="sidebar-content">
                            {{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
                        </div>
                    </details>
                </section>
                {{end}}
            </div>
        </aside>
    </div>

    <!-- Footer - Only on Page 2 -->
    <footer class="cv-footer">
        <ul class="footer-content">
            <li>
                <div class="footer-label">linkedin_</div>
                <div class="footer-separator"><i class="fa fa-circle"></i></div>
                <div class="footer-value">
                    <a href="{{.CV.Personal.LinkedIn}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.LinkedIn}}</a>
                </div>
            </li>
            <li>
                <div class="footer-label">github_</div>
                <div class="footer-separator"><i class="fa fa-circle"></i></div>
                <div class="footer-value">
                    <a href="{{.CV.Personal.GitHub}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.GitHub}}</a>
                </div>
            </li>
            <li>
                <div class="footer-label">domestika_</div>
                <div class="footer-separator"><i class="fa fa-circle"></i></div>
                <div class="footer-value">
                    <a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Domestika}}</a>
                </div>
            </li>
            <li>
                <div class="footer-label">email@</div>
                <div class="footer-separator"><i class="fa fa-circle"></i></div>
                <div class="footer-value">
                    <a href="mailto:{{.CV.Personal.Email}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Email}}</a>
                </div>
            </li>
            <li>
                <div class="footer-label">phone#</div>
                <div class="footer-separator"><i class="fa fa-circle"></i></div>
                <div class="footer-value">
                    <a href="tel:+34676875420" target="_blank" rel="noopener noreferrer">+34 676 875 420</a>
                </div>
            </li>
        </ul>
    </footer>
</div>