{% import "website/macros/chip.html" as chip %} {% extends "website/base.html"
%} {% block content %}
<div class="w-full">
  <div class="relative inline-block w-full min-w-full">
    <img
      src="/static/images/optimized.jpg"
      alt="Background"
      class="object-cover w-full max-h-full pointer-events-none"
    />
    <div
      class="absolute inset-0 flex flex-col items-center justify-center w-full gap-4 md:items-start md:justify-start md:p-16 lg:p-20"
    >
      <div>
        <h1
          class="mb-4 text-2xl font-bold tracking-tight text-white md:text-4xl lg:text-6xl md:mb-0"
        >
          Gabriel Kaszewski
        </h1>
        <h2
          class="mt-8 text-lg font-light tracking-tight text-white md:text-xl lg:text-2xl md:mt-0"
        >
          Full-Stack Developer
        </h2>
      </div>
      <div class="items-center hidden gap-2 md:flex">
        <a href="/api/data/cv.pdf" title="My CV">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M14 2v4a2 2 0 0 0 2 2h4" />
            <path d="M15 18a3 3 0 1 0-6 0" />
            <path
              d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"
            />
            <circle cx="12" cy="13" r="2" />
          </svg>
        </a>
        <a href="https://github.com/GKaszewski" title="GitHub">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path
              d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
            />
            <path d="M9 18c-4.51 2-5-2-7-2" />
          </svg>
        </a>
        <a href="mailto: gabrielkaszewski@gmail.com" title="My email">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="12" cy="12" r="4" />
            <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" />
          </svg>
        </a>
        <a
          href="https://www.linkedin.com/in/gabriel-kaszewski-5344b3183"
          title="LinkedIn"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path
              d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
            />
            <rect width="4" height="12" x="2" y="9" />
            <circle cx="4" cy="4" r="2" />
          </svg>
        </a>
      </div>
    </div>
    <div class="absolute bottom-0 p-2 text-sm">
      <span class="flex gap-1">
        Photo by
        <a
          class="underline"
          href="https://unsplash.com/@federize?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
        >
          Federico Beccari
        </a>
        on
        <a
          class="underline"
          href="https://unsplash.com/photos/red-moon-eGJg5iRGlg8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
        >
          Unsplash
        </a>
      </span>
    </div>
  </div>
</div>
<div class="w-full mt-8"></div>
<div
  id="who-am-i"
  class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit"
>
  <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Who am I? 🤔</h3>
  <section class="prose text-white md:prose-lg lg:prose-xl">
    <p>
      Hi, my name is Gabriel Kaszewski, and I am a Bioinformatics student 🧬 and
      self-taught full-stack developer 💻.
    </p>
    <p>
      My journey with programming started when I was 11 🚀. I love solving problems and creating software that
      resolves them 👨‍💻.
    </p>
    <p>
      Currently, I am working as a Python Developer at digimonkeys.com 🐒. In my free time I like to read about
      new technologies and work on my projects 📚.
    </p>
  </section>
</div>
<div id="skills" class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit">
  <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Skills 🛠️</h3>
  {% for skill in skills %} {{ chip::chip(text=skill.name) }} {%endfor%}
</div>
<div id="experience" class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit">
  <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Experience 📈</h3>
  {% for job in jobs %}
  <div class="flex flex-col gap-2 p-4 text-black bg-gray-50 rounded-lg max-w-[20rem] shadow-lg">
    <h4 class="text-2xl">
      <span class="fas fa-user-circle"></span> {{ job.position }}
    </h4>
    <h5 class="text-xl font-light">
      <span class="fas fa-building"></span> {{ job.company }}
    </h5>
    {% if job.still_working %}
    <h6>
      <span class="fas fa-clock"></span> {{ job.start_date |
      date(format="%d-%m-%Y") }} - Present
    </h6>
    {% else %}
    <h6>
      <span class="fas fa-clock"></span> {{ job.start_date |
      date(format="%d-%m-%Y") }} - {{ job.end_date | date(format="%d-%m-%Y") }}
    </h6>
    {% endif %}
    <p class="font-bold"><span class="fas fa-microchip"></span> Technologies</p>
    <div class="flex flex-wrap items-center w-full gap-2">
      {% for technology in job.technologies %} {{ chip::chip(text=technology)
      }} {% endfor %}
    </div>
  </div>
  {%endfor%}
</div>
<section class="flex flex-col flex-wrap justify-center gap-4 m-4"></section>
{% endblock content %}