sync
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 31s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 31s
This commit is contained in:
parent
7a400cced7
commit
c86b5524eb
3 changed files with 111 additions and 36 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue