58 lines
2.1 KiB
Twig
58 lines
2.1 KiB
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.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.jpg"
|
||
|
|
style="width: {{ mainWidth }}px"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="profile-shadow"></div>
|
||
|
|
</div>
|
||
|
|
<div class="profile-content">
|
||
|
|
<span class="title-1">Hi! I'm Matthieu</span>
|
||
|
|
<span class="title-2">I like to program stuff</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|