ovlach_pdf/templates/two_column.html.tera
2023-12-02 00:52:53 +01:00

340 lines
15 KiB
Plaintext

<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&family=Roboto&display=swap" rel="stylesheet">
<style>
h1 {
/*font-weight: 800;*/
font-size: 3em;
padding: 0;
margin: 0;
margin-left: -0.1em;
/* text upper */
text-transform: uppercase;
}
h2 {
font-size: 1.1em;
padding: 0;
margin: 0;
}
body { min-height: 100vh; }
body {
padding-left: 0.5em;
margin: 0;
font-family: 'Roboto' ;
min-height: 100%;
}
.about-me-small, .company {
color: #39c0ed;
}
.part-content > * {
padding-bottom: 0.2em;
}
.part {
padding-top: 1em;
font-size: 10pt;
}
.flex-container {
min-height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: normal;
align-content: normal;
width: 100%;
}
.flex-items:nth-child(1) {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}
.flex-items:nth-child(2) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
width: 30%;
background-color: gray;
}
.section-header {
border-bottom: 1px solid gray;
width: 99%;
margin-bottom: 1em;
}
.flex-container-experience {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: normal;
align-items: normal;
align-content: normal;
}
.flex-items-experience:nth-child(1) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
width: 70%;
order: 0;
}
.flex-items-experience:nth-child(2) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
text-align: right;
align-self: auto;
width: 30%;
margin-right: 1%;
order: 0;
}
.flex-container-skills {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: normal;
align-items: normal;
align-content: normal;
width: 99%;
}
.section-header .flex-container-skills {
width: 100%;
}
.header {
padding-top: 1em;
}
.flex-items-skills:nth-child(1) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
width: 50%;
order: 0;
}
.flex-items-skills:nth-child(2) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
text-align: left;
align-self: auto;
width: 50%;
order: 0;
}
.tech-name {
font-weight: 800;
}
.tech-level {
}
.job p {
margin: 0;
padding: 0;
}
.job:nth-child(n+3) {
padding-top: 10px;
margin: 0;
}
.contact-bar {
font-size: 11pt;
padding-left: 1em;
color: black;
}
.contact-bar i::after{
content: "\a";
white-space: pre;
}
.photo {
padding-bottom: 1em;
}
.contact-bar:first-child {
padding-top: 2em;
}
.email{
}
.icon {
height: 1em;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-items">
<div class="header">
<h1>Ondřej Vlach</h1>
<div class="about-me-small">{{ "devops-enginner-web-developer" | translate(lang=lang) }}</div>
</div>
<div class="part">
<div class="section-header">
<div class="flex-container-skills">
<div class="flex-items-skills">
<h2>{{ "skills-languages" | translate(lang=lang) }}</h2>
</div>
<div class="flex-items-skills">
<h2>{{ "skills-technology" | translate(lang=lang) }}</h2>
</div>
</div>
</div>
<div class="flex-container-skills">
<div class="flex-items-skills">
{% for skill in cv.skills %}
{% if skill.techtype == "LANGUAGE" %}
<div>
<span class="tech-name">{{ skill.name }}</span><span class="tech-level"> ({{ skill.skill | lower}})</span>
</div>
{% endif %}
{% endfor %}
</div>
<div class="flex-items-skills">
{% for skill in cv.skills %}
{% if skill.techtype == "TECHNOLOGY" %}
<div>
<span class="tech-name">{{ skill.name }}</span><span class="tech-level"> ({{ skill.skill | lower}})</span>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="part">
<div class="section-header">
<h2>{{ "work-experience" | translate(lang=lang) }}</h2>
</div>
{% for job in cv.jobs %}
<div class="job part-content">
<div class="flex-container-experience">
<div class="flex-items-experience">
<div class="title">{{ job.title }}</div>
<div class="languages">{{ job.languages }}</div>
<p>
{{ job.description | lang_entity(lang=lang) }}
</p>
</div>
<div class="flex-items-experience">
<div class="company">@{{ job.company }}</div>
<div class="dates">
{% if job.from | format_date(type="job") != job.from | format_date(type="job") %}
<div class="text-muted text-small mb-3">{{ job.from | format_date(type="job") }} - {{ job.to | format_date(type="job") }}</div>
{% else %}
<div class="text-muted text-small mb-3">{{ job.from | format_date(type="job") }}</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="part">
<div class="section-header">
<h2>{{ "education" | translate(lang=lang) }}</h2>
</div>
<div class="job part-content">
{% for education in cv.education %}
<div class="flex-container-experience">
<div class="flex-items-experience">
{% if education.degree %}
<div class="title">{{ education.degree | lang_entity(lang=lang) }}</div>
{% else %}
<div class="title">{{ education.school }}</div>
{% endif %}
{% if education.description %}
<p>
{{ education.description | lang_entity(lang=lang) }}
</p>
{% endif %}
</div>
<div class="flex-items-experience">
{% if education.degree %}
<div class="company">@{{ education.school }}</div>
{% endif %}
<div class="dates">{{ education.from | format_date(type="job") }} - {{ education.to | format_date(type="job") }}</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="flex-items">
<div class="contact-bar">
<div class="photo">
<img class="img-thumbnail shadow-2-strong" src="{{ cv.person.email | gravatar_link }}" width="160" height="160"/>
</div>
{% if cv.person.social.facebook %}
<i class="fa-facebook"> {{ cv.person.social.facebook | strip_proto }}</i>
{% endif %}
{% if cv.person.social.github %}
<i class="fa-github">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjYgMC0xMiA1LjM3My0xMiAxMiAwIDUuMzAyIDMuNDM4IDkuOCA4LjIwNyAxMS4zODcuNTk5LjExMS43OTMtLjI2MS43OTMtLjU3N3YtMi4yMzRjLTMuMzM4LjcyNi00LjAzMy0xLjQxNi00LjAzMy0xLjQxNi0uNTQ2LTEuMzg3LTEuMzMzLTEuNzU2LTEuMzMzLTEuNzU2LTEuMDg5LS43NDUuMDgzLS43MjkuMDgzLS43MjkgMS4yMDUuMDg0IDEuODM5IDEuMjM3IDEuODM5IDEuMjM3IDEuMDcgMS44MzQgMi44MDcgMS4zMDQgMy40OTIuOTk3LjEwNy0uNzc1LjQxOC0xLjMwNS43NjItMS42MDQtMi42NjUtLjMwNS01LjQ2Ny0xLjMzNC01LjQ2Ny01LjkzMSAwLTEuMzExLjQ2OS0yLjM4MSAxLjIzNi0zLjIyMS0uMTI0LS4zMDMtLjUzNS0xLjUyNC4xMTctMy4xNzYgMCAwIDEuMDA4LS4zMjIgMy4zMDEgMS4yMy45NTctLjI2NiAxLjk4My0uMzk5IDMuMDAzLS40MDQgMS4wMi4wMDUgMi4wNDcuMTM4IDMuMDA2LjQwNCAyLjI5MS0xLjU1MiAzLjI5Ny0xLjIzIDMuMjk3LTEuMjMuNjUzIDEuNjUzLjI0MiAyLjg3NC4xMTggMy4xNzYuNzcuODQgMS4yMzUgMS45MTEgMS4yMzUgMy4yMjEgMCA0LjYwOS0yLjgwNyA1LjYyNC01LjQ3OSA1LjkyMS40My4zNzIuODIzIDEuMTAyLjgyMyAyLjIyMnYzLjI5M2MwIC4zMTkuMTkyLjY5NC44MDEuNTc2IDQuNzY1LTEuNTg5IDguMTk5LTYuMDg2IDguMTk5LTExLjM4NiAwLTYuNjI3LTUuMzczLTEyLTEyLTEyeiIvPjwvc3ZnPg==" class="icon">
{{ cv.person.social.github | strip_proto }}
</i>
{% endif %}
{% if cv.person.social.linkedin %}
<i class="fa-linkedin"> {{ cv.person.social.linikedin | strip_proto }}</i>
{% endif %}
{% if cv.person.social.instagram %}
<i class="fa-instagram"> {{ cv.person.social.instagram | strip_proto }}</i>
{% endif %}
{% if cv.person.social.mastodon %}
<i class="fa-mastodon">
<img alt="Mastodon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0yMS4zMjcgOC41NjZjMC00LjMzOS0yLjg0My01LjYxLTIuODQzLTUuNjEtMS40MzMtLjY1OC0zLjg5NC0uOTM1LTYuNDUxLS45NTZoLS4wNjNjLTIuNTU3LjAyMS01LjAxNi4yOTgtNi40NS45NTYgMCAwLTIuODQzIDEuMjcyLTIuODQzIDUuNjEgMCAuOTkzLS4wMTkgMi4xODEuMDEyIDMuNDQxLjEwMyA0LjI0My43NzggOC40MjUgNC43MDEgOS40NjMgMS44MDkuNDc5IDMuMzYyLjU3OSA0LjYxMi41MSAyLjI2OC0uMTI2IDMuNTQxLS44MDkgMy41NDEtLjgwOWwtLjA3NS0xLjY0NnMtMS42MjEuNTExLTMuNDQxLjQ0OWMtMS44MDQtLjA2Mi0zLjcwNy0uMTk0LTMuOTk5LTIuNDA5YTQuNTIzIDQuNTIzIDAgMCAxLS4wNC0uNjIxczEuNzcuNDMzIDQuMDE0LjUzNmMxLjM3Mi4wNjMgMi42NTgtLjA4IDMuOTY1LS4yMzYgMi41MDYtLjI5OSA0LjY4OC0xLjg0MyA0Ljk2Mi0zLjI1NC40MzQtMi4yMjMuMzk4LTUuNDI0LjM5OC01LjQyNHptLTMuMzUzIDUuNTloLTIuMDgxVjkuMDU3YzAtMS4wNzUtLjQ1Mi0xLjYyLTEuMzU3LTEuNjItMSAwLTEuNTAxLjY0Ny0xLjUwMSAxLjkyN3YyLjc5MWgtMi4wNjlWOS4zNjRjMC0xLjI4LS41MDEtMS45MjctMS41MDItMS45MjctLjkwNSAwLTEuMzU3LjU0Ni0xLjM1NyAxLjYydjUuMDk5SDYuMDI2VjguOTAzYzAtMS4wNzQuMjczLTEuOTI3LjgyMy0yLjU1OC41NjYtLjYzMSAxLjMwNy0uOTU1IDIuMjI4LS45NTUgMS4wNjUgMCAxLjg3Mi40MDkgMi40MDUgMS4yMjhsLjUxOC44NjkuNTE5LS44NjljLjUzMy0uODE5IDEuMzQtMS4yMjggMi40MDUtMS4yMjguOTIgMCAxLjY2Mi4zMjQgMi4yMjguOTU1LjU0OS42MzEuODIyIDEuNDg0LjgyMiAyLjU1OHY1LjI1M3oiLz48L3N2Zz4=" class="icon" />
{{ cv.person.social.mastodon | strip_proto }}</i>
{% endif %}
<i class="email fa-envelope">
<img alt="E-mail" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAzdjE4aDI0di0xOGgtMjR6bTYuNjIzIDcuOTI5bC00LjYyMyA1LjcxMnYtOS40NThsNC42MjMgMy43NDZ6bS00LjE0MS01LjkyOWgxOS4wMzVsLTkuNTE3IDcuNzEzLTkuNTE4LTcuNzEzem01LjY5NCA3LjE4OGwzLjgyNCAzLjA5OSAzLjgzLTMuMTA0IDUuNjEyIDYuODE3aC0xOC43NzlsNS41MTMtNi44MTJ6bTkuMjA4LTEuMjY0bDQuNjE2LTMuNzQxdjkuMzQ4bC00LjYxNi01LjYwN3oiLz48L3N2Zz4=" class="icon">
{{cv.person.email}}
</i>
<i class="phone fa-phone">
<img alt="Phone" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNi4xNzYgMS4zMjJsMi44NDQtMS4zMjIgNC4wNDEgNy44OS0yLjcyNCAxLjM0MWMtLjUzOCAxLjI1OSAyLjE1OSA2LjI4OSAzLjI5NyA2LjM3Mi4wOS0uMDU4IDIuNjcxLTEuMzI4IDIuNjcxLTEuMzI4bDQuMTEgNy45MzJzLTIuNzY0IDEuMzU0LTIuODU0IDEuMzk2Yy03Ljg2MiAzLjU5MS0xOS4xMDMtMTguMjU4LTExLjM4NS0yMi4yODF6bTEuOTI5IDEuMjc0bC0xLjAyMy41MDRjLTUuMjk0IDIuNzYyIDQuMTc3IDIxLjE4NSA5LjY0OCAxOC42ODZsLjk3MS0uNDc0LTIuMjcxLTQuMzgzLTEuMDI2LjVjLTMuMTYzIDEuNTQ3LTguMjYyLTguMjE5LTUuMDU1LTkuOTM4bDEuMDA3LS40OTctMi4yNTEtNC4zOTh6Ii8+PC9zdmc+" class="icon">
+{{cv.person.phone | insert_space_every(times=3)}}
</i>
</div>
</div>
</div>
</body>
</html>