<section id='profile'>
  <img
    src="{{ apiURL }}{{ profile.image }}"
    srcset="{{ utilService.generateSrcset(apiURL + profile.image) }}"
  />
  <div id="profile-text">
    <p>{{ profile.bio }}</p>
    <p>{{ profile.description }}</p>
  </div>
</section>
<section id='catalog'>
  @for (project of projects; track project) {
    <article class="project">
      <a href="/projects/{{ project.permalink }}" class='project'>
        <img class="project-image-alt" id="img-project-{{project.id}}-alt"/>
        <img
          class="project-image" id="img-project-{{project.id}}"
          src="{{ apiURL }}{{ project.images[0].path }}"
          srcset="{{ utilService.generateSrcset(apiURL + project.images[0].path) }}"
        />
        <div class='project_details'>
          <h3>{{ project.title }}</h3>
        </div>
      </a>
    </article>
  }
</section>
