DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
BOTAlex 2026-03-31 01:13:24 +02:00
parent c86b5524eb
commit 7ca7eb8bf4
7 changed files with 271 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/routes/cv/comps/HexagonSkills.svelte
View file

@ -1,9 +1,9 @@
<script>
const cols = 10;
<script lang="ts">
const cols = 9;
const rows = 7;
// Geometry Constants
const width = 66; // px
const width = 73; // px
const height = width * 1.1547; // Perfect hexagonal ratio
const gap = 4; // Space between hexagons
@ -15,13 +15,31 @@
const hexPath =
"polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)";
import { getSkills } from "@src/ts/misc/ZhenSkills";
import * as m from "$paraglide/messages";
const skills = getSkills();
function getIndex(r: int, c: int): int {
return Math.floor(r / 2) * (2 * cols + 1) + (r % 2) * (cols + 1) + c;
}
</script>
<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 class="bg-[#eeeeee] text-[#121212] flex flex-col h-full">
<div class="flex justify-between items-center px-8 py-4">
<div class="font-semibold text-2xl">
{m["zhen.cv.page2.mini-projects.title"]()}
</div>
<div class="flex gap-4">
<div class="border-b-6 border-[#121212]/32">
{m["zhen.cv.page2.mini-projects.ask"]()}
</div>
<div class="border-b-6 border-[#7bd45d]">
{m["zhen.cv.page2.mini-projects.linked"]()}
</div>
</div>
</div>
<div class=" overflow-show">
<div class="overflow-show">
<div
class="relative"
style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
@ -34,16 +52,48 @@
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 == 0)) as _, c}
{@const x = getIndex(r, c)}
{#if x < skills.length}
<div class="hidden"></div>
<div
class=" {skills[x].link != undefined
? 'bg-[#7bd45d]'
: 'bg-[#121212]/32'} flex items-center justify-center shrink-0"
style="
width: {width}px;
height: {height}px;
clip-path: {hexPath};
margin-right: {gap}px;
"
></div>
>
{#if skills[x].link != undefined}
<a
href={skills[x].link}
class="bg-[#eeeeee] w-full grid items-center shrink-0"
style="
width: {width * 0.9}px;
height: {height * 0.9}px;
clip-path: {hexPath};
"
>
<img class="p-3.5" src={skills[x].image} alt="" />
</a>
{:else}
<div
class="bg-[#eeeeee] w-full grid items-center shrink-0"
style="
width: {width * 0.9}px;
height: {height * 0.9}px;
clip-path: {hexPath};
"
>
<img class="p-3.5" src={skills[x].image} alt="" />
</div>
{/if}
</div>
{/if}
{/each}
</div>
{/each}