cv-site/templates/cv-content.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"
     _="on htmx:afterSettle wait 100ms then remove .loading from me">
    {{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 component-wrapper">
            <!-- Actual Content -->
            <div class="actual-content">
                <details class="sidebar-accordion">
                    <summary class="sidebar-accordion-header">
                        <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                        <span>{{.UI.Sections.TechnicalSkills}}</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>
            </div>

            <!-- Skeleton Content -->
            <div class="skeleton-content">
                <div class="skeleton-sidebar">
                    <div class="skeleton skeleton-sidebar-header"></div>
                    <div class="skeleton-skill-category">
                        <div class="skeleton skeleton-skill-title"></div>
                        <div class="skeleton-skill-items">
                            <div class="skeleton skeleton-skill-item"></div>
                            <div class="skeleton skeleton-skill-item"></div>
                            <div class="skeleton skeleton-skill-item"></div>
                        </div>
                    </div>
                    <div class="skeleton-skill-category">
                        <div class="skeleton skeleton-skill-title"></div>
                        <div class="skeleton-skill-items">
                            <div class="skeleton skeleton-skill-item"></div>
                            <div class="skeleton skeleton-skill-item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </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"
     _="on htmx:afterSettle wait 100ms then remove .loading from me">
    {{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 component-wrapper">
            <!-- Actual Content -->
            <div class="actual-content">
                <details class="sidebar-accordion">
                    <summary class="sidebar-accordion-header">
                        <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                        <span>{{.UI.Sections.MoreSkills}}</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>
            </div>

            <!-- Skeleton Content -->
            <div class="skeleton-content">
                <div class="skeleton-sidebar">
                    <div class="skeleton skeleton-sidebar-header"></div>
                    <div class="skeleton-skill-category">
                        <div class="skeleton skeleton-skill-title"></div>
                        <div class="skeleton-skill-items">
                            <div class="skeleton skeleton-skill-item"></div>
                            <div class="skeleton skeleton-skill-item"></div>
                            <div class="skeleton skeleton-skill-item"></div>
                        </div>
                    </div>
                    <div class="skeleton-skill-category">
                        <div class="skeleton skeleton-skill-title"></div>
                        <div class="skeleton-skill-items">
                            <div class="skeleton skeleton-skill-item"></div>
                            <div class="skeleton skeleton-skill-item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    {{template "cv-footer" .}}
</div>
</div>
</main>