Changed photo to vr setup
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 23s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 23s
This commit is contained in:
parent
72811eacc4
commit
7fd7682f98
22 changed files with 1115 additions and 2 deletions
BIN
src/lib/zhen/cv-comps/VRNerd.jpg
Normal file
BIN
src/lib/zhen/cv-comps/VRNerd.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 673 KiB |
23
src/routes/zhen/cv/CompsRev3/AlexWatermark.svelte
Normal file
23
src/routes/zhen/cv/CompsRev3/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>
|
27
src/routes/zhen/cv/CompsRev3/BiggestFlex.svelte
Normal file
27
src/routes/zhen/cv/CompsRev3/BiggestFlex.svelte
Normal file
|
@ -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>
|
53
src/routes/zhen/cv/CompsRev3/BottomRightDecor.svelte
Normal file
53
src/routes/zhen/cv/CompsRev3/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,
|
||||||
|
#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>
|
||||||
|
|
7
src/routes/zhen/cv/CompsRev3/CombinedContacts.svelte
Normal file
7
src/routes/zhen/cv/CompsRev3/CombinedContacts.svelte
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
import Contact from "./Contact.svelte";
|
||||||
|
import OtherContact from "./OtherContact.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Contact/>
|
||||||
|
<OtherContact/>
|
76
src/routes/zhen/cv/CompsRev3/Contact.svelte
Normal file
76
src/routes/zhen/cv/CompsRev3/Contact.svelte
Normal file
|
@ -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>
|
56
src/routes/zhen/cv/CompsRev3/Education.svelte
Normal file
56
src/routes/zhen/cv/CompsRev3/Education.svelte
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
<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">
|
||||||
|
<div>
|
||||||
|
<b style="text-align:left;">
|
||||||
|
Education
|
||||||
|
</b>
|
||||||
|
</div>
|
||||||
|
<div class="imagesContainer flex justify-center p-2 gap-4" id="balls">
|
||||||
|
<IconAndText2 logo={DTU_Logo}>
|
||||||
|
<b>DTU</b><br/>
|
||||||
|
<p style="font-size: 0.6rem;">
|
||||||
|
Artificial intelligence
|
||||||
|
</p>
|
||||||
|
</IconAndText2>
|
||||||
|
<IconAndText2 logo={NextLogo}>
|
||||||
|
<b>Next</b><br/>
|
||||||
|
<p style="font-size: 0.6rem;">
|
||||||
|
Computer science
|
||||||
|
</p>
|
||||||
|
</IconAndText2>
|
||||||
|
<IconAndText2 logo={SasLogo}>
|
||||||
|
<b>Master class</b><br/>
|
||||||
|
<p style="font-size: 0.6rem;">
|
||||||
|
SAS Programming
|
||||||
|
</p>
|
||||||
|
</IconAndText2>
|
||||||
|
<IconAndText2 logo={EmphasysLogo}>
|
||||||
|
<b>Emphasys center</b><br/>
|
||||||
|
<p style="font-size: 0.6rem;">
|
||||||
|
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>
|
72
src/routes/zhen/cv/CompsRev3/Experience.svelte
Normal file
72
src/routes/zhen/cv/CompsRev3/Experience.svelte
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-item {
|
||||||
|
padding: 2mm;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 0.25mm solid #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
43
src/routes/zhen/cv/CompsRev3/IconAndText.svelte
Normal file
43
src/routes/zhen/cv/CompsRev3/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="" 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>
|
44
src/routes/zhen/cv/CompsRev3/IconAndText2.svelte
Normal file
44
src/routes/zhen/cv/CompsRev3/IconAndText2.svelte
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let logo:string;
|
||||||
|
export let logoWidths: string = "35%";
|
||||||
|
|
||||||
|
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 {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
margin-top: 2mm;
|
||||||
|
padding-left: 2mm;
|
||||||
|
padding-bottom: 1mm;
|
||||||
|
|
||||||
|
text-align: start;
|
||||||
|
|
||||||
|
border-left: 0.5mm solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
border-radius: 2.5mm;
|
||||||
|
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
53
src/routes/zhen/cv/CompsRev3/LeftTopDecor.svelte
Normal file
53
src/routes/zhen/cv/CompsRev3/LeftTopDecor.svelte
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
<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(-25mm, 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;
|
||||||
|
padding-bottom: 1mm;
|
||||||
|
|
||||||
|
// Text inside
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
border-bottom: #4472c4 dotted 0.5mm;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
color: #4472c4;
|
||||||
|
font-size: 3mm;
|
||||||
|
//font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> div:nth-child(2) {
|
||||||
|
padding-top: 4mm;
|
||||||
|
//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>
|
51
src/routes/zhen/cv/CompsRev3/LinkToSource.svelte
Normal file
51
src/routes/zhen/cv/CompsRev3/LinkToSource.svelte
Normal file
|
@ -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>
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.container {
|
||||||
|
z-index: 1;
|
||||||
|
padding-left: 2mm;
|
||||||
|
|
||||||
|
font-size: 0.75rem;
|
||||||
|
|
||||||
|
//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>
|
24
src/routes/zhen/cv/CompsRev3/LinkedInQR.svelte
Normal file
24
src/routes/zhen/cv/CompsRev3/LinkedInQR.svelte
Normal file
|
@ -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>
|
26
src/routes/zhen/cv/CompsRev3/NameAndImage.svelte
Normal file
26
src/routes/zhen/cv/CompsRev3/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/zhen/cv/CompsRev3/NamePlate.svelte
Normal file
21
src/routes/zhen/cv/CompsRev3/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 black;
|
||||||
|
}
|
||||||
|
</style>
|
71
src/routes/zhen/cv/CompsRev3/OtherContact.svelte
Normal file
71
src/routes/zhen/cv/CompsRev3/OtherContact.svelte
Normal file
|
@ -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>
|
31
src/routes/zhen/cv/CompsRev3/Profile.svelte
Normal file
31
src/routes/zhen/cv/CompsRev3/Profile.svelte
Normal file
|
@ -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>
|
62
src/routes/zhen/cv/CompsRev3/RepeatedSkills.svelte
Normal file
62
src/routes/zhen/cv/CompsRev3/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>
|
28
src/routes/zhen/cv/CompsRev3/ShortProfile.svelte
Normal file
28
src/routes/zhen/cv/CompsRev3/ShortProfile.svelte
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
<div class="short-profile-container">
|
||||||
|
<div>
|
||||||
|
<b style="text-align:left;">
|
||||||
|
Short profile
|
||||||
|
</b>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
◾ "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 black;
|
||||||
|
}
|
||||||
|
</style>
|
88
src/routes/zhen/cv/CompsRev3/TableOfProjects.svelte
Normal file
88
src/routes/zhen/cv/CompsRev3/TableOfProjects.svelte
Normal file
|
@ -0,0 +1,88 @@
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<b style="text-align:left;">
|
||||||
|
List of big projects
|
||||||
|
</b>
|
||||||
|
</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 with 2 dimentions of movement</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-item">
|
||||||
|
<div>App dev</div>
|
||||||
|
<div>Made an Doulingo'ish app for learning chinese in 9 days</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-item">
|
||||||
|
<div>Open-source help</div>
|
||||||
|
<div>Contributed in multiple Open-source projects on github</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-item">
|
||||||
|
<div>PCB designing</div>
|
||||||
|
<div>I am currently designing my own circuit board</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex" style="font-size: 0.75rem; color: sgray; align-content: start; width: 100%;">
|
||||||
|
<p>
|
||||||
|
If you want proof or want to know about other projects. Contact me!
|
||||||
|
</p>
|
||||||
|
</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>
|
|
@ -35,7 +35,7 @@
|
||||||
if (!hideOnPrintParam) {
|
if (!hideOnPrintParam) {
|
||||||
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
function getFormattedDate(): string {
|
function getFormattedDate(): string {
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
|
|
257
src/routes/zhen/cv/rev3/+page.svelte
Normal file
257
src/routes/zhen/cv/rev3/+page.svelte
Normal file
|
@ -0,0 +1,257 @@
|
||||||
|
<script lang="ts">
|
||||||
|
// Left side
|
||||||
|
import NameAndImage from "../CompsRev3/NameAndImage.svelte";
|
||||||
|
import ShortProfile from "../CompsRev3/ShortProfile.svelte";
|
||||||
|
import CombinedContacts from "../CompsRev3/CombinedContacts.svelte";
|
||||||
|
import LinkedInQR from "../CompsRev3/LinkedInQR.svelte";
|
||||||
|
|
||||||
|
// Right side
|
||||||
|
import Profile from "../CompsRev3/Profile.svelte";
|
||||||
|
import Education from "../CompsRev3/Education.svelte";
|
||||||
|
import Experience from "../CompsRev3/Experience.svelte";
|
||||||
|
import BiggestFlex from "../CompsRev3/BiggestFlex.svelte";
|
||||||
|
import TableOfProjects from "../CompsRev3/TableOfProjects.svelte";
|
||||||
|
|
||||||
|
// Decorations
|
||||||
|
import LeftTopDecor from "../CompsRev3/LeftTopDecor.svelte";
|
||||||
|
import BottomRightDecor from "../CompsRev3/BottomRightDecor.svelte";
|
||||||
|
import AlexWatermark from "../CompsRev3/AlexWatermark.svelte";
|
||||||
|
import RepeatedSkills from "../CompsRev3/RepeatedSkills.svelte";
|
||||||
|
|
||||||
|
// Cedit
|
||||||
|
import LinkToSource from "../CompsRev3/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 CV" property="og:title" />
|
||||||
|
<meta
|
||||||
|
content="This CV is made completely with svelte + 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="NotoSans 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 id="right-section">
|
||||||
|
<AlexWatermark Style="pointer-events: none;" />
|
||||||
|
<div id="TopRightSkillsText">
|
||||||
|
<RepeatedSkills
|
||||||
|
class="Cozette"
|
||||||
|
targetTextHeight={30}
|
||||||
|
targetTextWidth={75}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="Credit">
|
||||||
|
<LinkToSource />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Profile/>
|
||||||
|
<BiggestFlex />
|
||||||
|
<TableOfProjects />
|
||||||
|
<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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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…
Add table
Add a link
Reference in a new issue