portfolio/templates/home/intro.html.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.name) }} 
                        </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.long) }}{% 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') | format(getDynLocalizedStr(transport.name)) }}
                        </div>
                    </li>
                    <!-- items: age, location, languages spoke, interests, transport method,   -->
                </ul>
            </div>
        </div>
    </div>
</section>