218 lines
10 KiB
Plaintext
218 lines
10 KiB
Plaintext
{% 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 %} |