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

cv second page progress
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 33s
Details

Browse source
This commit is contained in:
BOTAlex 2026-03-29 05:58:25 +02:00
parent 8a0b2f6a46
commit d56a4e6b91
4 changed files with 109 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/routes/cv/comps/SlantedProjectHighlights.svelte Normal file
View file

@ -0,0 +1,39 @@
<script>
const leftCells = [
{ label: "Cell 1", bg: "bg-blue-600" },
{ label: "Cell 2", bg: "bg-blue-500" },
{ label: "Cell 3", bg: "bg-blue-400" },
];
const rightCells = [
{ label: "Cell 4", bg: "bg-emerald-600" },
{ label: "Cell 5", bg: "bg-emerald-500" },
{ label: "Cell 6", bg: "bg-emerald-400" },
];
const baseClass =
"h-56 w-full flex items-center justify-center text-white font-bold text-2xl";
</script>
<div class="relative w-full flex justify-between">
<div class="col-l relative h-full flex flex-col gap-2 p-4">
{#each leftCells as cell}
<div class="{baseClass} {cell.bg} pr-[15cm]">{cell.label}</div>
{/each}
</div>
<div class="col-r absolute right-0 h-full flex flex-col gap-2 p-4">
{#each rightCells as cell}
<div class="{baseClass} {cell.bg} pl-[15cm]">{cell.label}</div>
{/each}
</div>
</div>
<style>
.col-l {
clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
}
.col-r {
clip-path: polygon(40% 0, 100% 0, 100% 100%, 5% 100%);
}
</style>