multi lang CV
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 12m38s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 12m38s
This commit is contained in:
BOTAlex
parent
7ab06325bc
commit
ad138b5de5
43 changed files with 1315 additions and 1974 deletions
|
|
@ -1,5 +1,7 @@
|
|||
<script lang="ts">
|
||||
import re from "@ts/Redaction/Redactor";
|
||||
import * as m from "$paraglide/messages";
|
||||
import { getLocale, setLocale, locales } from "$paraglide/runtime";
|
||||
|
||||
// Left side
|
||||
import NameAndImage from "./comps/NameAndImage.svelte";
|
||||
|
|
@ -56,27 +58,37 @@
|
|||
<meta content={preveiwImage} property="og:image" />
|
||||
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
||||
|
||||
<div class="cv-info-container hide-on-print">
|
||||
<div class="cv-info-container flex flex-col w-full h-full hide-on-print">
|
||||
<div>
|
||||
Under here is my CV rev1 for an application made entirely in HTML and CSS.
|
||||
The page is designed to be saved as PDF. This can be done by pressing <div
|
||||
class="keyboard-key"
|
||||
>
|
||||
P
|
||||
</div>
|
||||
<div class="keyboard-key">P</div>
|
||||
+
|
||||
<div class="keyboard-key">CTRL</div>
|
||||
, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
|
||||
<br />
|
||||
<br />
|
||||
I have to sadly recommend chrome for this process. Firefox somehow messes with
|
||||
the quality of the PDF :(
|
||||
+ Chrome = PDF
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
CV Languages:
|
||||
{#each locales as tag}
|
||||
<button
|
||||
class="btn btn-xs {tag == getLocale()
|
||||
? 'btn-filled btn-primary text-primary-content'
|
||||
: 'btn-outline'}"
|
||||
onclick={() => {
|
||||
setLocale(tag);
|
||||
}}
|
||||
>
|
||||
{tag.toUpperCase()}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col justify-center overflow-hidden">
|
||||
<div class=" w-full flex h-[1123px] justify-center">
|
||||
<div
|
||||
class="relative w-full flex h-[1123px] justify-center {$re?.name
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
<RepeatedSkills
|
||||
class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
|
||||
class="cozette-force text-5xl text-base-300 "
|
||||
style="transform: translateY(-90rem)"
|
||||
textOverride={["REDACTED VERSION"]}
|
||||
targetTextHeight={90}
|
||||
|
|
@ -86,7 +98,9 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="NotoSans cv-config cv-container-container include-in-print absolute"
|
||||
class="NotoSans h-[1123px] cv-config cv-container-container include-in-print {$re?.name
|
||||
? ''
|
||||
: 'absolute'}"
|
||||
>
|
||||
<div class="cv-container sections decorations">
|
||||
<div id="left-section" class=" flex justify-center">
|
||||
|
|
@ -221,7 +235,7 @@
|
|||
}
|
||||
|
||||
.cv-info-container {
|
||||
height: 40mm;
|
||||
height: 15mm;
|
||||
background-color: #2b2a2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -236,11 +250,6 @@
|
|||
|
||||
background-color: #3e3d3d;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-container-container {
|
||||
|
|
|
|||
|
|
@ -1,25 +1,28 @@
|
|||
<div class="short-profile-container">
|
||||
<div class="flex gap-1 items-baseline">
|
||||
<b style="text-align:left;">
|
||||
Biggest flex
|
||||
</b>
|
||||
<h1 style="font-size: 0.5rem; color: grey;">*Gamejams that had competitions.</h1>
|
||||
</div>
|
||||
<div class="text-[0.85rem] text-left">
|
||||
<a href="https://deprived.dev" >The <span class="text-blue-500 underline">deprived devs</span></a> has won every gamejam, we've participated. <br/>
|
||||
</div>
|
||||
<script lang="ts">
|
||||
import * as m from "$paraglide/messages";
|
||||
</script>
|
||||
|
||||
<div class="short-profile-container">
|
||||
<div class="flex gap-1 items-baseline">
|
||||
<b style="text-align:left;">{m["zhen.cv.flex.title"]()}</b>
|
||||
<h1 style="font-size: 0.5rem; color: grey;">
|
||||
{m["zhen.cv.flex.tooltip"]()}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="text-[0.85rem] text-left">
|
||||
{@html m["zhen.cv.flex.body"]()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.short-profile-container{
|
||||
width: 90%;
|
||||
}
|
||||
.short-profile-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.short-profile-container > div:first-child {
|
||||
width: 100%;
|
||||
.short-profile-container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<script lang="ts">
|
||||
import * as m from "$paraglide/messages";
|
||||
</script>
|
||||
|
||||
<div class="short-profile-container">
|
||||
<div class="flex gap-1 items-baseline">
|
||||
<b style="text-align:left;"> About me </b>
|
||||
<b style="text-align:left;">{m["zhen.cv.profile.title"]()}</b>
|
||||
<div class="opacity-70 text-[0.5rem]">
|
||||
I know the languages listed above in the decor!
|
||||
{m["zhen.cv.profile.tooltip"]()}
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
I love learning on my own, and I try to be honest. I am highly
|
||||
self-motivated and I usually archive any task I put my mind to. This enables
|
||||
me to have countless hobbies, such as 3D printing, soldering, programming.
|
||||
<br />
|
||||
<br />
|
||||
Other than my github, I've listed some projects highlighted below. :)
|
||||
{m["zhen.cv.profile.long"]()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
<div class="container">
|
||||
<script lang="ts">
|
||||
import * as m from "$paraglide/messages";
|
||||
</script>
|
||||
|
||||
<div class="container flex flex-col items-center">
|
||||
<div class="flex gap-1">
|
||||
<b style="text-align:left;"> List of big projects </b>
|
||||
<b style="text-align:left;">
|
||||
{m["zhen.cv.projects.title"]()}
|
||||
</b>
|
||||
<div class="opacity-70 text-[0.5rem]">
|
||||
It is likely I'm working on something new, as you're reading this.
|
||||
<br />
|
||||
Contact me if you're curious! :D
|
||||
{m["zhen.cv.projects.tooltip"]()}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-display">
|
||||
<div class="table-display text-sm justify-center">
|
||||
<div class="table-item">
|
||||
<div>HTML</div>
|
||||
<div>This CV is made with HTML, CSS, and Svelte</div>
|
||||
<div>{m["zhen.cv.projects.cv"]()}</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Computer vision</div>
|
||||
<div>Implimented YoloV1 from scratch. (object detection)</div>
|
||||
<div>{m["zhen.cv.projects.CV"]()}</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Arduino/embedded</div>
|
||||
<div>Built custom CNC machine</div>
|
||||
<div>{m["zhen.cv.projects.embedded"]()}</div>
|
||||
</div>
|
||||
<!-- <div class="table-item"> -->
|
||||
<!-- <div>App dev</div> -->
|
||||
|
|
@ -26,35 +30,30 @@
|
|||
<!-- </div> -->
|
||||
<div class="table-item">
|
||||
<div>Open-source</div>
|
||||
<div>I often contribute to Open-source</div>
|
||||
<div>{m["zhen.cv.projects.open"]()}</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>PCB design</div>
|
||||
<div>I have designed multiple Printed Circuit Boards (PCBs)</div>
|
||||
<div>{m["zhen.cv.projects.pcb"]()}</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Kubernetes</div>
|
||||
<div>WIP: Multi node HA Kubernetes cluster with my friends</div>
|
||||
<div>{m["zhen.cv.projects.kube"]()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.container > div:first-child {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.table-display {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.table-item {
|
||||
|
|
@ -73,23 +72,14 @@
|
|||
color: #000000;
|
||||
|
||||
&:first-child {
|
||||
width: 30%;
|
||||
font-size: 4mm;
|
||||
width: 25%;
|
||||
font-size: 3mm;
|
||||
|
||||
display: grid;
|
||||
place-content: center start;
|
||||
|
||||
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 70%;
|
||||
|
||||
font-size: 3.25mm;
|
||||
display: grid;
|
||||
|
||||
padding-left: 1mm;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue