big progress
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 49s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 49s
This commit is contained in:
parent
8fec1e5086
commit
7a400cced7
3 changed files with 136 additions and 16 deletions
|
|
@ -10,7 +10,7 @@
|
||||||
},
|
},
|
||||||
"flex": {
|
"flex": {
|
||||||
"title": "Key Achievement",
|
"title": "Key Achievement",
|
||||||
"body": "The <a href='https://deprived.dev'>The <span class='text-blue-500 underline'>deprived devs</span></a> has won every gamejam we've participated in!"
|
"body": "<a href='https://deprived.dev'>The <span class='text-blue-500 underline'>deprived devs</span></a> has won every gamejam we've participated in!"
|
||||||
},
|
},
|
||||||
"projects": {
|
"projects": {
|
||||||
"title": "Big projects",
|
"title": "Big projects",
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,152 @@
|
||||||
<script>
|
<script>
|
||||||
const baseClass =
|
const baseClass =
|
||||||
"h-56 w-full bg-slate-400 flex text-white font-bold text-2xl";
|
"h-56 w-full bg-slate-400 flex text-white font-bold text-2xl";
|
||||||
|
const titleClass = "px-4";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative w-full flex justify-between">
|
<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="col-l w-full relative h-full flex flex-col gap-2 p-8">
|
||||||
<div class="{baseClass} left-cols">
|
<div class={baseClass}>
|
||||||
<div class="w-full bg-white">Kubernetes Cluster</div>
|
<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>
|
||||||
<div class="{baseClass} left-cols"></div>
|
|
||||||
<div class="{baseClass} left-cols"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-r absolute left-0 right-0 h-full flex flex-col gap-2 p-4">
|
<div
|
||||||
<div class="{baseClass} right-cols bg-slate-700"></div>
|
class="col-border absolute bg-black left-0 right-0 h-full flex flex-col gap-2 p-8"
|
||||||
<div class="{baseClass} right-cols bg-slate-700"></div>
|
></div>
|
||||||
<div class="{baseClass} right-cols bg-slate-700"></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
div {
|
||||||
|
/* Counts from left side*/
|
||||||
|
--top: 60%;
|
||||||
|
--bot: calc(100% - var(--top));
|
||||||
|
}
|
||||||
|
|
||||||
.col-r {
|
.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 {
|
.quad-split {
|
||||||
/* width: 15cm; */
|
--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 {
|
.kube-split {
|
||||||
/* width: 15cm; */
|
--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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,6 @@
|
||||||
width: 210mm;
|
width: 210mm;
|
||||||
height: 297mm;
|
height: 297mm;
|
||||||
|
|
||||||
background-color: #eeeeee;
|
background-color: #121212;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue