@if (about$ | async; as model) {
<article class="about  active" data-page="about">
    <header>
        <h2 class="h2 article-title">About Me</h2>
        <button class="edit-btn" (click)="openEdit()" aria-label="Edit About">
            <i class="fa-light fa-pencil"></i>
        </button>
    </header>

    <section class="about-text">
        <pre class="text-style">
        {{model.about}}
      </pre>
    </section>

    <section class="service">

        <h3 class="h3 service-title">What i'm doing</h3>

        <ul class="service-list">

            @for (hobby of model.hobbies; track hobby.hobbyId) {
            <li class="service-item">
                <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>
}