{%- import "components/talent_card.html" as tc -%}
{%- import "components/social_card.html" as sc -%}
{% extends "base.html" %}

{% block title %}Introduction{% endblock %}

{% block content %}
<section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
  <section id="about-me">
    <header class="index-header hidden">
      <figure class="profile-pic">
        <picture>
          <img
            alt="Portrait"
            {# TODO generate `srcset` for optimal image #}
            {# TODO Take a new photo #}
            src="/images/profile-portugal-landscape.jpg"
          />
        </picture>
      </figure>

      <p class="motto">
        <cite>“Let your ambition carry you.”</cite>
        <span class="cite-owner">- La Flame</span>
      </p>
    </header>

    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>

    <p class="mx-5 md:text-xl text-justify">
      Welcome to my personal website. My name is
      <strong>Michal&nbsp;Vanko</strong>
      and I'm a
      <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
      . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>

    <section id="talent-cards">
      {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
      {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
      {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %}
    </section>
  </section>

  <section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2">
    <h2 class="text-blue-950 font-bold text-2xl md:text-4xl m-5"><a href="/blog" class="text-blue-950 no-underline">Blog</a></h2>
    <section id="blog-tags">
      <ul class="mx-5">
       {% for tag in blog_tags %}
        <li class="inline-block mx-0.5 p-0.5 md:text-xl">
          <a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
        </li>
        {% endfor %}
      </ul>
    </section>
    <hr class="border-blue-950 m-5">

    <ul class="mx-5">
     {% for post in featured_blog_posts %}
      <li>
        {% include "components/blog_post_preview.html" %}
        <hr class="border-blue-950 my-5 md:my-8">
      </li>
     {% endfor %}
    </ul>
  </section>

  <section id="socials">
    {% include "sections/social.html" %}
  </section>

  <hr class="border-blue-950 m-5 lg:hidden">

  <section id="showcase" class="col-span-2">
    {% include "sections/showcase.html" %}
  </section>
</section> <!-- /.index-container -->


{% endblock %}