sync
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 31s

This commit is contained in:
BOTAlex 2026-03-30 07:22:42 +02:00
parent 7a400cced7
commit c86b5524eb
3 changed files with 111 additions and 36 deletions

View file

@ -1,6 +1,6 @@
<script>
const cols = 10;
const rows = 5;
const rows = 7;
// Geometry Constants
const width = 66; // px
@ -17,32 +17,36 @@
"polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)";
</script>
<div class="text-xl px-8 py-4 text-slate-800">Skills</div>
<div class="bg-slate-100 overflow-show">
<div
class="relative"
style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
>
{#each Array(rows) as _, r}
<div
class="flex"
style="
<div class="bg-[#eeeeee] flex flex-col h-full">
<div class=" px-8 py-4 text-slate-800 font-semibold text-2xl">
Experienced in
</div>
<div class=" overflow-show">
<div
class="relative"
style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
>
{#each Array(rows) as _, r}
<div
class="flex"
style="
margin-bottom: -{verticalOverlap - gap}px;
padding-left: {r % 2 !== 0 ? offset : 0}px;
"
>
{#each Array(cols + !(r % 2)) as _, c}
<div
class="bg-slate-800 flex items-center justify-center shrink-0"
style="
>
{#each Array(cols + !(r % 2)) as _, c}
<div
class="bg-slate-800 flex items-center justify-center shrink-0"
style="
width: {width}px;
height: {height}px;
clip-path: {hexPath};
margin-right: {gap}px;
"
></div>
{/each}
</div>
{/each}
></div>
{/each}
</div>
{/each}
</div>
</div>
</div>