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

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

Browse source
This commit is contained in:
BOTAlex 2026-03-30 04:57:34 +02:00
parent 8fec1e5086
commit 7a400cced7
3 changed files with 136 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,32 +1,152 @@
<script>
const baseClass =
"h-56 w-full bg-slate-400 flex text-white font-bold text-2xl";
const titleClass = "px-4";
</script>
<div class="relative w-full flex justify-between">
<div class="col-l w-full relative h-full flex flex-col gap-2 p-4">
<div class="{baseClass} left-cols">
<div class="w-full bg-white">Kubernetes Cluster</div>
<div class="col-l w-full relative h-full flex flex-col gap-2 p-8">
<div class={baseClass}>
<div class="w-full flex flex-col pr-[7cm]">
<div class="w-full text-black bg-white">Kubernetes Cluster</div>
<div class="relative flex-1 w-full flex min-h-0">
<div class="w-full relative max-h-full flex flex-col">
<div class="w-full h-full flex flex-col">
<img
class="w-full h-full object-cover"
src="https://preview.redd.it/my-first-ever-by-hand-smd-soldering-i-just-have-a-soldering-v0-mc1kfp8fyood1.jpg?width=640&crop=smart&auto=webp&s=0336281767138bd92c632a96cd4df7c41805ef55"
alt=""
/>
</div>
</div>
<div
class="absolute kube-split bg-white/32 backdrop-blur left-0 right-0 flex flex-col h-full"
>
<div class="pl-[250px] h-full w-full">
{#if true}
{@const rotation = "15deg"}
<div
class="h-full flex flex-col text-[#222222] text-xs py-9"
style="transform: rotate({rotation});"
>
<div style="transform: rotate(-{rotation});">
Multi-node cluster
</div>
<div style="transform: rotate(-{rotation});">
with vpn vlan
</div>
<div style="transform: rotate(-{rotation});">
connected through
</div>
<div style="transform: rotate(-{rotation});">wide-web by</div>
<div style="transform: rotate(-{rotation});">
Wireguard mesh
</div>
<div style="transform: rotate(-{rotation});">running in</div>
<div style="transform: rotate(-{rotation});">
in Qemu on NixOS
</div>
</div>
{/if}
</div>
</div>
</div>
</div>
</div>
<div class={baseClass}>
<div class="w-full flex flex-col pr-[9cm]">
<div class="w-full text-slate-900 bg-white">PCB Design</div>
<div class="relative flex-1 w-full flex min-h-0">
<div class="w-full relative h-full flex flex-col pr-[45%]">
<img
class="w-full h-full object-cover"
src="https://preview.redd.it/my-first-ever-by-hand-smd-soldering-i-just-have-a-soldering-v0-mc1kfp8fyood1.jpg?width=640&crop=smart&auto=webp&s=0336281767138bd92c632a96cd4df7c41805ef55"
alt=""
/>
<img
class="w-full h-full object-cover"
src="https://preview.redd.it/my-first-ever-by-hand-smd-soldering-i-just-have-a-soldering-v0-mc1kfp8fyood1.jpg?width=640&crop=smart&auto=webp&s=0336281767138bd92c632a96cd4df7c41805ef55"
alt=""
/>
</div>
<div class="absolute quad-split left-0 right-0 flex flex-col h-full">
<div class="bg-lime-400 h-full w-full"></div>
<div class="bg-yellow-400 h-full w-full"></div>
</div>
</div>
</div>
</div>
<div class="{baseClass} left-cols"></div>
<div class="{baseClass} left-cols"></div>
</div>
<div class="col-r absolute left-0 right-0 h-full flex flex-col gap-2 p-4">
<div class="{baseClass} right-cols bg-slate-700"></div>
<div class="{baseClass} right-cols bg-slate-700"></div>
<div class="{baseClass} right-cols bg-slate-700"></div>
<div
class="col-border absolute bg-black left-0 right-0 h-full flex flex-col gap-2 p-8"
></div>
<div
class="col-border-2 absolute bg-slate-500 left-0 right-0 h-full flex flex-col gap-2 p-8"
></div>
<div class="col-r absolute left-0 right-0 h-full flex flex-col gap-2 p-8">
<div class="{baseClass} ">
<div class="w-full flex flex-col pl-[11cm]">
<div class="w-full text-slate-900 bg-white text-end">Frontend</div>
<div class="w-full h-full"></div>
</div>
</div>
<div class="{baseClass} ">
<div class="w-full flex flex-col pl-[9cm]">
<div class="w-full text-slate-900 bg-white text-end">Embedded</div>
<div class="w-full h-full"></div>
</div>
</div>
</div>
</div>
<style>
div {
/* Counts from left side*/
--top: 60%;
--bot: calc(100% - var(--top));
}
.col-r {
clip-path: polygon(65% 0, 100% 0, 100% 100%, 35% 100%);
clip-path: polygon(var(--top) 0, 100% 0, 100% 100%, var(--bot) 100%);
}
.left-cols {
/* width: 15cm; */
.quad-split {
--ratio: 57.5%;
--offset: -7.5%;
clip-path: polygon(
calc(var(--ratio) + var(--offset)) 0,
100% 0,
100% 100%,
calc(100% - var(--ratio) + var(--offset)) 100%
);
/* clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); */
}
.right-cols {
/* width: 15cm; */
.kube-split {
--ratio: 56%;
--offset: 1%;
clip-path: polygon(
calc(var(--ratio) + var(--offset)) 0,
100% 0,
100% 100%,
calc(100% - var(--ratio) + var(--offset)) 100%
);
}
.col-border {
--border-size: 16px;
clip-path: polygon(
calc(var(--top) - var(--border-size)) 0,
100% 0,
100% 100%,
calc(var(--bot) - var(--border-size)) 100%
);
}
.col-border-2 {
--border-size: 0px;
clip-path: polygon(
calc(var(--top) - var(--border-size)) 0,
100% 0,
100% 100%,
calc(var(--bot) - var(--border-size)) 100%
);
}
</style>

2
src/routes/cv/pages/page2.svelte
View file

@ -13,6 +13,6 @@
width: 210mm;
height: 297mm;
background-color: #eeeeee;
background-color: #121212;
}
</style>