<section class="hero" role="region" aria-label="Hero">
  <canvas id="matrix-canvas" data-mode="hero" aria-hidden="true"></canvas>
  <div class="hero-container">
    <div class="hero-left">
      <div class="hero-prompt">welcome to</div>
      <h1 class="hero-name" data-text="{{ .Site.Params.author }}">{{ .Site.Params.author }}</h1>
      <div class="hero-role" id="typed" data-phrases='{{ .Site.Params.typingPhrases | jsonify }}'></div>
      <p class="hero-tagline">{{ .Site.Params.description }}</p>
      <div class="hero-buttons">
        <a href="/articles/" class="btn btn-primary">Read Articles</a>
        <a href="/is/" class="btn btn-outline">About Me</a>
      </div>
    </div>
    <div class="hero-right">
      <div class="hero-terminal">
        <div class="terminal-bar">
          <span class="terminal-dot" style="background: #ff5f57;"></span>
          <span class="terminal-dot" style="background: #febc2e;"></span>
          <span class="terminal-dot" style="background: #28c840;"></span>
          <span class="terminal-title">root@danix.xyz</span>
        </div>
        <div class="terminal-content">
          <div class="tl tl-d1"><span class="tc-dim">$ </span><span class="tc-ok">whoami</span></div>
          <div class="tl tl-d2">danilo</div>
          <div class="tl tl-d3"><span class="tc-dim">$ </span><span class="tc-ok">cat roles.txt</span></div>
          <div class="tl tl-d4"><span class="tc-key">Security</span> &amp; Web Dev</div>
          <div class="tl tl-d5"><span class="tc-key">WordPress</span> Developer</div>
          <div class="tl tl-d6"><span class="tc-key">Bash</span> Enthusiast</div>
          <div class="tl tl-d7"><span class="tc-dim">$ </span><span class="tc-ok">uptime</span></div>
          <div class="tl tl-d8">up 4 years, still learning</div>
          <div class="tl tl-d9"><span class="tc-dim">$ </span><span class="tc-ok">_</span></div>
        </div>
      </div>
    </div>
  </div><!-- /.hero-container -->

  <div class="scroll-indicator" aria-hidden="true">
    <span>scroll</span>
    <div class="scroll-line"></div>
  </div>
</section>
