index.html

---
layout: page
title:  'Illustrations'
---
<!-- START CONTENT -->
<div class="row gx-5">

  <!-- START Counting all images in the /assets/illustrations folder -->
  {% assign total_count = 0 %}
  {% for file in site.static_files %}
    {% if file.path contains '/assets/illustrations/' %}
      {% assign total_count = total_count | plus: 1 %}
    {% endif %}
  {% endfor %}
  <!-- END Counting all images in the /assets/illustrations folder -->

  <!-- START LEFT SIDEBAR -->
  <div class="col-2">

    {% include sidebar-menu.html %}

    <!-- START Sidebar Categories -->
    <div class="d-flex align-items-center mb-3">
      <h6 class="mb-0 fw-normal">Categories </h6>
      <small class="text-secondary ms-auto align-self-center fw-normal"></small>
    </div>
    <!-- END Sidebar Categories -->

    <ul class="list-unstyled">
      {% assign categories = "" %}
      {% for file in site.static_files %}
        {% if file.path contains '/assets/illustrations/' %}
          {% assign path_parts = file.path | split: '/' %}
          {% assign category_name = path_parts[3] %}
          {% unless categories contains category_name %}
            {% assign categories = categories | append: category_name | append: "," %}
          {% endunless %}
        {% endif %}
      {% endfor %}
      {% assign categories = categories | split: ',' | uniq %}

      <!-- Generowanie linków do kotwic -->
      {% for category in categories %}
        {% unless category == "" %}
          <!-- Zliczanie plików w danej kategorii -->
          {% assign count = 0 %}
          {% for avatar in site.static_files %}
            {% assign avatar_parts = avatar.path | split: '/' %}
            {% if avatar_parts[3] == category %}
              {% assign count = count | plus: 1 %}
            {% endif %}
          {% endfor %}

          <li>
            <a href="#{{ category | replace: ' ', '-' }}" class="d-flex link-custom link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 mb-2 opacity-75">
              {{ category | capitalize }}
              <small class="text-secondary text-end ms-auto opacity-75">
                {{ count }}
              </small>
            </a>
          </li>
        {% endunless %}
      {% endfor %}
    </ul>
  </div>
  <!-- END LEFT SIDEBAR -->

  <!-- START RIGHT CONTENT -->
  <div class="col-10">

    <h1 class="mb-4 fw-normal">{{ total_count }} Illustrations<br />for Your Design Systems and Docs</h1>
    <p class="lead text-opacity-75 text-secondary">Discover a vast collection of free, high-quality illustrations designed specifically for documentation, frameworks, and design systems. Enhance your projects with our easily accessible and professionally crafted illustrations.</p>

    <hr class="my-5 text-secondary" style="border-style: dashed;" />

    <!-- Pobieranie katalogów (kategorii) z katalogu głównego /assets/avatars/ -->
    {% assign categories = "" %}
    {% for file in site.static_files %}
      {% if file.path contains '/assets/illustrations/' %}
        {% assign path_parts = file.path | split: '/' %}
        {% assign category_name = path_parts[3] %}
        {% unless categories contains category_name %}
          {% assign categories = categories | append: category_name | append: "," %}
        {% endunless %}
      {% endif %}
    {% endfor %}
    {% assign categories = categories | split: ',' | uniq %}

    {% for category in categories %}
      {% unless category == "" %}

        <!-- START Category Header -->
        <h5 class="my-4 fw-normal" id="{{ category | replace: ' ', '-' }}">
          {{ category | capitalize }}
          <small class="text-secondary text-opacity-75 ms-2 fw-normal">
            {% assign count = 0 %}
            {% for avatar in site.static_files %}
              {% assign avatar_parts = avatar.path | split: '/' %}
              {% if avatar_parts[3] == category %}
                {% assign count = count | plus: 1 %}
              {% endif %}
            {% endfor %}
            {{ count }}
          </small>
        </h5>
        <!-- END Category Header -->

        <div class="row">
          {% for avatar in site.static_files %}
            {% assign avatar_parts = avatar.path | split: '/' %}
            {% if avatar_parts[3] == category %}
              {% assign filename = avatar.path | split: '/' | last | split: '.' | first %}

              <div class="col-md-3 mb-4">
                <!-- START Card -->
                {% include card.html %}
                <!-- END Card -->
              </div>

              <!-- START Modal -->
              {% include modal.html %}
              <!-- END Modal -->
            {% endif %}
          {% endfor %}
        </div>

      {% endunless %}
    {% endfor %}

  </div>
  <!-- END RIGHT Content -->

</div>
<!-- END CONTENT -->