TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Add moving clouds at the top of the page

Browse source
This commit is contained in:
TheThomaas 2025-05-27 21:46:53 +02:00
parent 2a0ac62ad9
commit d399dbc8c3
3 changed files with 85 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/_includes/layouts/base.html
View file

@ -17,12 +17,16 @@
{% include "css/components/timeline.css" %}
{% include "css/components/competences.css" %}
{% include "css/components/download.css" %}
{% include "css/components/clouds.css" %}
{% endcss %}
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
</head>
<body>
{% include "partials/header.liquid" %}
{% include "partials/clouds.liquid" %}
<main tabindex="-1" id="main-content">
{% block content %}
{{ content }}

21
src/_includes/partials/clouds.liquid Normal file
View file

@ -0,0 +1,21 @@
<div class="clouds-zone">
<div class="cloud--item" style="--delay: 35s; --scale: 0.65;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 20s; --scale: 0.3;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 30s; --scale: 0.5;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 18s; --scale: 0.4;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 25s; --scale: 0.55;">
<div class="cloud"></div>
</div>
</div>

60
src/css/components/clouds.css Normal file
View file

@ -0,0 +1,60 @@
.clouds-zone {
top: 70px;
inset-inline: 0;
position: absolute;
z-index: -1;
}
@keyframes animateCloud {
0% { margin-left: -1000px; }
100% { margin-left: 100%; }
}
.cloud--item {
animation: animateCloud var(--delay, 35s) linear infinite;
transform: scale(var(--scale, .5));
}
.cloud {
position: relative;
background: var(--cloud-color-primary, var(--color-neutral-50));
border-radius: 100px;
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
height: 120px;
width: 350px;
}
.cloud:after, .cloud:before {
background: var(--cloud-color-primary, var(--color-neutral-50));
content: '';
position: absolute;
z-indeX: -1;
}
.cloud:after {
border-radius: 100px;
height: 100px;
left: 50px;
top: -50px;
width: 100px;
}
.cloud:before {
border-radius: 200px;
height: 180px;
right: 50px;
top: -90px;
width: 180px;
}
@media (prefers-reduced-motion: reduce) {
.clouds-zone {
display: none;
}
}