{% include header.html %}

<div class="splash first">
  <div class="hero">
    <h2>{{ locale.hero-sub }}</h2>
    <h1>{{ locale.hero }}</h1>
    <h1>{{ locale.hero2 }}</h1>
    <a href="mailto:gilles.leblanc@gmail.com" class="contact-button">{{ locale.contact-me }}</a>
  </div>
</div>

<div class="info">
  <div class="action-box left">
    <h3><i class="fa fa-question fa-3x"></i> {{ locale.action1 }}</h3>
    {{ locale.actiontext1 }}
  </div>
  <div class="action-box right">
    <h3><i class="fa fa-road fa-3x"></i> {{ locale.action2 }}</h3>
    {{ locale.actiontext2 }}
  </div>
  <div class="action-box left last">
    <h3><i class="fa fa-desktop fa-3x"></i> {{ locale.action3 }}</h3>
    {{ locale.actiontext3 }}
  </div>
</div>

<div class="clearfix"></div>

<div class="skill-bar">
  
</div>

<div class="me-box">
  <div class="portrait-box">
    <img class="portrait" src="./img/me.jpeg" height="200" width="200">
  </div>
  <div class="bio-box">
    <h1>Gilles Leblanc</h1>
    <p>
      {{ locale.about-me }}
    </p>
    <p>
      <a class="social" href={{ locale.linkedin-profile }}><i class="fa fa-linkedin-square fa-2x"></i></a>
      <a class="social" href="https://gillesleblanc.wordpress.com/"><i class="fa fa-wordpress fa-2x"></i></a>
      <a class="social" href="https://github.com/gilles-leblanc"><i class="fa fa-github fa-2x"></i></a>
      <a class="social" href="https://stackoverflow.com/users/153797/gilles?tab=profile"><i class="fa fa-stack-overflow fa-2x"></i></a>
    </p>
    <a href="mailto:gilles.leblanc@gmail.com" class="contact-button contact-button-bio">{{ locale.contact-me-2 }}</a>
  </div>
</div>

{% include footer.html %}