{% extends "base" %}

{% block content %}
<div class="page-content">
  <div class="container">
<div class="resume-container">

<div class="shadow-1-strong bg-white my-5" id="intro">
  <div class="bg-info text-white">
    <div class="cover bg-image"><img src="{{ "images/header-background.jpg" | static(static_host = static_host) }}" />
      <div class="mask" style="background-color: rgba(0, 0, 0, 0.7);backdrop-filter: blur(2px);">
        <div class="text-center p-5">
          <div class="avatar p-1"><img class="img-thumbnail shadow-2-strong" src="{{ cv.person.email | gravatar_link }}" width="160" height="160"/></div>
          <div class="header-bio mt-3">
            <div data-aos="zoom-in" data-aos-delay="0">
              <h2 class="h1"> {{ cv.person.name }} {{ cv.person.surname }} </h2>
              <p>{{ "DevOPS engineer/backend web developer" | translate }}</p>
            </div>
            <div class="header-social mb-3 d-print-none" data-aos="zoom-in" data-aos-delay="200">
              <nav role="navigation">
                <ul class="nav justify-content-center">
                  {% block navlinks %}
                    {%  if cv.social.facebook  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.social.facebook }}" title="Facebook"><i class="fab fa-facebook"></i><span class="menu-title sr-only">Facebook</span></a>
                      </li>
                    {% endif %}
                    {%  if cv.social.github  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.social.github }}" title="github"><i class="fab fa-github"></i><span class="menu-title sr-only">Github</span></a>
                      </li>
                    {% endif %}
                    {%  if cv.social.linkedin  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.social.linkedin }}" title="github"><i class="fab fa-linkedin"></i><span class="menu-title sr-only">Linkedin</span></a>
                      </li>
                    {% endif %}
                    {%  if cv.social.instagram  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.social.instagram }}" title="github"><i class="fab fa-instagram"></i><span class="menu-title sr-only">Instagram</span></a>
                      </li>
                    {% endif %}      
                    {%  if cv.social.mastodon  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.social.mastodon }}" title="github"><i class="fab fa-mastodon"></i><span class="menu-title sr-only">Mastodon</span></a>
                      </li>
                    {% endif %}
                  {% endblock navlinks %}
                </ul>
              </nav>
            </div>
            <div class="d-print-none">
              <a class="btn btn-outline-light btn-lg shadow-sm mt-1 me-3" href="{{ download_cv_url }}" data-aos="fade-right" data-aos-delay="700">{{ "Download CV" | translate }}</a>
              <a class="btn btn-info btn-lg shadow-sm mt-1" href="#contact" data-aos="fade-left" data-aos-delay="700"> {{ "Hire me" | translate }} </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="about">
  <div class="about-section">
    <div class="row">
      <div class="col-md-6">
        <h2 class="h2 fw-light mb-4">{{ "About Me" | translate }} </h2>
        <p>{{ cv.person.about | lang_entity }}</p>
      </div>
      <div class="col-md-5 offset-lg-1">
        <div class="row mt-2">
          <h2 class="h2 fw-light mb-4">Bio</h2>
          <div class="col-sm-5">
            <div class="pb-2 fw-bolder"><i class="far fa-calendar-alt pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Age</div>
          </div>
          <div class="col-sm-7">
            <div class="pb-2">{{ cv.person.birthday | calculate_age }}</div>
          </div>
          <div class="col-sm-5">
            <div class="pb-2 fw-bolder"><i class="far fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Email</div>
          </div>
          <div class="col-sm-7">
            <div class="pb-2"> {{ cv.person.email }} </div>
          </div>
          <div class="col-sm-5">
            <div class="pb-2 fw-bolder"><i class="fas fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Phone</div>
          </div>
          <div class="col-sm-7">
            <div class="pb-2">+ {{cv.person.phone | insert_space_every(times=3) }}</div>
          </div>
          {% if cv.person.address %}
            <div class="col-sm-5">
              <div class="pb-2 fw-bolder"><i class="fas fa-map-marker-alt pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Address</div>
            </div>
            <div class="col-sm-7">
              <div class="pb-2">{{ cv.person.address }} </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="skills">
  <div class="skills-section">
    <h2 class="h2 fw-light mb-4">{{ "Professional Skills" | translate }}</h2>
    <div class="row">
      <div class="col-md-6">
        {% set arr_cnt = cv.skills | length %}
        {% set split_index = arr_cnt / 2 | round(method="ceil") %}
        {% for skill in cv.skills | slice(start = 0, end = split_index) %}
        {{ split_index}}
          <div class="mb-3"><span class="fw-bolder">{{ skill.name }}</span>
            <div class="progress my-2 rounded" style="height: 20px">
              <div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="100"
                data-aos-anchor=".skills-section" style="width: {% if skill.skill == "MASTER" %}100%{% endif %}{% if skill.skill == "EXPERT" %}75%{% endif %}{% if skill.skill == "INTERMEDIATE" %}50%{% endif %}{% if skill.skill == "BEGINER" %}25%{% endif %};"
                aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                {{ skill.skill}}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      <div class="col-md-6">
        {% for skill in cv.skills | slice(start = split_index) %}
        {{ split_index}}
        <div class="mb-3"><span class="fw-bolder">{{ skill.name }}</span>
          <div class="progress my-2 rounded" style="height: 20px">
            <div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="100"
              data-aos-anchor=".skills-section" style="width: {% if skill.skill == "MASTER" %}100%{% endif %}{% if skill.skill == "EXPERT" %}75%{% endif %}{% if skill.skill == "INTERMEDIATE" %}50%{% endif %}{% if skill.skill == "BEGINER" %}25%{% endif %};"
              aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
              {{ skill.skill}}
            </div>
          </div>
        </div>
      {% endfor %}
      </div>
    </div>
  </div>
</div>

<div class="shadow-1-strong bg-white my-5 p-5" id="experience">
  <div class="work-experience-section">
    <h2 class="h2 fw-light mb-4">{{ "Professional Skills" | translate }}</h2>
    <div class="timeline">
      {% for job in cv.jobs %}
        <div class="timeline-card timeline-card-info" data-aos="fade-in" data-aos-delay="{{ loop.index * 100 }}">
          <div class="timeline-head px-4 pt-3">
            <div class="h5">{{ job.title }} <span class="text-muted h6">at {{ job.company }}</span></div>
          </div>
          <div class="timeline-body px-4 pb-4">
            <div class="text-muted text-small mb-3">May, 2015 - Present</div>
            <div>{{ job.description | lang_entity }} </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="education">
<div class="education-section">
  <h2 class="h2 fw-light mb-4">{{ "Education " | translate }}</h2>
  <div class="timeline">
    {% for education in cv.education %}
    <div class="timeline-card timeline-card-success" data-aos="fade-in" data-aos-delay="0">
      <div class="timeline-head px-4 pt-3">
        {% if education.degree %}
          <div class="h5">{{ education.degree | lang_entity }} <span class="text-muted h6">{{ education.school }}</span>          </div>
        {% else %}
          <div class="h5">{{ education.school }}</div>
        {% endif %}
      </div>
      <div class="timeline-body px-4 pb-4">
        
        {% if education.description %}
          <div class="text-muted text-small mb-3">2011 - 2013</div>
          <div>{{ education.description | lang_entity }}</div>
        {% else %}
           2011 - 2013
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="contact">
  <div class="contant-section">
    <h2 class="h2 fw-light text mb-4">Contact</h2>
    <div class="row mb-4">
      <div class="col-md-5" data-aos="fade-left" data-aos-delay="200">
        <div class="d-print-none">
          <form action="https://formspree.io/your@email.com" method="POST">
            <div class="form-outline mb-4">
            <input type="text" id="name" class="form-control" required/>
            <label class="form-label" for="name">Name</label>
            </div>
            <div class="form-outline mb-4">
            <input type="email" id="email" class="form-control" required/>
            <label class="form-label" for="email">Email address</label>
            </div>
            <div class="form-outline mb-4">
            <textarea class="form-control" style="resize: none;" id="message" rows="4" required></textarea>
            <label class="form-label" for="message">Message</label>
            </div>
            <button class="btn btn-info btn-block mb-4" type="submit">Send</button>
            </form>
        </div>
      </div>

      <div class="col-md-7 d-print-none" data-aos="zoom-in" data-aos-delay="100">
        <div class="h6"><i class="fas fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i>{{ cv.person.phone | insert_space_every(times=3)  }}</div>
        <div class="h6"><i class="far fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i>{{ cv.person.email }}</div>
      </div>
    </div>
  </div>
  </div>
</div></div>
</div>
{% endblock content %}