sync
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 31s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 31s
This commit is contained in:
parent
7a400cced7
commit
c86b5524eb
3 changed files with 111 additions and 36 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
const cols = 10;
|
||||
const rows = 5;
|
||||
const rows = 7;
|
||||
|
||||
// Geometry Constants
|
||||
const width = 66; // px
|
||||
|
|
@ -17,8 +17,11 @@
|
|||
"polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)";
|
||||
</script>
|
||||
|
||||
<div class="text-xl px-8 py-4 text-slate-800">Skills</div>
|
||||
<div class="bg-slate-100 overflow-show">
|
||||
<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>
|
||||
<div class=" overflow-show">
|
||||
<div
|
||||
class="relative"
|
||||
style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
|
||||
|
|
@ -45,4 +48,5 @@
|
|||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
|
||||
<div class="A4 include-in-print">
|
||||
<SlantedProjectHighlights />
|
||||
|
||||
<div class="warning-tape w-full h-4"></div>
|
||||
|
||||
<HexagonSkills />
|
||||
</div>
|
||||
|
||||
|
|
@ -12,7 +15,17 @@
|
|||
.A4 {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.warning-tape {
|
||||
--color1: #eeeeee;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--color1),
|
||||
var(--color1) 20px,
|
||||
#121212 20px,
|
||||
#121212 40px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue