{% extends "layout.twig" %}

{% block title %}molenda.net{% endblock %}

{% block content %}
    <section id="hero" class="hero section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4 align-items-center">
          <div class="col-lg-6 order-2 order-lg-1">
            <div class="hero-content">
              <h1 data-aos="fade-up" data-aos-delay="200">Hello, I'm <span class="highlight">Sebastian Molenda</span></h1>
              <h2 data-aos="fade-up" data-aos-delay="300">Experienced <span class="typed" data-typed-items="PHP Developer, Python Developer"></span></h2>
              <p data-aos="fade-up" data-aos-delay="400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <div class="hero-actions" data-aos="fade-up" data-aos-delay="500">
                <a href="portfolio.html" class="btn btn-primary">Check out my experience</a>
              </div>
            </div>
          </div>
          <div class="col-lg-6 order-1 order-lg-2">
            <div class="hero-image" data-aos="zoom-in" data-aos-delay="300">
              <div class="image-wrapper">
                <img src="assets/img/profile/profile.jpg" alt="Sebastian Molenda" class="img-fluid">
                <div class="floating-elements">
                  <div class="floating-card design" data-aos="fade-left" data-aos-delay="700">
                    <i class="bi bi-file-earmark"></i>
                    <span>Documentation</span>
                  </div>
                  <div class="floating-card code" data-aos="fade-right" data-aos-delay="800">
                    <i class="bi bi-code-slash"></i>
                    <span>Coder</span>
                  </div>
                  <div class="floating-card creativity" data-aos="fade-up" data-aos-delay="900">
                    <i class="bi bi-back"></i>
                    <span>Backend</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /Hero Section -->

{% endblock %}
