hugo-toha/layouts/partials/experiences.html

<div class="container-fluid experiences bg-white anchor" id="experiences">
  {{ if .Site.Data.experiences }}
    <h1 class="text-center">Experiences</h1>

    <div class="container timeline text-justify">
      {{ $total:= len .Site.Data.experiences.experiences }}
      {{ range $idx,$val:= .Site.Data.experiences.experiences }}
        {{ if eq (mod $idx 2) 0 }}
          <div class="row align-items-center  d-flex">
            {{ partial "experiences/left-v-line.html" $idx }}
            {{ partial "experiences/experience-info.html" $val }}
          </div>
          {{ if lt $idx (sub $total 1) }}
            {{ partial "experiences/left-to-right-h-line.html" $idx }}
          {{ end }}
        {{else}}
          <div class="row align-items-center justify-content-end d-flex">
            {{ partial "experiences/experience-info.html" $val }}
            {{ partial "experiences/right-v-line.html" $idx }}
          </div>
          {{ if lt $idx (sub $total 1) }}
            {{ partial "experiences/right-to-left-h-line.html" $idx }}
          {{ end }}
        {{ end }}
      {{ end }}
    </div>
  {{ end }}
</div>