DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redacted my info, into my database #1

Merged
botalex merged 21 commits from dev into main 2025-10-09 06:42:05 +02:00
Conversation 0 Commits 21 Files changed 102 +240 -228
11 changed files with 240 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 2f5aa50c84 - Show all commits

15
src/routes/cv/+page.svelte
View file

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import re from "@ts/Redaction/Redactor";
// Left side // Left side
import NameAndImage from "./comps/NameAndImage.svelte"; import NameAndImage from "./comps/NameAndImage.svelte";
import ShortProfile from "./comps/ShortProfile.svelte"; import ShortProfile from "./comps/ShortProfile.svelte";
@ -7,8 +9,8 @@
// Right side // Right side
import Profile from "./comps/Profile.svelte"; import Profile from "./comps/Profile.svelte";
import Education from "./comps/Education.svelte";
import Experience from "./comps/Experience.svelte"; import Experience from "./comps/Experience.svelte";
import Education from "./comps/Education.svelte";
import BiggestFlex from "./comps/BiggestFlex.svelte"; import BiggestFlex from "./comps/BiggestFlex.svelte";
import TableOfProjects from "./comps/TableOfProjects.svelte"; import TableOfProjects from "./comps/TableOfProjects.svelte";
@ -44,8 +46,8 @@
} }
</script> </script>
<title>Zhentao Wei's CV {getFormattedDate()}</title> <title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
<meta content="Zhentao Wei's CV" property="og:title" /> <meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
<meta <meta
content="This CV is made completely with svelte + html + css + js" content="This CV is made completely with svelte + html + css + js"
property="og:description" property="og:description"
@ -73,7 +75,7 @@
<div class="NotoSans cv-config cv-container-container include-in-print"> <div class="NotoSans cv-config cv-container-container include-in-print">
<div class="cv-container sections decorations"> <div class="cv-container sections decorations">
<div id="left-section" class="bg-grid-cv"> <div id="left-section" class="bg-grid-cv flex justify-center">
<LeftTopDecor /> <LeftTopDecor />
<BottomRightDecor Style="pointer-events: none;" /> <BottomRightDecor Style="pointer-events: none;" />
<div <div
@ -247,13 +249,10 @@
> div:last-child { > div:last-child {
z-index: 1; z-index: 1;
width: 100%; width: 17.5rem;
left: 0; left: 0;
display: grid;
place-items: center;
padding-top: 30mm; padding-top: 30mm;
padding-bottom: 30mm; padding-bottom: 30mm;
} }

138
src/routes/cv/comps/Contact.svelte
View file

@ -1,75 +1,81 @@
<script lang="ts">
import re from "@ts/Redaction/Redactor";
</script>
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;"> Contact </b>
Contact </div>
</b> <div class="table-display">
<div class="table-item">
<div>Email</div>
<div>{$re?.email ?? "alex@deprived.dev"}</div>
</div> </div>
<div class="table-display"> <div class="table-item">
<div class="table-item"> <div>Phone</div>
<div>Email</div> <div>{$re?.phone ?? "1-800-273-8255"}</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>
<div class="table-item">
<div>LinkedIn</div>
<a
href={$re?.linkedIn.link ??
"https://www.youtube.com/watch?v=PaPotS8GSpc"}
>{$re?.linkedIn.text ?? "cool video lmao"}</a
>
</div>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container {
display: grid;
place-items: center;
width: 70%;
}
.container > div:first-child {
width: 100%;
/* Bottom border stripe*/
border-bottom: 1mm solid var(--left-line-color);
}
.table-display {
width: 100%;
}
.table-item {
display: flex;
justify-items: start;
width: 100%;
border-bottom: 0.25mm solid #000000;
> a {
text-decoration: underline;
}
> div,
> a {
&:first-child {
width: 35%;
font-size: 4mm;
display: grid; display: grid;
place-items: center; place-content: center start;
width: 70%;
} border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
}
.container > div:first-child {
width: 100%; &:nth-child(2) {
width: 65%;
/* Bottom border stripe*/
border-bottom: 1mm solid var(--left-line-color); font-size: 3.25mm;
} display: grid;
place-content: center;
.table-display {
width: 100%; padding-left: 1mm;
} }
.table-item {
display: flex;
justify-items: start;
width: 100%;
border-bottom: 0.25mm solid #000000;
> a {
text-decoration: underline;
}
> div, > a {
&:first-child {
width: 35%;
font-size: 4mm;
display: grid;
place-content: center start;
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
}
&:nth-child(2) {
width: 65%;
font-size: 3.25mm;
display: grid;
place-content: center;
padding-left: 1mm;
}
}
} }
}
</style> </style>

22
src/routes/cv/comps/Education.svelte
View file

@ -6,6 +6,13 @@
import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png"; import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png";
import IconAndText2 from "./IconAndText2.svelte"; import IconAndText2 from "./IconAndText2.svelte";
import re from "@src/ts/Redaction/Redactor";
import env, { initEnv } from "@src/ts/EnvHandler";
import onMount from "@src/optimizers/onMount";
onMount(() => {
initEnv();
});
</script> </script>
<div class="container h-10"> <div class="container h-10">
@ -13,20 +20,22 @@
<b style="text-align:left;"> Education </b> <b style="text-align:left;"> Education </b>
</div> </div>
<div class="flex justify-center p-2 w-full"> <div class="flex justify-center p-2 w-full">
<IconAndText2 logo={DTU_Logo}> <IconAndText2
<b>DTU</b><br /> logo={$re?.education[0].imageId.replace("[PB]", env.POCKETBASE_URL) ?? ""}
>
<b>{$re?.education[0].name ?? ""}</b><br />
<p style="font-size: 0.5rem;">AI and data</p> <p style="font-size: 0.5rem;">AI and data</p>
</IconAndText2> </IconAndText2>
<IconAndText2 logo={NextLogo}> <IconAndText2 logo={$re?.education[1].imageId ?? ""}>
<b>Next</b><br /> <b>{$re?.education[0].name ?? ""}</b><br />
<p style="font-size: 0.5rem;">Computer science</p> <p style="font-size: 0.5rem;">Computer science</p>
</IconAndText2> </IconAndText2>
<IconAndText2 logo={SasLogo}> <IconAndText2 logo={SasLogo}>
<b>Master class</b><br /> <b>Master class</b><br />
<p style="font-size: 0.5rem;">SAS Programming</p> <p style="font-size: 0.5rem;">SAS Programming</p>
</IconAndText2> </IconAndText2>
<IconAndText2 logo={EmphasysLogo}> <IconAndText2 logo={$re?.education[2].imageId ?? ""}>
<span class="font-semibold">Emphasys center</span><br /> <span class="font-semibold">{$re?.education[2].name ?? ""}</span><br />
<p style="font-size: 0.5rem;">VR development</p> <p style="font-size: 0.5rem;">VR development</p>
</IconAndText2> </IconAndText2>
</div> </div>
@ -44,4 +53,3 @@
} }
} }
</style> </style>

28
src/routes/cv/comps/Experience.svelte
View file

@ -1,11 +1,5 @@
<script> <script>
import placeholder from "$lib/zhen/cv-comps/400x400.png"; import re from "@src/ts/Redaction/Redactor";
import MakerspaceLogo from "$lib/zhen/cv-comps/MakerspaceLogo.png";
import EposLogo from "$lib/zhen/cv-comps/EposLogo.png";
import KhoraLogo from "$lib/zhen/cv-comps/KhoraLogo.jpg";
import GrazperAILogo from "$lib/zhen/cv-comps/GrazperLogo.jpg";
import YaaummaLogo from "$lib/zhen/cv-comps/YaaummaLogo.png";
import IconAndText from "./IconAndText.svelte"; import IconAndText from "./IconAndText.svelte";
</script> </script>
@ -15,37 +9,37 @@
</div> </div>
<div class="table"> <div class="table">
<div class="table-item"> <div class="table-item">
<IconAndText logo={YaaummaLogo}> <IconAndText logo={$re?.experience[0].imageId ?? ""}>
<b>Full-stack</b><br /> <b>Full-stack</b><br />
Yaaumma<br /> {$re?.experience[0].name}<br />
<i>Feb 2025 - Now</i> <i>Feb 2025 - Now</i>
</IconAndText> </IconAndText>
</div> </div>
<div class="table-item"> <div class="table-item">
<IconAndText logo={GrazperAILogo}> <IconAndText logo={$re?.experience[1].imageId ?? ""}>
<b>Data annotator</b><br /> <b>Data annotator</b><br />
GrazperAI<br /> {$re?.experience[1].name}<br />
<i>Jul 2024 - Now</i> <i>Jul 2024 - Now</i>
</IconAndText> </IconAndText>
</div> </div>
<div class="table-item"> <div class="table-item">
<IconAndText logo={MakerspaceLogo}> <IconAndText logo={$re?.experience[2].imageId ?? ""}>
<b>3D printer manager</b> - Volunteer<br /> <b>3D printer manager</b> - Volunteer<br />
Makerspace - kildevæld Kulturcenter<br /> {$re?.experience[2].name}<br />
<i>Nov 2023 - Now</i> <i>Nov 2023 - Now</i>
</IconAndText> </IconAndText>
</div> </div>
<div class="table-item"> <div class="table-item">
<IconAndText logo={EposLogo}> <IconAndText logo={$re?.experience[3].imageId ?? ""}>
<b>Machine Learning Engineer</b> - Short term intern<br /> <b>Machine Learning Engineer</b> - Short term intern<br />
Product design department - Epos<br /> {$re?.experience[3].name}<br />
<i>Apr 2024 - Apr 2024</i> <i>Apr 2024 - Apr 2024</i>
</IconAndText> </IconAndText>
</div> </div>
<div class="table-item"> <div class="table-item">
<IconAndText logo={KhoraLogo}> <IconAndText logo={$re?.experience[4].imageId ?? ""}>
<b>Assistant</b> - Short term intern<br /> <b>Assistant</b> - Short term intern<br />
Khora Virtual Reality<br /> {$re?.experience[4].name}<br />
<i>Oct 2020 - Oct 2020</i> <i>Oct 2020 - Oct 2020</i>
</IconAndText> </IconAndText>
</div> </div>

7
src/routes/cv/comps/IconAndText.svelte
View file

@ -5,9 +5,12 @@
export let fontSize: string = "3mm"; export let fontSize: string = "3mm";
export let lineHeight: string = "3.1mm"; export let lineHeight: string = "3.1mm";
import env, { initEnv } from "@src/ts/EnvHandler";
import onMount from "@e/onMount"; import onMount from "@e/onMount";
onMount(() => { onMount(() => {
imageCaption = logo.split(/(\\|\/)/g).pop(); imageCaption = logo.split(/(\\|\/)/g).pop();
initEnv();
}); });
let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
@ -15,7 +18,7 @@
<div class="container"> <div class="container">
<img <img
src={logo} src={logo.replace("[PB]", env.POCKETBASE_URL) ?? ""}
class="bg-white w-10 h-10 object-contain rounded shadow" class="bg-white w-10 h-10 object-contain rounded shadow"
alt={imageCaption} alt={imageCaption}
width={logoWidths} width={logoWidths}
@ -37,7 +40,5 @@
text-align: start; text-align: start;
} }
} }
</style> </style>

18
src/routes/cv/comps/IconAndText2.svelte
View file

@ -2,10 +2,11 @@
export let logo: string; export let logo: string;
export let logoWidths: string = "35%"; export let logoWidths: string = "35%";
import onMount from "@e/onMount"; import onMount from "@e/onMount";
import env, { initEnv } from "@src/ts/EnvHandler";
onMount(() => { onMount(() => {
imageCaption = logo.split(/(\\|\/)/g).pop(); imageCaption = logo.split(/(\\|\/)/g).pop();
initEnv();
}); });
let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
@ -14,18 +15,15 @@
<div class=" h-full container flex"> <div class=" h-full container flex">
<div class="flex h-full w-6 items-center overflow-hidden rounded"> <div class="flex h-full w-6 items-center overflow-hidden rounded">
<img <img
src={logo} src={logo.replace("[PB]", env.POCKETBASE_URL) ?? ""}
class=" w-6 h-6 object-cover shadow" class=" w-6 h-6 object-cover shadow"
alt={imageCaption} alt={imageCaption}
width={logoWidths} width={logoWidths}
/> />
</div> </div>
<div class="px-1 ml-1 h-full text-[0.5rem]" > <div class="px-1 ml-1 h-full text-[0.5rem]">
<span class="inline " > <span class="inline">
<slot /> <slot />
</span> </span>
</div> </div>
</div> </div>

32
src/routes/cv/comps/NameAndImage.svelte
View file

@ -1,26 +1,24 @@
<script lang="ts"> <script lang="ts">
import NamePlate from "./NamePlate.svelte"; import NamePlate from "./NamePlate.svelte";
import selfie from "$lib/zhen/cv-comps/VRNerd.jpg" import selfie from "$lib/zhen/cv-comps/VRNerd.jpg";
import zylveterSus from "$lib/zhen/cv-comps/zylveterSus.png"
</script> </script>
<div class="nameAndImageContainer"> <div class="nameAndImageContainer">
<NamePlate/> <NamePlate />
<div class="mt-4 w-48 h-48 overflow-hidden shadow-xl rounded-lg flex justify-center items-center"> <div
<img src={selfie} class="selfie-constraints object-cover" alt="Zhentao Wei"/> class="mt-4 w-48 h-48 overflow-hidden shadow-xl rounded-lg flex justify-center items-center"
>
</div> <img src={selfie} class="selfie-constraints object-cover" alt="Selfie" />
</div>
</div> </div>
<style> <style>
.nameAndImageContainer { .nameAndImageContainer {
display: grid; display: grid;
place-items: center; place-items: center;
} }
.selfie-constraints{ .selfie-constraints {
max-width: 100%;
max-width: 100%; }
}
</style> </style>

30
src/routes/cv/comps/NamePlate.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import re from "@ts/Redaction/Redactor";
</script>
<div class="name-plate-container"> <div class="name-plate-container">
<span style="text-align: center;"> <span style="text-align: center;">
<b> <b>{$re?.name ?? "BOTAlex"}</b><br />
Zhentao Wei (He/Him)
</b><br/> </span>
(He/Him)
</span>
</div> </div>
<style> <style>
.name-plate-container{ .name-plate-container {
display: grid; display: grid;
place-items: center; place-items: center;
width: 60%; width: 60%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid var(--left-line-color); border-bottom: 1mm solid var(--left-line-color);
} }
</style> </style>

127
src/routes/cv/comps/OtherContact.svelte
View file

@ -1,70 +1,75 @@
<script lang="ts">
import re from "@ts/Redaction/Redactor";
</script>
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;"> Other </b>
Other </div>
</b> <div class="table-display">
<div class="table-item">
<div>Itch.io</div>
<a href={$re?.itch.link ?? "https://www.youtube.com/watch?v=PaPotS8GSpc"}
>{$re?.itch.text ?? "The same video"}</a
>
</div> </div>
<div class="table-display"> <div class="table-item">
<div class="table-item"> <div>Github</div>
<div>Itch.io</div> <a href="https://github.com/MagicBOTAlex">@MagicBOTAlex</a>
<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>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container {
display: grid;
place-items: center;
width: 70%;
}
.container > div:first-child {
width: 100%;
/* Bottom border stripe*/
border-bottom: 1mm solid var(--left-line-color);
}
.table-display {
width: 100%;
}
.table-item {
display: flex;
justify-items: start;
width: 100%;
border-bottom: 0.25mm solid #000000;
> a {
text-decoration: underline;
}
> div,
> a {
&:first-child {
width: 35%;
font-size: 4mm;
display: grid; display: grid;
place-items: center; place-content: center start;
width: 70%;
} border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
}
.container > div:first-child {
width: 100%; &:nth-child(2) {
width: 65%;
/* Bottom border stripe*/
border-bottom: 1mm solid var(--left-line-color); font-size: 3.25mm;
} display: grid;
place-content: center;
.table-display {
width: 100%; padding-left: 1mm;
} }
.table-item {
display: flex;
justify-items: start;
width: 100%;
border-bottom: 0.25mm solid #000000;
> a {
text-decoration: underline;
}
> div, > a {
&:first-child {
width: 35%;
font-size: 4mm;
display: grid;
place-content: center start;
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
}
&:nth-child(2) {
width: 65%;
font-size: 3.25mm;
display: grid;
place-content: center;
padding-left: 1mm;
}
}
} }
}
</style> </style>

47
src/routes/cv/comps/ShortProfile.svelte
View file

@ -1,29 +1,32 @@
<div class="short-profile-container"> <script lang="ts">
<div> import re from "@ts/Redaction/Redactor";
<b style="text-align:left;"> </script>
Short profile
</b>
</div>
<div>
◾ Full-stack at Yaaumma <br>
◾ "AI and data" at DTU. <br>
◾ Working at <a class="underline" href="https://grazper.com/">GrazperAI</a> <br/>
◾ Volunteer at Kildevæld Makerspace.
</div>
<div class="short-profile-container">
<div>
<b style="text-align:left;"> Short profile </b>
</div>
<div>
◾ Full-stack at {$re?.shortProfileHiddenContent[0] ?? "Deprived devs"}
<br />
◾ "AI and data" at {$re?.shortProfileHiddenContent[1] ?? "some uni"}.
<br />
◾ Working at {$re?.shortProfileHiddenContent[2] ?? "somewhere"} <br />
◾ Volunteer at {$re?.shortProfileHiddenContent[3] ?? "Deprived devs"}.
</div>
</div> </div>
<style> <style>
.short-profile-container{ .short-profile-container {
display: grid; display: grid;
place-items: center; place-items: center;
width: 70%; width: 70%;
} }
.short-profile-container > div:first-child { .short-profile-container > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid var(--left-line-color); border-bottom: 1mm solid var(--left-line-color);
} }
</style> </style>

4
src/ts/Redaction/Redactor.ts
View file

@ -32,7 +32,7 @@ class Redactor implements Readable<Profile | undefined> {
const unredactHash = hashResJson.response; const unredactHash = hashResJson.response;
initEnv(); initEnv();
const url = `${env.POCKETBASE_URL}/api/files/redacted_content/${unredactHash}/redacted_cv_info_amhz90nhr7.json`; const url = `${env.POCKETBASE_URL}/api/collections/redacted_content/records/${unredactHash}`;
const res = await fetch(url, { const res = await fetch(url, {
method: "GET", method: "GET",
@ -41,7 +41,7 @@ class Redactor implements Readable<Profile | undefined> {
if (!res.ok) throw new Error(`HTTP ${res.status}`); if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json(); const data = await res.json();
this.unredactedProfile = parseProfile(data); this.unredactedProfile = parseProfile(data.json);
this.notify(); // <-- tell Svelte to update this.notify(); // <-- tell Svelte to update
return this.unredactedProfile; return this.unredactedProfile;
} }