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 33s
Details

Browse source
This commit is contained in:
BOTAlex 2026-03-30 01:55:53 +02:00
parent d56a4e6b91
commit 23a48ef01d
1 changed files with 16 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/routes/cv/comps/SlantedProjectHighlights.svelte
View file

@ -1,31 +1,21 @@
<script> <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 = const baseClass =
"h-56 w-full flex items-center justify-center text-white font-bold text-2xl"; "h-56 w-full bg-slate-400 flex text-white font-bold text-2xl";
</script> </script>
<div class="relative w-full flex justify-between"> <div class="relative w-full flex justify-between">
<div class="col-l relative h-full flex flex-col gap-2 p-4"> <div class="col-l relative h-full flex flex-col gap-2 p-4">
{#each leftCells as cell} <div class="{baseClass} left-cols">
<div class="{baseClass} {cell.bg} pr-[15cm]">{cell.label}</div> <div class="w-full bg-white">Kubernetes Cluster</div>
{/each} </div>
<div class="{baseClass} left-cols"></div>
<div class="{baseClass} left-cols"></div>
</div> </div>
<div class="col-r absolute right-0 h-full flex flex-col gap-2 p-4"> <div class="col-r absolute left-0 right-0 h-full flex flex-col gap-2 p-4">
{#each rightCells as cell} <div class="{baseClass} right-cols bg-slate-700"></div>
<div class="{baseClass} {cell.bg} pl-[15cm]">{cell.label}</div> <div class="{baseClass} right-cols bg-slate-700"></div>
{/each} <div class="{baseClass} right-cols bg-slate-700"></div>
</div> </div>
</div> </div>
@ -36,4 +26,10 @@
.col-r { .col-r {
clip-path: polygon(40% 0, 100% 0, 100% 100%, 5% 100%); clip-path: polygon(40% 0, 100% 0, 100% 100%, 5% 100%);
} }
.left-cols {
width: 15cm;
}
.right-cols {
width: 15cm;
}
</style> </style>