Projects counter by used language in Liquid

liquid_projects_counter.html

<!-- 

Snippet for making projects counter for e.g. TechFolios portfolios, http://techfolios.github.io/ 
Example below assumes that there is property called 'language' on each project. However if
it doesn't, those projects with "nil" language will be skipped.

If you want to also count those "undefined" projects, remove lines: 23-25
and modify switch construction (case/when)

Projects counter uses iconify icons instead of raw languages names
that can be found here: https://iconify.design/

Example can be viewed here:
https://trolit.github.io/projects/

-->

<div class="ui raised segment">
  <div class="ui one column stackable center aligned grid">
      {% assign projects = site.pages | where: "type", "project" %}
      {% assign languages = site.pages | where: "type", "project" | map: 'language' | uniq %}
        {% for language in languages %}
            {% if language == nil %}
              {% continue %}
            {% endif %}
          {% assign counter = 0 %}
          {% for project in projects %}
            {% if project.language == language %}
              {% assign counter = counter | plus: 1 %}
            {% endif %}
          {% endfor %}
          <div class="ui medium statistic">
            <div class="value"> 
              {% case language %}
                {% when "Java" %}
                  <span class="iconify" data-icon="logos:java" data-inline="false" data-height="250"></span>
                {% when "JavaScript" %}
                  <span class="iconify" data-icon="logos:javascript" data-inline="false"></span>
                {% when "Kotlin" %}
                  <span class="iconify" data-icon="vscode-icons:file-type-kotlin" data-inline="false"></span>
                {% when "C#" %}
                  <span class="iconify" data-icon="vscode-icons:file-type-csharp2" data-inline="false"></span>
                {% else %}
                  I don't have icon for this :( 
              {% endcase %}
            </div>
            <div class="label" style="margin-top: 40% !important;">
              {{ counter }}
            </div>
          </div>
        {% endfor %}
  </div>
</div>