<section id="hero">
  <canvas id="matrix-canvas" aria-hidden="true"></canvas>

  <div class="container">
    <div class="hero-inner">

      <div class="hero-prompt">{{ i18n "hero_prompt" }}</div>
      <h1 class="hero-name" data-text="{{ .Site.Params.name }}">{{ .Site.Params.name }}</h1>

      <div class="hero-bottom">
        <div class="hero-content">
          <div class="hero-role">
            <span id="typed"></span><span class="cursor"></span>
          </div>

          <div class="hero-tagline">{{ .Params.tagline | markdownify }}</div>

          <div class="hero-cta">
            <a href="#contact" class="btn btn-primary">{{ i18n "btn_contact" }}</a>
            <a href="#about" class="btn btn-outline">{{ i18n "btn_more" }}</a>
            {{ with .Site.Language.Params.cv }}
            <a class="btn btn-cv" data-cv="{{ . | base64Encode }}" role="button" tabindex="0">
              <i class="fa-solid fa-file-arrow-down"></i>
              {{ i18n "btn_cv" }}
            </a>
            {{ end }}
          </div>
        </div>

        <div class="hero-term" aria-hidden="true">
          <div class="hero-term-bar">
            <span class="hero-term-dot" style="background:#ff5f57"></span>
            <span class="hero-term-dot" style="background:#febc2e"></span>
            <span class="hero-term-dot" style="background:#28c840"></span>
            <span class="hero-term-title">root@{{ .Site.Params.handle }}</span>
          </div>
          <div class="hero-term-body">
            <div class="tl"><span class="tc-dim">$</span> connect <span class="tc-val">{{ .Site.Params.handle }}</span></div>
            <div class="tl tl-d1"><span class="tc-dim">></span> establishing secure channel<span class="tc-blink">_</span></div>
            <div class="tl tl-d2"><span class="tc-ok">✔</span> connected <span class="tc-dim">[TLS 1.3]</span></div>
            <div class="tl tl-d3 tc-dim">──────────────────────────</div>
            <div class="tl tl-d4"><span class="tc-key">USER    </span><span class="tc-val">{{ .Site.Params.name }}</span></div>
            <div class="tl tl-d5"><span class="tc-key">CERT    </span><span class="tc-val">{{ .Site.Params.cert }}</span></div>
            <div class="tl tl-d6"><span class="tc-key">FOCUS   </span><span class="tc-val">{{ .Site.Params.focus }}</span></div>
            <div class="tl tl-d7"><span class="tc-key">STATUS  </span><span class="tc-ok">{{ i18n "terminal_status" }}</span></div>
            <div class="tl tl-d8 tc-dim">──────────────────────────</div>
            <div class="tl tl-d9"><span class="tc-dim">$</span> <span class="tc-blink">█</span></div>
          </div>
        </div>

      </div>{{/* end hero-bottom */}}

    </div>{{/* end hero-inner */}}
  </div>

  <div class="scroll-indicator">
    {{ i18n "scroll" }}
    <div class="scroll-line"></div>
  </div>
</section>
