{% include header.html %}

{% assign user = site.github.owner %}

<div class="d-md-flex">
  <div class="flex-self-stretch border-bottom border-md-none border-md-right border-gray-light col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
    <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
    <h1 class="mb-2 lh-condensed">{{ user.name }}</h1>
    <p class="mb-3 f4 text-gray">
      {{ user.bio }}
    </p>
    <div class="f4 mb-6">
      <div class="mb-3">
        {% octicon mark-github height:20 class:"mr-1 v-align-middle" aria-label:GitHub %}
        <a href="https://github.com/{{ user.login }}">
          @{{ user.login }}
        </a>
      </div>
      <div class="">
        {% octicon location height:20 class:"mr-1 v-align-middle" aria-label:Location %}
        {{ user.location }}
      </div>
    </div>
  </div>

  <div class="bg-gray-light col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7">
    <div class="mx-auto" style="max-width: 900px;">
      {% include projects.html %}

      <h2>My Interests</h2>
      <p class="f4 mb-4 text-gray">Topics that I want to learn more about</p>
      <div class="d-flex flex-wrap gutter-condensed mb-4">
        {% for topic in site.topics limit: 4 %}
          <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
            {% include topic-card.html %}
          </div>
        {% endfor %}
      </div>

      <h2>My Organizations</h2>
      <p class="f4 mb-4 text-gray">Teams I belong to</p>
      <div class="d-flex flex-wrap gutter-condensed mb-4">
        <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
          {% include org-card.html %}
        </div>
        <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
          {% include org-card.html %}
        </div>
        <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
          {% include org-card.html %}
        </div>
      </div>

    </div>
  </div>
</div>

{% include footer.html %}