There's complexity in simplicity:
This commit is contained in:
parent
73c366e0f0
commit
5f78e8bf04
95 changed files with 9624 additions and 10843 deletions
|
|
@ -1,17 +1,17 @@
|
|||
<script lang="ts">
|
||||
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte"
|
||||
import AboutMe from "./Comps/AboutMe.svelte"
|
||||
</script>
|
||||
|
||||
<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
|
||||
<TopAnimatedBackground/>
|
||||
<ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
|
||||
<AboutMe/>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);">
|
||||
<ZhenInformatikTimeline/>
|
||||
</ParallaxLayer>
|
||||
<script lang="ts">
|
||||
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte"
|
||||
import AboutMe from "./Comps/AboutMe.svelte"
|
||||
</script>
|
||||
|
||||
<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
|
||||
<TopAnimatedBackground/>
|
||||
<ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
|
||||
<AboutMe/>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);">
|
||||
<ZhenInformatikTimeline/>
|
||||
</ParallaxLayer>
|
||||
</Parallax>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
<div class="public-cv-container">
|
||||
<h1 class="bottom-dotted-line">Public CVs</h1>
|
||||
<div style="padding-left: 0.5vw; margin-top: -1vh;">
|
||||
<b>Rev1: </b><a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">Rev1.pdf</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.public-cv-container {
|
||||
padding-left: 10vw;
|
||||
padding-top: 5vh;
|
||||
width: 79vw;
|
||||
}
|
||||
|
||||
.bottom-dotted-line {
|
||||
border-bottom: 4px dotted rgb(178, 178, 178);
|
||||
}
|
||||
<div class="public-cv-container">
|
||||
<h1 class="bottom-dotted-line">Public CVs</h1>
|
||||
<div style="padding-left: 0.5vw; margin-top: -1vh;">
|
||||
<b>Rev1: </b><a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">Rev1.pdf</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.public-cv-container {
|
||||
padding-left: 10vw;
|
||||
padding-top: 5vh;
|
||||
width: 79vw;
|
||||
}
|
||||
|
||||
.bottom-dotted-line {
|
||||
border-bottom: 4px dotted rgb(178, 178, 178);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,229 +1,229 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { Vector2 } from "./../Utils/Vector2";
|
||||
import TopNameTextPlate from "./TopNameTextPlate.svelte";
|
||||
//import { throttle } from "./../Utils/Throttle";
|
||||
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
|
||||
// Params
|
||||
let mouseMoveScale: number = 0.25;
|
||||
let targetTextLenght: number = 100;
|
||||
|
||||
// Site variables
|
||||
let mousePos: Vector2;
|
||||
|
||||
// Element binded variables
|
||||
let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
|
||||
|
||||
let windowWidth = 0;
|
||||
let windowHeight = 0;
|
||||
|
||||
let screenCenter: Vector2;
|
||||
|
||||
let StartPageAnimated: Element | null;
|
||||
let windowRef: Window;
|
||||
|
||||
function onMouseMoved(event: MouseEvent) {
|
||||
mousePos = new Vector2(event.clientX, event.clientY);
|
||||
|
||||
updateAnimation(mousePos);
|
||||
}
|
||||
|
||||
function updateAnimation(mousePos: Vector2) {
|
||||
let mouseRelativePos = mousePos.Sub(screenCenter);
|
||||
mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
|
||||
|
||||
//console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
windowRef = window;
|
||||
|
||||
const updateDimensions = () => {
|
||||
windowWidth = windowRef.innerWidth;
|
||||
windowHeight = windowRef.innerHeight;
|
||||
|
||||
screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
|
||||
|
||||
//console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
|
||||
};
|
||||
|
||||
updateDimensions(); // On first pass
|
||||
|
||||
windowRef.addEventListener("resize", updateDimensions);
|
||||
|
||||
const RevertToOrigin = () => {
|
||||
if (
|
||||
navigator.userAgent.search(/gecko/i) > 0 &&
|
||||
StartPageAnimated !== null
|
||||
) {
|
||||
StartPageAnimated.classList.add("FirefoxSmoothTranition");
|
||||
}
|
||||
updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
|
||||
};
|
||||
document.documentElement.addEventListener("mouseleave", RevertToOrigin);
|
||||
|
||||
const RemoveFirefoxSmoothTranition = () => {
|
||||
if (
|
||||
navigator.userAgent.search(/gecko/i) > 0 &&
|
||||
StartPageAnimated !== null
|
||||
) {
|
||||
StartPageAnimated.classList.remove("FirefoxSmoothTranition");
|
||||
}
|
||||
};
|
||||
document.documentElement.addEventListener(
|
||||
"mouseenter",
|
||||
RemoveFirefoxSmoothTranition,
|
||||
);
|
||||
|
||||
return () => {
|
||||
windowRef.removeEventListener("resize", updateDimensions);
|
||||
};
|
||||
});
|
||||
|
||||
const programmingLanguages: string[] = [
|
||||
"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 < targetTextLenght) {
|
||||
outString +=
|
||||
programmingLanguages[
|
||||
getRandomInt(programmingLanguages.length)
|
||||
] + " ";
|
||||
}
|
||||
|
||||
return outString; // At about target size
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:mousemove={onMouseMoved} />
|
||||
|
||||
|
||||
<ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
|
||||
<div
|
||||
class="StartPageAnimated"
|
||||
bind:this={StartPageAnimated}
|
||||
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
|
||||
>
|
||||
{#each { length: 100 } as _, i}
|
||||
<span class="rotate45 SkillsText">
|
||||
{GrabRandomString()}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer rate={0} offset={0.25} span={0}>
|
||||
<TopNameTextPlate />
|
||||
</ParallaxLayer>
|
||||
|
||||
<!-- <div class="StartPageContainer">
|
||||
<div class="TopOverlay">
|
||||
<TopNameTextPlate/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="StartPageAnimated"
|
||||
id="StartPageAnimated"
|
||||
bind:this={StartPageAnimated}
|
||||
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
|
||||
>
|
||||
{#each {length: 100} as _, i}
|
||||
|
||||
<span
|
||||
class="rotate45 SkillsText"
|
||||
>
|
||||
{GrabRandomString()}
|
||||
</span
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div id="DummyDiv" class="FirefoxSmoothTranition StartPageContainer TopOverlay" style="display: none !important;" />
|
||||
|
||||
<style>
|
||||
.StartPageContainer {
|
||||
/* height: 40vh; */
|
||||
|
||||
background-color: burlywood;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.StartPageAnimated {
|
||||
/* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
|
||||
background-color: #131313;
|
||||
position: absolute;
|
||||
height: 150vh;
|
||||
width: 150vw;
|
||||
|
||||
padding: 0;
|
||||
|
||||
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
|
||||
-moz-transition: none;
|
||||
|
||||
left: -25vw;
|
||||
top: -50vh;
|
||||
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.FirefoxSmoothTranition {
|
||||
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
|
||||
-moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
|
||||
}
|
||||
|
||||
.SkillsText {
|
||||
font-family: "CozetteVector";
|
||||
|
||||
text-align: start;
|
||||
font-size: x-large;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
width: 2rem;
|
||||
|
||||
color: rgb(66, 66, 66);
|
||||
}
|
||||
|
||||
.TopOverlay {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rotate45 {
|
||||
transform: rotate(-45deg); /* Rotate the element by 45 degrees */
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { Vector2 } from "./../Utils/Vector2";
|
||||
import TopNameTextPlate from "./TopNameTextPlate.svelte";
|
||||
//import { throttle } from "./../Utils/Throttle";
|
||||
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
|
||||
// Params
|
||||
let mouseMoveScale: number = 0.25;
|
||||
let targetTextLenght: number = 100;
|
||||
|
||||
// Site variables
|
||||
let mousePos: Vector2;
|
||||
|
||||
// Element binded variables
|
||||
let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
|
||||
|
||||
let windowWidth = 0;
|
||||
let windowHeight = 0;
|
||||
|
||||
let screenCenter: Vector2;
|
||||
|
||||
let StartPageAnimated: Element | null;
|
||||
let windowRef: Window;
|
||||
|
||||
function onMouseMoved(event: MouseEvent) {
|
||||
mousePos = new Vector2(event.clientX, event.clientY);
|
||||
|
||||
updateAnimation(mousePos);
|
||||
}
|
||||
|
||||
function updateAnimation(mousePos: Vector2) {
|
||||
let mouseRelativePos = mousePos.Sub(screenCenter);
|
||||
mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
|
||||
|
||||
//console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
windowRef = window;
|
||||
|
||||
const updateDimensions = () => {
|
||||
windowWidth = windowRef.innerWidth;
|
||||
windowHeight = windowRef.innerHeight;
|
||||
|
||||
screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
|
||||
|
||||
//console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
|
||||
};
|
||||
|
||||
updateDimensions(); // On first pass
|
||||
|
||||
windowRef.addEventListener("resize", updateDimensions);
|
||||
|
||||
const RevertToOrigin = () => {
|
||||
if (
|
||||
navigator.userAgent.search(/gecko/i) > 0 &&
|
||||
StartPageAnimated !== null
|
||||
) {
|
||||
StartPageAnimated.classList.add("FirefoxSmoothTranition");
|
||||
}
|
||||
updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
|
||||
};
|
||||
document.documentElement.addEventListener("mouseleave", RevertToOrigin);
|
||||
|
||||
const RemoveFirefoxSmoothTranition = () => {
|
||||
if (
|
||||
navigator.userAgent.search(/gecko/i) > 0 &&
|
||||
StartPageAnimated !== null
|
||||
) {
|
||||
StartPageAnimated.classList.remove("FirefoxSmoothTranition");
|
||||
}
|
||||
};
|
||||
document.documentElement.addEventListener(
|
||||
"mouseenter",
|
||||
RemoveFirefoxSmoothTranition,
|
||||
);
|
||||
|
||||
return () => {
|
||||
windowRef.removeEventListener("resize", updateDimensions);
|
||||
};
|
||||
});
|
||||
|
||||
const programmingLanguages: string[] = [
|
||||
"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 < targetTextLenght) {
|
||||
outString +=
|
||||
programmingLanguages[
|
||||
getRandomInt(programmingLanguages.length)
|
||||
] + " ";
|
||||
}
|
||||
|
||||
return outString; // At about target size
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:mousemove={onMouseMoved} />
|
||||
|
||||
|
||||
<ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
|
||||
<div
|
||||
class="StartPageAnimated"
|
||||
bind:this={StartPageAnimated}
|
||||
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
|
||||
>
|
||||
{#each { length: 100 } as _, i}
|
||||
<span class="rotate45 SkillsText">
|
||||
{GrabRandomString()}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer rate={0} offset={0.25} span={0}>
|
||||
<TopNameTextPlate />
|
||||
</ParallaxLayer>
|
||||
|
||||
<!-- <div class="StartPageContainer">
|
||||
<div class="TopOverlay">
|
||||
<TopNameTextPlate/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="StartPageAnimated"
|
||||
id="StartPageAnimated"
|
||||
bind:this={StartPageAnimated}
|
||||
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
|
||||
>
|
||||
{#each {length: 100} as _, i}
|
||||
|
||||
<span
|
||||
class="rotate45 SkillsText"
|
||||
>
|
||||
{GrabRandomString()}
|
||||
</span
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div id="DummyDiv" class="FirefoxSmoothTranition StartPageContainer TopOverlay" style="display: none !important;" />
|
||||
|
||||
<style>
|
||||
.StartPageContainer {
|
||||
/* height: 40vh; */
|
||||
|
||||
background-color: burlywood;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.StartPageAnimated {
|
||||
/* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
|
||||
background-color: #131313;
|
||||
position: absolute;
|
||||
height: 150vh;
|
||||
width: 150vw;
|
||||
|
||||
padding: 0;
|
||||
|
||||
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
|
||||
-moz-transition: none;
|
||||
|
||||
left: -25vw;
|
||||
top: -50vh;
|
||||
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.FirefoxSmoothTranition {
|
||||
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
|
||||
-moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
|
||||
}
|
||||
|
||||
.SkillsText {
|
||||
font-family: "CozetteVector";
|
||||
|
||||
text-align: start;
|
||||
font-size: x-large;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
width: 2rem;
|
||||
|
||||
color: rgb(66, 66, 66);
|
||||
}
|
||||
|
||||
.TopOverlay {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rotate45 {
|
||||
transform: rotate(-45deg); /* Rotate the element by 45 degrees */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,57 @@
|
|||
<script lang="ts">
|
||||
import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div style="flex-grow: 1;" />
|
||||
<div class="TextContainer">
|
||||
<span class="NamePlateText" >
|
||||
Zhentao Wei
|
||||
<br/>
|
||||
<p class="NickNameText">Alex</p>
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex-grow: 2;" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.TextContainer{
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
|
||||
/* background-color: aliceblue; */
|
||||
background-color: rgba(45, 45, 45, 0.645);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 20px;
|
||||
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
.NamePlateText{
|
||||
/* font-family: 'CozetteVector'; */
|
||||
text-align: left;
|
||||
font-size: 300%;
|
||||
color: rgb(225, 225, 225);
|
||||
|
||||
border-left: 0.5rem solid rgb(88, 198, 82);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.NickNameText{
|
||||
font-size: 75%;
|
||||
margin: 0;
|
||||
margin-top: -1rem;
|
||||
|
||||
color: rgb(99, 99, 99);
|
||||
}
|
||||
<script lang="ts">
|
||||
import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div style="flex-grow: 1;" />
|
||||
<div class="TextContainer">
|
||||
<span class="NamePlateText" >
|
||||
Zhentao Wei
|
||||
<br/>
|
||||
<p class="NickNameText">Alex</p>
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex-grow: 2;" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.TextContainer{
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
|
||||
/* background-color: aliceblue; */
|
||||
background-color: rgba(45, 45, 45, 0.645);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 20px;
|
||||
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
.NamePlateText{
|
||||
/* font-family: 'CozetteVector'; */
|
||||
text-align: left;
|
||||
font-size: 300%;
|
||||
color: rgb(225, 225, 225);
|
||||
|
||||
border-left: 0.5rem solid rgb(88, 198, 82);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.NickNameText{
|
||||
font-size: 75%;
|
||||
margin: 0;
|
||||
margin-top: -1rem;
|
||||
|
||||
color: rgb(99, 99, 99);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,67 +1,67 @@
|
|||
<script lang="ts">
|
||||
import Timeline from "../../../comps/timeline/timeline.svelte";
|
||||
import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
|
||||
</script>
|
||||
|
||||
<Timeline style="padding: 2rem; padding-left: 3vw; padding-bottom: 5rem;">
|
||||
<TimelineItem
|
||||
date="3.G 10/3-20234"
|
||||
title="Prolog Apple device recommendation"
|
||||
desc='Et program lavet med Prolog, som finder en tilpassende Apple enhed baseret på dato udgivet og pris af enheden. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Prolog-Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
||||
imagePath="/portfolios/sveske/prolog/thumb.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="3.G 3/12-2023"
|
||||
title="Extraordinær menneskelig sans"
|
||||
desc='Med brug af en M5StickCPlus og en bevægelses sensor, så skabte benjamin og jeg en ekstra menneskelig sans.<br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/HumanInterface - Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
||||
imagePath="/portfolios/sveske/hmi/thumb.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 16/6-2023"
|
||||
title="Otakians"
|
||||
desc='Dette projekt repræsenterer apogeeen af mine anstrengelser og stræben inden for teknologisk innovation. Det er en avanceret webapplikation konstrueret med en sofistikeret arkitektur, der omfatter HTML, CSS, C#, og javascript som fundamentale byggesten. Indlejret i dets omfangsrige struktur findes et imponerende repertoire af funktioner, herunder en grundig præsentationssektion, en dynamisk chatmodul, en omfattende FAQ-sektion og et stringent, indbygget login-system. Projektets kerneformål er at fungere som et digitalt samlingspunkt for tilhængere af anime, kendt som "weebs", hvor de kan dele, diskutere og opbygge fællesskaber om deres passion for denne japanske popkulturform. Med en sofistikeret integration af komplekse algoritmer og brugercentrerede designprincipper stræber denne hjemmeside mod at skabe en opslidende og meningsfuld oplevelse for sine brugere, og dermed forstærke forbindelserne inden for dette særlige interessefællesskab. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Otakians(1).docx" style="color:lightblue;">Rapport</a>'
|
||||
imagePath="/images/Zhen/Infomatik/Otakians.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 10/3-2023"
|
||||
title="Makey Makey: pressure plate"
|
||||
desc="Ved anvendelse af Makey Makey har vi skabt en innovativ og funktionel trykplade af papir, tape, aluminiumsfolie og selve Makey Makey-enheden. Denne teknologiske opfindelse udgør et paradigmeskift inden for DIY-elektronik og inkorporerer en særegen symbiose af håndværksmæssig finesse og digital innovation. Ved at omfavne en konvergens af analoge og digitale teknologier demonstrerer denne opfindelse et ekstraordinært niveau af teknisk snilde og kreativ tænkning. Gennem en kompleks integration af disse elementer opnår denne trykplade ikke blot funktionalitet, men repræsenterer også en manifestation af menneskelig opfindsomhed og teknologisk fremgang. <br/><br/>Link: <a href='https://www.youtube.com/watch?v=AIUuqfbgKRw' style='color:lightblue;'>Youtube video</a><br/>Link 2: <a href='https://www.youtube.com/watch?v=tJ_N_K_kbjw' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/PressurePlate.pdf' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/PressurePlate.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 11/9-2022"
|
||||
title="Visit copenhagen"
|
||||
desc="Dette projekt inkorporerede en mangefacetteret tilgang med adskillige elementer af gestaltloven, og det udnyttede HTML og CSS til at animere disse aspekter. Den valgte ramme, .NET Blazor, fungerede som fundamentet for implementeringen af disse avancerede visuelle og interaktive komponenter. Gennem en dybdegående anvendelse af komplekse gestaltprincipper blev en symbiotisk syntese opnået, hvilket resulterede i en dynamisk digital oplevelse, der strømlinede brugerinteraktionen og forbedrede æstetikken af det endelige produkt. <br/><br/>Link: <a href='https://youtu.be/S9Rpm12Al0Y' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/VisitCopenhagenRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/VisitCopenhagen.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 2022"
|
||||
title="Uncle roger's recipies"
|
||||
desc="Denne sekundære webplatform, udspringende af mine digitale kreationer, udfolder sig som en kyndig panorama over de bedste 5 opskrifter præsenteret af Uncle Rogers. Udformet med pur HTML og anstrøg af CSS, emmer den af enkelhed kombineret med subtil elegance, og inkorporerer diskrete CSS-animationer for at tilføje en dynamisk dimension til brugeroplevelsen. Med en nøje sammensat struktur og en stringent implementering af webteknologier, udforsker den dybden af kulinariske inspirationer fra den anerkendte kogekunstner, alt imens den søger at fremme gastronomisk kreativitet og forfinelse.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/AsiatiskMad.html' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/UncleRogers.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 2022"
|
||||
title="Game rankings website"
|
||||
desc="Denne pionerende webside, skabt med hovedsageligt HTML og et minimængde af CSS, repræsenterer en banebrydende praksis i webudviklingen. Ved at begrænse brugen af CSS til et minimum og ved at undlade JavaScript, demonstrerer den en avantgarde tilgang til design og funktionalitet. Med en fokuseret brug af HTML som kerneelement til opbygning af websiden, fremhæver den vigtigheden af semantisk strukturering og tilgængelighed. Denne minimalistiske tilgang afspejler en dyb forståelse for webudviklingens essentielle principper og skaber samtidig en unik æstetik og brugeroplevelse, der inspirerer til refleksion over konventionelle praksisser inden for digital design.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/SpilHjemmeside.html' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/FirstWebsite.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="1.G 2022"
|
||||
title="Quest for grass"
|
||||
desc="Dette avancerede projekt udvikler et dynamisk spil i Unity-miljøet med en sofistikeret integration af en database, der skrupelløst opbevarer og manipulerer brugerens præstationer. Den benyttede database struktureres og drives af den altopslugende Google Firebase-platform, der leverer en robust og skalerbar infrastruktur til håndtering af data. Gennem en sublim kombination af komplekse algoritmer og interaktionelle mekanismer, optimeres brugeroplevelsen, og spillets dybde forøges betragteligt. Dette projekt fremhæver det symbiotiske forhold mellem teknologiske avancer og kreative visioner, idet det udforsker nye horisonter inden for spiludvikling og datamanagement. <br/><br/>Link: <a href='https://youtu.be/Vb_2U2lyVFY' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik1g/DatabaseProjektTouchGrass.docx' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/QuestForGrass.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="1.G 2022"
|
||||
desc="Denne applikation, konstrueret i AppLab, agerer som en præcis katalysator, der faciliterer forståelsen af de 13 globale bæredygtighedsmål fastsat af De Forenede Nationer. Med en intuitiv brugergrænseflade og en enestående funktionalitet præsenterer den en omfattende oversigt over disse komplekse mål, hvilket muliggør en dybdegående indsigt i de multidimensionelle aspekter af global udvikling. Med en elegant integration af avancerede algoritmer og interaktive elementer guider denne app brugeren gennem et labyrintisk landskab af komplekse socioøkonomiske og miljømæssige koncepter, hvilket fremmer en dybere forståelse og engagement i bestræbelserne på at opnå en mere bæredygtig planet.<br/><br/>Link: <a href='/portfolios/alex/Informatik1g/AppLabRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
||||
title="App lab verdensmål"
|
||||
imagePath="/images/Zhen/Infomatik/1.G-App.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="1.G 2021"
|
||||
desc='Dette initiativ involverede implementeringen af et avanceret værktøj fra Google kendt som "teachable machine", som blev konfigureret til at identificere en række håndudtryk. Med en kompleks kombination af maskinlæringsteknikker og datadrevne algoritmer blev dette projekt realiseret med ekspertise og præcision. Ved at udnytte avancerede neurale netværk og dybdegående datasæt muliggjorde dette værktøj en dybtgående analyse af de subtile nuancer i håndgester, hvilket resulterede i en imponerende nøjagtighed og pålidelighed i genkendelsen af disse udtryk. Dette projekt repræsenterer et skridt fremad i feltet for computer vision og maskinlæring, og det illustrerer potentialet i at anvende avancerede teknologier til at løse komplekse problemer inden for menneske-maskine-interaktion. <br/><br/>Link: <a href="/portfolios/alex/Informatik1g/MachineLearningRapport.docx" style="color:lightblue;">Rapport</a>'
|
||||
title="Machine learning: gesture recognition"
|
||||
imagePath="/portfolios/sveske/teachable_machine/thumb.png"
|
||||
/>
|
||||
<script lang="ts">
|
||||
import Timeline from "../../../comps/timeline/timeline.svelte";
|
||||
import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
|
||||
</script>
|
||||
|
||||
<Timeline style="padding: 2rem; padding-left: 3vw; padding-bottom: 5rem;">
|
||||
<TimelineItem
|
||||
date="3.G 10/3-20234"
|
||||
title="Prolog Apple device recommendation"
|
||||
desc='Et program lavet med Prolog, som finder en tilpassende Apple enhed baseret på dato udgivet og pris af enheden. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Prolog-Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
||||
imagePath="/portfolios/sveske/prolog/thumb.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="3.G 3/12-2023"
|
||||
title="Extraordinær menneskelig sans"
|
||||
desc='Med brug af en M5StickCPlus og en bevægelses sensor, så skabte benjamin og jeg en ekstra menneskelig sans.<br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/HumanInterface - Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
||||
imagePath="/portfolios/sveske/hmi/thumb.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 16/6-2023"
|
||||
title="Otakians"
|
||||
desc='Dette projekt repræsenterer apogeeen af mine anstrengelser og stræben inden for teknologisk innovation. Det er en avanceret webapplikation konstrueret med en sofistikeret arkitektur, der omfatter HTML, CSS, C#, og javascript som fundamentale byggesten. Indlejret i dets omfangsrige struktur findes et imponerende repertoire af funktioner, herunder en grundig præsentationssektion, en dynamisk chatmodul, en omfattende FAQ-sektion og et stringent, indbygget login-system. Projektets kerneformål er at fungere som et digitalt samlingspunkt for tilhængere af anime, kendt som "weebs", hvor de kan dele, diskutere og opbygge fællesskaber om deres passion for denne japanske popkulturform. Med en sofistikeret integration af komplekse algoritmer og brugercentrerede designprincipper stræber denne hjemmeside mod at skabe en opslidende og meningsfuld oplevelse for sine brugere, og dermed forstærke forbindelserne inden for dette særlige interessefællesskab. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Otakians(1).docx" style="color:lightblue;">Rapport</a>'
|
||||
imagePath="/images/Zhen/Infomatik/Otakians.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 10/3-2023"
|
||||
title="Makey Makey: pressure plate"
|
||||
desc="Ved anvendelse af Makey Makey har vi skabt en innovativ og funktionel trykplade af papir, tape, aluminiumsfolie og selve Makey Makey-enheden. Denne teknologiske opfindelse udgør et paradigmeskift inden for DIY-elektronik og inkorporerer en særegen symbiose af håndværksmæssig finesse og digital innovation. Ved at omfavne en konvergens af analoge og digitale teknologier demonstrerer denne opfindelse et ekstraordinært niveau af teknisk snilde og kreativ tænkning. Gennem en kompleks integration af disse elementer opnår denne trykplade ikke blot funktionalitet, men repræsenterer også en manifestation af menneskelig opfindsomhed og teknologisk fremgang. <br/><br/>Link: <a href='https://www.youtube.com/watch?v=AIUuqfbgKRw' style='color:lightblue;'>Youtube video</a><br/>Link 2: <a href='https://www.youtube.com/watch?v=tJ_N_K_kbjw' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/PressurePlate.pdf' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/PressurePlate.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 11/9-2022"
|
||||
title="Visit copenhagen"
|
||||
desc="Dette projekt inkorporerede en mangefacetteret tilgang med adskillige elementer af gestaltloven, og det udnyttede HTML og CSS til at animere disse aspekter. Den valgte ramme, .NET Blazor, fungerede som fundamentet for implementeringen af disse avancerede visuelle og interaktive komponenter. Gennem en dybdegående anvendelse af komplekse gestaltprincipper blev en symbiotisk syntese opnået, hvilket resulterede i en dynamisk digital oplevelse, der strømlinede brugerinteraktionen og forbedrede æstetikken af det endelige produkt. <br/><br/>Link: <a href='https://youtu.be/S9Rpm12Al0Y' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/VisitCopenhagenRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/VisitCopenhagen.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 2022"
|
||||
title="Uncle roger's recipies"
|
||||
desc="Denne sekundære webplatform, udspringende af mine digitale kreationer, udfolder sig som en kyndig panorama over de bedste 5 opskrifter præsenteret af Uncle Rogers. Udformet med pur HTML og anstrøg af CSS, emmer den af enkelhed kombineret med subtil elegance, og inkorporerer diskrete CSS-animationer for at tilføje en dynamisk dimension til brugeroplevelsen. Med en nøje sammensat struktur og en stringent implementering af webteknologier, udforsker den dybden af kulinariske inspirationer fra den anerkendte kogekunstner, alt imens den søger at fremme gastronomisk kreativitet og forfinelse.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/AsiatiskMad.html' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/UncleRogers.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="2.G 2022"
|
||||
title="Game rankings website"
|
||||
desc="Denne pionerende webside, skabt med hovedsageligt HTML og et minimængde af CSS, repræsenterer en banebrydende praksis i webudviklingen. Ved at begrænse brugen af CSS til et minimum og ved at undlade JavaScript, demonstrerer den en avantgarde tilgang til design og funktionalitet. Med en fokuseret brug af HTML som kerneelement til opbygning af websiden, fremhæver den vigtigheden af semantisk strukturering og tilgængelighed. Denne minimalistiske tilgang afspejler en dyb forståelse for webudviklingens essentielle principper og skaber samtidig en unik æstetik og brugeroplevelse, der inspirerer til refleksion over konventionelle praksisser inden for digital design.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/SpilHjemmeside.html' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/FirstWebsite.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="1.G 2022"
|
||||
title="Quest for grass"
|
||||
desc="Dette avancerede projekt udvikler et dynamisk spil i Unity-miljøet med en sofistikeret integration af en database, der skrupelløst opbevarer og manipulerer brugerens præstationer. Den benyttede database struktureres og drives af den altopslugende Google Firebase-platform, der leverer en robust og skalerbar infrastruktur til håndtering af data. Gennem en sublim kombination af komplekse algoritmer og interaktionelle mekanismer, optimeres brugeroplevelsen, og spillets dybde forøges betragteligt. Dette projekt fremhæver det symbiotiske forhold mellem teknologiske avancer og kreative visioner, idet det udforsker nye horisonter inden for spiludvikling og datamanagement. <br/><br/>Link: <a href='https://youtu.be/Vb_2U2lyVFY' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik1g/DatabaseProjektTouchGrass.docx' style='color:lightblue;'>Rapport</a>"
|
||||
imagePath="/images/Zhen/Infomatik/QuestForGrass.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="1.G 2022"
|
||||
desc="Denne applikation, konstrueret i AppLab, agerer som en præcis katalysator, der faciliterer forståelsen af de 13 globale bæredygtighedsmål fastsat af De Forenede Nationer. Med en intuitiv brugergrænseflade og en enestående funktionalitet præsenterer den en omfattende oversigt over disse komplekse mål, hvilket muliggør en dybdegående indsigt i de multidimensionelle aspekter af global udvikling. Med en elegant integration af avancerede algoritmer og interaktive elementer guider denne app brugeren gennem et labyrintisk landskab af komplekse socioøkonomiske og miljømæssige koncepter, hvilket fremmer en dybere forståelse og engagement i bestræbelserne på at opnå en mere bæredygtig planet.<br/><br/>Link: <a href='/portfolios/alex/Informatik1g/AppLabRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
||||
title="App lab verdensmål"
|
||||
imagePath="/images/Zhen/Infomatik/1.G-App.png"
|
||||
/>
|
||||
<TimelineItem
|
||||
date="1.G 2021"
|
||||
desc='Dette initiativ involverede implementeringen af et avanceret værktøj fra Google kendt som "teachable machine", som blev konfigureret til at identificere en række håndudtryk. Med en kompleks kombination af maskinlæringsteknikker og datadrevne algoritmer blev dette projekt realiseret med ekspertise og præcision. Ved at udnytte avancerede neurale netværk og dybdegående datasæt muliggjorde dette værktøj en dybtgående analyse af de subtile nuancer i håndgester, hvilket resulterede i en imponerende nøjagtighed og pålidelighed i genkendelsen af disse udtryk. Dette projekt repræsenterer et skridt fremad i feltet for computer vision og maskinlæring, og det illustrerer potentialet i at anvende avancerede teknologier til at løse komplekse problemer inden for menneske-maskine-interaktion. <br/><br/>Link: <a href="/portfolios/alex/Informatik1g/MachineLearningRapport.docx" style="color:lightblue;">Rapport</a>'
|
||||
title="Machine learning: gesture recognition"
|
||||
imagePath="/portfolios/sveske/teachable_machine/thumb.png"
|
||||
/>
|
||||
</Timeline>
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
export function throttle(callback, wait) {
|
||||
let timeoutId = null;
|
||||
let lastExecutedTime = 0;
|
||||
|
||||
return function (...args) {
|
||||
const currentTime = Date.now();
|
||||
|
||||
const execute = () => {
|
||||
lastExecutedTime = currentTime;
|
||||
callback.apply(this, args);
|
||||
};
|
||||
|
||||
if (currentTime - lastExecutedTime >= wait) {
|
||||
execute();
|
||||
} else {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
|
||||
}
|
||||
};
|
||||
}
|
||||
export function throttle(callback, wait) {
|
||||
let timeoutId = null;
|
||||
let lastExecutedTime = 0;
|
||||
|
||||
return function (...args) {
|
||||
const currentTime = Date.now();
|
||||
|
||||
const execute = () => {
|
||||
lastExecutedTime = currentTime;
|
||||
callback.apply(this, args);
|
||||
};
|
||||
|
||||
if (currentTime - lastExecutedTime >= wait) {
|
||||
execute();
|
||||
} else {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
export class Vector2 {
|
||||
x: number;
|
||||
y: number;
|
||||
|
||||
constructor(x: number, y: number) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
Add(vec2: Vector2){
|
||||
return new Vector2(this.x + vec2.x, this.y + vec2.y);
|
||||
}
|
||||
|
||||
Sub(vec2: Vector2){
|
||||
return new Vector2(this.x - vec2.x, this.y - vec2.y);
|
||||
}
|
||||
|
||||
Scale(mult: number){
|
||||
return new Vector2(this.x * mult, this.y * mult);;
|
||||
}
|
||||
}
|
||||
export class Vector2 {
|
||||
x: number;
|
||||
y: number;
|
||||
|
||||
constructor(x: number, y: number) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
Add(vec2: Vector2){
|
||||
return new Vector2(this.x + vec2.x, this.y + vec2.y);
|
||||
}
|
||||
|
||||
Sub(vec2: Vector2){
|
||||
return new Vector2(this.x - vec2.x, this.y - vec2.y);
|
||||
}
|
||||
|
||||
Scale(mult: number){
|
||||
return new Vector2(this.x * mult, this.y * mult);;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<div class="container">
|
||||
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>
|
||||
<div class="container">
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,47 @@
|
|||
<div class="container">
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<div class="container">
|
||||
<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>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import Contact from "./Contact.svelte";
|
||||
import OtherContact from "./OtherContact.svelte";
|
||||
</script>
|
||||
|
||||
<Contact/>
|
||||
<script>
|
||||
import Contact from "./Contact.svelte";
|
||||
import OtherContact from "./OtherContact.svelte";
|
||||
</script>
|
||||
|
||||
<Contact/>
|
||||
<OtherContact/>
|
||||
|
|
@ -1,76 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,92 +1,92 @@
|
|||
<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"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Education
|
||||
</b>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-item">
|
||||
<img src={NextLogo} alt="NextKBH logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Gymnasium/Collage - HTX</b><br>
|
||||
NEXT-Mediegymnasiet: Computer science<br>
|
||||
<i>May 2021 - Now</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={SasLogo} alt="SAS logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>SAS Master class</b><br>
|
||||
4-week project about SAS: OnDemand and SAS: Viya <br>
|
||||
<i>Dec 2023 - Dec 2023</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={EmphasysLogo} alt="Emphasys center logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Emphasys Centre - Erasmus+</b><br>
|
||||
2 weeks of Unity VR <br>
|
||||
<i>Oct 2023 - Oct 2023</i>
|
||||
</span>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding-left: 3mm;
|
||||
|
||||
text-align: start;
|
||||
font-size: 4mm;
|
||||
}
|
||||
|
||||
& > img {
|
||||
border-radius: 2.5mm;
|
||||
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||
}
|
||||
}
|
||||
<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"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Education
|
||||
</b>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-item">
|
||||
<img src={NextLogo} alt="NextKBH logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Gymnasium/Collage - HTX</b><br>
|
||||
NEXT-Mediegymnasiet: Computer science<br>
|
||||
<i>May 2021 - Now</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={SasLogo} alt="SAS logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>SAS Master class</b><br>
|
||||
4-week project about SAS: OnDemand and SAS: Viya <br>
|
||||
<i>Dec 2023 - Dec 2023</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={EmphasysLogo} alt="Emphasys center logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Emphasys Centre - Erasmus+</b><br>
|
||||
2 weeks of Unity VR <br>
|
||||
<i>Oct 2023 - Oct 2023</i>
|
||||
</span>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding-left: 3mm;
|
||||
|
||||
text-align: start;
|
||||
font-size: 4mm;
|
||||
}
|
||||
|
||||
& > img {
|
||||
border-radius: 2.5mm;
|
||||
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,92 +1,92 @@
|
|||
<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"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Experience
|
||||
</b>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-item">
|
||||
<img src={MakerspaceLogo} alt="NextKBH logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>3D printer manager</b> - Volunteer<br>
|
||||
Makerspace - kildevæld Kulturcenter<br>
|
||||
<i>Nov 2023 - Now</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={EposLogo} alt="SAS logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Machine Learning Engineer</b> - Short term intern<br>
|
||||
Product design department - Epos<br>
|
||||
<i>Apr 2024 - Apr 2024</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={KhoraLogo} alt="Emphasys center logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Assistant</b> - Short term intern<br>
|
||||
Khora Virtual Reality<br>
|
||||
<i>Oct 2020 - Oct 2020</i>
|
||||
</span>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding-left: 3mm;
|
||||
|
||||
text-align: start;
|
||||
font-size: 4mm;
|
||||
}
|
||||
|
||||
& > img {
|
||||
border-radius: 2.5mm;
|
||||
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||
}
|
||||
}
|
||||
<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"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Experience
|
||||
</b>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-item">
|
||||
<img src={MakerspaceLogo} alt="NextKBH logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>3D printer manager</b> - Volunteer<br>
|
||||
Makerspace - kildevæld Kulturcenter<br>
|
||||
<i>Nov 2023 - Now</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={EposLogo} alt="SAS logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Machine Learning Engineer</b> - Short term intern<br>
|
||||
Product design department - Epos<br>
|
||||
<i>Apr 2024 - Apr 2024</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<img src={KhoraLogo} alt="Emphasys center logo" width="15%"/>
|
||||
<div>
|
||||
<span>
|
||||
<b>Assistant</b> - Short term intern<br>
|
||||
Khora Virtual Reality<br>
|
||||
<i>Oct 2020 - Oct 2020</i>
|
||||
</span>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding-left: 3mm;
|
||||
|
||||
text-align: start;
|
||||
font-size: 4mm;
|
||||
}
|
||||
|
||||
& > img {
|
||||
border-radius: 2.5mm;
|
||||
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,50 +1,50 @@
|
|||
<script>
|
||||
import RepeatedSkills from "./RepeatedSkills.svelte";
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<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;
|
||||
}
|
||||
}
|
||||
<script>
|
||||
import RepeatedSkills from "./RepeatedSkills.svelte";
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<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>
|
||||
|
|
@ -1,51 +1,51 @@
|
|||
<script>
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
This CV was made using <a 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">Gitea</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;
|
||||
}
|
||||
}
|
||||
<script>
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
This CV was made using <a 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">Gitea</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>
|
||||
|
|
@ -1,24 +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;
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,25 +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);
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,21 +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;
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,71 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,31 +1,31 @@
|
|||
<div class="short-profile-container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
About me
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
As a 19-year-old with a deep passion for programming and
|
||||
technology, I am highly dedicated to everything within this field.
|
||||
Most of my knowledge is self-taught from many places on the
|
||||
internet. 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;
|
||||
}
|
||||
<div class="short-profile-container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
About me
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
As a 19-year-old with a deep passion for programming and
|
||||
technology, I am highly dedicated to everything within this field.
|
||||
Most of my knowledge is self-taught from many places on the
|
||||
internet. 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>
|
||||
|
|
@ -1,62 +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);
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
<div class="short-profile-container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Short profile
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
Student at NEXT-Copenhagen
|
||||
Mediagymnasium and
|
||||
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;
|
||||
}
|
||||
<div class="short-profile-container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Short profile
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
Student at NEXT-Copenhagen
|
||||
Mediagymnasium and
|
||||
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>
|
||||
|
|
@ -1,23 +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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,27 +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;
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,51 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import Contact from "./Contact.svelte";
|
||||
import OtherContact from "./OtherContact.svelte";
|
||||
</script>
|
||||
|
||||
<Contact/>
|
||||
<script>
|
||||
import Contact from "./Contact.svelte";
|
||||
import OtherContact from "./OtherContact.svelte";
|
||||
</script>
|
||||
|
||||
<Contact/>
|
||||
<OtherContact/>
|
||||
|
|
@ -1,76 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,63 +1,63 @@
|
|||
<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%;
|
||||
}
|
||||
}
|
||||
|
||||
.imagesContainer {
|
||||
> img {
|
||||
border-radius: 5mm;
|
||||
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||
}
|
||||
}
|
||||
<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%;
|
||||
}
|
||||
}
|
||||
|
||||
.imagesContainer {
|
||||
> img {
|
||||
border-radius: 5mm;
|
||||
filter: drop-shadow(1mm 1mm 1mm #0000009d);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +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;
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,43 +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);
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,44 +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);
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,53 +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;
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,51 +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;
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,24 +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;
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
<script lang="ts">
|
||||
import NamePlate from "./NamePlate.svelte";
|
||||
import selfie from "$lib/zhen/cv-comps/MoreProfesionalMe.jpg"
|
||||
import zylveterSus from "$lib/zhen/cv-comps/zylveterSus.png"
|
||||
</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(0.75mm 0.75mm 0.75mm #0000009d);
|
||||
}
|
||||
<script lang="ts">
|
||||
import NamePlate from "./NamePlate.svelte";
|
||||
import selfie from "$lib/zhen/cv-comps/MoreProfesionalMe.jpg"
|
||||
import zylveterSus from "$lib/zhen/cv-comps/zylveterSus.png"
|
||||
</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(0.75mm 0.75mm 0.75mm #0000009d);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +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;
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,71 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,31 +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;
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,62 +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);
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,28 +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;
|
||||
}
|
||||
<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>
|
||||
|
|
@ -1,88 +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>Have contributed in multiple Open-source project 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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>Have contributed in multiple Open-source project 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>
|
||||
|
|
@ -1,250 +1,250 @@
|
|||
<script lang="ts">
|
||||
// Left side
|
||||
import NameAndImage from "../Comps/NameAndImage.svelte";
|
||||
import ShortProfile from "../Comps/ShortProfile.svelte"
|
||||
import CombinedContacts from "../Comps/CombinedContacts.svelte"
|
||||
import LinkedInQR from "../Comps/LinkedInQR.svelte";
|
||||
|
||||
// Right side
|
||||
import Profile from "../Comps/Profile.svelte";
|
||||
import Education from "../Comps/Education.svelte";
|
||||
import Experience from "../Comps/Experience.svelte";
|
||||
|
||||
// Decorations
|
||||
import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
|
||||
import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
|
||||
import AlexWatermark from "../Comps/AlexWatermark.svelte";
|
||||
import RepeatedSkills from "../Comps/RepeatedSkills.svelte";
|
||||
|
||||
// Cedit
|
||||
import LinkToSource from "../Comps/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. This page has been able 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/>
|
||||
<BottomRightDecor/>
|
||||
<div>
|
||||
<NameAndImage/>
|
||||
<ShortProfile/>
|
||||
<CombinedContacts/>
|
||||
<LinkedInQR/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftSectionSeperator"><div/></div>
|
||||
<div id="right-section">
|
||||
<AlexWatermark/>
|
||||
<div id="TopRightSkillsText">
|
||||
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
|
||||
</div>
|
||||
<div id="Credit">
|
||||
<LinkToSource/>
|
||||
</div>
|
||||
<div>
|
||||
<Profile/>
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<script lang="ts">
|
||||
// Left side
|
||||
import NameAndImage from "../Comps/NameAndImage.svelte";
|
||||
import ShortProfile from "../Comps/ShortProfile.svelte"
|
||||
import CombinedContacts from "../Comps/CombinedContacts.svelte"
|
||||
import LinkedInQR from "../Comps/LinkedInQR.svelte";
|
||||
|
||||
// Right side
|
||||
import Profile from "../Comps/Profile.svelte";
|
||||
import Education from "../Comps/Education.svelte";
|
||||
import Experience from "../Comps/Experience.svelte";
|
||||
|
||||
// Decorations
|
||||
import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
|
||||
import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
|
||||
import AlexWatermark from "../Comps/AlexWatermark.svelte";
|
||||
import RepeatedSkills from "../Comps/RepeatedSkills.svelte";
|
||||
|
||||
// Cedit
|
||||
import LinkToSource from "../Comps/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. This page has been able 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/>
|
||||
<BottomRightDecor/>
|
||||
<div>
|
||||
<NameAndImage/>
|
||||
<ShortProfile/>
|
||||
<CombinedContacts/>
|
||||
<LinkedInQR/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftSectionSeperator"><div/></div>
|
||||
<div id="right-section">
|
||||
<AlexWatermark/>
|
||||
<div id="TopRightSkillsText">
|
||||
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
|
||||
</div>
|
||||
<div id="Credit">
|
||||
<LinkToSource/>
|
||||
</div>
|
||||
<div>
|
||||
<Profile/>
|
||||
<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>
|
||||
|
|
@ -1,250 +1,250 @@
|
|||
<script lang="ts">
|
||||
// Left side
|
||||
import NameAndImage from "../Comps/NameAndImage.svelte";
|
||||
import ShortProfile from "../Comps/ShortProfile.svelte"
|
||||
import CombinedContacts from "../Comps/CombinedContacts.svelte"
|
||||
import LinkedInQR from "../Comps/LinkedInQR.svelte";
|
||||
|
||||
// Right side
|
||||
import Profile from "../Comps/Profile.svelte";
|
||||
import Education from "../Comps/Education.svelte";
|
||||
import Experience from "../Comps/Experience.svelte";
|
||||
|
||||
// Decorations
|
||||
import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
|
||||
import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
|
||||
import AlexWatermark from "../Comps/AlexWatermark.svelte";
|
||||
import RepeatedSkills from "../Comps/RepeatedSkills.svelte";
|
||||
|
||||
// Cedit
|
||||
import LinkToSource from "../Comps/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/>
|
||||
<BottomRightDecor/>
|
||||
<div>
|
||||
<NameAndImage/>
|
||||
<ShortProfile/>
|
||||
<CombinedContacts/>
|
||||
<LinkedInQR/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftSectionSeperator"><div/></div>
|
||||
<div id="right-section">
|
||||
<AlexWatermark/>
|
||||
<div id="TopRightSkillsText">
|
||||
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
|
||||
</div>
|
||||
<div id="Credit">
|
||||
<LinkToSource/>
|
||||
</div>
|
||||
<div>
|
||||
<Profile/>
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<script lang="ts">
|
||||
// Left side
|
||||
import NameAndImage from "../Comps/NameAndImage.svelte";
|
||||
import ShortProfile from "../Comps/ShortProfile.svelte"
|
||||
import CombinedContacts from "../Comps/CombinedContacts.svelte"
|
||||
import LinkedInQR from "../Comps/LinkedInQR.svelte";
|
||||
|
||||
// Right side
|
||||
import Profile from "../Comps/Profile.svelte";
|
||||
import Education from "../Comps/Education.svelte";
|
||||
import Experience from "../Comps/Experience.svelte";
|
||||
|
||||
// Decorations
|
||||
import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
|
||||
import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
|
||||
import AlexWatermark from "../Comps/AlexWatermark.svelte";
|
||||
import RepeatedSkills from "../Comps/RepeatedSkills.svelte";
|
||||
|
||||
// Cedit
|
||||
import LinkToSource from "../Comps/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/>
|
||||
<BottomRightDecor/>
|
||||
<div>
|
||||
<NameAndImage/>
|
||||
<ShortProfile/>
|
||||
<CombinedContacts/>
|
||||
<LinkedInQR/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftSectionSeperator"><div/></div>
|
||||
<div id="right-section">
|
||||
<AlexWatermark/>
|
||||
<div id="TopRightSkillsText">
|
||||
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
|
||||
</div>
|
||||
<div id="Credit">
|
||||
<LinkToSource/>
|
||||
</div>
|
||||
<div>
|
||||
<Profile/>
|
||||
<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>
|
||||
|
|
@ -1,254 +1,254 @@
|
|||
<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";
|
||||
import TableOfProjects from "../CompsRev2/TableOfProjects.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/>
|
||||
<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%;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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";
|
||||
import TableOfProjects from "../CompsRev2/TableOfProjects.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/>
|
||||
<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%;
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
|
|
@ -1,117 +1,117 @@
|
|||
<script lang="ts">
|
||||
import RepeatedSkills from "../../cv/Comps/RepeatedSkills.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 LinkedIn banner {getFormattedDate()}</title>
|
||||
<meta content="Zhentao Wei's LinkedIn banner" property="og:title" />
|
||||
<meta content="This Linkedin banner 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 Linkedin banner. This page has been able to be saved as PDF, and the banner can be extracted as an image fro mthe 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="container include-in-print">
|
||||
<div>
|
||||
<RepeatedSkills targetTextHeight={70} targetTextWidth={175}/>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.include-in-print { &, & * {
|
||||
-webkit-print-color-adjust:exact !important;
|
||||
print-color-adjust:exact !important;
|
||||
}}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
> div:nth-child(1) {
|
||||
width: 419.1mm;
|
||||
height: 104.775mm;
|
||||
|
||||
background-color: #383636;
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
font-size: 10mm;
|
||||
font-family: cozetteVector;
|
||||
color: #d4d4d4;
|
||||
|
||||
filter: blur(0); // Force save as image
|
||||
}
|
||||
|
||||
> div:nth-child(2){
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
<script lang="ts">
|
||||
import RepeatedSkills from "../../cv/Comps/RepeatedSkills.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 LinkedIn banner {getFormattedDate()}</title>
|
||||
<meta content="Zhentao Wei's LinkedIn banner" property="og:title" />
|
||||
<meta content="This Linkedin banner 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 Linkedin banner. This page has been able to be saved as PDF, and the banner can be extracted as an image fro mthe 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="container include-in-print">
|
||||
<div>
|
||||
<RepeatedSkills targetTextHeight={70} targetTextWidth={175}/>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.include-in-print { &, & * {
|
||||
-webkit-print-color-adjust:exact !important;
|
||||
print-color-adjust:exact !important;
|
||||
}}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
> div:nth-child(1) {
|
||||
width: 419.1mm;
|
||||
height: 104.775mm;
|
||||
|
||||
background-color: #383636;
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
font-size: 10mm;
|
||||
font-family: cozetteVector;
|
||||
color: #d4d4d4;
|
||||
|
||||
filter: blur(0); // Force save as image
|
||||
}
|
||||
|
||||
> div:nth-child(2){
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue