---
---
<div class="hero block">
  <div class="hero-body is-clearfix">
    <div class="columns is-vcentered">
      <div class="column content">
        <h1 class="subtitle is-2 has-text-weight-normal">Welcome!</h1>

        <p class="block has-text-justified">
          Hello, welcome to my homepage! Here, you will find some articles (mostly tech),
          some info about myself and whatever else I am thinking of.
        </p>
      </div>
      <div class="column is-narrow is-hidden-mobile">
        <figure class="image is-pulled-right" style="height:200px;width:200px">
          <img class="is-rounded" alt="Me" src="/assets/images/me.jpg">
        </figure>
      </div>
    </div>
  </div>
</div>

<div class="tile is-ancestor is-vertical">
  <div class="tile">
    <div class="tile is-parent">
      <a href="/blog/" class="tile is-child box is-clearfix">
        <div class="columns is-vcentered is-mobile">
          <div class="column">
            <p class="subtitle is-4">Blog</p>
          </div>
          <div class="column is-narrow">
            <figure class="mr-2 my-2 ml-0 image is-48x48 is-pulled-right">
              <span class="icon is-large">
                <i class="fas fa-3x fa-pen-fancy"></i>
              </span>
            </figure>
          </div>
        </div>
      </a>
    </div>
    <div class="tile is-parent">
      <a href="/about/" class="tile is-child box is-clearfix">
        <div class="columns is-vcentered is-mobile">
          <div class="column">
            <p class="subtitle is-4">About Me</p>
          </div>
          <div class="column is-narrow">
            <figure class="mr-2 my-2 ml-0 image is-48x48 is-pulled-right">
              <span class="icon is-large">
                <i class="fa fa-3x fa-users"></i>
              </span>
            </figure>
          </div>
        </div>
      </a>
    </div>
  </div>

  <div class="tile">
    <div class="tile is-parent">
      <a href="/work/" class="tile is-child box is-clearfix">
        <div class="columns is-vcentered is-mobile">
          <div class="column">
            <p class="subtitle is-4">Work</p>
          </div>
          <div class="column is-narrow">
            <figure class="mr-2 my-2 ml-0 image is-48x48 is-pulled-right">
              <span class="icon is-large">
                <i class="fas fa-3x fa-briefcase"></i>
              </span>
            </figure>
          </div>
        </div>
      </a>
    </div>
    <div class="tile is-parent">
      <a href="/skills/" class="tile is-child box is-clearfix">
        <div class="columns is-vcentered is-mobile">
          <div class="column">
            <p class="subtitle is-4">Skills</p>
          </div>
          <div class="column is-narrow">
            <figure class="mr-2 my-2 ml-0 image is-48x48 is-pulled-right">
              <span class="icon is-large">
                <i class="fas fa-3x fa-university"></i>
              </span>
            </figure>
          </div>
        </div>
      </a>
    </div>
    <div class="tile is-parent">
      <a href="/projects/" class="tile is-child box is-clearfix">
        <div class="columns is-vcentered is-mobile">
          <div class="column">
            <p class="subtitle is-4">Projects</p>
          </div>
          <div class="column is-narrow">
            <figure class="mr-2 my-2 ml-0 image is-48x48 is-pulled-right">
              <span class="icon is-large">
                <i class="fas fa-3x fa-keyboard"></i>
              </span>
            </figure>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div class="tile">
    <div class="tile is-parent">
      <a href="/about/" class="tile is-child box is-clearfix">
        <div class="columns is-vcentered is-mobile">
          <div class="column">
            <p class="subtitle is-4">Contact</p>
          </div>
          <div class="column is-narrow">
            <figure class="mr-2 my-2 ml-0 image is-48x48 is-pulled-right">
              <span class="icon is-large">
                <i class="fas fa-3x fa-phone"></i>
              </span>
            </figure>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>