{% extends "base.html" %}

{% block content %}
<div class="flex flex-col mx-auto">
  <p class="text-white prose py-8 self-center">
    Hello! My online pseudonym is <i>PapaTutuWawa</i> and I am
    just some random person on the Internet who is passionate about
    topics like XMPP, federated Internet services and privacy. Linux system
    administration, Linux tinkering and programming are my favourite things to do.
  </p>

  <h1 class="prose text-2xl text-indigo-400 self-start">Projects</h1>
  <p class="prose text-white text-left self-start">This is a small selection of my projects. More are available <a
      class="text-indigo-400" href="code.html">here.</a></p>

{% for project in config.extra.projects %}
<div class="flex flex-row self-start pt-8">
    {% if project.screenshot != "" %}
    <div>
        <a href="https://{{ project.website }}" target="_blank">
          <img
            class="w-24 md:w-48 max-w-none rounded-lg clickable"
            src="{{ project.screenshot }}"
            alt="Screenshot of {{ project.title }}"
            integrity="sha386-{{ get_hash(path=project.screenshot, sha_type=384, base64=true) | safe }}" />
        </a>
    </div>
    {% else %}
    <div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
        <a class="prose text-white text-5xl" href="https://{{ project.website }}">
          <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
            <span class="text-center">#</span>
          </div>
        </a>
      </div>
    {% endif %}
    <div class="flex flex-col pl-8">
      <h2 class="prose text-indigo-400 text-2xl">{{ project.title }}</h2>
      <p class="prose text-white text-justify">{{ project.description }}</p>
  
      <div class="pt-4">
        <ul>
            {% if project.website != "" %}
            <li>
                <a class="text-indigo-400" href="https://{{ project.website }}">Website</a>
            </li>
            {% endif %}

            <li><a class="prose text-indigo-400" href="https://{{ project.source_url }}">Code</a></li>
        </ul>
      </div>
    </div>
  </div>
{% endfor %}

</div>
{% endblock content %}