sync
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 32s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 32s
This commit is contained in:
parent
c86b5524eb
commit
7ca7eb8bf4
7 changed files with 271 additions and 23 deletions
|
|
@ -168,10 +168,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if debug}
|
||||
<div class="hide-on-print py-4"><div>===== Next page =====</div></div>
|
||||
<Page2 />
|
||||
{/if}
|
||||
<div class="hide-on-print py-4"><div>===== Next page =====</div></div>
|
||||
<Page2 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<p style="font-size: 0.5rem;">AI and data</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={$re?.education[1].imageId ?? ""}>
|
||||
<b>{$re?.education[0].name ?? "High School 🤮"}</b><br />
|
||||
<b>{$re?.education[1].name ?? "High School 🤮"}</b><br />
|
||||
<p style="font-size: 0.5rem;">Computer science</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={SasLogo}>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
const cols = 10;
|
||||
<script lang="ts">
|
||||
const cols = 9;
|
||||
const rows = 7;
|
||||
|
||||
// Geometry Constants
|
||||
const width = 66; // px
|
||||
const width = 73; // px
|
||||
const height = width * 1.1547; // Perfect hexagonal ratio
|
||||
const gap = 4; // Space between hexagons
|
||||
|
||||
|
|
@ -15,13 +15,31 @@
|
|||
|
||||
const hexPath =
|
||||
"polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)";
|
||||
|
||||
import { getSkills } from "@src/ts/misc/ZhenSkills";
|
||||
import * as m from "$paraglide/messages";
|
||||
|
||||
const skills = getSkills();
|
||||
function getIndex(r: int, c: int): int {
|
||||
return Math.floor(r / 2) * (2 * cols + 1) + (r % 2) * (cols + 1) + c;
|
||||
}
|
||||
</script>
|
||||
|
||||
<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 class="bg-[#eeeeee] text-[#121212] flex flex-col h-full">
|
||||
<div class="flex justify-between items-center px-8 py-4">
|
||||
<div class="font-semibold text-2xl">
|
||||
{m["zhen.cv.page2.mini-projects.title"]()}
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="border-b-6 border-[#121212]/32">
|
||||
{m["zhen.cv.page2.mini-projects.ask"]()}
|
||||
</div>
|
||||
<div class="border-b-6 border-[#7bd45d]">
|
||||
{m["zhen.cv.page2.mini-projects.linked"]()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" overflow-show">
|
||||
<div class="overflow-show">
|
||||
<div
|
||||
class="relative"
|
||||
style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
|
||||
|
|
@ -34,16 +52,48 @@
|
|||
padding-left: {r % 2 !== 0 ? offset : 0}px;
|
||||
"
|
||||
>
|
||||
{#each Array(cols + !(r % 2)) as _, c}
|
||||
<div
|
||||
class="bg-slate-800 flex items-center justify-center shrink-0"
|
||||
style="
|
||||
{#each Array(cols + (r % 2 == 0)) as _, c}
|
||||
{@const x = getIndex(r, c)}
|
||||
{#if x < skills.length}
|
||||
<div class="hidden"></div>
|
||||
|
||||
<div
|
||||
class=" {skills[x].link != undefined
|
||||
? 'bg-[#7bd45d]'
|
||||
: 'bg-[#121212]/32'} flex items-center justify-center shrink-0"
|
||||
style="
|
||||
width: {width}px;
|
||||
height: {height}px;
|
||||
clip-path: {hexPath};
|
||||
margin-right: {gap}px;
|
||||
"
|
||||
></div>
|
||||
>
|
||||
{#if skills[x].link != undefined}
|
||||
<a
|
||||
href={skills[x].link}
|
||||
class="bg-[#eeeeee] w-full grid items-center shrink-0"
|
||||
style="
|
||||
width: {width * 0.9}px;
|
||||
height: {height * 0.9}px;
|
||||
clip-path: {hexPath};
|
||||
"
|
||||
>
|
||||
<img class="p-3.5" src={skills[x].image} alt="" />
|
||||
</a>
|
||||
{:else}
|
||||
<div
|
||||
class="bg-[#eeeeee] w-full grid items-center shrink-0"
|
||||
style="
|
||||
width: {width * 0.9}px;
|
||||
height: {height * 0.9}px;
|
||||
clip-path: {hexPath};
|
||||
"
|
||||
>
|
||||
<img class="p-3.5" src={skills[x].image} alt="" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<script>
|
||||
const baseClass =
|
||||
"h-56 w-full bg-slate-400 flex text-white font-bold text-2xl";
|
||||
const titleClass = "px-4";
|
||||
import * as m from "$paraglide/messages";
|
||||
</script>
|
||||
|
||||
<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="text-2xl p-4">{m["zhen.cv.page2.title"]()}</div>
|
||||
<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="w-full text-[#121212] bg-[#f1f1f1] px-2">
|
||||
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">
|
||||
|
|
@ -64,7 +66,7 @@
|
|||
</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="w-full text-[#121212] bg-[#f1f1f1] px-2">PCB Design</div>
|
||||
<div class="relative flex-1 w-full flex min-h-0">
|
||||
<div
|
||||
class="w-full relative h-full flex flex-col justify-evenly pr-[45%]"
|
||||
|
|
@ -102,7 +104,7 @@
|
|||
<div class="text-2xl p-4"><br /></div>
|
||||
<div class="{baseClass} ">
|
||||
<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 text-[#121212] bg-[#f1f1f1] text-end">Frontend</div>
|
||||
<img
|
||||
class="w-full h-full object-cover object-top-left"
|
||||
src="https://deprived.dev/assets/website/zhen/cv/cv-inception.png"
|
||||
|
|
@ -112,7 +114,7 @@
|
|||
</div>
|
||||
<div class="{baseClass} ">
|
||||
<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 text-[#121212] bg-[#f1f1f1] text-end">Embedded</div>
|
||||
<div class="relative flex-1 w-full flex min-h-0">
|
||||
<div class="w-full relative h-full flex flex-col">
|
||||
<img
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue