{% extends "base.html" %}
{% load static %}

{% block extra_css %}
{% endblock %}

{% block body_class %}{% endblock %}

{% block content %}


{% include "header.html" %}

<main class="bg-black 2xl:px-1 px-0 space-y-1 relative top-[68px] pb-1 container mx-auto max-w-screen-2xl">
  <div id="TobiasGerwin" class="grid sm:grid-cols-[7fr_5fr_3fr] gap-1 bg-black">
    <img class="max-h-[calc(100vh-75px)] w-full object-cover object-cover object-[50%40%]" src="{% static 'home/img/Bearbeitet_sw_SA-Aquaris_20190301_125640.jpg' %}" alt="">
    <div class="flex flex-col bg-white w-full p-6 pb-12 relative">
      <div class="grow text-center grid grid-cols-1 gap-4 place-content-center">
          <p class="font-bold">
            Ich bin Tobias Gerwin
          </p>
          <p class="text-slate-600">- bauaffiner Nerd -</p>
          <p class="text-base text-slate-600">
            In den zwei Welten Web-Programmierung und Projektsteuerung arbeite ich an langfristigen und nachhaltigen Lösungen.<br>
            Am liebsten im Team,<br>manchmal autark.
          </p>
  
        </div>
        <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-slate-800">./01_ÜBER MICH</div>
    </div>
    <div class="relative">
      <img class="h-full w-full object-cover object-[50%50%]" src="{% static 'home/img/IMG20220525165918.jpg' %}" alt="">
      <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-white bg-petrol-500/40">./02_ZIELKONFLIKT? ->&nbsp;<span class="sm:hidden">./03_</span>LÖSUNGSWEG!</div>
    </div>
  </div>

  <div id="projekte" class="grid sm:grid-cols-[3fr_5fr_3fr] gap-1 bg-black">
    <div class="relative sm:block hidden">
      <img class="h-full w-full object-cover aspect-[3/5]"  src="{% static 'home/img/lampe.jpg' %}" alt="">
      <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-white bg-petrol-500/40">./03_SINNBILD</div>
    </div>
    {% include "galerie-experience.html" %}
    {% include "stack.html" %}
  </div>

  <div id="ueberMich" class="grid sm:grid-cols-[3fr_3fr_2fr] gap-1 bg-black">
    {% include "education.html" %}
    <div class="max-h-[750px] relative">
      <img class="h-full w-full object-cover object-[50%20%]" src="{% static 'home/img/_B9A3582.jpg' %}" alt="">
      <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-white bg-petrol-500/40">./07_FOKUS</div>
    </div>
    {% include "list-skills.html" %}
  </div>

  <div class="grid sm:grid-cols-3 gap-1 bg-black">
    {%include "mastodon.html" %}

    <div class="relative">
      <img class="h-full object-cover" src="{% static 'home/img/IMG_8425.jpg' %}" alt="">
      <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-white bg-petrol-500/40">./10_LEIDENSCHAFT</div>
    </div>
  {% include "kontakt.html" %}
  </div>
  <!-- <div class="underline"></div> -->
</main>

{% endblock %}
