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

Browse source
This commit is contained in:
BOTAlex 2026-03-30 07:22:42 +02:00
parent 7a400cced7
commit c86b5524eb
3 changed files with 111 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@
<div class="relative w-full flex justify-between">
<div class="col-l w-full relative h-full flex flex-col gap-2 p-8">
<div class="text-2xl p-4">Small projects showcase</div>
<div class={baseClass}>
<div class="w-full flex flex-col pr-[7cm]">
<div class="w-full text-black bg-white">Kubernetes Cluster</div>
@ -14,7 +15,7 @@
<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"
src="https://deprived.dev/assets/website/zhen/cv/fossflow-kubernetes.png"
alt=""
/>
</div>
@ -26,7 +27,7 @@
{#if true}
{@const rotation = "15deg"}
<div
class="h-full flex flex-col text-[#222222] text-xs py-9"
class="h-full flex flex-col text-[#222222] text-xs py-7"
style="transform: rotate({rotation});"
>
<div style="transform: rotate(-{rotation});">
@ -46,6 +47,14 @@
<div style="transform: rotate(-{rotation});">
in Qemu on NixOS
</div>
<div style="transform: rotate(-{rotation});"><br /></div>
<div style="transform: rotate(-{rotation});"><br /></div>
<div
style="transform: rotate(-{rotation});"
class="text-[0.6rem]"
>
Actual cluster diagram
</div>
</div>
{/if}
</div>
@ -57,21 +66,26 @@
<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%]">
<div
class="w-full relative h-full flex flex-col justify-evenly 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"
class="w-full flex-1 object-cover min-h-0"
src="https://deprived.dev/assets/website/zhen/cv/kicad-pcb.png"
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"
class="w-full flex-1 object-cover min-h-0"
src="https://deprived.dev/assets/website/zhen/cv/soldering-stack.jpeg"
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>
<img
class="w-full h-full object-fit"
src="https://deprived.dev/assets/website/zhen/cv/pnp.png"
alt=""
/>
</div>
</div>
</div>
@ -79,22 +93,44 @@
</div>
<div
class="col-border absolute bg-black left-0 right-0 h-full flex flex-col gap-2 p-8"
class="col-border absolute bg-[#121212] 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"
class="col-border-2 absolute 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="text-2xl p-4"><br /></div>
<div class="{baseClass} ">
<div class="w-full flex flex-col pl-[11cm]">
<div class="w-full flex flex-col pl-[9.5cm]">
<div class="w-full text-slate-900 bg-white text-end">Frontend</div>
<div class="w-full h-full"></div>
<img
class="w-full h-full object-cover object-top-left"
src="https://deprived.dev/assets/website/zhen/cv/cv-inception.png"
alt=""
/>
</div>
</div>
<div class="{baseClass} ">
<div class="w-full flex flex-col pl-[9cm]">
<div class="w-full flex flex-col pl-[7.5cm]">
<div class="w-full text-slate-900 bg-white text-end">Embedded</div>
<div class="w-full h-full"></div>
<div class="relative flex-1 w-full flex min-h-0">
<div class="w-full relative h-full flex flex-col">
<img
class="w-full h-full object-cover pr-25"
src="https://deprived.dev/assets/website/zhen/cv/countrProto.jpeg"
alt=""
/>
</div>
<div
class="absolute split-embedded left-0 right-0 flex flex-col h-full"
>
<img
class="w-full h-full pl-45 object-cover"
src="https://deprived.dev/assets/website/zhen/cv/selfie.jpeg"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
@ -121,6 +157,28 @@
);
/* clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); */
}
.split-frontend {
--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%); */
}
.split-embedded {
--ratio: 56%;
--offset: 0%;
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%); */
}
.kube-split {
--ratio: 56%;
--offset: 1%;