deprecated some old things
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
This commit is contained in:
BOTAlex
parent
f0a51f17fe
commit
28eea2d035
46 changed files with 1243 additions and 0 deletions
23
src/routes/cv/comps/AlexWatermark.svelte
Normal file
23
src/routes/cv/comps/AlexWatermark.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let Style = "";
|
||||
</script>
|
||||
|
||||
<div class="container" style="{Style}">
|
||||
ALEX
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
vertical-align: bottom;
|
||||
align-self: flex-end;
|
||||
|
||||
// font settings
|
||||
font-size: 80mm;
|
||||
color: #e4e4e4;
|
||||
|
||||
transform: translate(32%, -32%) rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
25
src/routes/cv/comps/BiggestFlex.svelte
Normal file
25
src/routes/cv/comps/BiggestFlex.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.short-profile-container{
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.short-profile-container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
</style>
|
||||
53
src/routes/cv/comps/BottomRightDecor.svelte
Normal file
53
src/routes/cv/comps/BottomRightDecor.svelte
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<script>
|
||||
export let Style = "";
|
||||
</script>
|
||||
|
||||
<div class="container" style={Style}>
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
transform: translate(20.3mm, -5mm) rotate(-45deg);
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
vertical-align: bottom;
|
||||
align-self: flex-end;
|
||||
|
||||
z-index: 0;
|
||||
|
||||
> div:nth-child(1) {
|
||||
padding-top: 5mm;
|
||||
//border-bottom: #4472c4 dashed 2mm;
|
||||
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--left-decor-line-color) 70%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
background-position: top;
|
||||
background-size: 6mm 1.5mm;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
background-color: var(--left-decor-line-color);
|
||||
width: 100mm;
|
||||
height: 25mm;
|
||||
|
||||
// Text
|
||||
display: grid;
|
||||
place-content: center;
|
||||
align-content: flex-start;
|
||||
> div {
|
||||
padding-top: 3.5mm;
|
||||
color: #4a7bcf;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
7
src/routes/cv/comps/CombinedContacts.svelte
Normal file
7
src/routes/cv/comps/CombinedContacts.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
import Contact from "./Contact.svelte";
|
||||
import OtherContact from "./OtherContact.svelte";
|
||||
</script>
|
||||
|
||||
<Contact/>
|
||||
<OtherContact/>
|
||||
75
src/routes/cv/comps/Contact.svelte
Normal file
75
src/routes/cv/comps/Contact.svelte
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Contact
|
||||
</b>
|
||||
</div>
|
||||
<div class="table-display">
|
||||
<div class="table-item">
|
||||
<div>Email</div>
|
||||
<div>Zhen@deprived.dev</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Phone</div>
|
||||
<div>+45 42535723</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>LinkedIn</div>
|
||||
<a href="https://www.linkedin.com/in/zhentao-wei-3a3a0a182/">Zhentao-Wei</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid var(--left-line-color);
|
||||
}
|
||||
|
||||
.table-display {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-item {
|
||||
display: flex;
|
||||
justify-items: start;
|
||||
|
||||
width: 100%;
|
||||
border-bottom: 0.25mm solid #000000;
|
||||
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> div, > a {
|
||||
|
||||
&:first-child {
|
||||
width: 35%;
|
||||
font-size: 4mm;
|
||||
|
||||
display: grid;
|
||||
place-content: center start;
|
||||
|
||||
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 65%;
|
||||
|
||||
font-size: 3.25mm;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
padding-left: 1mm;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
src/routes/cv/comps/Education.svelte
Normal file
47
src/routes/cv/comps/Education.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script>
|
||||
import placeholder from "$lib/zhen/cv-comps/400x400.png";
|
||||
import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.png";
|
||||
import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png";
|
||||
import SasLogo from "$lib/zhen/cv-comps/SASLogo.png";
|
||||
import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png";
|
||||
|
||||
import IconAndText2 from "./IconAndText2.svelte";
|
||||
</script>
|
||||
|
||||
<div class="container h-10">
|
||||
<div>
|
||||
<b style="text-align:left;"> Education </b>
|
||||
</div>
|
||||
<div class="flex justify-center p-2 w-full">
|
||||
<IconAndText2 logo={DTU_Logo}>
|
||||
<b>DTU</b><br />
|
||||
<p style="font-size: 0.5rem;">AI and data</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={NextLogo}>
|
||||
<b>Next</b><br />
|
||||
<p style="font-size: 0.5rem;">Computer science</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={SasLogo}>
|
||||
<b>Master class</b><br />
|
||||
<p style="font-size: 0.5rem;">SAS Programming</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={EmphasysLogo}>
|
||||
<span class="font-semibold">Emphasys center</span><br />
|
||||
<p style="font-size: 0.5rem;">VR development</p>
|
||||
</IconAndText2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 90%;
|
||||
|
||||
> div:first-child {
|
||||
border-bottom: black 1mm solid;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
78
src/routes/cv/comps/Experience.svelte
Normal file
78
src/routes/cv/comps/Experience.svelte
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<script>
|
||||
import placeholder from "$lib/zhen/cv-comps/400x400.png";
|
||||
import MakerspaceLogo from "$lib/zhen/cv-comps/MakerspaceLogo.png";
|
||||
import EposLogo from "$lib/zhen/cv-comps/EposLogo.png";
|
||||
import KhoraLogo from "$lib/zhen/cv-comps/KhoraLogo.jpg";
|
||||
import GrazperAILogo from "$lib/zhen/cv-comps/GrazperLogo.jpg";
|
||||
import YaaummaLogo from "$lib/zhen/cv-comps/YaaummaLogo.png";
|
||||
|
||||
import IconAndText from "./IconAndText.svelte";
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;"> Experience </b>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-item">
|
||||
<IconAndText logo={YaaummaLogo}>
|
||||
<b>Full-stack</b><br />
|
||||
Yaaumma<br />
|
||||
<i>Feb 2025 - Now</i>
|
||||
</IconAndText>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<IconAndText logo={GrazperAILogo}>
|
||||
<b>Data annotator</b><br />
|
||||
GrazperAI<br />
|
||||
<i>Jul 2024 - Now</i>
|
||||
</IconAndText>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<IconAndText logo={MakerspaceLogo}>
|
||||
<b>3D printer manager</b> - Volunteer<br />
|
||||
Makerspace - kildevæld Kulturcenter<br />
|
||||
<i>Nov 2023 - Now</i>
|
||||
</IconAndText>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<IconAndText logo={EposLogo}>
|
||||
<b>Machine Learning Engineer</b> - Short term intern<br />
|
||||
Product design department - Epos<br />
|
||||
<i>Apr 2024 - Apr 2024</i>
|
||||
</IconAndText>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<IconAndText logo={KhoraLogo}>
|
||||
<b>Assistant</b> - Short term intern<br />
|
||||
Khora Virtual Reality<br />
|
||||
<i>Oct 2020 - Oct 2020</i>
|
||||
</IconAndText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 90%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
& > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
}
|
||||
|
||||
.table-item {
|
||||
padding: 2mm;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0.25mm solid #000000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
src/routes/cv/comps/IconAndText.svelte
Normal file
43
src/routes/cv/comps/IconAndText.svelte
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script lang="ts">
|
||||
export let logo: string;
|
||||
export let logoWidths: string = "10%";
|
||||
|
||||
export let fontSize: string = "3mm";
|
||||
export let lineHeight: string = "3.1mm";
|
||||
|
||||
import { onMount } from "svelte";
|
||||
onMount(() => {
|
||||
imageCaption = logo.split(/(\\|\/)/g).pop();
|
||||
});
|
||||
|
||||
let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<img
|
||||
src={logo}
|
||||
class="bg-white w-10 h-10 object-contain rounded shadow"
|
||||
alt={imageCaption}
|
||||
width={logoWidths}
|
||||
/>
|
||||
<div style="line-height: {lineHeight};">
|
||||
<span style="font-size: {fontSize};">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
justify-items: start;
|
||||
|
||||
& > div {
|
||||
padding-left: 3mm;
|
||||
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
31
src/routes/cv/comps/IconAndText2.svelte
Normal file
31
src/routes/cv/comps/IconAndText2.svelte
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script lang="ts">
|
||||
export let logo: string;
|
||||
export let logoWidths: string = "35%";
|
||||
|
||||
|
||||
import { onMount } from "svelte";
|
||||
onMount(() => {
|
||||
imageCaption = logo.split(/(\\|\/)/g).pop();
|
||||
});
|
||||
|
||||
let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
|
||||
</script>
|
||||
|
||||
<div class=" h-full container flex">
|
||||
<div class="flex h-full w-6 items-center overflow-hidden rounded">
|
||||
<img
|
||||
src={logo}
|
||||
class=" w-6 h-6 object-cover shadow"
|
||||
alt={imageCaption}
|
||||
width={logoWidths}
|
||||
/>
|
||||
</div>
|
||||
<div class="px-1 ml-1 h-full text-[0.5rem]" >
|
||||
<span class="inline " >
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
75
src/routes/cv/comps/LeftTopDecor.svelte
Normal file
75
src/routes/cv/comps/LeftTopDecor.svelte
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<script>
|
||||
import RepeatedSkills from "./RepeatedSkills.svelte";
|
||||
|
||||
// Cedit
|
||||
import LinkToSource from "./LinkToSource.svelte";
|
||||
|
||||
export let Style = "";
|
||||
export let Class = "";
|
||||
</script>
|
||||
|
||||
<div class="container {Class}" style={Style}>
|
||||
<div class=" text-center bg-[var(--left-grid-bg-color)]">
|
||||
<RepeatedSkills
|
||||
textOverride={["Hello", "你好", "Hej"]}
|
||||
targetTextHeight={3}
|
||||
targetTextWidth={50}
|
||||
applyRotation={false}
|
||||
/>
|
||||
</div>
|
||||
<div />
|
||||
<div class="flex justify-center">
|
||||
<div class="w-[6cm]">
|
||||
<LinkToSource />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
transform: translate(-30mm, 7.5mm) rotate(-45deg);
|
||||
display: grid;
|
||||
justify-self: start;
|
||||
vertical-align: top;
|
||||
align-self: flex-start;
|
||||
|
||||
z-index: 0;
|
||||
|
||||
> div:nth-child(1) {
|
||||
//background-color: #2f559622;
|
||||
width: 100mm;
|
||||
height: 17.5mm;
|
||||
padding-bottom: 1mm;
|
||||
padding-top: 1mm;
|
||||
|
||||
// Text inside
|
||||
display: grid;
|
||||
place-content: center;
|
||||
border-bottom: var(--left-decor-line-color) dotted 0.5mm;
|
||||
border-top: var(--left-decor-line-color) dotted 0.5mm;
|
||||
|
||||
&:first-child {
|
||||
color: var(--left-decor-text-color);
|
||||
font-size: 3mm;
|
||||
//font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
padding-top: 4mm;
|
||||
//border-bottom: #4472c4 dashed 2mm;
|
||||
|
||||
// background-color: var(--left-grid-bg-color);
|
||||
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--left-decor-line-color) 70%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
background-position: bottom;
|
||||
background-size: 6mm 1.5mm;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/routes/cv/comps/LinkToSource.svelte
Normal file
76
src/routes/cv/comps/LinkToSource.svelte
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<script>
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="flex justify-center">
|
||||
<div class="corner-border-container p-1 m-1">
|
||||
<div class="flex">
|
||||
This CV was made using html, css and <a class="grid place-content-center" href="https://kit.svelte.dev/"><img src={svelteLogo} class="w-2 h-2" alt="SvelteKit logo"/></a>
|
||||
</div>
|
||||
Sources:
|
||||
<a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev/src/routes/zhen/cv/rev2/+page.svelte">CV source code</a>
|
||||
and
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1">My Website</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.corner-border-container {
|
||||
--length: 5px;
|
||||
--width: 1px;
|
||||
background-color: var(--left-grid-bg-color);
|
||||
background-image:
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
|
||||
background-size:
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length),
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length),
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length),
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length);
|
||||
background-position:
|
||||
top left,
|
||||
top left,
|
||||
top right,
|
||||
top right,
|
||||
bottom right,
|
||||
bottom right,
|
||||
bottom left,
|
||||
bottom left;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.container {
|
||||
z-index: 1;
|
||||
|
||||
font-size: 0.5rem;
|
||||
|
||||
//white-space: nowrap;
|
||||
|
||||
color: #777777;
|
||||
|
||||
* a {
|
||||
color: #3d6ddc;
|
||||
padding-left: 1mm;
|
||||
padding-right: 1mm;
|
||||
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
div:nth-child(2){
|
||||
padding-bottom: 2mm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
src/routes/cv/comps/LinkedInQR.svelte
Normal file
58
src/routes/cv/comps/LinkedInQR.svelte
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script>
|
||||
import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>LinkedIn</div>
|
||||
<div class="qrcode corner-border-container p-4">{@html QRCode}</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.corner-border-container {
|
||||
--length: 20px;
|
||||
--width: 4px;
|
||||
background-color: var(--left-grid-bg-color);
|
||||
background-image:
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
||||
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
|
||||
background-size:
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length),
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length),
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length),
|
||||
var(--length) var(--width),
|
||||
var(--width) var(--length);
|
||||
background-position:
|
||||
top left,
|
||||
top left,
|
||||
top right,
|
||||
top right,
|
||||
bottom right,
|
||||
bottom right,
|
||||
bottom left,
|
||||
bottom left;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.qrcode {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
& * {
|
||||
font-size: 7.5mm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
26
src/routes/cv/comps/NameAndImage.svelte
Normal file
26
src/routes/cv/comps/NameAndImage.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script lang="ts">
|
||||
import NamePlate from "./NamePlate.svelte";
|
||||
import selfie from "$lib/zhen/cv-comps/VRNerd.jpg"
|
||||
import zylveterSus from "$lib/zhen/cv-comps/zylveterSus.png"
|
||||
</script>
|
||||
|
||||
<div class="nameAndImageContainer">
|
||||
<NamePlate/>
|
||||
<div class="mt-4 w-48 h-48 overflow-hidden shadow-xl rounded-lg flex justify-center items-center">
|
||||
<img src={selfie} class="selfie-constraints object-cover" alt="Zhentao Wei"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.nameAndImageContainer {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.selfie-constraints{
|
||||
|
||||
max-width: 100%;
|
||||
|
||||
}
|
||||
</style>
|
||||
21
src/routes/cv/comps/NamePlate.svelte
Normal file
21
src/routes/cv/comps/NamePlate.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<div class="name-plate-container">
|
||||
<span style="text-align: center;">
|
||||
<b>
|
||||
Zhentao Wei
|
||||
</b><br/>
|
||||
(He/Him)
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.name-plate-container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 60%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid var(--left-line-color);
|
||||
}
|
||||
</style>
|
||||
70
src/routes/cv/comps/OtherContact.svelte
Normal file
70
src/routes/cv/comps/OtherContact.svelte
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Other
|
||||
</b>
|
||||
</div>
|
||||
<div class="table-display">
|
||||
<div class="table-item">
|
||||
<div>Itch.io</div>
|
||||
<a href="https://github.com/MagicBOTAlex">botalex.itch.io</a>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Github</div>
|
||||
<a href="https://botalex.itch.io/">@MagicBOTAlex</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid var(--left-line-color);
|
||||
}
|
||||
|
||||
.table-display {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-item {
|
||||
display: flex;
|
||||
justify-items: start;
|
||||
|
||||
width: 100%;
|
||||
border-bottom: 0.25mm solid #000000;
|
||||
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> div, > a {
|
||||
&:first-child {
|
||||
width: 35%;
|
||||
font-size: 4mm;
|
||||
|
||||
display: grid;
|
||||
place-content: center start;
|
||||
|
||||
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 65%;
|
||||
|
||||
font-size: 3.25mm;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
padding-left: 1mm;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
src/routes/cv/comps/Profile.svelte
Normal file
34
src/routes/cv/comps/Profile.svelte
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<div class="short-profile-container">
|
||||
<div class="flex gap-1 items-baseline">
|
||||
<b style="text-align:left;">
|
||||
About me
|
||||
</b>
|
||||
<div class="opacity-70 text-[0.5rem]">
|
||||
I know the languages listed above in the decor!
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
I love learning on my own. I've placed my education at the bottom of my CV.
|
||||
This is because everything I've learnt is on my own, and I refuse to give too much credit to my education.
|
||||
I encurage you to checkout which <span class="font-semibold">Open-source</span> projects I've worked on, on my <a href="https://github.com/MagicBOTAlex"><span class="text-blue-500 underline">github</span></a>.
|
||||
<br>
|
||||
<br>
|
||||
Other than my github, I've listed some projectss highlighted below. :)
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.short-profile-container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.short-profile-container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
</style>
|
||||
62
src/routes/cv/comps/RepeatedSkills.svelte
Normal file
62
src/routes/cv/comps/RepeatedSkills.svelte
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<script lang="ts">
|
||||
// Width of num chars and height nom of chars
|
||||
export let targetTextWidth: number;
|
||||
export let targetTextHeight: number;
|
||||
|
||||
export let applyRotation: boolean = true;
|
||||
|
||||
export let textOverride: string[] | undefined = undefined;
|
||||
|
||||
// Assign default value if textOverride is undefined
|
||||
let repeatingText : string[] = textOverride ?? [
|
||||
"C++",
|
||||
"C#",
|
||||
"ARDUINO",
|
||||
"PYTHON",
|
||||
"JAVA",
|
||||
"JAVASCRIPT",
|
||||
"TYPESCRIPT",
|
||||
"HTML",
|
||||
"CSS",
|
||||
];
|
||||
|
||||
function getRandomInt(max: number) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
function GrabRandomString() {
|
||||
let outString: string = "";
|
||||
while (outString.length < targetTextWidth) {
|
||||
outString +=
|
||||
repeatingText[
|
||||
getRandomInt(repeatingText.length)
|
||||
] + " ";
|
||||
}
|
||||
|
||||
return outString; // At about target size
|
||||
}
|
||||
</script>
|
||||
|
||||
<div {...$$restProps}>
|
||||
{#each { length: targetTextHeight } as _, i}
|
||||
<span class="{applyRotation ? "rotate45" : ""} SkillsText">
|
||||
{GrabRandomString()}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.SkillsText {
|
||||
text-align: start;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.rotate45 {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
</style>
|
||||
29
src/routes/cv/comps/ShortProfile.svelte
Normal file
29
src/routes/cv/comps/ShortProfile.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<div class="short-profile-container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Short profile
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
◾ Full-stack at Yaaumma <br>
|
||||
◾ "AI and data" at DTU. <br>
|
||||
◾ Working at <a class="underline" href="https://grazper.com/">GrazperAI</a> <br/>
|
||||
◾ Volunteer at Kildevæld Makerspace.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.short-profile-container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.short-profile-container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid var(--left-line-color);
|
||||
}
|
||||
</style>
|
||||
88
src/routes/cv/comps/TableOfProjects.svelte
Normal file
88
src/routes/cv/comps/TableOfProjects.svelte
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<div class="container">
|
||||
<div class="flex gap-1">
|
||||
<b style="text-align:left;">
|
||||
List of big projects
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-display">
|
||||
<div class="table-item">
|
||||
<div>Computer vision</div>
|
||||
<div>Implimented YoloV1 from scratch. (object detection)</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Arduino</div>
|
||||
<div>Built my own claw machine from scratch.</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>App dev</div>
|
||||
<div>Made an Doulingo'ish app for learning chinese.</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Open-source</div>
|
||||
<div>I contribute often to Open-source</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>PCB designing</div>
|
||||
<div>I am currently designing my own circuit board</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
|
||||
.table-display {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-item {
|
||||
display: flex;
|
||||
justify-items: start;
|
||||
|
||||
width: 100%;
|
||||
border-bottom: 0.25mm solid #000000;
|
||||
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> div, > a {
|
||||
color: #000000;
|
||||
|
||||
&:first-child {
|
||||
width: 30%;
|
||||
font-size: 4mm;
|
||||
|
||||
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