portfolio/templates/home/profile.html.twig

{% set mainWidth = 200 %}
{% set imgsPerSide = 4 %}
{% set width = mainWidth/imgsPerSide %}
{% set base = [39, 174, 96] %}

<section class="landing-section">
  <div class="profile-container">
    <div class="profile-imgs-container">
      <div class="profile-imgs-wrapper" style="padding: {{ width }}px">
      <div class="profile-imgs" style="width: {{ mainWidth }}px; height: {{ mainWidth }}px">
        {% for side in range(0, 3) %}
          {% for i in range(0, imgsPerSide) %}
            <img
              class="additional-profile"
              id="addprof-{{ 1+side*i }}"
              data-side="{{ side }}"
              style="
                transform: rotateZ({{ [0, 90, 180, -90][i] }}deg);
                width: {{ width }}px;
                height: {{ width }}px;
                filter: hue-rotate({{ (1-i/(1+imgsPerSide))*180 }}deg);
                top: {{ [-width, -width + i*width, mainWidth, i*width][side] }}px;
                left: {{ [-width + i * width, mainWidth, i*width, -width][side] }}px;
              "
              src="imgs/profile-300.jpg"
            />
            <div
              class="additional-profile-filter"
              id="addprof-filter-{{ (1+side)*i }}"
              data-side="{{ side }}"
              style="
                width: {{ width }}px;
                height: {{ width }}px;
                top: {{ [-width, -width + i*width, mainWidth, i*width][side] }}px;
                left: {{ [-width + i * width, mainWidth, i*width, -width][side] }}px;
                background-color: rgba(
                  {{ base[0] }}, {{ base[1] }}, {{ base[2] }}, {{ 0.25 + 0.5*i/(1+imgsPerSide) }}
                );
              ">
            </div>
          {% endfor %}
        {% endfor %}
        <img
          class="main-profile"
          src="imgs/profile-300.jpg"
          style="width: {{ mainWidth }}px"
        />
      </div>
      </div>
      <div class="profile-shadow"></div>
    </div>
    <div class="profile-content">
      <span class="title-1">{{ getLocalizedStr('profile.main') }}</span>
      <span class="title-2">{{ getLocalizedStr('profile.secondary') }}</span>
      <nav class="profile-nav">
        <a href="#technologies">{{ getLocalizedStr('technologies.name') }}</a>
        <a href="#pro-projects">{{ getLocalizedStr('projects.name') }}</a>
        <a href="#links">{{ getLocalizedStr('links.name') }}</a>
        <a href="#contact">{{ getLocalizedStr('contact.name') }}</a>
      </nav>
    </div>
  </div>
</section>