Cleanup on unused comps
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
This commit is contained in:
parent
a3fce76c1a
commit
55058d493c
62 changed files with 0 additions and 3164 deletions
|
|
@ -1,19 +0,0 @@
|
|||
/*
|
||||
* Provides post summaries to all pages. That means every page can access summaries
|
||||
* for all posts on the website.
|
||||
*/
|
||||
|
||||
import { type Post, posts } from './posts/posts_data';
|
||||
|
||||
export function load() {
|
||||
let summaries : Post[] = [];
|
||||
|
||||
// Sort by newest news first
|
||||
posts.sort((a, b) => b.creation_date - a.creation_date);
|
||||
|
||||
posts.forEach((post) => {
|
||||
summaries.push(post);
|
||||
});
|
||||
|
||||
return { summaries };
|
||||
}
|
||||
|
|
@ -1,11 +1,6 @@
|
|||
<script lang="ts">
|
||||
import ProfileSpacer from "./comps/ProfileSpacer.svelte";
|
||||
import MediaQuery from "svelte-media-queries";
|
||||
import NewsCard from "$lib/posts/NewsCard.svelte";
|
||||
import ShowcaseNewsCard from "$lib/posts/ShowcaseNewsCard.svelte";
|
||||
import Button from "$lib/IO/Button.svelte";
|
||||
import { ButtonType } from "$lib/IO/ButtonType.ts";
|
||||
import Timeline from "../comps/timeline/timeline.svelte";
|
||||
import { onMount, tick } from "svelte";
|
||||
|
||||
import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<p>This is an informative about page :) </p>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let scrollY = 0;
|
||||
|
||||
const animateInterval = 16;
|
||||
const startMove = 64;
|
||||
const numFrames = 312;
|
||||
|
||||
let framesLoaded = 1;
|
||||
let ballsLoaded = 0;
|
||||
let frameLoader: HTMLImageElement;
|
||||
let frameLoader2: HTMLImageElement;
|
||||
let frameLoader3: HTMLImageElement;
|
||||
let frameLoader4: HTMLImageElement;
|
||||
|
||||
onMount(()=>{
|
||||
|
||||
// Force load once
|
||||
ballsLoaded = 4;
|
||||
onLoaded();
|
||||
});
|
||||
|
||||
function onLoaded (){
|
||||
ballsLoaded++;
|
||||
if (ballsLoaded > 3) {
|
||||
frameLoader.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
|
||||
framesLoaded++;
|
||||
frameLoader2.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
|
||||
framesLoaded++;
|
||||
frameLoader3.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
|
||||
framesLoaded++;
|
||||
frameLoader4.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
|
||||
framesLoaded++;
|
||||
ballsLoaded = 0;
|
||||
}
|
||||
}
|
||||
|
||||
let frameIndex = 0;
|
||||
$: frameIndex = Math.min(Math.floor(Math.max(scrollY-startMove, 0) / animateInterval+1), numFrames);
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
|
||||
<div class="w-full flex justify-center" style="height: 5000px;">
|
||||
<!-- Image Loader -->
|
||||
<img on:load={()=>{onLoaded()}} bind:this={frameLoader} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
|
||||
<img on:load={()=>{onLoaded()}} bind:this={frameLoader2} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
|
||||
<img on:load={()=>{onLoaded()}} bind:this={frameLoader3} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
|
||||
<img on:load={()=>{onLoaded()}} bind:this={frameLoader4} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
|
||||
|
||||
<!-- add "top-0" so it sticks at the top -->
|
||||
<div class="sticky top-0" style="width: 200px; height: 200px;">
|
||||
<div class="flex justify-center items-center" style="width: 200px; height: 200px;">
|
||||
<img src="/images/spinning_cat/untitled_{frameIndex.toString().padStart(5, '0')}.png" class="object-contain w-full h-full" alt="">
|
||||
</div>
|
||||
<div>{frameIndex}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-[1000px] bg-amber-700 w-full">
|
||||
|
||||
</div>
|
||||
|
|
@ -1 +0,0 @@
|
|||
WIP
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<!-- Layout for posts -->
|
||||
<script lang="ts">
|
||||
import { type BlogData } from './+layout';
|
||||
|
||||
export let data : BlogData
|
||||
|
||||
const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
function humanDate(date : Date) : string {
|
||||
return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<article>
|
||||
<div class="body">
|
||||
<header>
|
||||
<img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
|
||||
<h3 id="title">{data.post.title}</h3>
|
||||
<div class="dates">
|
||||
<span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span>
|
||||
<span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<style>
|
||||
article {
|
||||
margin-top: 25px;
|
||||
margin-inline: auto;
|
||||
max-width: 1000px;
|
||||
|
||||
/* background: var(--background1); */
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#blog-cover-img {
|
||||
aspect-ratio: 16 / 9;
|
||||
max-width: 100%;
|
||||
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-family: var(--title-font);
|
||||
font-size: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-inline: auto;
|
||||
max-width: 1200px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: 2;
|
||||
font-size: 18px;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* CSS for posts - child rooutes. */
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(a) {
|
||||
color: var(--text1);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { posts, type Post } from '../posts/posts_data';
|
||||
|
||||
export interface BlogData {
|
||||
summaries: Post[],
|
||||
post: Post
|
||||
}
|
||||
|
||||
export async function load({ url, parent }) : Promise<BlogData> {
|
||||
const { summaries } = await parent();
|
||||
const websiteUrl = url.pathname.split('/');
|
||||
const windowUrl = websiteUrl.pop() || websiteUrl.pop(); // Handle trailing /
|
||||
|
||||
return {
|
||||
summaries: summaries,
|
||||
post: posts.filter((post) => post.url == windowUrl)[0],
|
||||
};
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<div class="post-container">
|
||||
<div class="post-header">
|
||||
<slot name="title" />
|
||||
<slot name="creation-date" />
|
||||
<slot name="modification-date" />
|
||||
|
||||
<!-- the post content goes in this slot -->
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<script>
|
||||
import Highlight from "svelte-highlight";
|
||||
import { shell } from "svelte-highlight/languages";
|
||||
import obsidian from "svelte-highlight/styles/obsidian";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html obsidian}
|
||||
</svelte:head>
|
||||
|
||||
<p>
|
||||
Finding the specific commit that introduced a bug in your code can be frustrating,
|
||||
especially in big projects with a lot of commits. Git bisecting is a method
|
||||
used to quickly find which commit is the culprit. Git bisect works by you specifying
|
||||
a so called 'bad' commit where you know the bug occurs and a commit where you know the
|
||||
bug doesn't occur. Afterwards git will binary search it's way to find the commit
|
||||
introducing the bug.
|
||||
</p>
|
||||
<p>
|
||||
Suppose we've the following git history:
|
||||
</p>
|
||||
|
||||
<img src="/images/posts/git-bisecting/bisect_problem.png" alt="Showing a git history, where on the left there is a 'good' commit with a couple of commits between the current commit on the right"/>
|
||||
<p>
|
||||
It could potentially contain many more commits between the known 'good' commit and the
|
||||
current one. Somewhere in the commits 1, 2, 3, 4 or the current one, a bug was
|
||||
introduced. One way to find the specific commit that introduced the bug, could
|
||||
be to check each commit starting from commit 1 then 2 then 3 ... and so on.
|
||||
This is known as a linear search, and would take very long if there are a lot
|
||||
of commits between the bad and the current.
|
||||
</p>
|
||||
<p>
|
||||
Instead git bisect comes to the rescue. Git bisect performs a
|
||||
<a href="https://en.wikipedia.org/wiki/Binary_search_algorithm" target="_blank">binary search</a>,
|
||||
which is much faster.
|
||||
To use git bisect, you must tell git to start bisecting:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect start" />
|
||||
<p>
|
||||
Afterwards we mark the 'bad' commit - any commit we know the bug occurs in. In this example
|
||||
the current commit that we know is bad have the commit hash <code>c26cf8a</code>, so
|
||||
we mark the commit bad:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect bad c26cf8a" />
|
||||
<p>
|
||||
After that we mark a previous commit that we know the bug doesn't occur in. In this
|
||||
example it's the 'good' commit (se picture above), which has a commit hash of <code>b34ec52</code>
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect good b34ec52" />
|
||||
<p>
|
||||
Now git will automatically checkout a commit somewhere in between the good and bad commit.
|
||||
Your job is now to re-build your project and test if the bug occurs. If the bug
|
||||
<b>doesn't</b> occur you report it to git:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect good" />
|
||||
<p>
|
||||
However if it does occur you mark it bad:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect bad" />
|
||||
<p>
|
||||
You continue to do this until git has tracked down the first bad commit, ie. the
|
||||
commit that introduced the bug.
|
||||
</p>
|
||||
|
||||
<h2>Resources</h2>
|
||||
Git bisect man page: <a href="https://git-scm.com/docs/git-bisect">https://git-scm.com/docs/git-bisect</a>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { type Post } from './posts_data';
|
||||
import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
|
||||
|
||||
export let data; // <- contains post data
|
||||
|
||||
let search : string;
|
||||
$: regex = search ? new RegExp(search, 'i') : null;
|
||||
$: matches = (item : Post) =>
|
||||
regex ? regex.test(item.title) || regex.test(item.summary) : true;
|
||||
$: matched_posts = data.summaries.filter(matches);
|
||||
</script>
|
||||
|
||||
<div class="head">
|
||||
<header>
|
||||
<h1>Blog Posts</h1>
|
||||
<input id="search" placeholder="Search Blog Posts" bind:value={search} />
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
{#if matched_posts.length == 0}
|
||||
<span>No Matches</span>
|
||||
{/if}
|
||||
{#each matched_posts as summary}
|
||||
<NewsVerticalCard
|
||||
post_url="/post/{summary.url}"
|
||||
title={summary.title}
|
||||
summary={summary.summary}
|
||||
creation_date={summary.creation_date.toString()}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-family: var(--title-font);
|
||||
}
|
||||
.head {
|
||||
width: 100%;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-content: center;
|
||||
justify-content: space-around;
|
||||
|
||||
padding: 0 0 20px 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#search {
|
||||
height: 40px;
|
||||
|
||||
align-self: center;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
line-height: 2;
|
||||
padding: 0.5rem 0.8rem;
|
||||
margin-top: 0px;
|
||||
|
||||
background-color: var(--background);
|
||||
color: var(--text1);
|
||||
}
|
||||
|
||||
.list {
|
||||
max-width: 1500px;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 25px;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
// TODO: document members
|
||||
export type Post = {
|
||||
// Required
|
||||
url : string,
|
||||
cover_img : string,
|
||||
cover_alt : string,
|
||||
title: string,
|
||||
summary : string,
|
||||
creation_date : number
|
||||
modification_date: number,
|
||||
|
||||
// Optional
|
||||
// TODO: author?
|
||||
}
|
||||
|
||||
export const posts : Post[] = [
|
||||
{
|
||||
url: 'git-bisecting',
|
||||
cover_img: '/images/posts/git-bisecting/thumbnail.png',
|
||||
cover_alt: 'Photo of a bug',
|
||||
title: 'Tracking down bugs in your code — using git bisect',
|
||||
summary: 'Track down which specific change introduced a bug using the binary search tool provided by git.',
|
||||
creation_date: 1709907213,
|
||||
modification_date: 1709907213,
|
||||
},
|
||||
{
|
||||
url: 'folder-icons',
|
||||
cover_img: '/images/posts/folder-icons/cover.png',
|
||||
cover_alt: 'Image of folder icons being used in the editor',
|
||||
title: 'Amazing Icons for Folders in Unity!',
|
||||
summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
|
||||
creation_date: 1708382491,
|
||||
modification_date: 1708382491,
|
||||
},
|
||||
{
|
||||
url: 'lorem',
|
||||
cover_img: '/images/posts/folder-icons/cover.png',
|
||||
cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
|
||||
title: 'Lorem Ipsum !!',
|
||||
summary: 'This is a nice exploanation on lorem ipsum latin',
|
||||
creation_date: 1708382491,
|
||||
modification_date: 1708382491,
|
||||
},
|
||||
{
|
||||
url: 'lorem1',
|
||||
cover_img: '/images/posts/folder-icons/cover.png',
|
||||
cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
|
||||
title: 'Idk some arcticle bruh!',
|
||||
summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
|
||||
creation_date: 1708558377,
|
||||
modification_date: 1708558377,
|
||||
},
|
||||
];
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<script>
|
||||
import Contact from "./Contact.svelte";
|
||||
import OtherContact from "./OtherContact.svelte";
|
||||
</script>
|
||||
|
||||
<Contact/>
|
||||
<OtherContact/>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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,53 +0,0 @@
|
|||
<script>
|
||||
export let Style = "";
|
||||
</script>
|
||||
|
||||
<div class="container" style={Style}>
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
transform: translate(20.3mm, -5mm) rotate(-45deg);
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
vertical-align: bottom;
|
||||
align-self: flex-end;
|
||||
|
||||
z-index: 0;
|
||||
|
||||
> div:nth-child(1) {
|
||||
padding-top: 5mm;
|
||||
//border-bottom: #4472c4 dashed 2mm;
|
||||
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#4472c4 70%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
background-position: top;
|
||||
background-size: 6mm 1.5mm;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
background-color: #2f5496;
|
||||
width: 100mm;
|
||||
height: 25mm;
|
||||
|
||||
// Text
|
||||
display: grid;
|
||||
place-content: center;
|
||||
align-content: flex-start;
|
||||
> div {
|
||||
padding-top: 3.5mm;
|
||||
color: #4a7bcf;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<script>
|
||||
import Contact from "./Contact.svelte";
|
||||
import OtherContact from "./OtherContact.svelte";
|
||||
</script>
|
||||
|
||||
<Contact/>
|
||||
<OtherContact/>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<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,56 +0,0 @@
|
|||
<script>
|
||||
import placeholder from "$lib/zhen/cv-comps/400x400.png"
|
||||
import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.png"
|
||||
import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png"
|
||||
import SasLogo from "$lib/zhen/cv-comps/SASLogo.png"
|
||||
import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png"
|
||||
|
||||
import IconAndText2 from "./IconAndText2.svelte"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Education
|
||||
</b>
|
||||
</div>
|
||||
<div class="imagesContainer flex justify-center p-2 gap-4" id="balls">
|
||||
<IconAndText2 logo={DTU_Logo}>
|
||||
<b>DTU</b><br/>
|
||||
<p style="font-size: 0.6rem;">
|
||||
Artificial intelligence
|
||||
</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={NextLogo}>
|
||||
<b>Next</b><br/>
|
||||
<p style="font-size: 0.6rem;">
|
||||
Computer science
|
||||
</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={SasLogo}>
|
||||
<b>Master class</b><br/>
|
||||
<p style="font-size: 0.6rem;">
|
||||
SAS Programming
|
||||
</p>
|
||||
</IconAndText2>
|
||||
<IconAndText2 logo={EmphasysLogo}>
|
||||
<b>Emphasys center</b><br/>
|
||||
<p style="font-size: 0.6rem;">
|
||||
VR development
|
||||
</p>
|
||||
</IconAndText2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 90%;
|
||||
|
||||
> div:first-child {
|
||||
border-bottom: black 1mm solid;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<script>
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
This CV was made using html, css and <a class="grid place-content-center" href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a>
|
||||
Sources:
|
||||
<a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev/src/routes/zhen/cv/rev2/+page.svelte">CV source code</a>
|
||||
and
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1">My Website</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
z-index: 1;
|
||||
padding-left: 2mm;
|
||||
|
||||
font-size: 0.75rem;
|
||||
|
||||
//white-space: nowrap;
|
||||
|
||||
color: #777777;
|
||||
|
||||
* a {
|
||||
color: #3d6ddc;
|
||||
padding-left: 1mm;
|
||||
padding-right: 1mm;
|
||||
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
justify-content: start;
|
||||
|
||||
a:nth-child(1) > img {
|
||||
width: 5mm;
|
||||
|
||||
padding-left: 1mm;
|
||||
padding-right: 1mm;
|
||||
}
|
||||
}
|
||||
|
||||
div:nth-child(2){
|
||||
padding-bottom: 2mm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
<div class="short-profile-container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
Short profile
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
◾ "AI and data" at DTU. <br>
|
||||
◾ Working at <a class="underline" href="https://grazper.com/">GrazperAI</a> <br/>
|
||||
◾ Volunteer at Kildevæld Makerspace.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.short-profile-container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.short-profile-container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<div class="container">
|
||||
<div>
|
||||
<b style="text-align:left;">
|
||||
List of big projects
|
||||
</b>
|
||||
</div>
|
||||
<div class="table-display">
|
||||
<div class="table-item">
|
||||
<div>Computer vision</div>
|
||||
<div>Implimented YoloV1 from scratch. (object detection)</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Arduino</div>
|
||||
<div>Built my own claw machine with 2 dimentions of movement</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>App dev</div>
|
||||
<div>Made an Doulingo'ish app for learning chinese in 9 days</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>Open-source help</div>
|
||||
<div>Contributed in multiple Open-source projects on github</div>
|
||||
</div>
|
||||
<div class="table-item">
|
||||
<div>PCB designing</div>
|
||||
<div>I am currently designing my own circuit board</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="font-size: 0.75rem; color: sgray; align-content: start; width: 100%;">
|
||||
<p>
|
||||
If you want proof or want to know about other projects. Contact me!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.container > div:first-child {
|
||||
width: 100%;
|
||||
|
||||
/* Bottom border stripe*/
|
||||
border-bottom: 1mm solid black;
|
||||
}
|
||||
|
||||
.table-display {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-item {
|
||||
display: flex;
|
||||
justify-items: start;
|
||||
|
||||
width: 100%;
|
||||
border-bottom: 0.25mm solid #000000;
|
||||
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> div, > a {
|
||||
color: #000000;
|
||||
|
||||
&:first-child {
|
||||
width: 30%;
|
||||
font-size: 4mm;
|
||||
|
||||
display: grid;
|
||||
place-content: center start;
|
||||
|
||||
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 70%;
|
||||
|
||||
font-size: 3.25mm;
|
||||
display: grid;
|
||||
|
||||
padding-left: 1mm;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/routes/zhen/cv/cv.zip
Normal file
BIN
src/routes/zhen/cv/cv.zip
Normal file
Binary file not shown.
|
|
@ -1,250 +0,0 @@
|
|||
<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 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 +0,0 @@
|
|||
<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 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,257 +0,0 @@
|
|||
<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 CV" property="og:title" />
|
||||
<meta
|
||||
content="This CV is made completely with svelte + html + css + js"
|
||||
property="og:description"
|
||||
/>
|
||||
<meta content={preveiwImage} property="og:image" />
|
||||
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
||||
|
||||
<div class="cv-info-container hide-on-print">
|
||||
<div>
|
||||
Under here is my CV rev1 for an application made entirely in HTML and CSS.
|
||||
The page is designed to be saved as PDF. This can be done by pressing <div
|
||||
class="keyboard-key"
|
||||
>
|
||||
P
|
||||
</div>
|
||||
+
|
||||
<div class="keyboard-key">CTRL</div>
|
||||
, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
|
||||
<br />
|
||||
<br />
|
||||
I have to sadly recommend chrome for this process. Firefox somehow messes with
|
||||
the quality of the PDF :(
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="NotoSans cv-container-container include-in-print">
|
||||
<div class="cv-container sections decorations">
|
||||
<div id="left-section">
|
||||
<LeftTopDecor Style="pointer-events: none;" />
|
||||
<BottomRightDecor Style="pointer-events: none;" />
|
||||
<div>
|
||||
<NameAndImage />
|
||||
<ShortProfile />
|
||||
<CombinedContacts />
|
||||
<LinkedInQR />
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftSectionSeperator"></div>
|
||||
<div id="right-section">
|
||||
<AlexWatermark Style="pointer-events: none;" />
|
||||
<div id="TopRightSkillsText">
|
||||
<RepeatedSkills
|
||||
class="Cozette"
|
||||
targetTextHeight={30}
|
||||
targetTextWidth={75}
|
||||
/>
|
||||
</div>
|
||||
<div id="Credit">
|
||||
<LinkToSource />
|
||||
</div>
|
||||
<div>
|
||||
<Profile/>
|
||||
<BiggestFlex />
|
||||
<TableOfProjects />
|
||||
<Experience />
|
||||
<Education />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.cv-info-container {
|
||||
height: 40mm;
|
||||
background-color: #2b2a2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.keyboard-key {
|
||||
display: inline;
|
||||
padding-left: 1mm;
|
||||
padding-right: 1mm;
|
||||
|
||||
border-radius: 2mm;
|
||||
|
||||
background-color: #3e3d3d;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-container-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.cv-container-container * {
|
||||
color: black; // Set all text black
|
||||
}
|
||||
|
||||
.cv-container {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
|
||||
background-color: #eeeeee;
|
||||
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
.sections {
|
||||
// Shared between sections
|
||||
> div {
|
||||
display: grid;
|
||||
z-index: 0;
|
||||
|
||||
// Needed to cuttoff the extra decoration
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#left-section {
|
||||
background-color: #bdd6ee;
|
||||
width: calc(100% / 3 * 1);
|
||||
|
||||
> div:last-child {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
padding-top: 30mm;
|
||||
padding-bottom: 30mm;
|
||||
}
|
||||
}
|
||||
|
||||
#right-section {
|
||||
width: calc(100% / 3 * 2);
|
||||
|
||||
> div:last-child {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
row-gap: 6mm;
|
||||
|
||||
padding-top: 45mm;
|
||||
padding-bottom: 30mm;
|
||||
|
||||
// Disable interactivity for padding
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.decorations {
|
||||
#leftSectionSeperator {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
> div {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 5mm;
|
||||
z-index: 1;
|
||||
background: linear-gradient(90deg, #3636364f, #00000000);
|
||||
}
|
||||
}
|
||||
> div {
|
||||
#TopRightSkillsText {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
|
||||
place-content: center;
|
||||
|
||||
padding: 0;
|
||||
height: 50mm;
|
||||
|
||||
mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
|
||||
|
||||
color: rgb(190, 190, 190);
|
||||
font-family: "CozetteVector";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
#Credit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue