blog-eleventy-indiekit/cv.njk

---
layout: layouts/base.njk
withSidebar: false
title: CV
permalink: /cv/
pagefindIgnore: true
---

{# CV page — uses configurable layout when cvPageConfig exists, falls back to hardcoded layout #}

{% set hasCvData = (cv.experience and cv.experience.length) or
      (cv.projects and cv.projects.length) or
      (cv.skills and ((cv.skills or {}) | dictsort | length)) or
      (cv.interests and ((cv.interests or {}) | dictsort | length)) %}

{% if hasCvData %}

  {# Configurable layout — use cvPageConfig if available #}
  {% if cvPageConfig and cvPageConfig.sections %}
    {% include "components/cv-builder.njk" %}

  {# Fallback — hardcoded layout for backward compatibility #}
  {% else %}

    {# CV identity — check cvPageConfig.identity first, fall back to site.author #}
    {% set cvId = cvPageConfig.identity if (cvPageConfig and cvPageConfig.identity) else {} %}
    {% set authorName = cvId.name or site.author.name %}
    {% set authorAvatar = cvId.avatar or site.author.avatar %}
    {% set authorTitle = cvId.title or site.author.title %}
    {% set authorBio = cvId.bio or site.author.bio %}
    {% set socialLinks = cvId.social if (cvId.social and cvId.social.length) else site.social %}
    {% set cvLocality = cvId.locality or site.author.locality %}
    {% set cvCountry = cvId.country or site.author.country %}
    {% set cvOrg = cvId.org or site.author.org %}
    {% set cvUrl = cvId.url or '' %}
    {% set cvEmail = cvId.email or site.author.email %}
    {% set cvKeyUrl = cvId.keyUrl or site.author.keyUrl %}

    {# Hero / intro #}
    <section class="mb-8 sm:mb-12">
      <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
        <img
          src="{{ authorAvatar }}"
          alt="{{ authorName }}"
          class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
          loading="eager"
          eleventy:ignore
        >
        <div class="flex-1 min-w-0">
          <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
            {{ authorName }}
          </h1>
          {% if authorTitle %}
          <p class="text-lg sm:text-xl text-primary-600 dark:text-primary-400 mb-3 sm:mb-4">
            {{ authorTitle }}
          </p>
          {% endif %}
          {% if authorBio %}
          <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
            {{ authorBio }}
          </p>
          {% endif %}
          {% from "components/social-icon.njk" import socialIcon %}
          {% if socialLinks %}
          <div class="flex flex-wrap gap-3">
            {% for link in socialLinks %}
            <a
              href="{{ link.url }}"
              rel="{{ link.rel }} noopener"
              class="inline-flex items-center gap-2 px-3 py-2 text-sm bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
              target="_blank"
            >
              {{ socialIcon(link.icon, "w-5 h-5") }}
              <span class="text-sm font-medium">{{ link.name }}</span>
            </a>
            {% endfor %}
          </div>
          {% endif %}
          {# Contact details #}
          {% if cvLocality or cvCountry or cvOrg or cvUrl or cvEmail or cvKeyUrl %}
          <div class="flex flex-wrap gap-x-4 gap-y-1 mt-4 text-sm text-surface-500 dark:text-surface-400">
            {% if cvLocality or cvCountry %}
            <span>{% if cvLocality %}{{ cvLocality }}{% endif %}{% if cvLocality and cvCountry %}, {% endif %}{% if cvCountry %}{{ cvCountry }}{% endif %}</span>
            {% endif %}
            {% if cvOrg %}
            <span>{{ cvOrg }}</span>
            {% endif %}
            {% if cvUrl %}
            <span><a href="{{ cvUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
            {% endif %}
            {% if cvEmail %}
            <span><a href="mailto:{{ cvEmail }}" class="text-primary-600 dark:text-primary-400 hover:underline">{{ cvEmail }}</a></span>
            {% endif %}
            {% if cvKeyUrl %}
            <span><a href="{{ cvKeyUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
            {% endif %}
          </div>
          {% endif %}
        </div>
      </div>
    </section>

    {# Experience — work-only variant #}
    {% set section = { type: "cv-experience-work", config: {} } %}
    {% include "components/sections/cv-experience-work.njk" ignore missing %}

    {# Skills — work-only variant #}
    {% set section = { type: "cv-skills-work", config: {} } %}
    {% include "components/sections/cv-skills-work.njk" ignore missing %}

    {# Work Projects (only work-related projects on the CV page) #}
    {% set section = { type: "cv-projects-work", config: {} } %}
    {% include "components/sections/cv-projects-work.njk" ignore missing %}

    {# Education — work-only variant #}
    {% set section = { type: "cv-education-work", config: {} } %}
    {% include "components/sections/cv-education-work.njk" ignore missing %}

    {# Languages — standalone section #}
    {% set section = { type: "cv-languages", config: {} } %}
    {% include "components/sections/cv-languages.njk" ignore missing %}

    {# Interests — work-only variant #}
    {% set section = { type: "cv-interests-work", config: {} } %}
    {% include "components/sections/cv-interests-work.njk" ignore missing %}

    {# Last Updated #}
    {% if cv.lastUpdated %}
    <p class="text-sm text-surface-500 text-center mt-8">
      Last updated: {{ cv.lastUpdated | date("PPP") }}
    </p>
    {% endif %}

  {% endif %}

{% else %}

<div class="text-center py-12">
  <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">CV</h1>
  <p class="text-surface-600 dark:text-surface-400">
    No CV data available yet. Add your experience, projects, and skills via the
    <a href="/dashboard" class="text-primary-600 dark:text-primary-400 hover:underline">admin dashboard</a>.
  </p>
</div>

{% endif %}