My CV rev2 progress backup
This commit is contained in:
parent
2e7a0d2a91
commit
8678c084e8
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -90,7 +90,7 @@
|
||||||
<div class="grid gap-4 p-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">
|
<div class="grid gap-4 p-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">
|
||||||
<FrontFold Title="Alex / Zhen" Checked={true}>
|
<FrontFold Title="Alex / Zhen" Checked={true}>
|
||||||
<p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
|
<p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
|
||||||
<p>Here's my CV: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
||||||
</FrontFold>
|
</FrontFold>
|
||||||
<FrontFold Title="Sveske / Benjamin">
|
<FrontFold Title="Sveske / Benjamin">
|
||||||
<p>Hi, I use Arch, btw.</p>
|
<p>Hi, I use Arch, btw.</p>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<div class="short-profile-container">
|
||||||
|
<div>
|
||||||
|
<b style="text-align:left;">
|
||||||
|
Biggest flex
|
||||||
|
</b>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Me and my small group of devs has won each and every gamejam, which we have participated in. <br/>
|
||||||
|
<h1 style="font-size: 0.75rem; color: grey;">*Gamejams that had competitions.</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script>
|
||||||
|
export let Style = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container" style="{Style}">
|
||||||
|
<div/>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
Thank you! ❤
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.container {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(40.2mm, 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, #4472c4 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: #2f5496;
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
import Contact from "./Contact.svelte";
|
||||||
|
import OtherContact from "./OtherContact.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Contact/>
|
||||||
|
<OtherContact/>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<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 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: 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>
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<script>
|
||||||
|
import placeholder from "$lib/zhen/cv-comps/400x400.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 DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.png"
|
||||||
|
|
||||||
|
import IconAndText from "./IconAndText.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<b style="text-align:left;">
|
||||||
|
Education
|
||||||
|
</b>
|
||||||
|
</div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="table-item">
|
||||||
|
<IconAndText logo={DTU_Logo}>
|
||||||
|
<b>University - Bacholor</b><br>
|
||||||
|
Technical University of Denmark<br>
|
||||||
|
<i>Sep 2024 - Now</i>
|
||||||
|
</IconAndText>
|
||||||
|
</div>
|
||||||
|
<div class="table-item">
|
||||||
|
<IconAndText logo={NextLogo}>
|
||||||
|
<b>Gymnasium/Collage - HTX</b><br>
|
||||||
|
NEXT-Mediegymnasiet: Computer science<br>
|
||||||
|
<i>May 2021 - Now</i>
|
||||||
|
</IconAndText>
|
||||||
|
</div>
|
||||||
|
<div class="table-item">
|
||||||
|
<IconAndText logo={SasLogo}>
|
||||||
|
<b>SAS Master class</b><br>
|
||||||
|
4-week project about SAS: OnDemand and SAS: Viya <br>
|
||||||
|
<i>Dec 2023 - Dec 2023</i>
|
||||||
|
</IconAndText>
|
||||||
|
</div>
|
||||||
|
<div class="table-item">
|
||||||
|
<IconAndText logo={EmphasysLogo}>
|
||||||
|
<b>Emphasys Centre - Erasmus+</b><br>
|
||||||
|
2 weeks of Unity VR <br>
|
||||||
|
<i>Oct 2023 - Oct 2023</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;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-item {
|
||||||
|
padding: 2mm;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-items: start;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 0.25mm solid #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<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 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={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;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-item {
|
||||||
|
padding: 2mm;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 0.25mm solid #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -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} 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;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
padding-left: 3mm;
|
||||||
|
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
border-radius: 2.5mm;
|
||||||
|
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<script>
|
||||||
|
import RepeatedSkills from "./RepeatedSkills.svelte";
|
||||||
|
|
||||||
|
export let Style = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container" style="{Style}">
|
||||||
|
<div>
|
||||||
|
<RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/>
|
||||||
|
</div>
|
||||||
|
<div/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.container {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-31.9mm, 0mm) 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;
|
||||||
|
|
||||||
|
// Text inside
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
border: #4472c4 dotted 1mm;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
color: #4472c4;
|
||||||
|
font-size: 3mm;
|
||||||
|
//font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> div:nth-child(2) {
|
||||||
|
padding-top: 5mm;
|
||||||
|
//border-bottom: #4472c4 dashed 2mm;
|
||||||
|
|
||||||
|
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
|
||||||
|
background-position: bottom;
|
||||||
|
background-size: 6mm 1.5mm;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script>
|
||||||
|
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
This CV was made using html, css and <a class="grid place-content-center" href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a>
|
||||||
|
</div>
|
||||||
|
<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="https://dev.deprived.dev/zhen/cv/rev1?hideOnPrint=1">My Website</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.container {
|
||||||
|
z-index: 1;
|
||||||
|
padding-left: 2mm;
|
||||||
|
|
||||||
|
//white-space: nowrap;
|
||||||
|
|
||||||
|
color: #777777;
|
||||||
|
|
||||||
|
* a {
|
||||||
|
color: #3d6ddc;
|
||||||
|
padding-left: 1mm;
|
||||||
|
padding-right: 1mm;
|
||||||
|
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:first-child {
|
||||||
|
display: flex;
|
||||||
|
place-content: center;
|
||||||
|
justify-content: start;
|
||||||
|
|
||||||
|
a:nth-child(1) > img {
|
||||||
|
width: 5mm;
|
||||||
|
|
||||||
|
padding-left: 1mm;
|
||||||
|
padding-right: 1mm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-child(2){
|
||||||
|
padding-bottom: 2mm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div>LinkedIn</div>
|
||||||
|
<span class="qrcode">{@html QRCode}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.qrcode {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
|
||||||
|
& * {
|
||||||
|
font-size: 7.5mm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import NamePlate from "./NamePlate.svelte";
|
||||||
|
import selfie from "$lib/zhen/cv-comps/zhenSelfie.jpg"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="nameAndImageContainer">
|
||||||
|
<NamePlate/>
|
||||||
|
<img src={selfie} class="selfie-constraints" alt="Zhentao Wei"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.nameAndImageContainer {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selfie-constraints{
|
||||||
|
padding-top: 2.5mm;
|
||||||
|
|
||||||
|
max-width: 65%;
|
||||||
|
border-radius: 5mm;
|
||||||
|
|
||||||
|
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -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 black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<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 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: 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>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<div class="short-profile-container">
|
||||||
|
<div>
|
||||||
|
<b style="text-align:left;">
|
||||||
|
About me
|
||||||
|
</b>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
I'm a 20-year-old with a deep passion for programming and
|
||||||
|
technology.
|
||||||
|
Most of my knowledge is self-taught from many places on the
|
||||||
|
internet, so university hasn't helped much. I encourage you to browse my LinkedIn, since I
|
||||||
|
periodically post my hobby projects on there, and my skills are
|
||||||
|
described further in depth.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<div class="short-profile-container">
|
||||||
|
<div>
|
||||||
|
<b style="text-align:left;">
|
||||||
|
Short profile
|
||||||
|
</b>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
◾ "Artificial intelligence and data" student at DTU.
|
||||||
|
◾ 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 black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<script lang="ts">
|
||||||
|
// Left side
|
||||||
|
import NameAndImage from "../CompsRev2/NameAndImage.svelte";
|
||||||
|
import ShortProfile from "../CompsRev2/ShortProfile.svelte"
|
||||||
|
import CombinedContacts from "../CompsRev2/CombinedContacts.svelte"
|
||||||
|
import LinkedInQR from "../CompsRev2/LinkedInQR.svelte";
|
||||||
|
|
||||||
|
// Right side
|
||||||
|
import Profile from "../CompsRev2/Profile.svelte";
|
||||||
|
import Education from "../CompsRev2/Education.svelte";
|
||||||
|
import Experience from "../CompsRev2/Experience.svelte";
|
||||||
|
import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
|
||||||
|
|
||||||
|
// Decorations
|
||||||
|
import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
|
||||||
|
import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte";
|
||||||
|
import AlexWatermark from "../CompsRev2/AlexWatermark.svelte";
|
||||||
|
import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte";
|
||||||
|
|
||||||
|
// Cedit
|
||||||
|
import LinkToSource from "../CompsRev2/LinkToSource.svelte";
|
||||||
|
|
||||||
|
// Discord embed
|
||||||
|
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
|
||||||
|
|
||||||
|
// Print detection setup
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
onMount(() => {
|
||||||
|
// Check if the query parameter exists in the URL
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const hideOnPrintParam = urlParams.get('hideOnPrint');
|
||||||
|
|
||||||
|
// If the query parameter is not detected, reload the page with the parameter added
|
||||||
|
if (!hideOnPrintParam) {
|
||||||
|
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function getFormattedDate(): string {
|
||||||
|
const date = new Date();
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const year = date.getFullYear();
|
||||||
|
|
||||||
|
return `${day}-${month}-${year}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<title>Zhentao Wei's CV {getFormattedDate()}</title>
|
||||||
|
<meta content="Zhentao Wei's Epos CV" property="og:title" />
|
||||||
|
<meta content="This CV is made completely with html + css + js" property="og:description" />
|
||||||
|
<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>
|
||||||
|
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">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 :(
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cv-container-container include-in-print">
|
||||||
|
<div class="cv-container sections decorations">
|
||||||
|
<div id="left-section">
|
||||||
|
<LeftTopDecor Style="pointer-events: none;"/>
|
||||||
|
<BottomRightDecor Style="pointer-events: none;"/>
|
||||||
|
<div>
|
||||||
|
<NameAndImage/>
|
||||||
|
<ShortProfile/>
|
||||||
|
<CombinedContacts/>
|
||||||
|
<LinkedInQR/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="leftSectionSeperator"><div/></div>
|
||||||
|
<div id="right-section">
|
||||||
|
<AlexWatermark Style="pointer-events: none;"/>
|
||||||
|
<div id="TopRightSkillsText">
|
||||||
|
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
|
||||||
|
</div>
|
||||||
|
<div id="Credit">
|
||||||
|
<LinkToSource/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Profile/>
|
||||||
|
<BiggestFlex/>
|
||||||
|
<Experience/>
|
||||||
|
<Education/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.cv-info-container {
|
||||||
|
height: 40mm;
|
||||||
|
background-color: #2b2a2a;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.keyboard-key {
|
||||||
|
display: inline;
|
||||||
|
padding-left: 1mm;
|
||||||
|
padding-right: 1mm;
|
||||||
|
|
||||||
|
border-radius: 2mm;
|
||||||
|
|
||||||
|
background-color: #3e3d3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 80%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.hide-on-print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-container-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-container-container * {
|
||||||
|
color: black; // Set all text black
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-container {
|
||||||
|
width: 210mm;
|
||||||
|
height: 297mm;
|
||||||
|
|
||||||
|
background-color: #eeeeee;
|
||||||
|
|
||||||
|
overflow: visible;
|
||||||
|
display: flex;
|
||||||
|
padding: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.include-in-print { &, & * {
|
||||||
|
-webkit-print-color-adjust:exact !important;
|
||||||
|
print-color-adjust:exact !important;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.sections {
|
||||||
|
// Shared between sections
|
||||||
|
> div {
|
||||||
|
display: grid;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
// Needed to cuttoff the extra decoration
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left-section{
|
||||||
|
background-color: #bdd6ee;
|
||||||
|
width: calc(100% / 3 * 1);
|
||||||
|
|
||||||
|
> div:last-child {
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
|
||||||
|
padding-top: 30mm;
|
||||||
|
padding-bottom: 30mm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-section{
|
||||||
|
width: calc(100% / 3 * 2);
|
||||||
|
|
||||||
|
> div:last-child {
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
row-gap: 6mm;
|
||||||
|
|
||||||
|
padding-top: 45mm;
|
||||||
|
padding-bottom: 30mm;
|
||||||
|
|
||||||
|
// Disable interactivity for padding
|
||||||
|
pointer-events:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.decorations {
|
||||||
|
#leftSectionSeperator{
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: visible;
|
||||||
|
> div {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 5mm;
|
||||||
|
z-index: 1;
|
||||||
|
background: linear-gradient(90deg, #3636364f, #00000000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
#TopRightSkillsText {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
place-content: center;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
height: 50mm;
|
||||||
|
|
||||||
|
mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
|
||||||
|
|
||||||
|
color: rgb(190, 190, 190);
|
||||||
|
font-family: 'CozetteVector';
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Credit {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue