dataviz-portfolio/index.md

---
heading: "Ім'я Прізвище"
show_tagline: true
charts: true
---

{%- for work in site.works %}
<details class="work{% if work.wide %} wide{% endif %}" id="work-{{ work.slug }}" open>
  <summary>
    <span class="work-title">{{ work.title }}</span>
    {%- if work.example %} <span class="tag">приклад</span>{% endif %}
  </summary>

  <div class="work-body">
    <div class="note">{{ work.content | markdownify }}</div>
    {%- if work.example %}
    <p class="note swap">Це приклад із шаблону. Замініть його своєю роботою або
       видаліть файл <code>_works/{{ work.slug }}.md</code>.</p>
    {%- endif %}

    {%- if work.steps %}
    {%- for step in work.steps %}
    <figure class="ba">
      <img src="{{ step.img }}" alt="{{ step.label }}" loading="lazy">
      <figcaption>{{ step.label }}{% if step.note %} — <span>{{ step.note }}</span>{% endif %}</figcaption>
    </figure>
    {%- endfor %}
    <p class="ba-label">{{ work.final_label | default: "Стало" }}</p>
    {%- elsif work.before %}
    <figure class="ba">
      <img src="{{ work.before }}" alt="Було: {{ work.title }}" loading="lazy">
      <figcaption>Було</figcaption>
    </figure>
    <p class="ba-label">Стало</p>
    {%- endif %}

    <div class="viz"{% if work.height %} data-height="{{ work.height }}"{% endif %}
      {%- if work.tableau %} data-tableau="{{ work.tableau }}"
      {%- elsif work.spec %} data-spec="{{ work.spec }}"{% endif %}></div>
  </div>
</details>
{%- endfor %}