Personal-Portfolio-Website/src/app/home/home.component.html

<main class="page-shell home-page">
  <section class="hero-section panel">
    <div class="hero-copy">
      <div class="hero-copy-main">
        <p id="portfolio-eyebrow" class="eyebrow">{{ content().home.portfolioEyebrow }}</p>
        <h1>
          <span class="hero-name-part" [attr.data-name]="global.firstname">{{ global.firstname }}</span>
          <span class="hero-name-part" [attr.data-name]="global.lastname">{{ global.lastname }}</span>
        </h1>
        <p class="hero-intro">{{ content().home.heroIntro }}</p>
      </div>

      <div class="hero-actions">
        <div class="hero-action-links">
          <button class="action-link" type="button" (click)="scrollToProjectsSection()">{{ content().home.viewProjects }}</button>
          <button class="action-link" type="button" (click)="scrollToAboutSection()">{{ content().home.aboutMe }}</button>
        </div>
        <div class="hero-contact-block">
          <p class="hero-contact-title">{{ content().home.contactTitle }}</p>
          <div id="contact-links" class="contact-area hero-contact-area">
            <a [href]="contactMailHref" [attr.aria-label]="content().home.mailAriaLabel"
              ><app-icon [icon]="envelopeIcon" size="lg"></app-icon
            ></a>
            <a href="tel:{{ global.hrefContactPhone }}" [attr.aria-label]="content().home.phoneAriaLabel"
              ><app-icon [icon]="phoneIcon" size="lg"></app-icon
            ></a>
            <a [href]="global.signalUrl" [attr.aria-label]="content().home.signalAriaLabel"
              ><app-icon [icon]="signalIcon" size="lg"></app-icon
            ></a>
            <a href="https://git.lechner-systems.at/fraujulian" [attr.aria-label]="content().home.giteaAriaLabel"
              ><app-icon [icon]="giteaIcon" size="lg"></app-icon
            ></a>
            <a href="https://www.linkedin.com/in/julianlechner2009/" [attr.aria-label]="content().home.linkedinAriaLabel"
              ><app-icon [icon]="linkedinIcon" size="lg"></app-icon
            ></a>
          </div>
        </div>
      </div>
    </div>

    <div class="hero-visual">
      @if (currentPortraitHighlight(); as highlight) {
        <div class="portrait-highlight">
          <button
            type="button"
            class="portrait-highlight-button"
            (click)="showNextPortraitHighlight()"
            [attr.aria-label]="content().home.nextHighlightAriaLabel"
            [title]="portraitHighlights().length > 1 ? content().home.nextHighlightTitle : content().home.singleHighlightTitle"
          >
            <div class="portrait-media" [class.portrait-media-switching]="isPortraitSwitching()">
              <img
                class="hero-feature-image"
                [src]="highlight.image"
                [attr.srcset]="highlight.imageSrcset"
                [attr.sizes]="highlight.imageSizes"
                [width]="highlight.imageWidth"
                [height]="highlight.imageHeight"
                fetchpriority="high"
                decoding="async"
                [alt]="highlight.text + ' ' + content().home.portraitAltSuffix"
              />
              @if (currentPortraitHighlightIndex() === 0) {
                <span class="portrait-click-hint">{{ content().home.clickHint }}</span>
              }
              <span class="portrait-caption">{{ highlight.text }}</span>
            </div>
          </button>
        </div>
      }
      <a
        class="hero-meta"
        [href]="global.linkedinSkillsUrl"
        [attr.aria-label]="content().home.skillsLinkAriaLabel"
        (mouseenter)="isBioTickerPaused.set(true)"
        (mouseleave)="isBioTickerPaused.set(false)"
      >
        <div>
          <span class="meta-label">{{ content().home.skillsLabel }}</span
          ><strong>{{ currentBioText() }}</strong>
        </div>
      </a>
    </div>
  </section>

  <section id="about" class="story-section panel about-scroll-anim-enabled">
    <div class="section-heading">
      <p class="eyebrow">{{ content().home.aboutEyebrow }}</p>
    </div>
    <div class="story-grid">
      <div class="story-copy">
        <p>{{ interpolate(content().home.aboutParagraphs[0]) }}</p>
        <p>{{ content().home.aboutParagraphs[1] }}</p>
        <p>{{ content().home.aboutParagraphs[2] }}</p>
      </div>
      <div class="story-detail">
        <button class="detail-toggle" type="button" (click)="toggleBio()">
          <span>{{ isLongBioShown() ? content().home.detailToggleClose : content().home.detailToggleOpen }}</span
          ><app-icon [icon]="isLongBioShown() ? arrowDownIcon : arrowRightIcon"></app-icon>
        </button>
        @if (isLongBioMounted()) {
          <div class="detail-panel" [class.detail-panel-enter]="isLongBioShown()" [class.detail-panel-leave]="!isLongBioShown()">
            <p>{{ content().home.detailParagraphs[0] }}</p>
            <p>{{ content().home.detailParagraphs[1] }}</p>
            <p>{{ content().home.detailParagraphs[2] }}</p>
            <button class="inline-link inline-link-button" type="button" (click)="scrollToContactLinks()">
              {{ content().home.getInTouch }}
            </button>
          </div>
        }
      </div>
    </div>
  </section>

  <section id="projects" class="projects-section">
    <div class="section-heading section-heading-centered">
      <p class="eyebrow">{{ content().home.projectsEyebrow }}</p>
    </div>
    <div class="project-list">
      @for (project of projects(); track project.link + '-' + $index; let i = $index) {
        <a
          class="panel project-entry"
          [class.project-entry-reverse]="i % 2 === 1"
          [class.project-entry-from-right]="i % 2 === 0"
          [class.project-entry-from-left]="i % 2 === 1"
          [href]="project.link"
          [attr.aria-label]="content().home.openProjectPrefix + ' ' + project.title"
          [attr.data-project-index]="i"
        >
          @if (project.icon) {
            <img
              class="project-icon"
              [class.project-icon-circle]="project.circleIcon !== false"
              [src]="project.icon"
              [attr.srcset]="project.iconSrcset ?? null"
              [attr.sizes]="project.iconSizes ?? null"
              [width]="project.iconWidth ?? 216"
              [height]="project.iconHeight ?? 216"
              loading="eager"
              fetchpriority="low"
              decoding="async"
              [alt]="project.title + ' ' + content().home.projectIconAltSuffix"
            />
          }
          <div class="project-copy">
            <div class="project-header">
              <div class="project-title-wrap">
                <span class="project-link"
                  >{{ project.titleHead
                  }}<span class="project-title-tail"
                    >{{ project.titleTail }}<app-icon class="project-arrow" [icon]="arrowRightIcon"></app-icon></span
                ></span>
              </div>
            </div>
            <p class="project-description">{{ project.description }}</p>
          </div>
        </a>
      }
    </div>
  </section>
</main>

<app-footer></app-footer>