<section id="about" class="pt-3">
  <div class="container-fluid" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true">
    <div class="text-dark text-center h3">About Me</div>
    <div class="row justify-content-center about">
      <div class="col-md-6 about-content">
        <div data-aos="zoom-in-up" data-aos-offset="50" data-aos-delay="50" data-aos-once="true"
          data-aos-duration="900">
          <div class="px-2">
            {{ .Site.Params.descripe_l1_person | markdownify }}
            <br>
            <br>
            {{ .Site.Params.descripe_l2_person | markdownify }}
          </div>
          {{ if .Site.Params.email }}
          <div class="py-3 pl-2">
            <a href="mailto:{{ .Site.Params.email }}?subject=Say hi!" target="_blank"
              class="contact-btn btn text-muted">
              Get In Touch
            </a>
          </div>
          {{ end }}
        </div>

      </div>
      <div class="col-md-5 about-skill">
        <div data-aos="zoom-in-down" data-aos-offset="50" data-aos-delay="50" data-aos-once="true"
          data-aos-duration="1000">
          <div class="text-secondary text-center h4">Skills</div>
          {{ range .Site.Params.skills }}
          <div>
            <div>
              {{ .name }}
            </div>
            <div class="progress mb-4">
              <div class="progress-bar" role="progressbar" style="width: {{ .percentage }}%;" aria-valuemin="0"
                aria-valuemax="100"></div>
            </div>
          </div>
          {{ end }}
        </div>
      </div>


    </div>
  </div>
</section>