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

multi lang CV
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 12m38s
Details

Browse source
This commit is contained in:
BOTAlex 2026-01-29 02:16:43 +01:00
parent 7ab06325bc
commit ad138b5de5
43 changed files with 1315 additions and 1974 deletions
Download patch file Download diff file Expand all files Collapse all files

56
deprecated/tools/+page.svelte
View file

@ -1,56 +0,0 @@
<script>
import A4 from "../zhen/notes/physics/sharedComps/A4.svelte";
import ToolButton from "./comps/ToolButton.svelte";
import BatteryMedium from "@lucide/svelte/icons/battery-medium";
</script>
<div class="flex justify-center pt-10">
<A4
bottomBorder={false}
bgColor={"rounded-lg bg-base-300"}
class="cozette text-base-content h-full"
>
<div class="p-4 flex flex-col h-full">
<h1 class="text-5xl font-bold">
Tools (NOT FINISHED. come back in the future.)
</h1>
<span class="w-full text-xl"
>These are the tools collected from different places of the internet</span
>
<!-- Spacing -->
<div class="pt-14"></div>
<div class="p-4 bg-base-200 rounded-lg">
<h2 class="text-2xl font-bolc">MPUs/SoCs</h2>
<span>Whatever acronym you want lol</span>
<div class="grid grid-cols-3 gap-4">
<ToolButton
title="Sleeping battery life"
desc="Calculates the battery life depending on sleep and non-sleep power usage."
btnText="To calculator"
toolIcon={BatteryMedium}
/>
<!-- <ToolButton
title="Sleeping battery life"
desc="Calculates the battery life depending on sleep and non-sleep power usage."
btnText="To calculator"
toolIcon={BatteryMedium}
/>
<ToolButton
title="Sleeping battery life"
desc="Calculates the battery life depending on sleep and non-sleep power usage."
btnText="To calculator"
toolIcon={BatteryMedium}
/> -->
</div>
</div>
<div class="mt-auto align-text-bottom">
I if you have tool suggestions, then either create an issue, create a
pull request, or send an email. I probably wont add it though, since
this is free work lol.
</div>
</div>
</A4>
</div>

183
deprecated/tools/battery-life-calculator/+page.svelte
View file

@ -1,183 +0,0 @@
<script lang="ts">
import A4 from "../../zhen/notes/physics/sharedComps/A4.svelte";
import { BatteryLifeCalculator } from "./pageSrc/BatteryCalc";
import { getMCU, type MCU_Type } from "./pageSrc/MCU_defs";
// let mathMachine = new BatteryLifeCalculator();
let useCustom: boolean = false;
let selectedText: string = "";
let selectedMcu: MCU_Type | undefined = undefined;
$: selectedMcu = getMCU(selectedText)
const options = ["esp32-s3", "esp32-s3"];
</script>
<div class="flex justify-center pt-10">
<A4
bottomBorder={false}
bgColor={"rounded-lg bg-base-300"}
class="cozette text-base-content h-full"
>
<div class="p-4 flex flex-col h-full">
<h1 class="text-5xl font-bold">Battery life calculator</h1>
<span class="w-full text-xl">
Calculates the time a battery will last. Too lazy to explain
more.
</span>
<!-- Spacing -->
<div class="pt-14"></div>
<div class="p-4 bg-base-200 rounded-lg">
<h2 class="text-2xl font-bolc">Software</h2>
<div class="grid grid-cols-2 gap-4">
<div class="form-control">
<span class="text-sm text-slate-300 text-opacity-60"
>Duration of code execution</span
>
<div class="join">
<input
type="number"
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
/>
<div
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
>
<span class="text-center pl-1 pr-2">sec</span>
</div>
</div>
</div>
<div class="form-control">
<span class="text-sm text-slate-300 text-opacity-60"
>sleep time</span
>
<div class="join">
<input
type="number"
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
/>
<div
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
>
<span class="text-center pl-1 pr-2">sec</span>
</div>
</div>
</div>
<div class="col-span-full">
<h2 class=" text-2xl font-bolc">Hardware</h2>
<div class="flex">
<div
class="text-sm text-slate-300 text-opacity-60 text"
>
Use custom values
</div>
<input
bind:checked={useCustom}
class="ml-2 checkbox checkbox-xs my-auto"
type="checkbox"
/>
</div>
</div>
{#if !useCustom}
<div>
<select
bind:value={selectedText}
class="select select-sm select-bordered w-56 max-w-xs"
>
<option disabled value="">Select a text</option>
{#each options as option}
<option value={option}>{option}</option>
{/each}
</select>
{#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
<p class="mt-4 text-lg">
wifi
</p>
{/if}
{#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
<p class="mt-4 text-lg">
ble
</p>
{/if}
</div>
{:else}
<div class="form-control">
<span class="text-sm text-slate-300 text-opacity-60"
>Duration of code execution</span
>
<div class="join">
<input
type="number"
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
/>
<div
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
>
<span class="text-center pl-1 pr-2"
>sec</span
>
</div>
</div>
</div>
<div class="form-control">
<span class="text-sm text-slate-300 text-opacity-60"
>sleep time</span
>
<div class="join">
<input
type="number"
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
/>
<div
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
>
<span class="text-center pl-1 pr-2"
>sec</span
>
</div>
</div>
</div>
{/if}
</div>
</div>
<div class="mt-auto align-text-bottom text-center">
Source for the calculations is at this
<a
class="text-blue-500 underline"
target="_blank"
href="https://github.com/simonneutert/batterylife-calculator"
>github</a
>
and the
<a
class="text-blue-500 underline"
target="_blank "
href="https://www.of-things.de/battery-life-calculator.php"
>original website.</a
>
I just mearly made additions.
</div>
</div>
</A4>
</div>
<style>
/* Hide the spinner for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Hide the spinner for Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
</style>

123
deprecated/tools/battery-life-calculator/pageSrc/BatteryCalc.ts
View file

@ -1,123 +0,0 @@
export class BatteryLifeCalculator {
timeRunSeconds: number;
timeSleepSeconds: number;
consumptionActiveMilliAmpHours: number;
consumptionSleepMilliAmpHours: number;
powerBatteryTotalMilliAmpHours: number;
powerBatteryBufferBeforeEmptyPercent: number;
constructor(
timeRunSeconds: number,
timeSleepSeconds: number,
consumptionActiveMilliAmpHours: number,
consumptionSleepMilliAmpHours: number,
powerBatteryTotalMilliAmpHours: number,
powerBatteryBufferBeforeEmptyPercent: number = 20
) {
this.timeRunSeconds = timeRunSeconds;
this.timeSleepSeconds = timeSleepSeconds;
this.consumptionActiveMilliAmpHours = consumptionActiveMilliAmpHours;
this.consumptionSleepMilliAmpHours = consumptionSleepMilliAmpHours;
this.powerBatteryTotalMilliAmpHours = powerBatteryTotalMilliAmpHours;
this.powerBatteryBufferBeforeEmptyPercent = powerBatteryBufferBeforeEmptyPercent;
console.log(
"The source of this battery calc is here: https://github.com/simonneutert/batterylife-calculator\nI was too lazy to make the math myself."
);
}
// public API
milliAmpToMicroAmp(milliAmps: number): number {
return milliAmps * 1000;
}
microAmpToMilliAmp(milliAmps: number): number {
return milliAmps * 0.001;
}
calculate(): {
powerAveragePerHour: number;
runtimeHoursEstimated: number;
runtimeDaysEstimated: number;
runtimeDaysRemainingHoursEstimated: number;
} {
return {
powerAveragePerHour: this.powerEstimatedHourly(),
runtimeHoursEstimated: this.runtimeHoursEstimated(),
runtimeDaysEstimated: this.runtimeDaysEstimated(),
runtimeDaysRemainingHoursEstimated: this.runtimeDaysRemainingHoursEstimated(),
};
}
powerEstimatedHourly(): number {
return this.calcPowerEst(
this.powerRun(),
this.consumptionActiveMilliAmpHours,
this.powerSleep(),
this.consumptionSleepMilliAmpHours
);
}
runtimeHoursEstimated(): number {
return parseInt((this.powerLipo() / this.powerEstimatedHourly()).toString(), 10);
}
runtimeDaysEstimated(): number {
return parseInt((this.runtimeHoursEstimated() / 24).toString(), 10);
}
runtimeDaysRemainingHoursEstimated(): number {
return parseInt((this.runtimeHoursEstimated() % 24).toString(), 10);
}
// private methods
private roundOff(x: number): number {
return Math.round(x * 100.0) / 100.0;
}
private calcPowerLipo(x: number, y: number): number {
return parseFloat(((x * (100 - y)) / 100).toString());
}
private calcRuns(x: number, y: number): number {
return parseFloat((60 / (x + y)).toString());
}
private calcRunsHour(x: number, y: number): number {
return parseFloat((3600 / (x + y)).toString());
}
private calcPowerRun(x: number, y: number): number {
return parseFloat(((x / (x + y)) * 3600).toString());
}
private calcPowerSleep(x: number, y: number): number {
return parseFloat(((y / (x + y)) * 3600).toString());
}
powerLipo(): number {
return this.calcPowerLipo(this.powerBatteryTotalMilliAmpHours, this.powerBatteryBufferBeforeEmptyPercent);
}
runs(): number {
return this.calcRuns(this.timeRunSeconds, this.timeSleepSeconds);
}
runsHour(): number {
return this.calcRunsHour(this.timeRunSeconds, this.timeSleepSeconds);
}
powerRun(): number {
return this.calcPowerRun(this.timeRunSeconds, this.timeSleepSeconds);
}
powerSleep(): number {
return this.calcPowerSleep(this.timeRunSeconds, this.timeSleepSeconds);
}
private calcPowerEst(a: number, b: number, c: number, d: number): number {
return parseFloat(((a / 3600) * b + (c / 3600) * d).toString());
}
}

63
deprecated/tools/battery-life-calculator/pageSrc/MCU_defs.ts
View file

@ -1,63 +0,0 @@
export interface MCU_Type {
name: string;
cpu: { [key: string]: Number }; // state: power consumption
sleep: { [key: string]: Number };
wifi?: { [key: string]: Number };
bluetooth?: { [key: string]: Number };
}
const MCUs: MCU_Type[] = [
{
name: "esp32-s3",
cpu: { // mili amps
single_core_40MHz: 21.8,
dual_core_40MHz: 24.4,
single_core_80MHz: 42.6,
dual_core_80MHz: 47.3,
single_core_160MHz: 54.6,
dual_core_160MHz: 54.1,
single_core_240MHz: 65.9,
dual_core_240MHz: 81.3,
},
sleep: {
},
wifi: { //
dBm_21: 318.2,
sleep: 10
},
bluetooth: {
active: 100,
sleep: 5
}
},
{
name: "esp32-c3",
cpu: {
single_core_80MHz: 22,
single_core_160MHz: 54.6,
},
sleep: {
},
wifi: {
active: 110,
sleep: 9
},
bluetooth: {
active: 90,
sleep: 4
}
}
];
export function getMCU(name: string): MCU_Type | undefined{
for (let i = 0; i < MCUs.length; i++) {
const element = MCUs[i];
if (element.name == name)
return element
}
return undefined;
}

27
deprecated/tools/comps/ToolButton.svelte
View file

@ -1,27 +0,0 @@
<script lang="ts">
import type { Component } from 'svelte';
export let toolIcon: Component | undefined = undefined;
export let title: string = "Sleeping battery life";
export let desc: string = "Calculates the battery life depending on sleep and non-sleep power usage.";
export let btnText: string = "To calculator";
export let btnHref: string = "/tools/battery-life-calculator";
</script>
<div class="min-w-10 min-h-10 bg-base-100 rounded-lg">
<div class="p-4">
<div class="flex">
<div class="font-bold text-xl">{title}</div>
</div>
<div class="text-sm">{desc}</div>
<div class="flex pt-4">
{#if toolIcon != undefined}
<svelte:component this={toolIcon}/>
{/if}
<a href="{btnHref}" class="btn ml-auto btn-primary btn-sm">{btnText}</a>
</div>
</div>
</div>

18
deprecated/zhen/Comps/AboutMe.svelte
View file

@ -1,18 +0,0 @@
<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>

57
deprecated/zhen/Comps/TopNameTextPlate.svelte
View file

@ -1,57 +0,0 @@
<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>

67
deprecated/zhen/Comps/ZhenInformatikTimeline.svelte
View file

@ -1,67 +0,0 @@
<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>

21
deprecated/zhen/Utils/Vector2.ts
View file

@ -1,21 +0,0 @@
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);;
}
}

23
deprecated/zhen/cv/CompsRev3/AlexWatermark.svelte
View file

@ -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>

25
deprecated/zhen/cv/CompsRev3/BiggestFlex.svelte
View file

@ -1,25 +0,0 @@
<div class="short-profile-container">
<div class="flex gap-1 items-baseline">
<b style="text-align:left;">
Biggest flex
</b>
<h1 style="font-size: 0.5rem; color: grey;">*Gamejams that had competitions.</h1>
</div>
<div class="text-[0.85rem] text-left">
<a href="https://deprived.dev" >The <span class="text-blue-500 underline">deprived devs</span></a> has won every gamejam, we've participated. <br/>
</div>
</div>
<style>
.short-profile-container{
width: 90%;
}
.short-profile-container > div:first-child {
width: 100%;
/* Bottom border stripe*/
border-bottom: 1mm solid black;
}
</style>

53
deprecated/zhen/cv/CompsRev3/BottomRightDecor.svelte
View file

@ -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,
var(--left-decor-line-color) 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: var(--left-decor-line-color);
width: 100mm;
height: 25mm;
// Text
display: grid;
place-content: center;
align-content: flex-start;
> div {
padding-top: 3.5mm;
color: #4a7bcf;
font-weight: bold;
}
}
}
</style>

7
deprecated/zhen/cv/CompsRev3/CombinedContacts.svelte
View file

@ -1,7 +0,0 @@
<script>
import Contact from "./Contact.svelte";
import OtherContact from "./OtherContact.svelte";
</script>
<Contact/>
<OtherContact/>

75
deprecated/zhen/cv/CompsRev3/Contact.svelte
View file

@ -1,75 +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 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;
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>

47
deprecated/zhen/cv/CompsRev3/Education.svelte
View file

@ -1,47 +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 h-10">
<div>
<b style="text-align:left;"> Education </b>
</div>
<div class="flex justify-center p-2 w-full">
<IconAndText2 logo={DTU_Logo}>
<b>DTU</b><br />
<p style="font-size: 0.5rem;">AI and data</p>
</IconAndText2>
<IconAndText2 logo={NextLogo}>
<b>Next</b><br />
<p style="font-size: 0.5rem;">Computer science</p>
</IconAndText2>
<IconAndText2 logo={SasLogo}>
<b>Master class</b><br />
<p style="font-size: 0.5rem;">SAS Programming</p>
</IconAndText2>
<IconAndText2 logo={EmphasysLogo}>
<span class="font-semibold">Emphasys center</span><br />
<p style="font-size: 0.5rem;">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>

78
deprecated/zhen/cv/CompsRev3/Experience.svelte
View file

@ -1,78 +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 YaaummaLogo from "$lib/zhen/cv-comps/YaaummaLogo.png";
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={YaaummaLogo}>
<b>Full-stack</b><br />
Yaaumma<br />
<i>Feb 2025 - Now</i>
</IconAndText>
</div>
<div class="table-item">
<IconAndText logo={GrazperAILogo}>
<b>Data annotator</b><br />
GrazperAI<br />
<i>Jul 2024 - Now</i>
</IconAndText>
</div>
<div class="table-item">
<IconAndText logo={MakerspaceLogo}>
<b>3D printer manager</b> - Volunteer<br />
Makerspace - kildevæld Kulturcenter<br />
<i>Nov 2023 - Now</i>
</IconAndText>
</div>
<div class="table-item">
<IconAndText logo={EposLogo}>
<b>Machine Learning Engineer</b> - Short term intern<br />
Product design department - Epos<br />
<i>Apr 2024 - Apr 2024</i>
</IconAndText>
</div>
<div class="table-item">
<IconAndText logo={KhoraLogo}>
<b>Assistant</b> - Short term intern<br />
Khora Virtual Reality<br />
<i>Oct 2020 - Oct 2020</i>
</IconAndText>
</div>
</div>
</div>
<style lang="scss">
.container {
display: grid;
place-items: center;
width: 90%;
overflow: hidden;
& > div:first-child {
width: 100%;
/* Bottom border stripe*/
border-bottom: 1mm solid black;
}
}
.table-item {
padding: 2mm;
&:not(:last-child) {
border-bottom: 0.25mm solid #000000;
}
}
</style>

43
deprecated/zhen/cv/CompsRev3/IconAndText.svelte
View file

@ -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 "@e/onMount";
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="bg-white w-10 h-10 object-contain rounded shadow"
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;
& > div {
padding-left: 3mm;
text-align: start;
}
}
</style>

31
deprecated/zhen/cv/CompsRev3/IconAndText2.svelte
View file

@ -1,31 +0,0 @@
<script lang="ts">
export let logo: string;
export let logoWidths: string = "35%";
import onMount from "@e/onMount";
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=" h-full container flex">
<div class="flex h-full w-6 items-center overflow-hidden rounded">
<img
src={logo}
class=" w-6 h-6 object-cover shadow"
alt={imageCaption}
width={logoWidths}
/>
</div>
<div class="px-1 ml-1 h-full text-[0.5rem]" >
<span class="inline " >
<slot />
</span>
</div>
</div>

66
deprecated/zhen/cv/CompsRev3/LeftTopDecor.svelte
View file

@ -1,66 +0,0 @@
<script>
import RepeatedSkills from "./RepeatedSkills.svelte";
// Cedit
import LinkToSource from "../CompsRev3/LinkToSource.svelte";
export let Style = "";
export let Class = "";
</script>
<div class="container {Class}" style="{Style}">
<div class=" text-center bg-[var(--left-grid-bg-color)]">
<RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={3} targetTextWidth={50} applyRotation={false}/>
</div>
<div/>
<div class="flex justify-center">
<div class="w-[6cm]">
<LinkToSource/>
</div>
</div>
</div>
<style lang="scss">
.container {
position: absolute;
transform: translate(-30mm, 7.5mm) 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;
padding-top: 1mm;
// Text inside
display: grid;
place-content: center;
border-bottom: var(--left-decor-line-color) dotted 0.5mm;
border-top: var(--left-decor-line-color) dotted 0.5mm;
&:first-child {
color: var(--left-decor-text-color);
font-size: 3mm;
//font-weight: bold;
}
}
> div:nth-child(2) {
padding-top: 4mm;
//border-bottom: #4472c4 dashed 2mm;
// background-color: var(--left-grid-bg-color);
background-image: linear-gradient(to right, var(--left-decor-line-color) 70%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 6mm 1.5mm;
background-repeat: repeat-x;
}
}
</style>

106
deprecated/zhen/cv/CompsRev3/LinkToSource.svelte
View file

@ -1,106 +0,0 @@
<script>
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg";
</script>
<div class="container">
<div class="flex justify-center">
<div class="corner-border-container p-1 m-1">
<div class="flex">
This CV was made using html, css and <a
class="grid place-content-center"
href="https://kit.svelte.dev/"
><img src={svelteLogo} class="w-2 h-2" alt="SvelteKit logo" /></a
>
</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="/cv?hideOnPrint=1">My Website</a>
</div>
</div>
</div>
<style lang="scss">
.corner-border-container {
--length: 5px;
--width: 1px;
background-color: var(--left-grid-bg-color);
background-image:
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
),
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
),
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
),
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
),
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
),
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
),
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
),
linear-gradient(
var(--left-decor-line-color),
var(--left-decor-line-color)
);
background-size:
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length);
background-position:
top left,
top left,
top right,
top right,
bottom right,
bottom right,
bottom left,
bottom left;
background-repeat: no-repeat;
}
.container {
z-index: 1;
font-size: 0.5rem;
//white-space: nowrap;
color: #777777;
* a {
color: #3d6ddc;
padding-left: 1mm;
padding-right: 1mm;
text-decoration: underline;
}
div:nth-child(2) {
padding-bottom: 2mm;
}
}
</style>

58
deprecated/zhen/cv/CompsRev3/LinkedInQR.svelte
View file

@ -1,58 +0,0 @@
<script>
import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
</script>
<div class="container">
<div>LinkedIn</div>
<div class="qrcode corner-border-container p-4">{@html QRCode}</div>
</div>
<style lang="scss">
.corner-border-container {
--length: 20px;
--width: 4px;
background-color: var(--left-grid-bg-color);
background-image:
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
background-size:
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length);
background-position:
top left,
top left,
top right,
top right,
bottom right,
bottom right,
bottom left,
bottom left;
background-repeat: no-repeat;
}
.qrcode {
transform: scale(0.9);
}
.container {
display: grid;
place-items: center;
& * {
font-size: 7.5mm;
}
}
</style>

26
deprecated/zhen/cv/CompsRev3/NameAndImage.svelte
View file

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

21
deprecated/zhen/cv/CompsRev3/NamePlate.svelte
View file

@ -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 var(--left-line-color);
}
</style>

70
deprecated/zhen/cv/CompsRev3/OtherContact.svelte
View file

@ -1,70 +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 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;
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>

34
deprecated/zhen/cv/CompsRev3/Profile.svelte
View file

@ -1,34 +0,0 @@
<div class="short-profile-container">
<div class="flex gap-1 items-baseline">
<b style="text-align:left;">
About me
</b>
<div class="opacity-70 text-[0.5rem]">
I know the languages listed above in the decor!
</div>
</div>
<span>
I love learning on my own. I've placed my education at the bottom of my CV.
This is because everything I've learnt is on my own, and I refuse to give too much credit to my education.
I encurage you to checkout which <span class="font-semibold">Open-source</span> projects I've worked on, on my <a href="https://github.com/MagicBOTAlex"><span class="text-blue-500 underline">github</span></a>.
<br>
<br>
Other than my github, I've listed some projectss highlighted below. :)
</span>
</div>
<style>
.short-profile-container{
display: grid;
place-items: center;
width: 90%;
}
.short-profile-container > div:first-child {
width: 100%;
/* Bottom border stripe*/
border-bottom: 1mm solid black;
}
</style>

62
deprecated/zhen/cv/CompsRev3/RepeatedSkills.svelte
View file

@ -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>

29
deprecated/zhen/cv/CompsRev3/ShortProfile.svelte
View file

@ -1,29 +0,0 @@
<div class="short-profile-container">
<div>
<b style="text-align:left;">
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>
<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 var(--left-line-color);
}
</style>

88
deprecated/zhen/cv/CompsRev3/TableOfProjects.svelte
View file

@ -1,88 +0,0 @@
<div class="container">
<div class="flex gap-1">
<b style="text-align:left;">
List of big projects
</b>
<div class="opacity-70 text-[0.5rem]">
It is likely I'm working on something new, as you're reading this.
<br/>
Contact me if you're curious! :D
</div>
</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 from scratch.</div>
</div>
<div class="table-item">
<div>App dev</div>
<div>Made an Doulingo'ish app for learning chinese.</div>
</div>
<div class="table-item">
<div>Open-source</div>
<div>I contribute often to Open-source</div>
</div>
<div class="table-item">
<div>PCB designing</div>
<div>I am currently designing my own circuit board</div>
</div>
</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
deprecated/zhen/cv/cv.zip
View file

Binary file not shown.

306
deprecated/zhen/cv/rev3/+page.svelte
View file

@ -1,306 +0,0 @@
<script lang="ts">
// Left side
import NameAndImage from "../CompsRev3/NameAndImage.svelte";
import ShortProfile from "../CompsRev3/ShortProfile.svelte";
import CombinedContacts from "../CompsRev3/CombinedContacts.svelte";
import LinkedInQR from "../CompsRev3/LinkedInQR.svelte";
// Right side
import Profile from "../CompsRev3/Profile.svelte";
import Education from "../CompsRev3/Education.svelte";
import Experience from "../CompsRev3/Experience.svelte";
import BiggestFlex from "../CompsRev3/BiggestFlex.svelte";
import TableOfProjects from "../CompsRev3/TableOfProjects.svelte";
// Decorations
import LeftTopDecor from "../CompsRev3/LeftTopDecor.svelte";
import BottomRightDecor from "../CompsRev3/BottomRightDecor.svelte";
import AlexWatermark from "../CompsRev3/AlexWatermark.svelte";
import RepeatedSkills from "../CompsRev3/RepeatedSkills.svelte";
// Discord embed
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png";
// Print detection setup
import onMount from "@e/onMount";
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-config cv-container-container include-in-print">
<div class="cv-container sections decorations">
<div id="left-section" class="bg-grid-cv">
<LeftTopDecor />
<BottomRightDecor Style="pointer-events: none;" />
<div
class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
style="background-color: #bdd6ee"
></div>
<div class="text-[var(--left-text-color)] pointer-events-none">
<div class="pointer-events-auto flex flex-col justify-center w-full items-center">
<NameAndImage />
<div class="py-2"></div>
<ShortProfile />
<div class="py-2"></div>
<CombinedContacts />
<div class="py-2"></div>
<LinkedInQR />
</div>
</div>
</div>
<div id="leftSectionSeperator"></div>
<div id="right-section" class="text-[var(--right-text-color)]">
<AlexWatermark Style="pointer-events: none;" />
<div id="TopRightSkillsText">
<RepeatedSkills
class="cozette-force"
targetTextHeight={30}
targetTextWidth={75}
/>
</div>
<div>
<Profile />
<BiggestFlex />
<TableOfProjects />
<Experience />
<Education />
</div>
</div>
</div>
</div>
<style lang="scss">
.cv-config * {
--left-text-color: #eeeeee;
--left-line-color: #999999;
--left-decor-text-color: #eeeeee;
--left-decor-line-color: #999999;
--qr-color: #999999;
--left-grid-line-color: #ffffff;
--left-grid-bg-color: #000000;
--left-grid-opacity: 0.1;
--left-grid-size: 10px;
--right-text-color: #333333;
}
.corner-border-container {
background-color: var(--left-grid-bg-color);
background-image:
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
background-size:
30px 4px, /* top-left horizontal */
4px 30px, /* top-left vertical */
30px 4px, /* bottom-right horizontal */
4px 30px; /* bottom-right vertical */
background-repeat: no-repeat;
background-position:
top left,
top left,
bottom right,
bottom right;
}
.bg-grid-cv {
background:
linear-gradient(-90deg, rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px), var(--left-grid-line-color);
background-size:
var(--left-grid-size) var(--left-grid-size),
var(--left-grid-size) var(--left-grid-size),
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
background-color: var(--color-base-100);
}
.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 {
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;
> 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;
}
}
}
</style>

16
deprecated/zhen/notes/physics/sharedComps/A4.svelte
View file

@ -1,16 +0,0 @@
<script lang="ts">
export let bgColor: string | undefined = undefined;
export let bottomBorder: boolean = true;
</script>
<div style="width: 210mm; height: 297mm;" class="{(bgColor)?bgColor:"bg-white"} overflow-y-auto overflow-x-hidden">
<div class="flex flex-col h-full">
<div {...$$restProps}>
<slot></slot>
</div>
{#if bottomBorder}
<div class="border-b-2 mt-auto mb-0 border-dashed border-slate-600 hide-on-print"></div>
{/if}
</div>
</div>

3
jsconfig.json
View file

@ -35,6 +35,9 @@
],
"@e/*": [
"./src/optimizers/*"
],
"$paraglide/*": [
"./src/paraglide/*"
]
}
}

28
messages/dk.json Normal file
View file

@ -0,0 +1,28 @@
{
"$schema": "https://inlang.com/schema/inlang-message-format",
"example_message": "Guten Tag {username}",
"zhen": {
"cv": {
"profile": {
"title": "Om mig",
"tooltip": "Jeg kender de sprog I baggrunden!",
"long": "Jeg elsker at lære på egen hånd, og jeg prøver altid at være ærlig. eg er meget selvmotiveret og fuldfører som regel de opgaver, jeg sætter mig for. Det giver mig overskud til utallige hobbyer såsom 3D-print, lodning, programmering, og VR.\n\nUdover min GitHub har jeg fremhævet nogle projekter nedenfor. :)"
},
"flex": {
"title": "Størreste bedrift",
"tooltip": "*Gamejams der havde konkurancer",
"body": "Mit hold <a href='https://deprived.dev'>The <span class='text-blue-500 underline'>deprived devs</span></a> har vundet alle Game Jams, som vi har deltaget!"
},
"projects": {
"title": "Fremhævet projekter",
"tooltip": "Jeg arbejder sikkert på noget nyt. Du er altid velkommen til at spørge!",
"cv": "Denne CV er lavet fuldstændig I HTML, CSS, og Svelte",
"CV": "Implimenteret YoloV1 fra bunden (Objekt genkendelse)",
"embedded": "Designet og bygget en CN Maskine",
"open": "Bidrager ofte til open-source",
"pcb": "Har designet flere printed circuit boards (PCB'er)",
"kube": "Multi node HA kube cluster med venner"
}
}
}
}

27
messages/en.json Normal file
View file

@ -0,0 +1,27 @@
{
"$schema": "https://inlang.com/schema/inlang-message-format",
"example_message": "Guten Tag {username}",
"zhen": {
"cv": {
"profile": {
"title": "About me",
"tooltip": "I know the languages in the decor!",
"long": "I love learning on my own, and I try to be honest. I am highly self-motivated and I usually archive any task I put my mind to. This enables me to have countless hobbies, such as 3D printing, soldering, programming, and VR.\n\nOther than my github, I've listed some projects highlighted below. :)"
},
"flex": {
"title": "Key Achievement",
"body": "The <a href='https://deprived.dev'>The <span class='text-blue-500 underline'>deprived devs</span></a> has won every gamejam we've participated in!"
},
"projects": {
"title": "Big projects",
"tooltip": "Contact me if you're curious! :D",
"cv": "This CV is made with HTML, CSS, and Svelte",
"CV": "Implimented YoloV1 from scratch. (object detection)",
"embedded": "Built custom CNC machine",
"open": "Often contribute to Open-source",
"pcb": "I have designed multiple Printed Circuit Boards (PCBs)",
"kube": "Multi node HA Kubernetes cluster with my friends"
}
}
}
}

1162
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

9
package.json
View file

@ -7,7 +7,8 @@
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --compiler-warnings \"css-unused-selector:ignore,unused-export-let:ignore\" --threshold error",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch --threshold error"
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch --threshold error",
"machine-translate": "inlang machine translate --project project.inlang"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
@ -26,15 +27,19 @@
"tailwindcss": "^4.1.3",
"typescript": "^5.0.0",
"vite": "^5.0.3",
"vite-plugin-svgr": "^4.2.0"
"vite-plugin-svgr": "^4.2.0",
"@inlang/paraglide-js": "^2.9.1",
"@inlang/cli": "^3.0.0"
},
"type": "module",
"dependencies": {
"@lucide/svelte": "^0.487.0",
"@tailwindcss/vite": "^4.1.3",
"i18n": "^0.15.3",
"lucide-svelte": "^0.475.0",
"marked": "^16.2.0",
"pocketbase": "^0.26.2",
"svelte-i18n": "^4.0.1",
"svelte-katex": "^0.1.2",
"svelte-media-queries": "^1.6.2",
"theme-change": "^2.5.0",

12
project.inlang/settings.json Normal file
View file

@ -0,0 +1,12 @@
{
"$schema": "https://inlang.com/schema/project-settings",
"baseLocale": "en",
"locales": ["en", "dk"],
"modules": [
"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
],
"plugin.inlang.messageFormat": {
"pathPattern": "./messages/{locale}.json"
}
}

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

@ -1,5 +1,7 @@
<script lang="ts">
import re from "@ts/Redaction/Redactor";
import * as m from "$paraglide/messages";
import { getLocale, setLocale, locales } from "$paraglide/runtime";
// Left side
import NameAndImage from "./comps/NameAndImage.svelte";
@ -56,27 +58,37 @@
<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 class="cv-info-container flex flex-col w-full h-full 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">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 :(
+ Chrome = PDF
</div>
<div class="flex gap-2">
CV Languages:
{#each locales as tag}
<button
class="btn btn-xs {tag == getLocale()
? 'btn-filled btn-primary text-primary-content'
: 'btn-outline'}"
onclick={() => {
setLocale(tag);
}}
>
{tag.toUpperCase()}
</button>
{/each}
</div>
</div>
<div class="w-full h-full flex flex-col justify-center overflow-hidden">
<div class=" w-full flex h-[1123px] justify-center">
<div
class="relative w-full flex h-[1123px] justify-center {$re?.name
? 'hidden'
: ''}"
>
<RepeatedSkills
class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
class="cozette-force text-5xl text-base-300 "
style="transform: translateY(-90rem)"
textOverride={["REDACTED VERSION"]}
targetTextHeight={90}
@ -86,7 +98,9 @@
</div>
<div
class="NotoSans cv-config cv-container-container include-in-print absolute"
class="NotoSans h-[1123px] cv-config cv-container-container include-in-print {$re?.name
? ''
: 'absolute'}"
>
<div class="cv-container sections decorations">
<div id="left-section" class=" flex justify-center">
@ -221,7 +235,7 @@
}
.cv-info-container {
height: 40mm;
height: 15mm;
background-color: #2b2a2a;
display: flex;
justify-content: center;
@ -236,11 +250,6 @@
background-color: #3e3d3d;
}
> div {
width: 80%;
height: 60%;
}
}
.cv-container-container {

17
src/routes/cv/comps/BiggestFlex.svelte
View file

@ -1,18 +1,21 @@
<script lang="ts">
import * as m from "$paraglide/messages";
</script>
<div class="short-profile-container">
<div class="flex gap-1 items-baseline">
<b style="text-align:left;">
Biggest flex
</b>
<h1 style="font-size: 0.5rem; color: grey;">*Gamejams that had competitions.</h1>
<b style="text-align:left;">{m["zhen.cv.flex.title"]()}</b>
<h1 style="font-size: 0.5rem; color: grey;">
{m["zhen.cv.flex.tooltip"]()}
</h1>
</div>
<div class="text-[0.85rem] text-left">
<a href="https://deprived.dev" >The <span class="text-blue-500 underline">deprived devs</span></a> has won every gamejam, we've participated. <br/>
{@html m["zhen.cv.flex.body"]()}
</div>
</div>
<style>
.short-profile-container{
.short-profile-container {
width: 90%;
}

15
src/routes/cv/comps/Profile.svelte
View file

@ -1,17 +1,16 @@
<script lang="ts">
import * as m from "$paraglide/messages";
</script>
<div class="short-profile-container">
<div class="flex gap-1 items-baseline">
<b style="text-align:left;"> About me </b>
<b style="text-align:left;">{m["zhen.cv.profile.title"]()}</b>
<div class="opacity-70 text-[0.5rem]">
I know the languages listed above in the decor!
{m["zhen.cv.profile.tooltip"]()}
</div>
</div>
<span>
I love learning on my own, and I try to be honest. I am highly
self-motivated and I usually archive any task I put my mind to. This enables
me to have countless hobbies, such as 3D printing, soldering, programming.
<br />
<br />
Other than my github, I've listed some projects highlighted below. :)
{m["zhen.cv.profile.long"]()}
</span>
</div>

52
src/routes/cv/comps/TableOfProjects.svelte
View file

@ -1,24 +1,28 @@
<div class="container">
<script lang="ts">
import * as m from "$paraglide/messages";
</script>
<div class="container flex flex-col items-center">
<div class="flex gap-1">
<b style="text-align:left;"> List of big projects </b>
<b style="text-align:left;">
{m["zhen.cv.projects.title"]()}
</b>
<div class="opacity-70 text-[0.5rem]">
It is likely I'm working on something new, as you're reading this.
<br />
Contact me if you're curious! :D
{m["zhen.cv.projects.tooltip"]()}
</div>
</div>
<div class="table-display">
<div class="table-display text-sm justify-center">
<div class="table-item">
<div>HTML</div>
<div>This CV is made with HTML, CSS, and Svelte</div>
<div>{m["zhen.cv.projects.cv"]()}</div>
</div>
<div class="table-item">
<div>Computer vision</div>
<div>Implimented YoloV1 from scratch. (object detection)</div>
<div>{m["zhen.cv.projects.CV"]()}</div>
</div>
<div class="table-item">
<div>Arduino/embedded</div>
<div>Built custom CNC machine</div>
<div>{m["zhen.cv.projects.embedded"]()}</div>
</div>
<!-- <div class="table-item"> -->
<!-- <div>App dev</div> -->
@ -26,35 +30,30 @@
<!-- </div> -->
<div class="table-item">
<div>Open-source</div>
<div>I often contribute to Open-source</div>
<div>{m["zhen.cv.projects.open"]()}</div>
</div>
<div class="table-item">
<div>PCB design</div>
<div>I have designed multiple Printed Circuit Boards (PCBs)</div>
<div>{m["zhen.cv.projects.pcb"]()}</div>
</div>
<div class="table-item">
<div>Kubernetes</div>
<div>WIP: Multi node HA Kubernetes cluster with my friends</div>
<div>{m["zhen.cv.projects.kube"]()}</div>
</div>
</div>
</div>
<style lang="scss">
.container {
display: grid;
place-items: center;
width: 90%;
}
.container > div:first-child {
width: 100%;
width: 90%;
/* Bottom border stripe*/
border-bottom: 1mm solid black;
white-space: pre;
}
.table-display {
width: 100%;
width: 90%;
}
.table-item {
@ -73,23 +72,14 @@
color: #000000;
&:first-child {
width: 30%;
font-size: 4mm;
width: 25%;
font-size: 3mm;
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
src/ts/store.ts
View file

@ -1,3 +1,4 @@
import { ApiService } from "./api/api";
import path from "path";
export let api = ApiService;

11
vite.config.js
View file

@ -1,3 +1,4 @@
import { paraglideVitePlugin } from "@inlang/paraglide-js";
import tailwindcss from "@tailwindcss/vite";
import sveltekit from "./src/optimizers/sveltekit.ts";
import path from "path";
@ -13,7 +14,14 @@ const buildTime = new Intl.DateTimeFormat("da-DK", {
}).format(new Date());
export default {
plugins: [tailwindcss(), sveltekit()],
plugins: [
paraglideVitePlugin({
project: "./project.inlang",
outdir: "./src/paraglide",
}),
tailwindcss(),
sveltekit(),
],
define: {
__BUILD_TIME__: JSON.stringify(buildTime),
},
@ -27,6 +35,7 @@ export default {
"@shop": path.resolve("./src/pages/shop"),
"@stores": path.resolve("./src/ts/store.ts"),
"@e": path.resolve("./src/optimizers"),
$paraglide: path.resolve("src/paraglide"),
},
},
server: {