<article class="about  active" data-page="about">
    <header>
      <h2 class="h2 article-title">About me</h2>
    </header>
    
    <section class="about-text">
      <pre class="text-style">
        {{model.about}}
      </pre>
    </section>
    
    
    <!--
      - service
    -->
    
    <section class="service">
    
      <h3 class="h3 service-title">Interests</h3>
    
      <ul class="service-list">

        <li class="service-item" *ngFor="let hobby of model.hobbies">
          <div class="service-icon-box">
            <i class="fa-regular fa-2x " [ngClass]="hobby.icon"></i>  
          </div>
          <div class="service-content-box">
            <h4 class="h4 service-item-title">{{hobby.name}}</h4>
    
            <p class="service-item-text">
              {{hobby.description}}
            </p>
          </div>
        </li>
      </ul>
    
    </section>
    
    </article>