<article class="resume" data-page="resume">

    <header>
      <h2 class="h2 article-title">Resume</h2>
    </header>

    <section class="timeline">

      <div class="title-wrapper">
        <div class="icon-box">
          <i class="fa-light fa-book-open"></i>
        </div>

        <h3 class="h3">Education</h3>
      </div>

      <ol class="timeline-list">

        <li class="timeline-item" *ngFor="let education of model.academics">

          <h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization != null ? " - " + education.degreeSpecialization : ""}}</h4>

          <span>{{education.period}}</span>

          <p class="timeline-text">
            {{education.institution}}
          </p>

        </li>

      </ol>

    </section>

    <section class="timeline">

      <div class="title-wrapper">
        <div class="icon-box">
          <i class="fa-light fa-briefcase"></i>
        </div>

        <h3 class="h3">Experience</h3>
      </div>

      <ol class="timeline-list">

        <li class="timeline-item" *ngFor="let experience of model.experiences">

          <h4 class="h4 timeline-item-title">{{experience.title}}</h4>

          <span>{{experience.period}}</span>

          <p class="timeline-text">
            {{experience.company}}
          </p>

        </li>

      </ol>

    </section>

    <section class="skill">

      <h3 class="h3 skills-title">My skills</h3>

      <ul class="skills-list content-card">

        <li class="skills-item" *ngFor="let skill of model.skills">

          <div class="title-wrapper">
            <h5 class="h5">{{skill.name}}</h5>
            <data value="{{skill.proficiencyLevel}}">{{skill.proficiencyLevel}}%</data>
          </div>

          <div class="skill-progress-bg">
            <div class="skill-progress-fill" [style]="'width: ' + skill.proficiencyLevel + '%'"></div>
          </div>

        </li>
        
      </ul>

    </section>

  </article>