<section id="about">
  <div class="container">
    <div class="section-eyebrow reveal">{{ i18n "section_about" }}</div>
    <h2 class="section-title reveal">{{ i18n "about_title" }}</h2>

    <div class="about-grid">
      <div class="about-bio reveal">
        {{ with .Params.about_photo }}
        <img class="about-photo" src="{{ . }}" alt="{{ $.Site.Params.name }}" loading="lazy">
        {{ end }}
        <div>{{ .Params.bio | markdownify }}</div>
      </div>

      <div class="terminal reveal">
        <div class="terminal-bar">
          <div class="dot dot-r"></div>
          <div class="dot dot-y"></div>
          <div class="dot dot-g"></div>
          <span class="t-file">profile.json</span>
        </div>
        <div class="terminal-body">
          <div class="tl"><span class="t-ps">~</span><span class="t-cm">cat profile.json</span></div>
          <div style="margin-top:.5rem">
            <div class="tl"><span class="t-out">{</span></div>
            <div class="tl"><span class="t-out">&nbsp;&nbsp;<span class="t-k">"name":</span>&nbsp;<span class="t-v">"{{ .Site.Params.name }}",</span></span></div>
            <div class="tl"><span class="t-out">&nbsp;&nbsp;<span class="t-k">"role":</span>&nbsp;<span class="t-v">"{{ i18n "terminal_role" }}",</span></span></div>
            <div class="tl"><span class="t-out">&nbsp;&nbsp;<span class="t-k">"cert":</span>&nbsp;<span class="t-v">"{{ .Site.Params.cert }}",</span></span></div>
            <div class="tl"><span class="t-out">&nbsp;&nbsp;<span class="t-k">"focus":</span>&nbsp;<span class="t-v">"{{ .Site.Params.focus }}",</span></span></div>
            <div class="tl"><span class="t-out">&nbsp;&nbsp;<span class="t-k">"location":</span>&nbsp;<span class="t-v">"{{ .Site.Params.location }}",</span></span></div>
            <div class="tl"><span class="t-out">&nbsp;&nbsp;<span class="t-k">"status":</span>&nbsp;<span class="t-s">"{{ i18n "terminal_status" }}"</span></span></div>
            <div class="tl"><span class="t-out">}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
