portfolio/templates/home/intro.html.twig

72 lines
3 KiB
Twig

<section id="intro">
<div class="container intro-section">
<div class="section-title">
<h2 class="title-text">{{ getLocalizedStr('intro.title') }}</h2>
</div>
<div class="intro">
<div class="intro-text">
{{ getLocalizedStr('intro.description') | formatMd | raw }}
<div class="intro-interests chips">
<div class="intro-interests-header">
<p>
{{ getLocalizedStr('intro.interests') }}
</p>
</div>
{% for interest in interests %}
<div class="item chip chip-with-icon chip-outline">
<div class="chip-icon">
{{ source('@imgs/icons/'~interest.icon) }}
</div>
{{ getDynLocalizedStr(interest.name) }}
</div>
{% endfor %}
</div>
</div>
<div>
<ul class="intro-items">
<li class="intro-item item-age">
<div class="item-icon">
{{ source('@imgs/icons/cake.svg') }}
</div>
<div class="item-content">
{{ getLocalizedStr('intro.age') | format(age) }}
</div>
</li>
<li class="intro-item item-location">
<div class="item-icon">
{{ source('@imgs/icons/map-pin.svg') }}
</div>
<div class="item-content">
{{ getLocalizedStr('intro.location') }}
{{ getDynLocalizedStr(location.region) }}
</div>
</li>
<li class="intro-item item-languages">
<div class="item-icon">
{{ source('@imgs/icons/flag.svg') }}
</div>
<div class="item-content">
{{ getLocalizedStr('intro.speak') }}
<ul>
{% for locale in languages %}
<li>{{ getLocalizedStr(locale) }}{% if not loop.last %},{% endif %}</li>
{% endfor %}
</ul>
</div>
</li>
<li class="intro-item item-transport">
<div class="item-icon">
{{ source('@imgs/icons/bike.svg') }}
</div>
<div class="item-content">
{{ getLocalizedStr('intro.transport') }}
</div>
</li>
<!-- items: age, location, languages spoke, interests, transport method, -->
</ul>
</div>
</div>
</div>
</section>