<section id="skills">
  <div class="container">
    <div class="section-eyebrow reveal">{{ i18n "section_skills" }}</div>
    <h2 class="section-title reveal">{{ i18n "skills_title" }}</h2>

    <div class="skills-grid reveal" id="skillsGrid">
      {{ $lang := .Site.Language.Lang }}
      {{ range hugo.Data.skills }}
      <div class="skill-card">
        <div class="skill-head">
          <div class="skill-icon"><i class="{{ .icon }}"></i></div>
          <div class="skill-name">
            {{ if eq $lang "it" }}{{ .name_it }}{{ else }}{{ .name_en }}{{ end }}
          </div>
        </div>
        <div class="skill-track"><div class="skill-fill" style="--w:{{ .level }}"></div></div>
        <div class="skill-tags">
          {{ range .tags }}<span class="tag">{{ . }}</span>{{ end }}
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
