Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

There's complexity in simplicity:

This commit is contained in:
BOTAlex 2024-12-31 05:04:13 +01:00
parent 73c366e0f0
commit 5f78e8bf04
95 changed files with 9624 additions and 10843 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.gitignore vendored
View File

@ -1,10 +1,10 @@
.DS_Store .DS_Store
node_modules node_modules
/build /build
/.svelte-kit /.svelte-kit
/package /package
.env .env
.env.* .env.*
!.env.example !.env.example
vite.config.js.timestamp-* vite.config.js.timestamp-*
vite.config.ts.timestamp-* vite.config.ts.timestamp-*

2
.npmrc
View File

@ -1 +1 @@
engine-strict=true engine-strict=true

38
jsconfig.json
View File

@ -1,19 +1,19 @@
{ {
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true "allowImportingTsExtensions": true
} }
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
// //
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in // from the referenced tsconfig.json - TypeScript does not merge them in
} }

9719
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

77
package.json
View File

@ -1,41 +1,36 @@
{ {
"name": "deprived-main-website", "name": "deprived-main-website",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch" "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
}, },
"devDependencies": { "devDependencies": {
"@poppanator/sveltekit-svg": "^4.2.1", "@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/adapter-static": "^3.0.1", "@sveltejs/kit": "^2.0.0",
"@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@tailwindcss/typography": "^0.5.15",
"@tailwindcss/typography": "^0.5.15", "autoprefixer": "^10.4.20",
"@zerodevx/svelte-img": "^2.1.0", "daisyui": "^4.12.12",
"autoprefixer": "^10.4.20", "postcss": "^8.4.47",
"daisyui": "^4.12.12", "sass": "^1.77.4",
"postcss": "^8.4.47", "svelte": "^4.2.7",
"sass": "^1.77.4", "svelte-check": "^3.6.0",
"svelte": "^4.2.7", "svelte-highlight": "^7.6.0",
"svelte-check": "^3.6.0", "tailwindcss": "^3.4.13",
"svelte-confetti": "^1.0.0", "typescript": "^5.0.0",
"svelte-highlight": "^7.6.0", "vite": "^5.0.3",
"svelte-parallax": "^0.6.0", "vite-plugin-svgr": "^4.2.0"
"tailwindcss": "^3.4.13", },
"typescript": "^5.0.0", "type": "module",
"vite": "^5.0.3", "dependencies": {
"vite-plugin-svgr": "^4.2.0" "svelte-media-queries": "^1.6.2",
}, "svelte-parallax": "^0.6.0",
"type": "module", "theme-change": "^2.5.0"
"dependencies": { }
"svelte-media-queries": "^1.6.2", }
"svelte-particles": "^2.12.0",
"theme-change": "^2.5.0",
"tsparticles-slim": "^2.12.0"
}
}

12
postcss.config.js
View File

@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} }

26
src/app.d.ts vendored
View File

@ -1,13 +1,13 @@
// See https://kit.svelte.dev/docs/types#app // See https://kit.svelte.dev/docs/types#app
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
// interface Error {} // interface Error {}
// interface Locals {} // interface Locals {}
// interface PageData {} // interface PageData {}
// interface PageState {} // interface PageState {}
// interface Platform {} // interface Platform {}
} }
} }
export {}; export {};

32
src/app.html
View File

@ -1,16 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en" data-theme="Synthwave"> <html lang="en" data-theme="Synthwave">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Change theme for site here --> <!-- Change theme for site here -->
<link rel="stylesheet" href="/stylesheets/main-theme.css" /> <link rel="stylesheet" href="/stylesheets/main-theme.css" />
<link rel="stylesheet" href="/stylesheets/global.css" /> <link rel="stylesheet" href="/stylesheets/global.css" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</html> </html>

22
src/comps/Utils/HorizonalStack.svelte
View File

@ -1,12 +1,12 @@
<div {...$$restProps}> <div {...$$restProps}>
<slot></slot> <slot></slot>
</div> </div>
<style> <style>
.centralize{ .centralize{
display: grid; display: grid;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
} }
</style> </style>

6
src/comps/Utils/VerticalStack.svelte
View File

@ -1,4 +1,4 @@
<!-- Just used for ease of read --> <!-- Just used for ease of read -->
<div style="padding: 0;"> <div style="padding: 0;">
<slot></slot> <slot></slot>
</div> </div>

14
src/comps/Utils/ZSpacer.svelte
View File

@ -1,8 +1,8 @@
<div class="grow" /> <div class="grow" />
<style> <style>
.grow{ .grow{
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
} }
</style> </style>

28
src/comps/timeline/timeline.svelte
View File

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte"; import HorizonalStack from "../Utils/HorizonalStack.svelte";
import TimelineItem from "./timelineItem.svelte"; import TimelineItem from "./timelineItem.svelte";
</script> </script>
<HorizonalStack {...$$restProps}> <HorizonalStack {...$$restProps}>
<slot/> <slot/>
</HorizonalStack> </HorizonalStack>
<style> <style>
:global(.JustifyStart){ :global(.JustifyStart){
display: flex; display: flex;
justify-content: start; justify-content: start;
} }
</style> </style>

197
src/comps/timeline/timelineItem.svelte
View File

@ -1,100 +1,99 @@
<script lang="ts"> <script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte"; import HorizonalStack from "../Utils/HorizonalStack.svelte";
import Img from '@zerodevx/svelte-img' import VerticalStack from "../Utils/VerticalStack.svelte";
import VerticalStack from "../Utils/VerticalStack.svelte"; import ZSpacer from "../Utils/ZSpacer.svelte";
import ZSpacer from "../Utils/ZSpacer.svelte"; import MediaQuery from 'svelte-media-queries';
import MediaQuery from 'svelte-media-queries';
// Set these when using the component
// Set these when using the component export let date: string = "null";
export let date: string = "null"; export let imagePath: string = "null";
export let imagePath: string = "null"; export let title: string = "null";
export let title: string = "null"; export let desc: string = "null";
export let desc: string = "null";
const timelineCollapseThreshhold : string = '1000px';
const timelineCollapseThreshhold : string = '1000px'; let timelineCollaped: boolean = false;
let timelineCollaped: boolean = false; </script>
</script>
<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
<div class="flexStart timelineItemContainer" style="overflow: auto;">
<div class="flexStart timelineItemContainer" style="overflow: auto;"> <div style="padding-top: 10px;">
<div style="padding-top: 10px;"> {#if imagePath !== "null"}
{#if imagePath !== "null"} <div class="imageContainer">
<div class="imageContainer"> <img src={imagePath} class="image" alt="nothing"/>
<img src={imagePath} class="image" alt="nothing"/> </div>
</div> {/if}
{/if} </div>
</div> <div class="ItemStrip"/>
<div class="ItemStrip"/> <div class="noPadding">
<div class="noPadding"> <div class="title">{@html title}</div>
<div class="title">{@html title}</div> <div class="DateText">{@html date}</div>
<div class="DateText">{@html date}</div> <div class="bodyText">{@html desc}</div>
<div class="bodyText">{@html desc}</div> </div>
</div> </div>
</div>
<style>
<style> .imageContainer {
.imageContainer { position: relative;
position: relative; z-index: -1;
z-index: -1;
width: 10vw;
width: 10vw; height: 10vw;
height: 10vw;
overflow: hidden;
overflow: hidden; }
}
.imageContainer img{
.imageContainer img{ position: absolute;
position: absolute;
height: 100%;
height: 100%; width: 100%;
width: 100%;
min-width: 100%;
min-width: 100%; min-height: 100%;
min-height: 100%; }
}
.timelineItemContainer{
.timelineItemContainer{ column-gap: 3vw;
column-gap: 3vw; margin-top: 10px;
margin-top: 10px; }
}
.noPadding{
.noPadding{ padding: 0;
padding: 0; }
}
.flexStart{
.flexStart{ display: flex;
display: flex; justify-content: start;
justify-content: start; }
}
.title {
.title { font-size: 200%;
font-size: 200%;
display: flex;
display: flex; align-content: center;
align-content: center; }
}
.bodyText{
.bodyText{ font-size: 1rem;
font-size: 1rem; }
}
.DateText{
.DateText{ margin: 0;
margin: 0; margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
color: darkgray;
color: darkgray;
display: flex;
display: flex; align-self: flex-start;
align-self: flex-start; }
}
.ItemStrip{
.ItemStrip{ min-width: 0.5%;
min-width: 0.5%; display: inline-flex;
display: inline-flex;
position: relative;
position: relative;
background-color: rgb(178, 178, 178);
background-color: rgb(178, 178, 178); }
}
</style> </style>

132
src/lib/IO/Button.svelte
View File

@ -1,66 +1,66 @@
<script lang="ts"> <script lang="ts">
import { ButtonType } from "$lib/IO/ButtonType.ts"; import { ButtonType } from "$lib/IO/ButtonType.ts";
import { onMount } from "svelte"; import { onMount } from "svelte";
export let href : string = "#"; export let href : string = "#";
export let type : ButtonType = ButtonType.Primary; export let type : ButtonType = ButtonType.Primary;
let cssName : string; let cssName : string;
const buttonTypeColors = { const buttonTypeColors = {
[ButtonType.Primary]: '--primary', [ButtonType.Primary]: '--primary',
[ButtonType.Secondary]: '--secondary', [ButtonType.Secondary]: '--secondary',
[ButtonType.Accent]: '--accent', [ButtonType.Accent]: '--accent',
}; };
onMount(() => { onMount(() => {
cssName = buttonTypeColors[type]; cssName = buttonTypeColors[type];
}); });
</script> </script>
<a href={href} class="button" style="--button-color: var({cssName});"> <a href={href} class="button" style="--button-color: var({cssName});">
<div class="content"> <div class="content">
<slot name="content"> <slot name="content">
Click Me! Click Me!
</slot> </slot>
</div> </div>
</a> </a>
<style> <style>
.button { .button {
white-space: nowrap; white-space: nowrap;
border-radius: 6px; border-radius: 6px;
border: none; border: none;
background-color: var(--button-color); background-color: var(--button-color);
text-decoration: none; text-decoration: none;
transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out;
transform: translate(0, 0); transform: translate(0, 0);
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 1.5em; font-size: 1.5em;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
padding: 0.8em 4em; padding: 0.8em 4em;
} }
.button:hover { .button:hover {
transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out;
transform: translate(0, -5px); transform: translate(0, -5px);
cursor: pointer; cursor: pointer;
filter: brightness(130%); filter: brightness(130%);
} }
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: var(--text1); color: var(--text1);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
} }
</style> </style>

10
src/lib/IO/ButtonType.ts
View File

@ -1,5 +1,5 @@
export enum ButtonType { export enum ButtonType {
Primary, Primary,
Secondary, Secondary,
Accent Accent
} }

4
src/lib/app.css
View File

@ -1,3 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

464
src/lib/images/DeprivedLogo.svelte
View File

File diff suppressed because one or more lines are too long

456
src/lib/images/DeprivedLogo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

40
src/lib/images/HamburgerMenuIcon.svelte
View File

@ -1,20 +1,20 @@
<script> <script>
export let Class = ''; export let Class = '';
export let Style = ''; export let Style = '';
</script> </script>
<svg <svg
class={Class} class={Class}
style={Style} style={Style}
height="20" height="20"
id="Layer_1" id="Layer_1"
version="1.1" version="1.1"
viewBox="0 0 28 20" viewBox="0 0 28 20"
width="28" width="28"
xml:space="preserve" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs1" /><path id="defs1" /><path
d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z" d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
id="path1" id="path1"
style="fill-opacity:1" /></svg> style="fill-opacity:1" /></svg>

154
src/lib/posts/NewsCard.svelte
View File

@ -1,77 +1,77 @@
<script lang="ts"> <script lang="ts">
export let post_url : string = '404'; export let post_url : string = '404';
export let thumbnail_url : string = '/favicon.png'; export let thumbnail_url : string = '/favicon.png';
export let thumbnail_alt : string = 'Picture describting the deprived devs logo'; export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
export let title : string = '<title>'; export let title : string = '<title>';
export let summary : string = '<summary>'; export let summary : string = '<summary>';
export let creation_date : string = '<date>'; export let creation_date : string = '<date>';
const monthNames : string[] = ["January", "February", "March", "April", "May", "June", const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]; "July", "August", "September", "October", "November", "December"];
$: human_creation_date = new Date(+creation_date * 1000); $: human_creation_date = new Date(+creation_date * 1000);
</script> </script>
<div class="news-card"> <div class="news-card">
<a href=/post/{post_url}> <a href=/post/{post_url}>
<div class="thumbnail"> <div class="thumbnail">
<img src={thumbnail_url} alt={thumbnail_alt}/> <img src={thumbnail_url} alt={thumbnail_alt}/>
</div> </div>
<div class="content"> <div class="content">
<h3 id="title">{title}</h3> <h3 id="title">{title}</h3>
<p id="summary-text">{summary}</p> <p id="summary-text">{summary}</p>
<p id="date"> <p id="date">
{human_creation_date.getDate()} {human_creation_date.getDate()}
{monthNames[human_creation_date.getMonth()]} {monthNames[human_creation_date.getMonth()]}
{human_creation_date.getFullYear()} {human_creation_date.getFullYear()}
</p> </p>
</div> </div>
</a> </a>
</div> </div>
<style> <style>
a { a {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 15px; gap: 15px;
} }
.thumbnail > img { .thumbnail > img {
object-fit: cover; object-fit: cover;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
width: 150px; width: 150px;
height: auto; height: auto;
} }
.content { .content {
flex-shrink: 2; flex-shrink: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
#title { #title {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text2); color: var(--text2);
} }
#summary-text { #summary-text {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text3); color: var(--text3);
} }
#date { #date {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text4); color: var(--text4);
} }
</style> </style>

158
src/lib/posts/NewsVerticalCard.svelte
View File

@ -1,79 +1,79 @@
<script lang="ts"> <script lang="ts">
export let post_url : string = '404'; export let post_url : string = '404';
export let thumbnail_url : string = '/favicon.png'; export let thumbnail_url : string = '/favicon.png';
export let thumbnail_alt : string = 'Picture describting the deprived devs logo'; export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
export let title : string = '<title>'; export let title : string = '<title>';
export let summary : string = '<summary>'; export let summary : string = '<summary>';
export let creation_date : string = '<date>'; export let creation_date : string = '<date>';
const monthNames : string[] = ["January", "February", "March", "April", "May", "June", const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]; "July", "August", "September", "October", "November", "December"];
$: human_creation_date = new Date(+creation_date * 1000); $: human_creation_date = new Date(+creation_date * 1000);
</script> </script>
<div class="news-card"> <div class="news-card">
<a href={post_url}> <a href={post_url}>
<div class="thumbnail"> <div class="thumbnail">
<img src={thumbnail_url} alt={thumbnail_alt}/> <img src={thumbnail_url} alt={thumbnail_alt}/>
</div> </div>
<div class="content"> <div class="content">
<p id="date"> <p id="date">
{human_creation_date.getDate()} {human_creation_date.getDate()}
{monthNames[human_creation_date.getMonth()]} {monthNames[human_creation_date.getMonth()]}
{human_creation_date.getFullYear()} {human_creation_date.getFullYear()}
</p> </p>
<h3 id="title">{title}</h3> <h3 id="title">{title}</h3>
<p id="summary-text">{summary}</p> <p id="summary-text">{summary}</p>
</div> </div>
</a> </a>
</div> </div>
<style> <style>
.news-card { .news-card {
flex: 0 0 300px; flex: 0 0 300px;
} }
a { a {
min-width: 100%; min-width: 100%;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.thumbnail > img { .thumbnail > img {
object-fit: cover; object-fit: cover;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
min-width: 100%; min-width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
#title { #title {
font-size: 22px; font-size: 22px;
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text2); color: var(--text2);
} }
#summary-text { #summary-text {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text3); color: var(--text3);
} }
#date { #date {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text4); color: var(--text4);
} }
</style> </style>

156
src/lib/posts/ShowcaseNewsCard.svelte
View File

@ -1,78 +1,78 @@
<script> <script>
export let post_url = '404'; export let post_url = '404';
export let thumbnail_url = '/favicon.png'; export let thumbnail_url = '/favicon.png';
export let thumbnail_alt = 'Picture describting the deprived devs logo'; export let thumbnail_alt = 'Picture describting the deprived devs logo';
export let title = '<title>'; export let title = '<title>';
export let summary = '<summary>'; export let summary = '<summary>';
export let creation_date = 1710006969; export let creation_date = 1710006969;
const monthNames = ["January", "February", "March", "April", "May", "June", const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]; "July", "August", "September", "October", "November", "December"];
$: human_creation_date = new Date(+creation_date * 1000); $: human_creation_date = new Date(+creation_date * 1000);
</script> </script>
<div class="news-card"> <div class="news-card">
<a href=/post/{post_url} > <a href=/post/{post_url} >
<div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});"> <div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
</div> </div>
<div class="content"> <div class="content">
<h3 id="title">{title}</h3> <h3 id="title">{title}</h3>
<p id="summary-text">{summary}</p> <p id="summary-text">{summary}</p>
<p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p> <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
</div> </div>
</a> </a>
</div> </div>
<style> <style>
a { a {
text-decoration: none; text-decoration: none;
} }
.news-card { .news-card {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
} }
.news-card h3 { .news-card h3 {
color: var(--text1); color: var(--text1);
margin: 0px; margin: 0px;
font-size: 22px; font-size: 22px;
} }
.thumbnail { .thumbnail {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
#title { #title {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text1); color: var(--text1);
} }
#summary-text { #summary-text {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text2); color: var(--text2);
} }
#date { #date {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text4); color: var(--text4);
} }
</style> </style>

22
src/lib/svelteLogos/README.md
View File

@ -1,11 +1,11 @@
# Svelte Branding Guidelines # Svelte Branding Guidelines
## Conditions of usage ## Conditions of usage
1. The term "Svelte logo" refers to the Svelte logo and other official artwork/mark. It also includes the official color scheme used by the project. 1. The term "Svelte logo" refers to the Svelte logo and other official artwork/mark. It also includes the official color scheme used by the project.
2. The term "Svelte library" refers to the Svelte tooling, associated libraries and official projects in the Svelte ecosystem. 2. The term "Svelte library" refers to the Svelte tooling, associated libraries and official projects in the Svelte ecosystem.
3. Usage of the Svelte logo must not give the impression or implication that the Svelte project (or any contributor to the project) is sponsoring or endorsing any other project, service, product or organization. 3. Usage of the Svelte logo must not give the impression or implication that the Svelte project (or any contributor to the project) is sponsoring or endorsing any other project, service, product or organization.
4. Usage of the Svelte logo, to indicate, imply or assert compatibility or operability with the Svelte library, must be accurate and done in good faith. 4. Usage of the Svelte logo, to indicate, imply or assert compatibility or operability with the Svelte library, must be accurate and done in good faith.

8
src/lib/svelteLogos/svelte-kit-logotype.svg
View File

@ -1,4 +1,4 @@
<svg viewBox="30 31 400 50" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="30 31 400 50" xmlns="http://www.w3.org/2000/svg">
<path d="M348.645 80.0599L335.205 55.1536L326.745 65.3616V80.0599H319.648V32.4241H326.745V55.4938L345.169 32.4241H353.356L339.986 49.1652L356.974 80.0599H348.645ZM372.319 80.0599V32.4241H379.416V80.0599H372.319ZM416.394 39.2295V80.0599H409.3V39.2295H395.789V32.4241H429.902V39.2295H416.394Z" fill="#8D8D93"/> <path d="M348.645 80.0599L335.205 55.1536L326.745 65.3616V80.0599H319.648V32.4241H326.745V55.4938L345.169 32.4241H353.356L339.986 49.1652L356.974 80.0599H348.645ZM372.319 80.0599V32.4241H379.416V80.0599H372.319ZM416.394 39.2295V80.0599H409.3V39.2295H395.789V32.4241H429.902V39.2295H416.394Z" fill="#8D8D93"/>
<path d="M48.3359 80.876C44.4451 80.9736 40.6159 79.8942 37.3519 77.78C34.3023 75.7742 32.0378 72.7827 30.9387 69.3081L37.6241 66.8581C38.5518 68.991 40.066 70.8183 41.9916 72.1286C43.9468 73.4367 46.2574 74.1149 48.6113 74.0715C50.8732 74.1893 53.1053 73.5154 54.9219 72.1661C55.7123 71.5043 56.3367 70.6675 56.7454 69.7223C57.1541 68.7772 57.3357 67.7499 57.2758 66.7223C57.2852 65.7649 57.063 64.8193 56.6281 63.9657C56.2495 63.2023 55.7547 62.5019 55.1613 61.8894C54.4103 61.2078 53.5586 60.6454 52.6361 60.222C51.4981 59.6561 50.5542 59.2252 49.8042 58.9292C49.0543 58.6332 47.9513 58.2363 46.4952 57.7385C44.6761 57.1034 43.3118 56.6046 42.4023 56.242C41.1703 55.719 39.9737 55.1164 38.8202 54.4381C37.579 53.7813 36.4506 52.9313 35.4776 51.9202C34.6349 50.9339 33.9554 49.8197 33.4647 48.6198C32.5217 46.3326 32.3235 43.8075 32.8983 41.4018C33.473 38.9961 34.7915 36.8316 36.6673 35.2143C39.3991 32.8106 43.1066 31.6085 47.7898 31.608C51.7018 31.608 54.9201 32.4699 57.4448 34.1937C59.8955 35.819 61.695 38.2524 62.528 41.0678L55.9772 43.2446C55.3192 41.7704 54.2079 40.5431 52.8042 39.7406C51.1067 38.8008 49.184 38.3416 47.2438 38.4125C45.3411 38.3039 43.4564 38.8307 41.8875 39.9098C41.247 40.4053 40.7359 41.0476 40.3976 41.7822C40.0593 42.5168 39.9038 43.322 39.9443 44.1294C39.95 44.7485 40.0866 45.3594 40.3452 45.9222C40.6037 46.485 40.9784 46.987 41.4447 47.3956C42.3512 48.2863 43.4153 49.0016 44.5833 49.5054C45.6753 49.9589 47.3356 50.5712 49.5641 51.342C50.9278 51.8419 51.9396 52.2162 52.5993 52.4648C53.259 52.7134 54.2249 53.1332 55.4968 53.7242C56.5174 54.1744 57.4987 54.7086 58.4304 55.3213C59.2647 55.9196 60.0622 56.5673 60.8187 57.261C61.6416 57.9722 62.3444 58.8107 62.9003 59.7445C63.4302 60.7128 63.8425 61.7406 64.1285 62.8062C64.4763 64.0584 64.6485 65.3527 64.6401 66.6521C64.6401 71.0984 63.1162 74.5802 60.0685 77.0972C57.0207 79.6143 53.1098 80.8739 48.3359 80.876ZM92.0693 80.0599L75.6946 32.4241H83.3367L94.1846 65.6331C94.784 67.4193 95.2852 69.2369 95.6858 71.0777C96.085 69.2366 96.5861 67.4189 97.187 65.6331L107.899 32.4241H115.472L99.1646 80.0599H92.0693ZM129.935 80.0599V32.4241H159.546V39.0937H137.031V52.159H151.563V58.8286H137.031V73.3903H161.05V80.0599H129.935ZM179.126 80.0599V32.4241H186.223V73.2546H209.556V80.0599H179.126ZM236.301 39.2295V80.0599H229.204V39.2295H215.696V32.4241H249.813V39.2295H236.301ZM264.478 80.0599V32.4241H294.088V39.0937H271.574V52.159H286.106V58.8286H271.574V73.3903H295.593V80.0599H264.478Z" fill="#4A4A55"/> <path d="M48.3359 80.876C44.4451 80.9736 40.6159 79.8942 37.3519 77.78C34.3023 75.7742 32.0378 72.7827 30.9387 69.3081L37.6241 66.8581C38.5518 68.991 40.066 70.8183 41.9916 72.1286C43.9468 73.4367 46.2574 74.1149 48.6113 74.0715C50.8732 74.1893 53.1053 73.5154 54.9219 72.1661C55.7123 71.5043 56.3367 70.6675 56.7454 69.7223C57.1541 68.7772 57.3357 67.7499 57.2758 66.7223C57.2852 65.7649 57.063 64.8193 56.6281 63.9657C56.2495 63.2023 55.7547 62.5019 55.1613 61.8894C54.4103 61.2078 53.5586 60.6454 52.6361 60.222C51.4981 59.6561 50.5542 59.2252 49.8042 58.9292C49.0543 58.6332 47.9513 58.2363 46.4952 57.7385C44.6761 57.1034 43.3118 56.6046 42.4023 56.242C41.1703 55.719 39.9737 55.1164 38.8202 54.4381C37.579 53.7813 36.4506 52.9313 35.4776 51.9202C34.6349 50.9339 33.9554 49.8197 33.4647 48.6198C32.5217 46.3326 32.3235 43.8075 32.8983 41.4018C33.473 38.9961 34.7915 36.8316 36.6673 35.2143C39.3991 32.8106 43.1066 31.6085 47.7898 31.608C51.7018 31.608 54.9201 32.4699 57.4448 34.1937C59.8955 35.819 61.695 38.2524 62.528 41.0678L55.9772 43.2446C55.3192 41.7704 54.2079 40.5431 52.8042 39.7406C51.1067 38.8008 49.184 38.3416 47.2438 38.4125C45.3411 38.3039 43.4564 38.8307 41.8875 39.9098C41.247 40.4053 40.7359 41.0476 40.3976 41.7822C40.0593 42.5168 39.9038 43.322 39.9443 44.1294C39.95 44.7485 40.0866 45.3594 40.3452 45.9222C40.6037 46.485 40.9784 46.987 41.4447 47.3956C42.3512 48.2863 43.4153 49.0016 44.5833 49.5054C45.6753 49.9589 47.3356 50.5712 49.5641 51.342C50.9278 51.8419 51.9396 52.2162 52.5993 52.4648C53.259 52.7134 54.2249 53.1332 55.4968 53.7242C56.5174 54.1744 57.4987 54.7086 58.4304 55.3213C59.2647 55.9196 60.0622 56.5673 60.8187 57.261C61.6416 57.9722 62.3444 58.8107 62.9003 59.7445C63.4302 60.7128 63.8425 61.7406 64.1285 62.8062C64.4763 64.0584 64.6485 65.3527 64.6401 66.6521C64.6401 71.0984 63.1162 74.5802 60.0685 77.0972C57.0207 79.6143 53.1098 80.8739 48.3359 80.876ZM92.0693 80.0599L75.6946 32.4241H83.3367L94.1846 65.6331C94.784 67.4193 95.2852 69.2369 95.6858 71.0777C96.085 69.2366 96.5861 67.4189 97.187 65.6331L107.899 32.4241H115.472L99.1646 80.0599H92.0693ZM129.935 80.0599V32.4241H159.546V39.0937H137.031V52.159H151.563V58.8286H137.031V73.3903H161.05V80.0599H129.935ZM179.126 80.0599V32.4241H186.223V73.2546H209.556V80.0599H179.126ZM236.301 39.2295V80.0599H229.204V39.2295H215.696V32.4241H249.813V39.2295H236.301ZM264.478 80.0599V32.4241H294.088V39.0937H271.574V52.159H286.106V58.8286H271.574V73.3903H295.593V80.0599H264.478Z" fill="#4A4A55"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

38
src/lib/svelteLogos/svelte-logo-cutout.svg
View File

@ -1,19 +1,19 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 93.2 112" style="enable-background:new 0 0 93.2 112;" xml:space="preserve"> viewBox="0 0 93.2 112" style="enable-background:new 0 0 93.2 112;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:#FF3E00;} .st0{fill:#FF3E00;}
</style> </style>
<path class="st0" d="M87.3,14.8L87.3,14.8C76.9-0.1,56.3-4.5,41.5,5L15.4,21.6c-7.1,4.5-12,11.8-13.5,20c-1.2,6.9-0.2,14,3.1,20.2 <path class="st0" d="M87.3,14.8L87.3,14.8C76.9-0.1,56.3-4.5,41.5,5L15.4,21.6c-7.1,4.5-12,11.8-13.5,20c-1.2,6.9-0.2,14,3.1,20.2
c-2.2,3.4-3.8,7.2-4.5,11.2C-1,81.5,1,90.2,5.9,97.2c10.4,14.9,30.9,19.3,45.8,9.8l26.1-16.6c7.1-4.5,12-11.8,13.5-20 c-2.2,3.4-3.8,7.2-4.5,11.2C-1,81.5,1,90.2,5.9,97.2c10.4,14.9,30.9,19.3,45.8,9.8l26.1-16.6c7.1-4.5,12-11.8,13.5-20
c1.2-6.9,0.2-14-3.1-20.2c2.2-3.4,3.8-7.2,4.5-11.2C94.2,30.5,92.2,21.8,87.3,14.8z M79.8,36.2c-0.2,0.8-0.4,1.6-0.6,2.4l-0.5,1.5 c1.2-6.9,0.2-14-3.1-20.2c2.2-3.4,3.8-7.2,4.5-11.2C94.2,30.5,92.2,21.8,87.3,14.8z M79.8,36.2c-0.2,0.8-0.4,1.6-0.6,2.4l-0.5,1.5
l-1.3-1c-3.1-2.3-6.5-4-10.2-5.1l-1-0.3l0.1-1c0.1-1.4-0.3-2.7-1.1-3.9c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7 l-1.3-1c-3.1-2.3-6.5-4-10.2-5.1l-1-0.3l0.1-1c0.1-1.4-0.3-2.7-1.1-3.9c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7
L30.8,43.7c-1.3,0.8-2.2,2.1-2.4,3.6c-0.3,1.5,0.1,3.1,1,4.4c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l10-6.3 L30.8,43.7c-1.3,0.8-2.2,2.1-2.4,3.6c-0.3,1.5,0.1,3.1,1,4.4c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l10-6.3
c1.6-1,3.4-1.8,5.3-2.3c8.4-2.2,17.3,1.1,22.2,8.2c3,4.2,4.2,9.4,3.3,14.5c-0.9,5-3.8,9.4-8.1,12.1L44.2,96.3 c1.6-1,3.4-1.8,5.3-2.3c8.4-2.2,17.3,1.1,22.2,8.2c3,4.2,4.2,9.4,3.3,14.5c-0.9,5-3.8,9.4-8.1,12.1L44.2,96.3
c-1.6,1-3.4,1.8-5.3,2.3h0c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.3-14.5c0.2-0.8,0.4-1.6,0.6-2.4l0.5-1.5l1.3,1 c-1.6,1-3.4,1.8-5.3,2.3h0c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.3-14.5c0.2-0.8,0.4-1.6,0.6-2.4l0.5-1.5l1.3,1
c3.1,2.3,6.5,4,10.2,5.1l1,0.3l-0.1,1c-0.1,1.4,0.3,2.8,1.1,3.9c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l26.1-16.6 c3.1,2.3,6.5,4,10.2,5.1l1,0.3l-0.1,1c-0.1,1.4,0.3,2.8,1.1,3.9c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l26.1-16.6
c1.3-0.8,2.2-2.1,2.5-3.6c0.3-1.5-0.1-3.1-1-4.4c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7l-10,6.3c-1.6,1-3.4,1.8-5.3,2.3 c1.3-0.8,2.2-2.1,2.5-3.6c0.3-1.5-0.1-3.1-1-4.4c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7l-10,6.3c-1.6,1-3.4,1.8-5.3,2.3
C31.9,69.4,23,66.1,18,58.9c-3-4.2-4.2-9.4-3.3-14.5c0.9-5,3.8-9.4,8.1-12.1L49,15.7c1.6-1,3.4-1.8,5.3-2.3 C31.9,69.4,23,66.1,18,58.9c-3-4.2-4.2-9.4-3.3-14.5c0.9-5,3.8-9.4,8.1-12.1L49,15.7c1.6-1,3.4-1.8,5.3-2.3
c8.4-2.2,17.3,1.1,22.2,8.2C79.5,25.9,80.7,31.1,79.8,36.2z"/> c8.4-2.2,17.3,1.1,22.2,8.2C79.5,25.9,80.7,31.1,79.8,36.2z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

80
src/lib/zhen/cv-comps/LinkedInQrCode.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

38
src/routes/+layout.server.ts
View File

@ -1,19 +1,19 @@
/* /*
* Provides post summaries to all pages. That means every page can access summaries * Provides post summaries to all pages. That means every page can access summaries
* for all posts on the website. * for all posts on the website.
*/ */
import { type Post, posts } from './posts/posts_data'; import { type Post, posts } from './posts/posts_data';
export function load() { export function load() {
let summaries : Post[] = []; let summaries : Post[] = [];
// Sort by newest news first // Sort by newest news first
posts.sort((a, b) => b.creation_date - a.creation_date); posts.sort((a, b) => b.creation_date - a.creation_date);
posts.forEach((post) => { posts.forEach((post) => {
summaries.push(post); summaries.push(post);
}); });
return { summaries }; return { summaries };
} }

622
src/routes/+layout.svelte
View File

@ -1,332 +1,290 @@
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements --> <!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
<script lang="ts"> <script lang="ts">
import "$lib/app.css"; import "$lib/app.css";
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import MediaQuery from 'svelte-media-queries'; import MediaQuery from 'svelte-media-queries';
export let hideOnPrint: boolean; export let hideOnPrint: boolean;
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte"; import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte"; import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
const footerCollapseThreshold : string = '1000px'; import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
const headerCollapseThreshold : string = '1000px';
let footerCollapse : boolean; const footerCollapseThreshold : string = '1000px';
let headerCollapse : boolean; const headerCollapseThreshold : string = '1000px';
let footerCollapse : boolean;
let navbarHidden : boolean = true; let isMobile : boolean;
function resetNavBar() { let navbarHidden : boolean = true;
navbarHidden = true;
} function resetNavBar() {
navbarHidden = true;
import { afterNavigate } from '$app/navigation'; }
afterNavigate(() => {
const params = new URLSearchParams(window.location.search); import { afterNavigate } from '$app/navigation';
hideOnPrint = params.get('hideOnPrint') === '1'; afterNavigate(() => {
//console.log(hideOnPrint); const params = new URLSearchParams(window.location.search);
}); hideOnPrint = params.get('hideOnPrint') === '1';
//console.log(hideOnPrint);
import { onMount } from 'svelte'; });
import { themeChange } from 'theme-change'
onMount(() => { import { onMount } from 'svelte';
const lock = document.createElement('meta'); import { themeChange } from 'theme-change'
lock.name = 'darkreader-lock'; onMount(() => {
document.head.appendChild(lock); const lock = document.createElement('meta');
lock.name = 'darkreader-lock';
themeChange(false) // false parameter is required for svelte document.head.appendChild(lock);
});
</script> themeChange(false) // false parameter is required for svelte
});
<!-- Detect mobile --> </script>
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
<!-- Detect mobile -->
<!-- Nav bar --> <MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
<div class="bg-base-200 p-0"> <MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
<div class="nav-bar pr-4 bg-base-200"> <!-- Nav bar -->
{#if !headerCollapse} <div class="bg-base-200 p-0">
<div class="desktop"> <header class="{hideOnPrint ? 'hide-on-print' : ''}">
<a href="/" class="nav-head"> <div class="nav-bar pr-4 bg-base-200">
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> {#if !isMobile}
<h3 id="logo-text">The Deprived Devs</h3> <div class="desktop">
</a> <a href="/" class="nav-head">
<div class="nav-spacer" /> <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
<select class="prose" data-choose-theme> <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
<option value="light">Light</option> </a>
<option value="dark">Dark</option> <div class="nav-spacer" />
<option value="synthwave">Synthwave</option>
<option value="retro">Retro</option> <!-- <a href="/">Home</a> -->
<option value="cyberpunk">Cyberpunk</option> <a href="https://botalex.itch.io/" target="_blank">Games</a>
<option value="valentine">Valentine</option> <!-- <a href="/posts">Blog</a>
<option value="halloween">Halloween</option> <a href="/about">About</a> -->
<option value="forest">Forest</option> </div>
<option value="aqua">Aqua</option> {:else}
<option value="black">Black</option> <div class="collapsed">
<option value="luxury">Luxury</option> <a on:click={resetNavBar} href="/" class="nav-head">
<option value="dracula">Dracula</option> <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
<option value="business">Business</option> <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
<option value="night">Night</option> </a>
<option value="coffee">Coffee</option> <div class="nav-spacer" />
<option value="dim">Dim</option> <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
<option value="sunset" selected>Sunset</option> <HamburgerMenuIcon Class="fill-base-content"/>
</select> </button>
</div>
<a href="/">Home</a> {#if !navbarHidden}
<a href="https://botalex.itch.io/">Games</a> <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
<!-- <a href="/posts">Blog</a> <!-- <a on:click={resetNavBar} href="/">Home</a> -->
<a href="/about">About</a> --> <a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
</div> <!-- <a on:click={resetNavBar} href="/posts">Blog</a>
{:else} <a on:click={resetNavBar} href="/about">About</a> -->
<div class="collapsed"> </div>
<a on:click={resetNavBar} href="/" class="nav-head"> {/if}
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> {/if}
<h3 id="logo-text">The Deprived Devs</h3> </div>
</a> </header>
<div class="nav-spacer" />
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}> <!-- Page content -->
<HamburgerMenuIcon Class="fill-base-content"/> <slot />
</button>
</div> <!-- About footer -->
{#if !navbarHidden} <footer class="{hideOnPrint ? 'hide-on-print' : ''}">
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}> <div class="about-container">
<select data-choose-theme> <div class="credits">
<option value="light">Default</option> <span>© 2023-2024</span>
<option value="dark">Dark</option> <br>
<option value="cupcake">Cupcake</option> <span>Benjamin Dreyer</span>
<option value="bumblebee">Bumblebee</option> <br>
<option value="emerald">Emerald</option> <span>Oliver Schwenger</span>
<option value="corporate">Corporate</option> <br>
<option value="synthwave">Synthwave</option> <span>Sylvester Junge</span>
<option value="retro">Retro</option> <br>
<option value="cyberpunk">Cyberpunk</option> <span>Zhentao Wei</span>
<option value="valentine">Valentine</option> </div>
<option value="halloween">Halloween</option> <div>
<option value="garden">Garden</option> <h3><b>About this website</b></h3>
<option value="forest">Forest</option> <!-- <a href="/" target="_blank">Recursion</a> -->
<option value="aqua">Aqua</option> <div class="flex justify-center">
<option value="lofi">Lofi</option> This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
<option value="pastel">Pastel</option> <img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
<option value="fantasy">Fantasy</option> </div>
<option value="wireframe">Wireframe</option> <span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
<option value="black">Black</option>
<option value="luxury">Luxury</option> </div>
<option value="dracula">Dracula</option> <div class="contact">
<option value="cmyk">CMYK</option> <h3><b>Contact</b></h3>
<option value="autumn">Autumn</option> <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
<option value="business">Business</option> <div class="mt-2"></div>
<option value="acid">Acid</option> <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
<option value="lemonade">Lemonade</option> <!-- <span>Discord</span> -->
<option value="night">Night</option> <img src="/images/icons/discord.svg" alt="Discord"/>
<option value="coffee">Coffee</option> </a>
<option value="winter">Winter</option> </div>
<option value="dim">Dim</option> </div>
<option value="nord">Nord</option> </footer>
<option value="sunset">Sunset</option> </div>
</select>
<a on:click={resetNavBar} href="/">Home</a> <style lang="scss">
<a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a> /* Nav bar. */
<!-- <a on:click={resetNavBar} href="/posts">Blog</a> header {
<a on:click={resetNavBar} href="/about">About</a> --> display: flex;
</div> justify-content: center;
{/if} }
{/if}
</div> header a {
</header> text-decoration: none;
}
<!-- Page content -->
<slot /> .nav-bar {
width: 100%;
<!-- About footer --> max-width: 1400px;
<footer class="{hideOnPrint ? 'hide-on-print' : ''}"> }
<div class="about-container">
<div class="credits"> .desktop {
<span>© 2023-2024</span> width: 100%;
<br> display: flex;
<span>Benjamin Dreyer</span> gap: 30px;
<br> }
<span>Oliver Schwenger</span>
<br> .collapsed {
<span>Sylvester Junge</span> width: 100%;
<br> display: flex;
<span>Zhentao Wei</span> }
<br>
<br> #toggle-nav {
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span> background: transparent;
</div> border: none;
<div> }
<h3>About Us</h3>
<a href="/about">About</a>
</div> .nav-list {
<div class="contact"> display: flex;
<h3>Contact</h3> flex-direction: column;
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social"> gap: 10px;
<img src="/images/icons/discord.svg" alt="Discord"/>
<span>Discord</span> align-items: center;
</a> }
</div>
</div> .nav-head {
</footer> display: flex;
</div> align-items: center;
gap: 10px;
}
<style lang="scss">
/* Nav bar. */ #logo-link {
header { width: 64px;
display: flex; aspect-ratio: 1 / 1;
justify-content: center; }
}
#logo-text {
header a { font-size: 24px;
text-decoration: none; color: oklch(var(--bc));
} font-family: var(--title-font);
margin: 0;
.nav-bar {
width: 100%; min-width: 200px;
max-width: 1400px; }
}
.nav-spacer {
.desktop { width: 100%;
width: 100%; }
display: flex;
gap: 30px; header a {
} display: flex;
align-items: center;
.collapsed {
width: 100%; font-size: 22px;
display: flex; font-family: var(--title-font);
} // Text color
color: oklch(var(--bc));
#toggle-nav { }
background: transparent;
border: none; /* Footer. */
} footer {
margin-top: 50px;
padding: 25px 0;
.nav-list { background-color: oklch(var(--b3));
display: flex;
flex-direction: column; height: 100%;
gap: 10px;
display: flex;
align-items: center; justify-content: center;
} }
.nav-head { .about-container {
display: flex; width: 80%;
align-items: center; height: 100%;
gap: 10px;
} color: oklch(var(--bc));
#logo-link { display: flex;
width: 64px; flex-wrap: wrap;
aspect-ratio: 1 / 1; justify-content: space-evenly;
}
& h3 {
#logo-text { font-size: larger;
font-size: 24px; }
color: oklch(var(--bc)); }
font-family: var(--title-font);
margin: 0; .about-container > div {
align-items: center;
min-width: 200px; text-align: center;
} }
.nav-spacer { .credits {
width: 100%; line-height: 2;
} }
header a { .contact {
display: flex; display: flex;
align-items: center; flex-direction: column;
}
font-size: 22px;
font-family: var(--title-font); .social {
// Text color display: flex;
color: oklch(var(--bc)); align-content: center;
} gap: 10px;
}
/* Footer. */
footer { .social > img {
margin-top: 50px; width: 24px;
padding: 25px 0; }
background-color: oklch(var(--b3));
footer h3 {
height: 100%; margin-top: 0px;
color: var(--text2);
display: flex; }
justify-content: center;
} footer a {
color: var(--text2);
.about-container { text-decoration-line: underline;
width: 80%; }
height: 100%;
a:hover {
color: oklch(var(--bc)); filter: brightness(130%);
}
display: flex;
flex-wrap: wrap; @media print {
justify-content: space-evenly; .hide-on-print {
} display: none;
}
.about-container > div { }
align-items: center; </style>
text-align: center;
} {#if footerCollapse}
<style>
.credits { .about-container {
line-height: 2; flex-direction: column;
} justify-content: center !important;
gap: 25px;
.contact { }
display: flex; </style>
flex-direction: column; {/if}
}
{#if isMobile}
.social { <style>
display: flex;
align-content: center; </style>
gap: 10px; {/if}
}
.social > img {
width: 24px;
}
footer h3 {
margin-top: 0px;
color: var(--text2);
}
footer a {
color: var(--text2);
text-decoration-line: underline;
}
a:hover {
filter: brightness(130%);
}
@media print {
.hide-on-print {
display: none;
}
}
</style>
{#if footerCollapse}
<style>
.about-container {
flex-direction: column;
justify-content: center !important;
gap: 25px;
}
</style>
{/if}
{#if headerCollapse}
<style>
</style>
{/if}

2
src/routes/+layout.ts
View File

@ -1 +1 @@
export const prerender = true; export const prerender = true;

412
src/routes/+page.svelte
View File

@ -1,168 +1,244 @@
<script lang="ts"> <script lang="ts">
import MediaQuery from 'svelte-media-queries'; import ProfileSpacer from './comps/ProfileSpacer.svelte';
import NewsCard from '$lib/posts/NewsCard.svelte'; import MediaQuery from 'svelte-media-queries';
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte'; import NewsCard from '$lib/posts/NewsCard.svelte';
import Button from '$lib/IO/Button.svelte'; import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
import { ButtonType } from '$lib/IO/ButtonType.ts'; import Button from '$lib/IO/Button.svelte';
import Timeline from '../comps/timeline/timeline.svelte'; import { ButtonType } from '$lib/IO/ButtonType.ts';
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax"; import Timeline from '../comps/timeline/timeline.svelte';
import { Confetti } from "svelte-confetti" import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
import { tick } from 'svelte' import { tick } from 'svelte'
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif" import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
import FrontFold from './comps/FrontFold.svelte'; import Carousel from './comps/Carousel.svelte';
const mobileThreshold : string = '600px'; // was 1000px. zhen testing import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
let mobile : boolean; import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"
import { onMount } from 'svelte';
import Blood1 from "$lib/GamePreviews/Blood-title.png"
// Restore scroll position on mount import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
let showConfetti: boolean = false; import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
function onProgressConfetti(progress: number){ import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
console.log(progress);
import Time1 from "$lib/GamePreviews/Time-1.png"
showConfetti = !mobile && progress > 0.225 || mobile && progress > 0.32; import Time2 from "$lib/GamePreviews/time-2.png"
} import Time3 from "$lib/GamePreviews/time-3.png"
</script> import Time4 from "$lib/GamePreviews/time-4.png"
import Time5 from "$lib/GamePreviews/time-5.gif"
<!-- Detect mobile --> const mobileThreshold : string = '600px'; // was 1000px. zhen testing
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} /> let mobile : boolean;
</script>
<Parallax sections={2.5}>
<ParallaxLayer span={0.6} rate={0.2} class="pointer-events-none">
<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;"> <!-- Detect mobile -->
<img src="{BackgroundVideo}" style="width: 100%; height: 100%; object-fit: cover; filter: blur(5px) brightness(0.6);" alt="Background video"/> <MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
<div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
<h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">{@html !mobile ? "Deprived Devs" : "Deprived<br/>Devs"}</h1> <div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
{#if mobile} <img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/>
<div style="width: 100px; height: 100px;"></div> <div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
{/if} <h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">
</div> {#if !mobile}
</div> Deprived Devs
</ParallaxLayer> {:else}
<ParallaxLayer offset={0.55} rate={0.3} class="bg-base-200 pointer-events-none"> Deprived
<br/>
</ParallaxLayer> <h1 class="-mt-6 prose" style="font-size: 2rem;">
Devs
<ParallaxLayer onProgress={onProgressConfetti} offset={0.75}> </h1>
<div class="prose flex justify-center m-auto"> {/if}
<h1 class="main-title text-center" style="font-size: {!mobile ? 3 : 2}rem;"> </h1>
Developers! {#if mobile}
</h1> <div style="width: 100px; height: 100px;"></div>
</div> {/if}
</ParallaxLayer> </div>
</div>
<!-- Decorative: -->
<StickyLayer offset={(!mobile) ? ({ top: 0.4, bottom: 0.75 }) : ({ top: 0.4, bottom: 0.4 })} class="pointer-events-none"> <div class="flex justify-center w-full px-8 py-4">
<div class="prose font-mono pointer-events-auto h-full" style="max-width: 100%;"> <div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
<div class="flex justify-center items-center h-full relative"> <h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
<div class="flex justify-center" style="position: absolute; top: 30vh; {!mobile ? "max-width: 35vw;" : "width: 100%;"}"> Developers
{#if showConfetti} </h1>
<div>
<Confetti noGravity cone amount={50} colorArray={["white"]} />
</div> <div class="developersProfile pl-4 font-mono">
{/if} <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2>
</div> <span>
<div class="grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)"> <p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
<FrontFold Title="Alex / Zhen" Checked={true}> <p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
<p>Hi, I am Alex/Zhen, I'm that chinese guy.</p> </span>
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p> </div>
</FrontFold>
<FrontFold Title="Sveske / Benjamin"> <ProfileSpacer/>
<p>Hi, I use Arch, btw.</p> <div class="developersProfile pl-4 font-mono">
<p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>' <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2>
</FrontFold> <span>
<FrontFold Title="Zylvester"> <p>Hi, I use Arch, btw.</p>
<p>Hi, I am [insert text here]</p> <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>
<p>Here's a joke about recursion: <a href="/" style="color:lightblue;">recursion</a></p> </span>
</FrontFold> </div>
</div>
</div> <ProfileSpacer/>
</div> <div class="developersProfile pl-4 font-mono">
</StickyLayer> <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2>
<span>
<ParallaxLayer offset={1.5} rate={0.3} class="bg-base-200 pointer-events-none" style="box-shadow: 0 -1rem 10px rgba(0, 0, 0, 0.2);" > <p>Hi, I am [insert text here]</p>
<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto"> <p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
<article class="pt-16 prose overflow-hidden font-mono {mobile ? "px-8" : ""}"> </span>
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 5 : 3}rem; ">About us</h1> </div>
<p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p> </div>
</article> </div>
<!-- Spacer --> <!-- space -->
<div class="{!mobile ? "py-16" : "py-4"}"/> <div class="py-8 flex justify-center">
<div style="width: 50%;">
<div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <ProfileSpacer/>
<div class="flex w-52 flex-col gap-4"> </div>
<div class="skeleton h-32 w-full"></div> </div>
<div class="skeleton h-4 w-28"></div>
<div class="skeleton h-4 w-full"></div> <div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
<div class="skeleton h-4 w-full"></div> <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
</div> <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h1>
<div class="flex w-52 flex-col gap-4"> <p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
<div class="skeleton h-32 w-full"></div> </article>
<div class="skeleton h-4 w-28"></div>
<div class="skeleton h-4 w-full"></div> <!-- Spacer -->
<div class="skeleton h-4 w-full"></div> <div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
</div> <ProfileSpacer/>
{#if !mobile} </div>
<div class="flex w-52 flex-col gap-4">
<div class="skeleton h-32 w-full"></div> <article class="pt-16 prose {mobile ? "px-8" : ""}">
<div class="skeleton h-4 w-28"></div> <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h1>
<div class="skeleton h-4 w-full"></div> <p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
<div class="skeleton h-4 w-full"></div> </article>
</div>
<div class="flex w-52 flex-col gap-4"> <!-- Spacer -->
<div class="skeleton h-32 w-full"></div> <div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
<div class="skeleton h-4 w-28"></div>
<div class="skeleton h-4 w-full"></div> </div>
<div class="skeleton h-4 w-full"></div>
</div> <div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{/if} <!-- Corro rebounce -->
</div> <div class="games card bg-base-100 shadow-xl">
<figure style="height: 15em;">
<h6 class="prose text-base-300"><b>(These will never load)</b></h6> <Carousel images={[
</div> Corrobot1,
</ParallaxLayer> Corrobot2,
Corrobot3,
<!-- <StickyLayer offset={{ top: 1.75, bottom: 2 }} > ]}/>
<div class="flex justify-center prose main-title overflow-hidden"> </figure>
<h1 style="font-size: {!mobile ? 5 : 3}rem;">About us</h1> <div class="card-body">
</div> <h2 class="card-title">Corrobot-rebounce</h2>
</StickyLayer> --> <p>A 3D sequel to Corrobot-Takeover</p>
</Parallax> <br/>
<p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
<Timeline/> <div class="card-actions justify-end">
<a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary">View on itch.io</a>
<style> </div>
.main-title { </div>
width: 80%; </div>
font-family: var(--title-font);
} <!-- Blood -->
</style> <div class="games card bg-base-100 w-96 shadow-xl">
<figure style="height: 15em;">
{#if mobile} <Carousel images={[
<style> Blood1,
#news-section { Blood2,
transition-duration: 500ms; Blood3,
transition-property: width; Blood4,
width: 90% !important; Blood5,
} ]}/>
.news-container { </figure>
flex-direction: column !important; <div class="card-body">
} <h2 class="card-title">Unnamed blood game</h2>
<p>A game based on an unique kind of combat</p>
.dummy { <br/>
width: 0% !important; <p>This was made during <a href="https://itch.io/jam/future-game-makers-jam-2024" class="underline">Future Game Makers</a>, and of course our team won the competition.</p>
} <div class="card-actions justify-end">
<a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary">View on itch.io</a>
/* #more-posts { */ </div>
/* flex-grow: 1 !important; */ </div>
/* } */ </div>
</style> <!-- Time -->
{/if} <div class="games card bg-base-100 w-96 shadow-xl">
<figure style="height: 15em;">
<Carousel images={[
Time1,
Time2,
Time3,
Time4,
Time5,
]}/>
</figure>
<div class="card-body">
<h2 class="card-title">One More Time</h2>
<p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
<br/>
<p>This was made during <a href="https://itch.io/jam/dmspiljam-november-2021" class="underline">Denmark Masters jam</a>. This jam has youths allover Denmark to compete, and of course our team won the competition again.</p>
<div class="card-actions justify-end">
<a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary">View on itch.io</a>
</div>
</div>
</div>
<div class="games card bg-base-100 w-96 shadow-xl">
<figure class="skeleton rounded-b-none" style="height: 15em;"></figure>
<div class="card-body">
<h2 class="card-title">What's next?</h2>
<div class="skeleton mt-1 h-4 w-28"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-28"></div>
<div class="skeleton h-4 w-full"></div>
<div class="flex grow"/>
<div class="card-actions justify-end">
<a href="/" target="_blank" class="btn btn-primary">RECURSION!</a>
</div>
</div>
</div>
</div>
</div>
<style>
.main-title {
width: 80%;
font-family: var(--title-font);
}
.developersProfile{
border-left: dashed oklch(var(--p));
}
#backgroundGif{
width: 100%;
height: 100%;
max-height: 40vh;
object-fit: cover;
filter: blur(5px) brightness(0.6);
}
</style>
{#if !mobile}
<style>
.games {
width: 24rem /* 384px */;
}
</style>
{:else}
<style>
.games {
width: 80%;
display: flex;
justify-self: center;
}
</style>
{/if}

2
src/routes/about/+page.svelte
View File

@ -1 +1 @@
<p>This is an informative about page :) </p> <p>This is an informative about page :) </p>

30
src/routes/comps/FrontFold.svelte
View File

@ -1,16 +1,16 @@
<script> <script>
export let Title = ""; export let Title = "";
export let Checked = false; export let Checked = false;
</script> </script>
<div class="collapse collapse-arrow bg-base-100 text-start shadow-sm" {...$$restProps}> <div class="collapse collapse-arrow bg-base-100 text-start shadow-sm" {...$$restProps}>
{#if Checked} {#if Checked}
<input type="radio" name="{Title}" checked/> <input type="radio" name="{Title}" checked/>
{:else} {:else}
<input type="radio" name="{Title}"/> <input type="radio" name="{Title}"/>
{/if} {/if}
<div class="collapse-title text-xl font-medium "><b>{Title}</b></div> <div class="collapse-title text-xl font-medium "><b>{Title}</b></div>
<div class="collapse-content" style="border-top: dotted 0.15rem oklch(var(--b3));"> <div class="collapse-content" style="border-top: dotted 0.15rem oklch(var(--b3));">
<slot/> <slot/>
</div> </div>
</div> </div>

2
src/routes/games/+page.svelte
View File

@ -1 +1 @@
WIP WIP

184
src/routes/post/+layout.svelte
View File

@ -1,92 +1,92 @@
<!-- Layout for posts --> <!-- Layout for posts -->
<script lang="ts"> <script lang="ts">
import { type BlogData } from './+layout'; import { type BlogData } from './+layout';
export let data : BlogData export let data : BlogData
const monthNames : string[] = ["January", "February", "March", "April", "May", "June", const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]; "July", "August", "September", "October", "November", "December"];
function humanDate(date : Date) : string { function humanDate(date : Date) : string {
return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`; return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
} }
</script> </script>
<article> <article>
<div class="body"> <div class="body">
<header> <header>
<img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} /> <img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
<h3 id="title">{data.post.title}</h3> <h3 id="title">{data.post.title}</h3>
<div class="dates"> <div class="dates">
<span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span> <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> <span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
</div> </div>
</header> </header>
<div class="content"> <div class="content">
<slot /> <slot />
</div> </div>
</div> </div>
</article> </article>
<style> <style>
article { article {
margin-top: 25px; margin-top: 25px;
margin-inline: auto; margin-inline: auto;
max-width: 1000px; max-width: 1000px;
/* background: var(--background1); */ /* background: var(--background1); */
} }
header { header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 50px; margin-bottom: 50px;
} }
#blog-cover-img { #blog-cover-img {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
max-width: 100%; max-width: 100%;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
#title { #title {
font-family: var(--title-font); font-family: var(--title-font);
font-size: 36px; font-size: 36px;
margin: 0; margin: 0;
} }
.dates { .dates {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
} }
.date { .date {
color: var(--text3); color: var(--text3);
} }
.body { .body {
margin-inline: auto; margin-inline: auto;
max-width: 1200px; max-width: 1200px;
padding: 25px; padding: 25px;
} }
.content { .content {
line-height: 2; line-height: 2;
font-size: 18px; font-size: 18px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
/* CSS for posts - child rooutes. */ /* CSS for posts - child rooutes. */
img { img {
width: 100%; width: 100%;
} }
:global(a) { :global(a) {
color: var(--text1); color: var(--text1);
text-decoration-line: underline; text-decoration-line: underline;
} }
</style> </style>

34
src/routes/post/+layout.ts
View File

@ -1,17 +1,17 @@
import { posts, type Post } from '../posts/posts_data'; import { posts, type Post } from '../posts/posts_data';
export interface BlogData { export interface BlogData {
summaries: Post[], summaries: Post[],
post: Post post: Post
} }
export async function load({ url, parent }) : Promise<BlogData> { export async function load({ url, parent }) : Promise<BlogData> {
const { summaries } = await parent(); const { summaries } = await parent();
const websiteUrl = url.pathname.split('/'); const websiteUrl = url.pathname.split('/');
const windowUrl = websiteUrl.pop() || websiteUrl.pop(); // Handle trailing / const windowUrl = websiteUrl.pop() || websiteUrl.pop(); // Handle trailing /
return { return {
summaries: summaries, summaries: summaries,
post: posts.filter((post) => post.url == windowUrl)[0], post: posts.filter((post) => post.url == windowUrl)[0],
}; };
} }

20
src/routes/post/Post.svelte
View File

@ -1,10 +1,10 @@
<div class="post-container"> <div class="post-container">
<div class="post-header"> <div class="post-header">
<slot name="title" /> <slot name="title" />
<slot name="creation-date" /> <slot name="creation-date" />
<slot name="modification-date" /> <slot name="modification-date" />
<!-- the post content goes in this slot --> <!-- the post content goes in this slot -->
<slot /> <slot />
</div> </div>
</div> </div>

4
src/routes/post/folder-icons/+page.svelte
View File

@ -1,2 +1,2 @@
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. 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.

132
src/routes/post/git-bisecting/+page.svelte
View File

@ -1,66 +1,66 @@
<script> <script>
import Highlight from "svelte-highlight"; import Highlight from "svelte-highlight";
import { shell } from "svelte-highlight/languages"; import { shell } from "svelte-highlight/languages";
import obsidian from "svelte-highlight/styles/obsidian"; import obsidian from "svelte-highlight/styles/obsidian";
</script> </script>
<svelte:head> <svelte:head>
{@html obsidian} {@html obsidian}
</svelte:head> </svelte:head>
<p> <p>
Finding the specific commit that introduced a bug in your code can be frustrating, 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 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 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 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 bug doesn't occur. Afterwards git will binary search it's way to find the commit
introducing the bug. introducing the bug.
</p> </p>
<p> <p>
Suppose we've the following git history: Suppose we've the following git history:
</p> </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"/> <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> <p>
It could potentially contain many more commits between the known 'good' commit and the 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 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 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. 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 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. of commits between the bad and the current.
</p> </p>
<p> <p>
Instead git bisect comes to the rescue. Git bisect performs a 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>, <a href="https://en.wikipedia.org/wiki/Binary_search_algorithm" target="_blank">binary search</a>,
which is much faster. which is much faster.
To use git bisect, you must tell git to start bisecting: To use git bisect, you must tell git to start bisecting:
</p> </p>
<Highlight language={shell} code="$ git bisect start" /> <Highlight language={shell} code="$ git bisect start" />
<p> <p>
Afterwards we mark the 'bad' commit - any commit we know the bug occurs in. In this example 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 the current commit that we know is bad have the commit hash <code>c26cf8a</code>, so
we mark the commit bad: we mark the commit bad:
</p> </p>
<Highlight language={shell} code="$ git bisect bad c26cf8a" /> <Highlight language={shell} code="$ git bisect bad c26cf8a" />
<p> <p>
After that we mark a previous commit that we know the bug doesn't occur in. In this 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> example it's the 'good' commit (se picture above), which has a commit hash of <code>b34ec52</code>
</p> </p>
<Highlight language={shell} code="$ git bisect good b34ec52" /> <Highlight language={shell} code="$ git bisect good b34ec52" />
<p> <p>
Now git will automatically checkout a commit somewhere in between the good and bad commit. 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 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: <b>doesn't</b> occur you report it to git:
</p> </p>
<Highlight language={shell} code="$ git bisect good" /> <Highlight language={shell} code="$ git bisect good" />
<p> <p>
However if it does occur you mark it bad: However if it does occur you mark it bad:
</p> </p>
<Highlight language={shell} code="$ git bisect bad" /> <Highlight language={shell} code="$ git bisect bad" />
<p> <p>
You continue to do this until git has tracked down the first bad commit, ie. the You continue to do this until git has tracked down the first bad commit, ie. the
commit that introduced the bug. commit that introduced the bug.
</p> </p>
<h2>Resources</h2> <h2>Resources</h2>
Git bisect man page: <a href="https://git-scm.com/docs/git-bisect">https://git-scm.com/docs/git-bisect</a> Git bisect man page: <a href="https://git-scm.com/docs/git-bisect">https://git-scm.com/docs/git-bisect</a>

162
src/routes/posts/+page.svelte
View File

@ -1,81 +1,81 @@
<script lang="ts"> <script lang="ts">
import { type Post } from './posts_data'; import { type Post } from './posts_data';
import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte'; import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
export let data; // <- contains post data export let data; // <- contains post data
let search : string; let search : string;
$: regex = search ? new RegExp(search, 'i') : null; $: regex = search ? new RegExp(search, 'i') : null;
$: matches = (item : Post) => $: matches = (item : Post) =>
regex ? regex.test(item.title) || regex.test(item.summary) : true; regex ? regex.test(item.title) || regex.test(item.summary) : true;
$: matched_posts = data.summaries.filter(matches); $: matched_posts = data.summaries.filter(matches);
</script> </script>
<div class="head"> <div class="head">
<header> <header>
<h1>Blog Posts</h1> <h1>Blog Posts</h1>
<input id="search" placeholder="Search Blog Posts" bind:value={search} /> <input id="search" placeholder="Search Blog Posts" bind:value={search} />
</header> </header>
</div> </div>
<div class="list"> <div class="list">
{#if matched_posts.length == 0} {#if matched_posts.length == 0}
<span>No Matches</span> <span>No Matches</span>
{/if} {/if}
{#each matched_posts as summary} {#each matched_posts as summary}
<NewsVerticalCard <NewsVerticalCard
post_url="/post/{summary.url}" post_url="/post/{summary.url}"
title={summary.title} title={summary.title}
summary={summary.summary} summary={summary.summary}
creation_date={summary.creation_date.toString()} creation_date={summary.creation_date.toString()}
/> />
{/each} {/each}
</div> </div>
<style> <style>
h1 { h1 {
font-size: 48px; font-size: 48px;
font-family: var(--title-font); font-family: var(--title-font);
} }
.head { .head {
width: 100%; width: 100%;
background-color: var(--primary); background-color: var(--primary);
} }
header { header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
justify-content: space-around; justify-content: space-around;
padding: 0 0 20px 0; padding: 0 0 20px 0;
margin-bottom: 25px; margin-bottom: 25px;
} }
#search { #search {
height: 40px; height: 40px;
align-self: center; align-self: center;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-size: 18px; font-size: 18px;
line-height: 2; line-height: 2;
padding: 0.5rem 0.8rem; padding: 0.5rem 0.8rem;
margin-top: 0px; margin-top: 0px;
background-color: var(--background); background-color: var(--background);
color: var(--text1); color: var(--text1);
} }
.list { .list {
max-width: 1500px; max-width: 1500px;
margin-inline: auto; margin-inline: auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 25px; gap: 25px;
justify-content: center; justify-content: center;
} }
</style> </style>

106
src/routes/posts/posts_data.ts
View File

@ -1,53 +1,53 @@
// TODO: document members // TODO: document members
export type Post = { export type Post = {
// Required // Required
url : string, url : string,
cover_img : string, cover_img : string,
cover_alt : string, cover_alt : string,
title: string, title: string,
summary : string, summary : string,
creation_date : number creation_date : number
modification_date: number, modification_date: number,
// Optional // Optional
// TODO: author? // TODO: author?
} }
export const posts : Post[] = [ export const posts : Post[] = [
{ {
url: 'git-bisecting', url: 'git-bisecting',
cover_img: '/images/posts/git-bisecting/thumbnail.png', cover_img: '/images/posts/git-bisecting/thumbnail.png',
cover_alt: 'Photo of a bug', cover_alt: 'Photo of a bug',
title: 'Tracking down bugs in your code — using git bisect', 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.', summary: 'Track down which specific change introduced a bug using the binary search tool provided by git.',
creation_date: 1709907213, creation_date: 1709907213,
modification_date: 1709907213, modification_date: 1709907213,
}, },
{ {
url: 'folder-icons', url: 'folder-icons',
cover_img: '/images/posts/folder-icons/cover.png', cover_img: '/images/posts/folder-icons/cover.png',
cover_alt: 'Image of folder icons being used in the editor', cover_alt: 'Image of folder icons being used in the editor',
title: 'Amazing Icons for Folders in Unity!', title: 'Amazing Icons for Folders in Unity!',
summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience', summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
creation_date: 1708382491, creation_date: 1708382491,
modification_date: 1708382491, modification_date: 1708382491,
}, },
{ {
url: 'lorem', url: 'lorem',
cover_img: '/images/posts/folder-icons/cover.png', 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.', cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
title: 'Lorem Ipsum !!', title: 'Lorem Ipsum !!',
summary: 'This is a nice exploanation on lorem ipsum latin', summary: 'This is a nice exploanation on lorem ipsum latin',
creation_date: 1708382491, creation_date: 1708382491,
modification_date: 1708382491, modification_date: 1708382491,
}, },
{ {
url: 'lorem1', url: 'lorem1',
cover_img: '/images/posts/folder-icons/cover.png', 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.', cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
title: 'Idk some arcticle bruh!', title: 'Idk some arcticle bruh!',
summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.', summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
creation_date: 1708558377, creation_date: 1708558377,
modification_date: 1708558377, modification_date: 1708558377,
}, },
]; ];

172
src/routes/sveske/+page.svelte
View File

@ -1,86 +1,86 @@
<script lang="ts"> <script lang="ts">
import ProjectEntry from "./lib/ProjectEntry.svelte"; import ProjectEntry from "./lib/ProjectEntry.svelte";
</script> </script>
<div class="content"> <div class="content">
<h1>Benjamin's portfolie for Informatik</h1> <h1>Benjamin's portfolie for Informatik</h1>
<p> <p>
Forneden kan ses en række projekter som er blevet lavet i Informatik C og efterfølgende Informatik B. Forneden kan ses en række projekter som er blevet lavet i Informatik C og efterfølgende Informatik B.
</p> </p>
<div class="projects"> <div class="projects">
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/appLab/thumb.png"} thumbnail_url={"/portfolios/sveske/appLab/thumb.png"}
thumbnail_alt={"App Lab"} thumbnail_alt={"App Lab"}
download={"/portfolios/sveske/appLab/applab_rapport.pdf"} download={"/portfolios/sveske/appLab/applab_rapport.pdf"}
title={"1.G - App Lab: Idle spil i browseren"} title={"1.G - App Lab: Idle spil i browseren"}
summary={"Vi udviklede et idle spil i App Lab. Brugte JavaScript til at programmere spillet."} summary={"Vi udviklede et idle spil i App Lab. Brugte JavaScript til at programmere spillet."}
/> />
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/teachable_machine/thumb.png"} thumbnail_url={"/portfolios/sveske/teachable_machine/thumb.png"}
thumbnail_alt={"Teachable Machine"} thumbnail_alt={"Teachable Machine"}
download={"/portfolios/sveske/teachable_machine/teachable_machine_rapport.pdf"} download={"/portfolios/sveske/teachable_machine/teachable_machine_rapport.pdf"}
title={"1.G - Teachable Machine: Håndtegns detektor"} title={"1.G - Teachable Machine: Håndtegns detektor"}
summary={"I dette projekt udarbejdede vi en teachable machine model til at detektere forskellige håndtegn"} summary={"I dette projekt udarbejdede vi en teachable machine model til at detektere forskellige håndtegn"}
/> />
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/firebase/thumb.png"} thumbnail_url={"/portfolios/sveske/firebase/thumb.png"}
thumbnail_alt={"Firebase"} thumbnail_alt={"Firebase"}
download={"/portfolios/sveske/firebase/firebase_rapport.pdf"} download={"/portfolios/sveske/firebase/firebase_rapport.pdf"}
title={"1.G - Firebase: Netværk scoreboard i Unity"} title={"1.G - Firebase: Netværk scoreboard i Unity"}
summary={"Med brug af Firebase udviklede vi et scoreboard som synkroniserer med en Firebase Data Store. Scoreboardet blev implementeret i et tidligere spil udviklet i Teknologi B"} summary={"Med brug af Firebase udviklede vi et scoreboard som synkroniserer med en Firebase Data Store. Scoreboardet blev implementeret i et tidligere spil udviklet i Teknologi B"}
/> />
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/the_red_paper/thumb.png"} thumbnail_url={"/portfolios/sveske/the_red_paper/thumb.png"}
thumbnail_alt={"The Red Paper"} thumbnail_alt={"The Red Paper"}
download={"/portfolios/sveske/the_red_paper/the_red_paper_rapport.pdf"} download={"/portfolios/sveske/the_red_paper/the_red_paper_rapport.pdf"}
title={"2.G - HTML: Hjemmeside udviklet ud fra gestalt lovene"} title={"2.G - HTML: Hjemmeside udviklet ud fra gestalt lovene"}
summary={"Udviklede en klon af \"Den Blå Avis\", som forsøger at demonstrere en række af de forskellige gestaltlove"} summary={"Udviklede en klon af \"Den Blå Avis\", som forsøger at demonstrere en række af de forskellige gestaltlove"}
/> />
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/makeymakey/thumb.png"} thumbnail_url={"/portfolios/sveske/makeymakey/thumb.png"}
thumbnail_alt={"MakyeMakey"} thumbnail_alt={"MakyeMakey"}
download={"/portfolios/sveske/makeymakey/makeymakey_rapport.pdf"} download={"/portfolios/sveske/makeymakey/makeymakey_rapport.pdf"}
title={"2.G - MakeyMakey: Installation som spiller Minecraft lyde i en af skolens gange"} title={"2.G - MakeyMakey: Installation som spiller Minecraft lyde i en af skolens gange"}
summary={"Skulle lave en interresant installation til en lokation på skolen. Vi udviklede en sensor, som detekterede når en person gik ind på en af skolens gange med makeymakey'en og spillede grotte lyde fra Minecraft"} summary={"Skulle lave en interresant installation til en lokation på skolen. Vi udviklede en sensor, som detekterede når en person gik ind på en af skolens gange med makeymakey'en og spillede grotte lyde fra Minecraft"}
/> />
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/hmi/thumb.png"} thumbnail_url={"/portfolios/sveske/hmi/thumb.png"}
thumbnail_alt={"HMI"} thumbnail_alt={"HMI"}
download={"/portfolios/sveske/hmi/hmi_rapport.pdf"} download={"/portfolios/sveske/hmi/hmi_rapport.pdf"}
title={"3.G - Human Machine Interface: Enhed som kan signalere brugeren hvis en person er på vej ind på brugerens værelse"} title={"3.G - Human Machine Interface: Enhed som kan signalere brugeren hvis en person er på vej ind på brugerens værelse"}
summary={"Brugte M5 mikrokontrolleren til at forbinde en IR bevægelsessensor. Sensoren sender beskeder over netværket til et armbånd som er bundet om brugerens håndled"} summary={"Brugte M5 mikrokontrolleren til at forbinde en IR bevægelsessensor. Sensoren sender beskeder over netværket til et armbånd som er bundet om brugerens håndled"}
/> />
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/prolog/thumb.png"} thumbnail_url={"/portfolios/sveske/prolog/thumb.png"}
thumbnail_alt={"Prolog"} thumbnail_alt={"Prolog"}
download={"/portfolios/sveske/prolog/prolog_rapport.pdf"} download={"/portfolios/sveske/prolog/prolog_rapport.pdf"}
title={"3.G - Prolog: Rejseekspertsystem"} title={"3.G - Prolog: Rejseekspertsystem"}
summary={"Brugte prolog programmeringsproget til at lave et ekspertsystem. Specifikt kan det give anbefalinger til rejsedestinationer ud fra en række faktorer som temperatur, økonomi, aktiviter osv."} summary={"Brugte prolog programmeringsproget til at lave et ekspertsystem. Specifikt kan det give anbefalinger til rejsedestinationer ud fra en række faktorer som temperatur, økonomi, aktiviter osv."}
/> />
<ProjectEntry <ProjectEntry
thumbnail_url={"/portfolios/sveske/eksamen/thumb.jpg"} thumbnail_url={"/portfolios/sveske/eksamen/thumb.jpg"}
thumbnail_alt={"Informatik Eksamen"} thumbnail_alt={"Informatik Eksamen"}
download={"/portfolios/sveske/eksamen/informatik_eksamen_rapport.pdf"} download={"/portfolios/sveske/eksamen/informatik_eksamen_rapport.pdf"}
title={"3.G - Eksamens projekt: Udvikling af opgavesystem til fysisk produkt om læringsdisplay af digital logik"} title={"3.G - Eksamens projekt: Udvikling af opgavesystem til fysisk produkt om læringsdisplay af digital logik"}
summary={"Udviklede et opgavesystem i form af en app i Unity. Opgavesystemet virker i samarbejde med et fysisk produkt udviklet til eksamensprojektet i teknikfag - Digital Design og Udvikling A. Appen skal undervise computer science elever på gymnasiet om digital logik og logiske porte"} summary={"Udviklede et opgavesystem i form af en app i Unity. Opgavesystemet virker i samarbejde med et fysisk produkt udviklet til eksamensprojektet i teknikfag - Digital Design og Udvikling A. Appen skal undervise computer science elever på gymnasiet om digital logik og logiske porte"}
/> />
</div> </div>
</div> </div>
<style> <style>
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.projects { .projects {
margin-top: 25px; margin-top: 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 25px; gap: 25px;
max-width: 1000px; max-width: 1000px;
} }
</style> </style>

120
src/routes/sveske/lib/ProjectEntry.svelte
View File

@ -1,60 +1,60 @@
<script lang="ts"> <script lang="ts">
export let download : string = '404'; export let download : string = '404';
export let thumbnail_url : string = '/favicon.png'; export let thumbnail_url : string = '/favicon.png';
export let thumbnail_alt : string = 'Picture describting the deprived devs logo'; export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
export let title : string = '<title>'; export let title : string = '<title>';
export let summary : string = '<summary>'; export let summary : string = '<summary>';
</script> </script>
<div class="news-card"> <div class="news-card">
<a href={download}> <a href={download}>
<div class="thumbnail"> <div class="thumbnail">
<img src={thumbnail_url} alt={thumbnail_alt}/> <img src={thumbnail_url} alt={thumbnail_alt}/>
</div> </div>
<div class="content"> <div class="content">
<h3 id="title">{title}</h3> <h3 id="title">{title}</h3>
<p id="summary-text">{summary}</p> <p id="summary-text">{summary}</p>
</div> </div>
</a> </a>
</div> </div>
<style> <style>
a { a {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 15px; gap: 15px;
} }
.thumbnail > img { .thumbnail > img {
object-fit: cover; object-fit: cover;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
width: 150px; width: 150px;
height: auto; height: auto;
} }
.content { .content {
flex-shrink: 2; flex-shrink: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
#title { #title {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text2); color: var(--text2);
} }
#summary-text { #summary-text {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: var(--text3); color: var(--text3);
} }
</style> </style>

32
src/routes/zhen/+page.svelte
View File

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte"; import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax"; import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte" import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte"
import AboutMe from "./Comps/AboutMe.svelte" import AboutMe from "./Comps/AboutMe.svelte"
</script> </script>
<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}> <Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
<TopAnimatedBackground/> <TopAnimatedBackground/>
<ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);"> <ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
<AboutMe/> <AboutMe/>
</ParallaxLayer> </ParallaxLayer>
<ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);"> <ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);">
<ZhenInformatikTimeline/> <ZhenInformatikTimeline/>
</ParallaxLayer> </ParallaxLayer>
</Parallax> </Parallax>

34
src/routes/zhen/Comps/AboutMe.svelte
View File

@ -1,18 +1,18 @@
<div class="public-cv-container"> <div class="public-cv-container">
<h1 class="bottom-dotted-line">Public CVs</h1> <h1 class="bottom-dotted-line">Public CVs</h1>
<div style="padding-left: 0.5vw; margin-top: -1vh;"> <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> <b>Rev1: </b><a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">Rev1.pdf</a>
</div> </div>
</div> </div>
<style> <style>
.public-cv-container { .public-cv-container {
padding-left: 10vw; padding-left: 10vw;
padding-top: 5vh; padding-top: 5vh;
width: 79vw; width: 79vw;
} }
.bottom-dotted-line { .bottom-dotted-line {
border-bottom: 4px dotted rgb(178, 178, 178); border-bottom: 4px dotted rgb(178, 178, 178);
} }
</style> </style>

458
src/routes/zhen/Comps/TopAnimatedBackground.svelte
View File

@ -1,229 +1,229 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { Vector2 } from "./../Utils/Vector2"; import { Vector2 } from "./../Utils/Vector2";
import TopNameTextPlate from "./TopNameTextPlate.svelte"; import TopNameTextPlate from "./TopNameTextPlate.svelte";
//import { throttle } from "./../Utils/Throttle"; //import { throttle } from "./../Utils/Throttle";
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax"; import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
// Params // Params
let mouseMoveScale: number = 0.25; let mouseMoveScale: number = 0.25;
let targetTextLenght: number = 100; let targetTextLenght: number = 100;
// Site variables // Site variables
let mousePos: Vector2; let mousePos: Vector2;
// Element binded variables // Element binded variables
let mouseRelativeScaled: Vector2 = new Vector2(0, 0); let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
let windowWidth = 0; let windowWidth = 0;
let windowHeight = 0; let windowHeight = 0;
let screenCenter: Vector2; let screenCenter: Vector2;
let StartPageAnimated: Element | null; let StartPageAnimated: Element | null;
let windowRef: Window; let windowRef: Window;
function onMouseMoved(event: MouseEvent) { function onMouseMoved(event: MouseEvent) {
mousePos = new Vector2(event.clientX, event.clientY); mousePos = new Vector2(event.clientX, event.clientY);
updateAnimation(mousePos); updateAnimation(mousePos);
} }
function updateAnimation(mousePos: Vector2) { function updateAnimation(mousePos: Vector2) {
let mouseRelativePos = mousePos.Sub(screenCenter); let mouseRelativePos = mousePos.Sub(screenCenter);
mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale); mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
//console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y); //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
} }
onMount(() => { onMount(() => {
windowRef = window; windowRef = window;
const updateDimensions = () => { const updateDimensions = () => {
windowWidth = windowRef.innerWidth; windowWidth = windowRef.innerWidth;
windowHeight = windowRef.innerHeight; windowHeight = windowRef.innerHeight;
screenCenter = new Vector2(windowWidth / 2, windowHeight / 2); screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
//console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")"); //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
}; };
updateDimensions(); // On first pass updateDimensions(); // On first pass
windowRef.addEventListener("resize", updateDimensions); windowRef.addEventListener("resize", updateDimensions);
const RevertToOrigin = () => { const RevertToOrigin = () => {
if ( if (
navigator.userAgent.search(/gecko/i) > 0 && navigator.userAgent.search(/gecko/i) > 0 &&
StartPageAnimated !== null StartPageAnimated !== null
) { ) {
StartPageAnimated.classList.add("FirefoxSmoothTranition"); StartPageAnimated.classList.add("FirefoxSmoothTranition");
} }
updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2)); updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
}; };
document.documentElement.addEventListener("mouseleave", RevertToOrigin); document.documentElement.addEventListener("mouseleave", RevertToOrigin);
const RemoveFirefoxSmoothTranition = () => { const RemoveFirefoxSmoothTranition = () => {
if ( if (
navigator.userAgent.search(/gecko/i) > 0 && navigator.userAgent.search(/gecko/i) > 0 &&
StartPageAnimated !== null StartPageAnimated !== null
) { ) {
StartPageAnimated.classList.remove("FirefoxSmoothTranition"); StartPageAnimated.classList.remove("FirefoxSmoothTranition");
} }
}; };
document.documentElement.addEventListener( document.documentElement.addEventListener(
"mouseenter", "mouseenter",
RemoveFirefoxSmoothTranition, RemoveFirefoxSmoothTranition,
); );
return () => { return () => {
windowRef.removeEventListener("resize", updateDimensions); windowRef.removeEventListener("resize", updateDimensions);
}; };
}); });
const programmingLanguages: string[] = [ const programmingLanguages: string[] = [
"C++", "C++",
"C#", "C#",
"ARDUINO", "ARDUINO",
"PYTHON", "PYTHON",
"JAVA", "JAVA",
"JAVASCRIPT", "JAVASCRIPT",
"TYPESCRIPT", "TYPESCRIPT",
"HTML", "HTML",
"CSS", "CSS",
]; ];
function getRandomInt(max: number) { function getRandomInt(max: number) {
return Math.floor(Math.random() * max); return Math.floor(Math.random() * max);
} }
function GrabRandomString() { function GrabRandomString() {
let outString: string = ""; let outString: string = "";
while (outString.length < targetTextLenght) { while (outString.length < targetTextLenght) {
outString += outString +=
programmingLanguages[ programmingLanguages[
getRandomInt(programmingLanguages.length) getRandomInt(programmingLanguages.length)
] + " "; ] + " ";
} }
return outString; // At about target size return outString; // At about target size
} }
</script> </script>
<svelte:window on:mousemove={onMouseMoved} /> <svelte:window on:mousemove={onMouseMoved} />
<ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}> <ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
<div <div
class="StartPageAnimated" class="StartPageAnimated"
bind:this={StartPageAnimated} bind:this={StartPageAnimated}
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);" style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
> >
{#each { length: 100 } as _, i} {#each { length: 100 } as _, i}
<span class="rotate45 SkillsText"> <span class="rotate45 SkillsText">
{GrabRandomString()} {GrabRandomString()}
</span> </span>
{/each} {/each}
</div> </div>
</ParallaxLayer> </ParallaxLayer>
<ParallaxLayer rate={0} offset={0.25} span={0}> <ParallaxLayer rate={0} offset={0.25} span={0}>
<TopNameTextPlate /> <TopNameTextPlate />
</ParallaxLayer> </ParallaxLayer>
<!-- <div class="StartPageContainer"> <!-- <div class="StartPageContainer">
<div class="TopOverlay"> <div class="TopOverlay">
<TopNameTextPlate/> <TopNameTextPlate/>
</div> </div>
<div <div
class="StartPageAnimated" class="StartPageAnimated"
id="StartPageAnimated" id="StartPageAnimated"
bind:this={StartPageAnimated} bind:this={StartPageAnimated}
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);" style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
> >
{#each {length: 100} as _, i} {#each {length: 100} as _, i}
<span <span
class="rotate45 SkillsText" class="rotate45 SkillsText"
> >
{GrabRandomString()} {GrabRandomString()}
</span </span
> >
{/each} {/each}
</div> </div>
</div> --> </div> -->
<div id="DummyDiv" class="FirefoxSmoothTranition StartPageContainer TopOverlay" style="display: none !important;" /> <div id="DummyDiv" class="FirefoxSmoothTranition StartPageContainer TopOverlay" style="display: none !important;" />
<style> <style>
.StartPageContainer { .StartPageContainer {
/* height: 40vh; */ /* height: 40vh; */
background-color: burlywood; background-color: burlywood;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
padding: 0; padding: 0;
} }
.StartPageAnimated { .StartPageAnimated {
/* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */ /* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
background-color: #131313; background-color: #131313;
position: absolute; position: absolute;
height: 150vh; height: 150vh;
width: 150vw; width: 150vw;
padding: 0; padding: 0;
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99); transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
-moz-transition: none; -moz-transition: none;
left: -25vw; left: -25vw;
top: -50vh; top: -50vh;
justify-content: center; justify-content: center;
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
pointer-events: none; pointer-events: none;
} }
.FirefoxSmoothTranition { .FirefoxSmoothTranition {
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99); transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
-moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important; -moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
} }
.SkillsText { .SkillsText {
font-family: "CozetteVector"; font-family: "CozetteVector";
text-align: start; text-align: start;
font-size: x-large; font-size: x-large;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
width: 2rem; width: 2rem;
color: rgb(66, 66, 66); color: rgb(66, 66, 66);
} }
.TopOverlay { .TopOverlay {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
.rotate45 { .rotate45 {
transform: rotate(-45deg); /* Rotate the element by 45 degrees */ transform: rotate(-45deg); /* Rotate the element by 45 degrees */
} }
</style> </style>

112
src/routes/zhen/Comps/TopNameTextPlate.svelte
View File

@ -1,57 +1,57 @@
<script lang="ts"> <script lang="ts">
import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte' import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
</script> </script>
<div class="container"> <div class="container">
<div style="flex-grow: 1;" /> <div style="flex-grow: 1;" />
<div class="TextContainer"> <div class="TextContainer">
<span class="NamePlateText" > <span class="NamePlateText" >
Zhentao Wei Zhentao Wei
<br/> <br/>
<p class="NickNameText">Alex</p> <p class="NickNameText">Alex</p>
</span> </span>
</div> </div>
<div style="flex-grow: 2;" /> <div style="flex-grow: 2;" />
</div> </div>
<style> <style>
.container{ .container{
width: 100%; width: 100%;
height: 100%; height: 100%;
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
} }
.TextContainer{ .TextContainer{
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
/* background-color: aliceblue; */ /* background-color: aliceblue; */
background-color: rgba(45, 45, 45, 0.645); background-color: rgba(45, 45, 45, 0.645);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 20px; border-radius: 20px;
backdrop-filter: blur(1px); backdrop-filter: blur(1px);
} }
.NamePlateText{ .NamePlateText{
/* font-family: 'CozetteVector'; */ /* font-family: 'CozetteVector'; */
text-align: left; text-align: left;
font-size: 300%; font-size: 300%;
color: rgb(225, 225, 225); color: rgb(225, 225, 225);
border-left: 0.5rem solid rgb(88, 198, 82); border-left: 0.5rem solid rgb(88, 198, 82);
padding-left: 1rem; padding-left: 1rem;
} }
.NickNameText{ .NickNameText{
font-size: 75%; font-size: 75%;
margin: 0; margin: 0;
margin-top: -1rem; margin-top: -1rem;
color: rgb(99, 99, 99); color: rgb(99, 99, 99);
} }
</style> </style>

132
src/routes/zhen/Comps/ZhenInformatikTimeline.svelte
View File

@ -1,67 +1,67 @@
<script lang="ts"> <script lang="ts">
import Timeline from "../../../comps/timeline/timeline.svelte"; import Timeline from "../../../comps/timeline/timeline.svelte";
import TimelineItem from "../../../comps/timeline/timelineItem.svelte"; import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
</script> </script>
<Timeline style="padding: 2rem; padding-left: 3vw; padding-bottom: 5rem;"> <Timeline style="padding: 2rem; padding-left: 3vw; padding-bottom: 5rem;">
<TimelineItem <TimelineItem
date="3.G 10/3-20234" date="3.G 10/3-20234"
title="Prolog Apple device recommendation" 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>' 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" imagePath="/portfolios/sveske/prolog/thumb.png"
/> />
<TimelineItem <TimelineItem
date="3.G 3/12-2023" date="3.G 3/12-2023"
title="Extraordinær menneskelig sans" 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>' 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" imagePath="/portfolios/sveske/hmi/thumb.png"
/> />
<TimelineItem <TimelineItem
date="2.G 16/6-2023" date="2.G 16/6-2023"
title="Otakians" 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>' 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" imagePath="/images/Zhen/Infomatik/Otakians.png"
/> />
<TimelineItem <TimelineItem
date="2.G 10/3-2023" date="2.G 10/3-2023"
title="Makey Makey: pressure plate" 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>" 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" imagePath="/images/Zhen/Infomatik/PressurePlate.png"
/> />
<TimelineItem <TimelineItem
date="2.G 11/9-2022" date="2.G 11/9-2022"
title="Visit copenhagen" 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>" 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" imagePath="/images/Zhen/Infomatik/VisitCopenhagen.png"
/> />
<TimelineItem <TimelineItem
date="2.G 2022" date="2.G 2022"
title="Uncle roger's recipies" 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>" 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" imagePath="/images/Zhen/Infomatik/UncleRogers.png"
/> />
<TimelineItem <TimelineItem
date="2.G 2022" date="2.G 2022"
title="Game rankings website" 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>" 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" imagePath="/images/Zhen/Infomatik/FirstWebsite.png"
/> />
<TimelineItem <TimelineItem
date="1.G 2022" date="1.G 2022"
title="Quest for grass" 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>" 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" imagePath="/images/Zhen/Infomatik/QuestForGrass.png"
/> />
<TimelineItem <TimelineItem
date="1.G 2022" 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>" 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" title="App lab verdensmål"
imagePath="/images/Zhen/Infomatik/1.G-App.png" imagePath="/images/Zhen/Infomatik/1.G-App.png"
/> />
<TimelineItem <TimelineItem
date="1.G 2021" 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>' 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" title="Machine learning: gesture recognition"
imagePath="/portfolios/sveske/teachable_machine/thumb.png" imagePath="/portfolios/sveske/teachable_machine/thumb.png"
/> />
</Timeline> </Timeline>

40
src/routes/zhen/Utils/Throttle.js
View File

@ -1,21 +1,21 @@
export function throttle(callback, wait) { export function throttle(callback, wait) {
let timeoutId = null; let timeoutId = null;
let lastExecutedTime = 0; let lastExecutedTime = 0;
return function (...args) { return function (...args) {
const currentTime = Date.now(); const currentTime = Date.now();
const execute = () => { const execute = () => {
lastExecutedTime = currentTime; lastExecutedTime = currentTime;
callback.apply(this, args); callback.apply(this, args);
}; };
if (currentTime - lastExecutedTime >= wait) { if (currentTime - lastExecutedTime >= wait) {
execute(); execute();
} else { } else {
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime)); timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
} }
}; };
} }

42
src/routes/zhen/Utils/Vector2.ts
View File

@ -1,21 +1,21 @@
export class Vector2 { export class Vector2 {
x: number; x: number;
y: number; y: number;
constructor(x: number, y: number) { constructor(x: number, y: number) {
this.x = x; this.x = x;
this.y = y; this.y = y;
} }
Add(vec2: Vector2){ Add(vec2: Vector2){
return new Vector2(this.x + vec2.x, this.y + vec2.y); return new Vector2(this.x + vec2.x, this.y + vec2.y);
} }
Sub(vec2: Vector2){ Sub(vec2: Vector2){
return new Vector2(this.x - vec2.x, this.y - vec2.y); return new Vector2(this.x - vec2.x, this.y - vec2.y);
} }
Scale(mult: number){ Scale(mult: number){
return new Vector2(this.x * mult, this.y * mult);; return new Vector2(this.x * mult, this.y * mult);;
} }
} }

38
src/routes/zhen/cv/Comps/AlexWatermark.svelte
View File

@ -1,19 +1,19 @@
<div class="container"> <div class="container">
ALEX ALEX
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
position: absolute; position: absolute;
display: grid; display: grid;
justify-self: end; justify-self: end;
vertical-align: bottom; vertical-align: bottom;
align-self: flex-end; align-self: flex-end;
// font settings // font settings
font-size: 80mm; font-size: 80mm;
color: #e4e4e4; color: #e4e4e4;
transform: translate(32%, -32%) rotate(-90deg); transform: translate(32%, -32%) rotate(-90deg);
} }
</style> </style>

92
src/routes/zhen/cv/Comps/BottomRightDecor.svelte
View File

@ -1,47 +1,47 @@
<div class="container"> <div class="container">
<div/> <div/>
<div> <div>
<div> <div>
Thank you! ❤ Thank you! ❤
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
position: absolute; position: absolute;
transform: translate(40.2mm, 5mm) rotate(-45deg); transform: translate(40.2mm, 5mm) rotate(-45deg);
display: grid; display: grid;
justify-self: end; justify-self: end;
vertical-align: bottom; vertical-align: bottom;
align-self: flex-end; align-self: flex-end;
z-index: 0; z-index: 0;
> div:nth-child(1) { > div:nth-child(1) {
padding-top: 5mm; padding-top: 5mm;
//border-bottom: #4472c4 dashed 2mm; //border-bottom: #4472c4 dashed 2mm;
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%); background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
background-position: top; background-position: top;
background-size: 6mm 1.5mm; background-size: 6mm 1.5mm;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
> div:nth-child(2) { > div:nth-child(2) {
background-color: #2f5496; background-color: #2f5496;
width: 100mm; width: 100mm;
height: 25mm; height: 25mm;
// Text // Text
display: grid; display: grid;
place-content: center; place-content: center;
align-content: flex-start; align-content: flex-start;
> div { > div {
padding-top: 3.5mm; padding-top: 3.5mm;
color: #4a7bcf; color: #4a7bcf;
font-weight: bold; font-weight: bold;
} }
} }
} }
</style> </style>

12
src/routes/zhen/cv/Comps/CombinedContacts.svelte
View File

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

150
src/routes/zhen/cv/Comps/Contact.svelte
View File

@ -1,76 +1,76 @@
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Contact Contact
</b> </b>
</div> </div>
<div class="table-display"> <div class="table-display">
<div class="table-item"> <div class="table-item">
<div>Email</div> <div>Email</div>
<div>Zhen@deprived.dev</div> <div>Zhen@deprived.dev</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>Phone</div> <div>Phone</div>
<div>+45 42535723</div> <div>+45 42535723</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>LinkedIn</div> <div>LinkedIn</div>
<a href="https://www.linkedin.com/in/zhentao-wei-3a3a0a182/">Zhentao-Wei</a> <a href="https://www.linkedin.com/in/zhentao-wei-3a3a0a182/">Zhentao-Wei</a>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 70%; width: 70%;
} }
.container > div:first-child { .container > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid black; border-bottom: 1mm solid black;
} }
.table-display { .table-display {
width: 100%; width: 100%;
} }
.table-item { .table-item {
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
border-bottom: 0.25mm solid #000000; border-bottom: 0.25mm solid #000000;
> a { > a {
text-decoration: underline; text-decoration: underline;
} }
> div, > a { > div, > a {
color: #000000; color: #000000;
&:first-child { &:first-child {
width: 35%; width: 35%;
font-size: 4mm; font-size: 4mm;
display: grid; display: grid;
place-content: center start; place-content: center start;
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm; border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
} }
&:nth-child(2) { &:nth-child(2) {
width: 65%; width: 65%;
font-size: 3.25mm; font-size: 3.25mm;
display: grid; display: grid;
place-content: center; place-content: center;
padding-left: 1mm; padding-left: 1mm;
} }
} }
} }
</style> </style>

182
src/routes/zhen/cv/Comps/Education.svelte
View File

@ -1,92 +1,92 @@
<script> <script>
import placeholder from "$lib/zhen/cv-comps/400x400.png" import placeholder from "$lib/zhen/cv-comps/400x400.png"
import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png" import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png"
import SasLogo from "$lib/zhen/cv-comps/SASLogo.png" import SasLogo from "$lib/zhen/cv-comps/SASLogo.png"
import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png" import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png"
</script> </script>
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Education Education
</b> </b>
</div> </div>
<div class="table"> <div class="table">
<div class="table-item"> <div class="table-item">
<img src={NextLogo} alt="NextKBH logo" width="15%"/> <img src={NextLogo} alt="NextKBH logo" width="15%"/>
<div> <div>
<span> <span>
<b>Gymnasium/Collage - HTX</b><br> <b>Gymnasium/Collage - HTX</b><br>
NEXT-Mediegymnasiet: Computer science<br> NEXT-Mediegymnasiet: Computer science<br>
<i>May 2021 - Now</i> <i>May 2021 - Now</i>
</span> </span>
</div> </div>
</div> </div>
<div class="table-item"> <div class="table-item">
<img src={SasLogo} alt="SAS logo" width="15%"/> <img src={SasLogo} alt="SAS logo" width="15%"/>
<div> <div>
<span> <span>
<b>SAS Master class</b><br> <b>SAS Master class</b><br>
4-week project about SAS: OnDemand and SAS: Viya <br> 4-week project about SAS: OnDemand and SAS: Viya <br>
<i>Dec 2023 - Dec 2023</i> <i>Dec 2023 - Dec 2023</i>
</span> </span>
</div> </div>
</div> </div>
<div class="table-item"> <div class="table-item">
<img src={EmphasysLogo} alt="Emphasys center logo" width="15%"/> <img src={EmphasysLogo} alt="Emphasys center logo" width="15%"/>
<div> <div>
<span> <span>
<b>Emphasys Centre - Erasmus+</b><br> <b>Emphasys Centre - Erasmus+</b><br>
2 weeks of Unity VR <br> 2 weeks of Unity VR <br>
<i>Oct 2023 - Oct 2023</i> <i>Oct 2023 - Oct 2023</i>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 90%; width: 90%;
overflow: hidden; overflow: hidden;
& > div:first-child { & > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid black; border-bottom: 1mm solid black;
&:first-child { &:first-child {
font-size: x-large; font-size: x-large;
} }
} }
} }
.table-item { .table-item {
padding: 2mm; padding: 2mm;
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 0.25mm solid #000000; border-bottom: 0.25mm solid #000000;
} }
& > div { & > div {
padding-left: 3mm; padding-left: 3mm;
text-align: start; text-align: start;
font-size: 4mm; font-size: 4mm;
} }
& > img { & > img {
border-radius: 2.5mm; border-radius: 2.5mm;
filter: drop-shadow(1mm 1mm 1mm #0000009d); filter: drop-shadow(1mm 1mm 1mm #0000009d);
} }
} }
</style> </style>

182
src/routes/zhen/cv/Comps/Experience.svelte
View File

@ -1,92 +1,92 @@
<script> <script>
import placeholder from "$lib/zhen/cv-comps/400x400.png" import placeholder from "$lib/zhen/cv-comps/400x400.png"
import MakerspaceLogo from "$lib/zhen/cv-comps/MakerspaceLogo.png" import MakerspaceLogo from "$lib/zhen/cv-comps/MakerspaceLogo.png"
import EposLogo from "$lib/zhen/cv-comps/EposLogo.png" import EposLogo from "$lib/zhen/cv-comps/EposLogo.png"
import KhoraLogo from "$lib/zhen/cv-comps/KhoraLogo.jpg" import KhoraLogo from "$lib/zhen/cv-comps/KhoraLogo.jpg"
</script> </script>
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Experience Experience
</b> </b>
</div> </div>
<div class="table"> <div class="table">
<div class="table-item"> <div class="table-item">
<img src={MakerspaceLogo} alt="NextKBH logo" width="15%"/> <img src={MakerspaceLogo} alt="NextKBH logo" width="15%"/>
<div> <div>
<span> <span>
<b>3D printer manager</b> - Volunteer<br> <b>3D printer manager</b> - Volunteer<br>
Makerspace - kildevæld Kulturcenter<br> Makerspace - kildevæld Kulturcenter<br>
<i>Nov 2023 - Now</i> <i>Nov 2023 - Now</i>
</span> </span>
</div> </div>
</div> </div>
<div class="table-item"> <div class="table-item">
<img src={EposLogo} alt="SAS logo" width="15%"/> <img src={EposLogo} alt="SAS logo" width="15%"/>
<div> <div>
<span> <span>
<b>Machine Learning Engineer</b> - Short term intern<br> <b>Machine Learning Engineer</b> - Short term intern<br>
Product design department - Epos<br> Product design department - Epos<br>
<i>Apr 2024 - Apr 2024</i> <i>Apr 2024 - Apr 2024</i>
</span> </span>
</div> </div>
</div> </div>
<div class="table-item"> <div class="table-item">
<img src={KhoraLogo} alt="Emphasys center logo" width="15%"/> <img src={KhoraLogo} alt="Emphasys center logo" width="15%"/>
<div> <div>
<span> <span>
<b>Assistant</b> - Short term intern<br> <b>Assistant</b> - Short term intern<br>
Khora Virtual Reality<br> Khora Virtual Reality<br>
<i>Oct 2020 - Oct 2020</i> <i>Oct 2020 - Oct 2020</i>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 90%; width: 90%;
overflow: hidden; overflow: hidden;
& > div:first-child { & > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid black; border-bottom: 1mm solid black;
&:first-child { &:first-child {
font-size: x-large; font-size: x-large;
} }
} }
} }
.table-item { .table-item {
padding: 2mm; padding: 2mm;
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 0.25mm solid #000000; border-bottom: 0.25mm solid #000000;
} }
& > div { & > div {
padding-left: 3mm; padding-left: 3mm;
text-align: start; text-align: start;
font-size: 4mm; font-size: 4mm;
} }
& > img { & > img {
border-radius: 2.5mm; border-radius: 2.5mm;
filter: drop-shadow(1mm 1mm 1mm #0000009d); filter: drop-shadow(1mm 1mm 1mm #0000009d);
} }
} }
</style> </style>

98
src/routes/zhen/cv/Comps/LeftTopDecor.svelte
View File

@ -1,50 +1,50 @@
<script> <script>
import RepeatedSkills from "./RepeatedSkills.svelte"; import RepeatedSkills from "./RepeatedSkills.svelte";
</script> </script>
<div class="container"> <div class="container">
<div> <div>
<RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/> <RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/>
</div> </div>
<div/> <div/>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
position: absolute; position: absolute;
transform: translate(-31.9mm, 0mm) rotate(-45deg); transform: translate(-31.9mm, 0mm) rotate(-45deg);
display: grid; display: grid;
justify-self: start; justify-self: start;
vertical-align: top; vertical-align: top;
align-self: flex-start; align-self: flex-start;
z-index: 0; z-index: 0;
> div:nth-child(1) { > div:nth-child(1) {
//background-color: #2f559622; //background-color: #2f559622;
width: 100mm; width: 100mm;
height: 17.5mm; height: 17.5mm;
// Text inside // Text inside
display: grid; display: grid;
place-content: center; place-content: center;
border: #4472c4 dotted 1mm; border: #4472c4 dotted 1mm;
&:first-child { &:first-child {
color: #4472c4; color: #4472c4;
font-size: 3mm; font-size: 3mm;
//font-weight: bold; //font-weight: bold;
} }
} }
> div:nth-child(2) { > div:nth-child(2) {
padding-top: 5mm; padding-top: 5mm;
//border-bottom: #4472c4 dashed 2mm; //border-bottom: #4472c4 dashed 2mm;
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%); background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
background-position: bottom; background-position: bottom;
background-size: 6mm 1.5mm; background-size: 6mm 1.5mm;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
} }
</style> </style>

100
src/routes/zhen/cv/Comps/LinkToSource.svelte
View File

@ -1,51 +1,51 @@
<script> <script>
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg" import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
</script> </script>
<div class="container"> <div class="container">
<div> <div>
This CV was made using <a href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a> This CV was made using <a href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a>
</div> </div>
<div> <div>
Sources: Sources:
<a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website">Gitea</a> <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website">Gitea</a>
and and
<a href="https://dev.deprived.dev/zhen/cv/rev1?hideOnPrint=1">My Website</a> <a href="https://dev.deprived.dev/zhen/cv/rev1?hideOnPrint=1">My Website</a>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
z-index: 1; z-index: 1;
padding-left: 2mm; padding-left: 2mm;
//white-space: nowrap; //white-space: nowrap;
color: #777777; color: #777777;
* a { * a {
color: #3d6ddc; color: #3d6ddc;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
text-decoration: underline; text-decoration: underline;
} }
div:first-child { div:first-child {
display: flex; display: flex;
place-content: center; place-content: center;
justify-content: start; justify-content: start;
a:nth-child(1) > img { a:nth-child(1) > img {
width: 5mm; width: 5mm;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
} }
} }
div:nth-child(2){ div:nth-child(2){
padding-bottom: 2mm; padding-bottom: 2mm;
} }
} }
</style> </style>

46
src/routes/zhen/cv/Comps/LinkedInQR.svelte
View File

@ -1,24 +1,24 @@
<script> <script>
import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw" import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
</script> </script>
<div class="container"> <div class="container">
<div>LinkedIn</div> <div>LinkedIn</div>
<span class="qrcode">{@html QRCode}</span> <span class="qrcode">{@html QRCode}</span>
</div> </div>
<style lang="scss"> <style lang="scss">
.qrcode { .qrcode {
transform: scale(0.9); transform: scale(0.9);
} }
.container { .container {
display: grid; display: grid;
place-items: center; place-items: center;
& * { & * {
font-size: 7.5mm; font-size: 7.5mm;
} }
} }
</style> </style>

48
src/routes/zhen/cv/Comps/NameAndImage.svelte
View File

@ -1,25 +1,25 @@
<script lang="ts"> <script lang="ts">
import NamePlate from "./NamePlate.svelte"; import NamePlate from "./NamePlate.svelte";
import selfie from "$lib/zhen/cv-comps/zhenSelfie.jpg" import selfie from "$lib/zhen/cv-comps/zhenSelfie.jpg"
</script> </script>
<div class="nameAndImageContainer"> <div class="nameAndImageContainer">
<NamePlate/> <NamePlate/>
<img src={selfie} class="selfie-constraints" alt="Zhentao Wei"/> <img src={selfie} class="selfie-constraints" alt="Zhentao Wei"/>
</div> </div>
<style> <style>
.nameAndImageContainer { .nameAndImageContainer {
display: grid; display: grid;
place-items: center; place-items: center;
} }
.selfie-constraints{ .selfie-constraints{
padding-top: 2.5mm; padding-top: 2.5mm;
max-width: 65%; max-width: 65%;
border-radius: 5mm; border-radius: 5mm;
filter: drop-shadow(1mm 1mm 1mm #0000009d); filter: drop-shadow(1mm 1mm 1mm #0000009d);
} }
</style> </style>

40
src/routes/zhen/cv/Comps/NamePlate.svelte
View File

@ -1,21 +1,21 @@
<div class="name-plate-container"> <div class="name-plate-container">
<span style="text-align: center;"> <span style="text-align: center;">
<b> <b>
Zhentao Wei Zhentao Wei
</b><br/> </b><br/>
(He/Him) (He/Him)
</span> </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 black; border-bottom: 1mm solid black;
} }
</style> </style>

140
src/routes/zhen/cv/Comps/OtherContact.svelte
View File

@ -1,71 +1,71 @@
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Other Other
</b> </b>
</div> </div>
<div class="table-display"> <div class="table-display">
<div class="table-item"> <div class="table-item">
<div>Itch.io</div> <div>Itch.io</div>
<a href="https://github.com/MagicBOTAlex">botalex.itch.io</a> <a href="https://github.com/MagicBOTAlex">botalex.itch.io</a>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>Github</div> <div>Github</div>
<a href="https://botalex.itch.io/">@MagicBOTAlex</a> <a href="https://botalex.itch.io/">@MagicBOTAlex</a>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 70%; width: 70%;
} }
.container > div:first-child { .container > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid black; border-bottom: 1mm solid black;
} }
.table-display { .table-display {
width: 100%; width: 100%;
} }
.table-item { .table-item {
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
border-bottom: 0.25mm solid #000000; border-bottom: 0.25mm solid #000000;
> a { > a {
text-decoration: underline; text-decoration: underline;
} }
> div, > a { > div, > a {
color: #000000; color: #000000;
&:first-child { &:first-child {
width: 35%; width: 35%;
font-size: 4mm; font-size: 4mm;
display: grid; display: grid;
place-content: center start; place-content: center start;
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm; border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
} }
&:nth-child(2) { &:nth-child(2) {
width: 65%; width: 65%;
font-size: 3.25mm; font-size: 3.25mm;
display: grid; display: grid;
place-content: center; place-content: center;
padding-left: 1mm; padding-left: 1mm;
} }
} }
} }
</style> </style>

60
src/routes/zhen/cv/Comps/Profile.svelte
View File

@ -1,31 +1,31 @@
<div class="short-profile-container"> <div class="short-profile-container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
About me About me
</b> </b>
</div> </div>
<div> <div>
As a 19-year-old with a deep passion for programming and As a 19-year-old with a deep passion for programming and
technology, I am highly dedicated to everything within this field. technology, I am highly dedicated to everything within this field.
Most of my knowledge is self-taught from many places on the Most of my knowledge is self-taught from many places on the
internet. I encourage you to browse my LinkedIn, since I internet. I encourage you to browse my LinkedIn, since I
periodically post my hobby projects on there, and my skills are periodically post my hobby projects on there, and my skills are
described further in depth. described further in depth.
</div> </div>
</div> </div>
<style> <style>
.short-profile-container{ .short-profile-container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 90%; width: 90%;
} }
.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 black; border-bottom: 1mm solid black;
} }
</style> </style>

122
src/routes/zhen/cv/Comps/RepeatedSkills.svelte
View File

@ -1,62 +1,62 @@
<script lang="ts"> <script lang="ts">
// Width of num chars and height nom of chars // Width of num chars and height nom of chars
export let targetTextWidth: number; export let targetTextWidth: number;
export let targetTextHeight: number; export let targetTextHeight: number;
export let applyRotation: boolean = true; export let applyRotation: boolean = true;
export let textOverride: string[] | undefined = undefined; export let textOverride: string[] | undefined = undefined;
// Assign default value if textOverride is undefined // Assign default value if textOverride is undefined
let repeatingText : string[] = textOverride ?? [ let repeatingText : string[] = textOverride ?? [
"C++", "C++",
"C#", "C#",
"ARDUINO", "ARDUINO",
"PYTHON", "PYTHON",
"JAVA", "JAVA",
"JAVASCRIPT", "JAVASCRIPT",
"TYPESCRIPT", "TYPESCRIPT",
"HTML", "HTML",
"CSS", "CSS",
]; ];
function getRandomInt(max: number) { function getRandomInt(max: number) {
return Math.floor(Math.random() * max); return Math.floor(Math.random() * max);
} }
function GrabRandomString() { function GrabRandomString() {
let outString: string = ""; let outString: string = "";
while (outString.length < targetTextWidth) { while (outString.length < targetTextWidth) {
outString += outString +=
repeatingText[ repeatingText[
getRandomInt(repeatingText.length) getRandomInt(repeatingText.length)
] + " "; ] + " ";
} }
return outString; // At about target size return outString; // At about target size
} }
</script> </script>
<div {...$$restProps}> <div {...$$restProps}>
{#each { length: targetTextHeight } as _, i} {#each { length: targetTextHeight } as _, i}
<span class="{applyRotation ? "rotate45" : ""} SkillsText"> <span class="{applyRotation ? "rotate45" : ""} SkillsText">
{GrabRandomString()} {GrabRandomString()}
</span> </span>
{/each} {/each}
</div> </div>
<style> <style>
.SkillsText { .SkillsText {
text-align: start; text-align: start;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
width: 2rem; width: 2rem;
} }
.rotate45 { .rotate45 {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
</style> </style>

56
src/routes/zhen/cv/Comps/ShortProfile.svelte
View File

@ -1,29 +1,29 @@
<div class="short-profile-container"> <div class="short-profile-container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Short profile Short profile
</b> </b>
</div> </div>
<div> <div>
Student at NEXT-Copenhagen Student at NEXT-Copenhagen
Mediagymnasium and Mediagymnasium and
volunteer at Kildevæld volunteer at Kildevæld
Makerspace. Makerspace.
</div> </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 black; border-bottom: 1mm solid black;
} }
</style> </style>

46
src/routes/zhen/cv/CompsRev2/AlexWatermark.svelte
View File

@ -1,23 +1,23 @@
<script> <script>
export let Style = ""; export let Style = "";
</script> </script>
<div class="container" style="{Style}"> <div class="container" style="{Style}">
ALEX ALEX
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
position: absolute; position: absolute;
display: grid; display: grid;
justify-self: end; justify-self: end;
vertical-align: bottom; vertical-align: bottom;
align-self: flex-end; align-self: flex-end;
// font settings // font settings
font-size: 80mm; font-size: 80mm;
color: #e4e4e4; color: #e4e4e4;
transform: translate(32%, -32%) rotate(-90deg); transform: translate(32%, -32%) rotate(-90deg);
} }
</style> </style>

52
src/routes/zhen/cv/CompsRev2/BiggestFlex.svelte
View File

@ -1,27 +1,27 @@
<div class="short-profile-container"> <div class="short-profile-container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Biggest flex Biggest flex
</b> </b>
</div> </div>
<div> <div>
Me and my small group of devs has won each and every gamejam, which we have participated in. <br/> 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> <h1 style="font-size: 0.75rem; color: grey;">*Gamejams that had competitions.</h1>
</div> </div>
</div> </div>
<style> <style>
.short-profile-container{ .short-profile-container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 90%; width: 90%;
} }
.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 black; border-bottom: 1mm solid black;
} }
</style> </style>

100
src/routes/zhen/cv/CompsRev2/BottomRightDecor.svelte
View File

@ -1,51 +1,51 @@
<script> <script>
export let Style = ""; export let Style = "";
</script> </script>
<div class="container" style="{Style}"> <div class="container" style="{Style}">
<div/> <div/>
<div> <div>
<div> <div>
Thank you! ❤ Thank you! ❤
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
position: absolute; position: absolute;
transform: translate(40.2mm, 5mm) rotate(-45deg); transform: translate(40.2mm, 5mm) rotate(-45deg);
display: grid; display: grid;
justify-self: end; justify-self: end;
vertical-align: bottom; vertical-align: bottom;
align-self: flex-end; align-self: flex-end;
z-index: 0; z-index: 0;
> div:nth-child(1) { > div:nth-child(1) {
padding-top: 5mm; padding-top: 5mm;
//border-bottom: #4472c4 dashed 2mm; //border-bottom: #4472c4 dashed 2mm;
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%); background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
background-position: top; background-position: top;
background-size: 6mm 1.5mm; background-size: 6mm 1.5mm;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
> div:nth-child(2) { > div:nth-child(2) {
background-color: #2f5496; background-color: #2f5496;
width: 100mm; width: 100mm;
height: 25mm; height: 25mm;
// Text // Text
display: grid; display: grid;
place-content: center; place-content: center;
align-content: flex-start; align-content: flex-start;
> div { > div {
padding-top: 3.5mm; padding-top: 3.5mm;
color: #4a7bcf; color: #4a7bcf;
font-weight: bold; font-weight: bold;
} }
} }
} }
</style> </style>

12
src/routes/zhen/cv/CompsRev2/CombinedContacts.svelte
View File

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

150
src/routes/zhen/cv/CompsRev2/Contact.svelte
View File

@ -1,76 +1,76 @@
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Contact Contact
</b> </b>
</div> </div>
<div class="table-display"> <div class="table-display">
<div class="table-item"> <div class="table-item">
<div>Email</div> <div>Email</div>
<div>Zhen@deprived.dev</div> <div>Zhen@deprived.dev</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>Phone</div> <div>Phone</div>
<div>+45 42535723</div> <div>+45 42535723</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>LinkedIn</div> <div>LinkedIn</div>
<a href="https://www.linkedin.com/in/zhentao-wei-3a3a0a182/">Zhentao-Wei</a> <a href="https://www.linkedin.com/in/zhentao-wei-3a3a0a182/">Zhentao-Wei</a>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 70%; width: 70%;
} }
.container > div:first-child { .container > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid black; border-bottom: 1mm solid black;
} }
.table-display { .table-display {
width: 100%; width: 100%;
} }
.table-item { .table-item {
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
border-bottom: 0.25mm solid #000000; border-bottom: 0.25mm solid #000000;
> a { > a {
text-decoration: underline; text-decoration: underline;
} }
> div, > a { > div, > a {
color: #000000; color: #000000;
&:first-child { &:first-child {
width: 35%; width: 35%;
font-size: 4mm; font-size: 4mm;
display: grid; display: grid;
place-content: center start; place-content: center start;
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm; border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
} }
&:nth-child(2) { &:nth-child(2) {
width: 65%; width: 65%;
font-size: 3.25mm; font-size: 3.25mm;
display: grid; display: grid;
place-content: center; place-content: center;
padding-left: 1mm; padding-left: 1mm;
} }
} }
} }
</style> </style>

124
src/routes/zhen/cv/CompsRev2/Education.svelte
View File

@ -1,63 +1,63 @@
<script> <script>
import placeholder from "$lib/zhen/cv-comps/400x400.png" import placeholder from "$lib/zhen/cv-comps/400x400.png"
import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.png" import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.png"
import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png" import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png"
import SasLogo from "$lib/zhen/cv-comps/SASLogo.png" import SasLogo from "$lib/zhen/cv-comps/SASLogo.png"
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"
</script> </script>
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Education Education
</b> </b>
</div> </div>
<div class="imagesContainer flex justify-center p-2 gap-4" id="balls"> <div class="imagesContainer flex justify-center p-2 gap-4" id="balls">
<IconAndText2 logo={DTU_Logo}> <IconAndText2 logo={DTU_Logo}>
<b>DTU</b><br/> <b>DTU</b><br/>
<p style="font-size: 0.6rem;"> <p style="font-size: 0.6rem;">
Artificial intelligence Artificial intelligence
</p> </p>
</IconAndText2> </IconAndText2>
<IconAndText2 logo={NextLogo}> <IconAndText2 logo={NextLogo}>
<b>Next</b><br/> <b>Next</b><br/>
<p style="font-size: 0.6rem;"> <p style="font-size: 0.6rem;">
Computer science Computer science
</p> </p>
</IconAndText2> </IconAndText2>
<IconAndText2 logo={SasLogo}> <IconAndText2 logo={SasLogo}>
<b>Master class</b><br/> <b>Master class</b><br/>
<p style="font-size: 0.6rem;"> <p style="font-size: 0.6rem;">
SAS Programming SAS Programming
</p> </p>
</IconAndText2> </IconAndText2>
<IconAndText2 logo={EmphasysLogo}> <IconAndText2 logo={EmphasysLogo}>
<b>Emphasys center</b><br/> <b>Emphasys center</b><br/>
<p style="font-size: 0.6rem;"> <p style="font-size: 0.6rem;">
VR development VR development
</p> </p>
</IconAndText2> </IconAndText2>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 90%; width: 90%;
> div:first-child { > div:first-child {
border-bottom: black 1mm solid; border-bottom: black 1mm solid;
width: 100%; width: 100%;
} }
} }
.imagesContainer { .imagesContainer {
> img { > img {
border-radius: 5mm; border-radius: 5mm;
filter: drop-shadow(1mm 1mm 1mm #0000009d); filter: drop-shadow(1mm 1mm 1mm #0000009d);
} }
} }
</style> </style>

142
src/routes/zhen/cv/CompsRev2/Experience.svelte
View File

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

84
src/routes/zhen/cv/CompsRev2/IconAndText.svelte
View File

@ -1,43 +1,43 @@
<script lang="ts"> <script lang="ts">
export let logo:string; export let logo:string;
export let logoWidths: string = "10%"; export let logoWidths: string = "10%";
export let fontSize: string = "3mm"; export let fontSize: string = "3mm";
export let lineHeight: string = "3.1mm"; export let lineHeight: string = "3.1mm";
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
imageCaption = logo.split(/(\\|\/)/g).pop(); imageCaption = logo.split(/(\\|\/)/g).pop();
}); });
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
</script> </script>
<div class="container"> <div class="container">
<img src={logo} class="" alt="{imageCaption}" width="{logoWidths}"/> <img src={logo} class="" alt="{imageCaption}" width="{logoWidths}"/>
<div style="line-height: {lineHeight};"> <div style="line-height: {lineHeight};">
<span style="font-size: {fontSize};"> <span style="font-size: {fontSize};">
<slot/> <slot/>
</span> </span>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
& > div { & > div {
padding-left: 3mm; padding-left: 3mm;
text-align: start; text-align: start;
} }
& > img { & > img {
border-radius: 2.5mm; border-radius: 2.5mm;
filter: drop-shadow(1mm 1mm 1mm #0000009d); filter: drop-shadow(1mm 1mm 1mm #0000009d);
} }
} }
</style> </style>

86
src/routes/zhen/cv/CompsRev2/IconAndText2.svelte
View File

@ -1,44 +1,44 @@
<script lang="ts"> <script lang="ts">
export let logo:string; export let logo:string;
export let logoWidths: string = "35%"; export let logoWidths: string = "35%";
export let fontSize: string = "3mm"; export let fontSize: string = "3mm";
export let lineHeight: string = "3.1mm"; export let lineHeight: string = "3.1mm";
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
imageCaption = logo.split(/(\\|\/)/g).pop(); imageCaption = logo.split(/(\\|\/)/g).pop();
}); });
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
</script> </script>
<div class="container"> <div class="container">
<img src={logo} alt="{imageCaption}" width="{logoWidths}"/> <img src={logo} alt="{imageCaption}" width="{logoWidths}"/>
<div style="line-height: {lineHeight};"> <div style="line-height: {lineHeight};">
<span style="font-size: {fontSize};"> <span style="font-size: {fontSize};">
<slot/> <slot/>
</span> </span>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
width: 100%; width: 100%;
& > div { & > div {
margin-top: 2mm; margin-top: 2mm;
padding-left: 2mm; padding-left: 2mm;
padding-bottom: 1mm; padding-bottom: 1mm;
text-align: start; text-align: start;
border-left: 0.5mm solid black; border-left: 0.5mm solid black;
} }
& > img { & > img {
border-radius: 2.5mm; border-radius: 2.5mm;
filter: drop-shadow(1mm 1mm 1mm #0000009d); filter: drop-shadow(1mm 1mm 1mm #0000009d);
} }
} }
</style> </style>

104
src/routes/zhen/cv/CompsRev2/LeftTopDecor.svelte
View File

@ -1,53 +1,53 @@
<script> <script>
import RepeatedSkills from "./RepeatedSkills.svelte"; import RepeatedSkills from "./RepeatedSkills.svelte";
export let Style = ""; export let Style = "";
</script> </script>
<div class="container" style="{Style}"> <div class="container" style="{Style}">
<div> <div>
<RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/> <RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/>
</div> </div>
<div/> <div/>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
position: absolute; position: absolute;
transform: translate(-25mm, 0mm) rotate(-45deg); transform: translate(-25mm, 0mm) rotate(-45deg);
display: grid; display: grid;
justify-self: start; justify-self: start;
vertical-align: top; vertical-align: top;
align-self: flex-start; align-self: flex-start;
z-index: 0; z-index: 0;
> div:nth-child(1) { > div:nth-child(1) {
//background-color: #2f559622; //background-color: #2f559622;
width: 100mm; width: 100mm;
height: 17.5mm; height: 17.5mm;
padding-bottom: 1mm; padding-bottom: 1mm;
// Text inside // Text inside
display: grid; display: grid;
place-content: center; place-content: center;
border-bottom: #4472c4 dotted 0.5mm; border-bottom: #4472c4 dotted 0.5mm;
&:first-child { &:first-child {
color: #4472c4; color: #4472c4;
font-size: 3mm; font-size: 3mm;
//font-weight: bold; //font-weight: bold;
} }
} }
> div:nth-child(2) { > div:nth-child(2) {
padding-top: 4mm; padding-top: 4mm;
//border-bottom: #4472c4 dashed 2mm; //border-bottom: #4472c4 dashed 2mm;
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%); background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
background-position: bottom; background-position: bottom;
background-size: 6mm 1.5mm; background-size: 6mm 1.5mm;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
} }
</style> </style>

100
src/routes/zhen/cv/CompsRev2/LinkToSource.svelte
View File

@ -1,51 +1,51 @@
<script> <script>
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg" import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
</script> </script>
<div class="container"> <div class="container">
<div> <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> This CV was made using html, css and <a class="grid place-content-center" href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a>
</div> </div>
<div> <div>
Sources: 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> <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 and
<a href="https://dev.deprived.dev/zhen/cv/rev1?hideOnPrint=1">My Website</a> <a href="https://dev.deprived.dev/zhen/cv/rev1?hideOnPrint=1">My Website</a>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
z-index: 1; z-index: 1;
padding-left: 2mm; padding-left: 2mm;
//white-space: nowrap; //white-space: nowrap;
color: #777777; color: #777777;
* a { * a {
color: #3d6ddc; color: #3d6ddc;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
text-decoration: underline; text-decoration: underline;
} }
div:first-child { div:first-child {
display: flex; display: flex;
place-content: center; place-content: center;
justify-content: start; justify-content: start;
a:nth-child(1) > img { a:nth-child(1) > img {
width: 5mm; width: 5mm;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
} }
} }
div:nth-child(2){ div:nth-child(2){
padding-bottom: 2mm; padding-bottom: 2mm;
} }
} }
</style> </style>

46
src/routes/zhen/cv/CompsRev2/LinkedInQR.svelte
View File

@ -1,24 +1,24 @@
<script> <script>
import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw" import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
</script> </script>
<div class="container"> <div class="container">
<div>LinkedIn</div> <div>LinkedIn</div>
<span class="qrcode">{@html QRCode}</span> <span class="qrcode">{@html QRCode}</span>
</div> </div>
<style lang="scss"> <style lang="scss">
.qrcode { .qrcode {
transform: scale(0.9); transform: scale(0.9);
} }
.container { .container {
display: grid; display: grid;
place-items: center; place-items: center;
& * { & * {
font-size: 7.5mm; font-size: 7.5mm;
} }
} }
</style> </style>

50
src/routes/zhen/cv/CompsRev2/NameAndImage.svelte
View File

@ -1,26 +1,26 @@
<script lang="ts"> <script lang="ts">
import NamePlate from "./NamePlate.svelte"; import NamePlate from "./NamePlate.svelte";
import selfie from "$lib/zhen/cv-comps/MoreProfesionalMe.jpg" import selfie from "$lib/zhen/cv-comps/MoreProfesionalMe.jpg"
import zylveterSus from "$lib/zhen/cv-comps/zylveterSus.png" import zylveterSus from "$lib/zhen/cv-comps/zylveterSus.png"
</script> </script>
<div class="nameAndImageContainer"> <div class="nameAndImageContainer">
<NamePlate/> <NamePlate/>
<img src={selfie} class="selfie-constraints" alt="Zhentao Wei"/> <img src={selfie} class="selfie-constraints" alt="Zhentao Wei"/>
</div> </div>
<style> <style>
.nameAndImageContainer { .nameAndImageContainer {
display: grid; display: grid;
place-items: center; place-items: center;
} }
.selfie-constraints{ .selfie-constraints{
padding-top: 2.5mm; padding-top: 2.5mm;
max-width: 65%; max-width: 65%;
border-radius: 5mm; border-radius: 5mm;
filter: drop-shadow(0.75mm 0.75mm 0.75mm #0000009d); filter: drop-shadow(0.75mm 0.75mm 0.75mm #0000009d);
} }
</style> </style>

40
src/routes/zhen/cv/CompsRev2/NamePlate.svelte
View File

@ -1,21 +1,21 @@
<div class="name-plate-container"> <div class="name-plate-container">
<span style="text-align: center;"> <span style="text-align: center;">
<b> <b>
Zhentao Wei Zhentao Wei
</b><br/> </b><br/>
(He/Him) (He/Him)
</span> </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 black; border-bottom: 1mm solid black;
} }
</style> </style>

140
src/routes/zhen/cv/CompsRev2/OtherContact.svelte
View File

@ -1,71 +1,71 @@
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Other Other
</b> </b>
</div> </div>
<div class="table-display"> <div class="table-display">
<div class="table-item"> <div class="table-item">
<div>Itch.io</div> <div>Itch.io</div>
<a href="https://github.com/MagicBOTAlex">botalex.itch.io</a> <a href="https://github.com/MagicBOTAlex">botalex.itch.io</a>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>Github</div> <div>Github</div>
<a href="https://botalex.itch.io/">@MagicBOTAlex</a> <a href="https://botalex.itch.io/">@MagicBOTAlex</a>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 70%; width: 70%;
} }
.container > div:first-child { .container > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid black; border-bottom: 1mm solid black;
} }
.table-display { .table-display {
width: 100%; width: 100%;
} }
.table-item { .table-item {
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
border-bottom: 0.25mm solid #000000; border-bottom: 0.25mm solid #000000;
> a { > a {
text-decoration: underline; text-decoration: underline;
} }
> div, > a { > div, > a {
color: #000000; color: #000000;
&:first-child { &:first-child {
width: 35%; width: 35%;
font-size: 4mm; font-size: 4mm;
display: grid; display: grid;
place-content: center start; place-content: center start;
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm; border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
} }
&:nth-child(2) { &:nth-child(2) {
width: 65%; width: 65%;
font-size: 3.25mm; font-size: 3.25mm;
display: grid; display: grid;
place-content: center; place-content: center;
padding-left: 1mm; padding-left: 1mm;
} }
} }
} }
</style> </style>

60
src/routes/zhen/cv/CompsRev2/Profile.svelte
View File

@ -1,31 +1,31 @@
<div class="short-profile-container"> <div class="short-profile-container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
About me About me
</b> </b>
</div> </div>
<div> <div>
I'm a 20-year-old with a deep passion for programming and I'm a 20-year-old with a deep passion for programming and
technology. technology.
Most of my knowledge is self-taught from many places on the 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 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 periodically post my hobby projects on there, and my skills are
described further in depth. described further in depth.
</div> </div>
</div> </div>
<style> <style>
.short-profile-container{ .short-profile-container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 90%; width: 90%;
} }
.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 black; border-bottom: 1mm solid black;
} }
</style> </style>

122
src/routes/zhen/cv/CompsRev2/RepeatedSkills.svelte
View File

@ -1,62 +1,62 @@
<script lang="ts"> <script lang="ts">
// Width of num chars and height nom of chars // Width of num chars and height nom of chars
export let targetTextWidth: number; export let targetTextWidth: number;
export let targetTextHeight: number; export let targetTextHeight: number;
export let applyRotation: boolean = true; export let applyRotation: boolean = true;
export let textOverride: string[] | undefined = undefined; export let textOverride: string[] | undefined = undefined;
// Assign default value if textOverride is undefined // Assign default value if textOverride is undefined
let repeatingText : string[] = textOverride ?? [ let repeatingText : string[] = textOverride ?? [
"C++", "C++",
"C#", "C#",
"ARDUINO", "ARDUINO",
"PYTHON", "PYTHON",
"JAVA", "JAVA",
"JAVASCRIPT", "JAVASCRIPT",
"TYPESCRIPT", "TYPESCRIPT",
"HTML", "HTML",
"CSS", "CSS",
]; ];
function getRandomInt(max: number) { function getRandomInt(max: number) {
return Math.floor(Math.random() * max); return Math.floor(Math.random() * max);
} }
function GrabRandomString() { function GrabRandomString() {
let outString: string = ""; let outString: string = "";
while (outString.length < targetTextWidth) { while (outString.length < targetTextWidth) {
outString += outString +=
repeatingText[ repeatingText[
getRandomInt(repeatingText.length) getRandomInt(repeatingText.length)
] + " "; ] + " ";
} }
return outString; // At about target size return outString; // At about target size
} }
</script> </script>
<div {...$$restProps}> <div {...$$restProps}>
{#each { length: targetTextHeight } as _, i} {#each { length: targetTextHeight } as _, i}
<span class="{applyRotation ? "rotate45" : ""} SkillsText"> <span class="{applyRotation ? "rotate45" : ""} SkillsText">
{GrabRandomString()} {GrabRandomString()}
</span> </span>
{/each} {/each}
</div> </div>
<style> <style>
.SkillsText { .SkillsText {
text-align: start; text-align: start;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
width: 2rem; width: 2rem;
} }
.rotate45 { .rotate45 {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
</style> </style>

54
src/routes/zhen/cv/CompsRev2/ShortProfile.svelte
View File

@ -1,28 +1,28 @@
<div class="short-profile-container"> <div class="short-profile-container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
Short profile Short profile
</b> </b>
</div> </div>
<div> <div>
◾ "Artificial intelligence and data" student at DTU. ◾ "Artificial intelligence and data" student at DTU.
◾ Working at <a class="underline" href="https://grazper.com/">GrazperAI</a> <br/> ◾ Working at <a class="underline" href="https://grazper.com/">GrazperAI</a> <br/>
◾ Volunteer at Kildevæld Makerspace. ◾ Volunteer at Kildevæld Makerspace.
</div> </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 black; border-bottom: 1mm solid black;
} }
</style> </style>

174
src/routes/zhen/cv/CompsRev2/TableOfProjects.svelte
View File

@ -1,88 +1,88 @@
<div class="container"> <div class="container">
<div> <div>
<b style="text-align:left;"> <b style="text-align:left;">
List of big projects List of big projects
</b> </b>
</div> </div>
<div class="table-display"> <div class="table-display">
<div class="table-item"> <div class="table-item">
<div>Computer vision</div> <div>Computer vision</div>
<div>Implimented YoloV1 from scratch. (object detection)</div> <div>Implimented YoloV1 from scratch. (object detection)</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>Arduino</div> <div>Arduino</div>
<div>Built my own claw machine with 2 dimentions of movement</div> <div>Built my own claw machine with 2 dimentions of movement</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>App dev</div> <div>App dev</div>
<div>Made an Doulingo'ish app for learning chinese in 9 days</div> <div>Made an Doulingo'ish app for learning chinese in 9 days</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>Open-source help</div> <div>Open-source help</div>
<div>Have contributed in multiple Open-source project on github</div> <div>Have contributed in multiple Open-source project on github</div>
</div> </div>
<div class="table-item"> <div class="table-item">
<div>PCB designing</div> <div>PCB designing</div>
<div>I am currently designing my own circuit board</div> <div>I am currently designing my own circuit board</div>
</div> </div>
</div> </div>
<div class="flex" style="font-size: 0.75rem; color: sgray; align-content: start; width: 100%;"> <div class="flex" style="font-size: 0.75rem; color: sgray; align-content: start; width: 100%;">
<p> <p>
If you want proof or want to know about other projects. Contact me! If you want proof or want to know about other projects. Contact me!
</p> </p>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container{
display: grid; display: grid;
place-items: center; place-items: center;
width: 90%; width: 90%;
} }
.container > div:first-child { .container > div:first-child {
width: 100%; width: 100%;
/* Bottom border stripe*/ /* Bottom border stripe*/
border-bottom: 1mm solid black; border-bottom: 1mm solid black;
} }
.table-display { .table-display {
width: 100%; width: 100%;
} }
.table-item { .table-item {
display: flex; display: flex;
justify-items: start; justify-items: start;
width: 100%; width: 100%;
border-bottom: 0.25mm solid #000000; border-bottom: 0.25mm solid #000000;
> a { > a {
text-decoration: underline; text-decoration: underline;
} }
> div, > a { > div, > a {
color: #000000; color: #000000;
&:first-child { &:first-child {
width: 30%; width: 30%;
font-size: 4mm; font-size: 4mm;
display: grid; display: grid;
place-content: center start; place-content: center start;
border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm; border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
} }
&:nth-child(2) { &:nth-child(2) {
width: 70%; width: 70%;
font-size: 3.25mm; font-size: 3.25mm;
display: grid; display: grid;
padding-left: 1mm; padding-left: 1mm;
} }
} }
} }
</style> </style>

498
src/routes/zhen/cv/epos/+page.svelte
View File

@ -1,250 +1,250 @@
<script lang="ts"> <script lang="ts">
// 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"
import CombinedContacts from "../Comps/CombinedContacts.svelte" import CombinedContacts from "../Comps/CombinedContacts.svelte"
import LinkedInQR from "../Comps/LinkedInQR.svelte"; import LinkedInQR from "../Comps/LinkedInQR.svelte";
// Right side // Right side
import Profile from "../Comps/Profile.svelte"; import Profile from "../Comps/Profile.svelte";
import Education from "../Comps/Education.svelte"; import Education from "../Comps/Education.svelte";
import Experience from "../Comps/Experience.svelte"; import Experience from "../Comps/Experience.svelte";
// Decorations // Decorations
import LeftTopDecor from "../Comps/LeftTopDecor.svelte"; import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
import BottomRightDecor from "../Comps/BottomRightDecor.svelte"; import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
import AlexWatermark from "../Comps/AlexWatermark.svelte"; import AlexWatermark from "../Comps/AlexWatermark.svelte";
import RepeatedSkills from "../Comps/RepeatedSkills.svelte"; import RepeatedSkills from "../Comps/RepeatedSkills.svelte";
// Cedit // Cedit
import LinkToSource from "../Comps/LinkToSource.svelte"; import LinkToSource from "../Comps/LinkToSource.svelte";
// Discord embed // Discord embed
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png" import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
// Print detection setup // Print detection setup
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
// Check if the query parameter exists in the URL // Check if the query parameter exists in the URL
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const hideOnPrintParam = urlParams.get('hideOnPrint'); const hideOnPrintParam = urlParams.get('hideOnPrint');
// If the query parameter is not detected, reload the page with the parameter added // If the query parameter is not detected, reload the page with the parameter added
if (!hideOnPrintParam) { if (!hideOnPrintParam) {
window.location.href = `${window.location.href}?hideOnPrint=1`; window.location.href = `${window.location.href}?hideOnPrint=1`;
} }
}); });
function getFormattedDate(): string { function getFormattedDate(): string {
const date = new Date(); const date = new Date();
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear(); const year = date.getFullYear();
return `${day}-${month}-${year}`; return `${day}-${month}-${year}`;
} }
</script> </script>
<title>Zhentao Wei's CV {getFormattedDate()}</title> <title>Zhentao Wei's CV {getFormattedDate()}</title>
<meta content="Zhentao Wei's Epos CV" property="og: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="This CV is made completely with html + css + js" property="og:description" />
<meta content={preveiwImage} property="og:image" /> <meta content={preveiwImage} property="og:image" />
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" /> <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
<div class="cv-info-container hide-on-print"> <div class="cv-info-container hide-on-print">
<div> <div>
Under here is my CV rev1 for an application. This page has been able to be saved as PDF. 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. 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/>
<br/> <br/>
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :( I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
</div> </div>
</div> </div>
<div class="cv-container-container include-in-print"> <div class="cv-container-container include-in-print">
<div class="cv-container sections decorations"> <div class="cv-container sections decorations">
<div id="left-section"> <div id="left-section">
<LeftTopDecor/> <LeftTopDecor/>
<BottomRightDecor/> <BottomRightDecor/>
<div> <div>
<NameAndImage/> <NameAndImage/>
<ShortProfile/> <ShortProfile/>
<CombinedContacts/> <CombinedContacts/>
<LinkedInQR/> <LinkedInQR/>
</div> </div>
</div> </div>
<div id="leftSectionSeperator"><div/></div> <div id="leftSectionSeperator"><div/></div>
<div id="right-section"> <div id="right-section">
<AlexWatermark/> <AlexWatermark/>
<div id="TopRightSkillsText"> <div id="TopRightSkillsText">
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/> <RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
</div> </div>
<div id="Credit"> <div id="Credit">
<LinkToSource/> <LinkToSource/>
</div> </div>
<div> <div>
<Profile/> <Profile/>
<Experience/> <Experience/>
<Education/> <Education/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.cv-info-container { .cv-info-container {
height: 40mm; height: 40mm;
background-color: #2b2a2a; background-color: #2b2a2a;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.keyboard-key { .keyboard-key {
display: inline; display: inline;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
border-radius: 2mm; border-radius: 2mm;
background-color: #3e3d3d; background-color: #3e3d3d;
} }
> div { > div {
width: 80%; width: 80%;
height: 60%; height: 60%;
} }
} }
@media print { @media print {
.hide-on-print { .hide-on-print {
display: none; display: none;
} }
} }
.cv-container-container{ .cv-container-container{
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
} }
.cv-container-container * { .cv-container-container * {
color: black; // Set all text black color: black; // Set all text black
} }
.cv-container { .cv-container {
width: 210mm; width: 210mm;
height: 297mm; height: 297mm;
background-color: #eeeeee; background-color: #eeeeee;
overflow: visible; overflow: visible;
display: flex; display: flex;
padding: auto; padding: auto;
} }
.include-in-print { &, & * { .include-in-print { &, & * {
-webkit-print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important; print-color-adjust:exact !important;
}} }}
.sections { .sections {
// Shared between sections // Shared between sections
> div { > div {
display: grid; display: grid;
z-index: 0; z-index: 0;
// Needed to cuttoff the extra decoration // Needed to cuttoff the extra decoration
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
#left-section{ #left-section{
background-color: #bdd6ee; background-color: #bdd6ee;
width: calc(100% / 3 * 1); width: calc(100% / 3 * 1);
> div:last-child { > div:last-child {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
left: 0; left: 0;
display: grid; display: grid;
place-items: center; place-items: center;
padding-top: 30mm; padding-top: 30mm;
padding-bottom: 30mm; padding-bottom: 30mm;
} }
} }
#right-section{ #right-section{
width: calc(100% / 3 * 2); width: calc(100% / 3 * 2);
> div:last-child { > div:last-child {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
left: 0; left: 0;
display: grid; display: grid;
place-items: center; place-items: center;
row-gap: 6mm; row-gap: 6mm;
padding-top: 45mm; padding-top: 45mm;
padding-bottom: 30mm; padding-bottom: 30mm;
// Disable interactivity for padding // Disable interactivity for padding
pointer-events:none; pointer-events:none;
} }
} }
} }
.decorations { .decorations {
#leftSectionSeperator{ #leftSectionSeperator{
position: relative; position: relative;
height: 100%; height: 100%;
width: 0%; width: 0%;
z-index: 1; z-index: 1;
overflow: visible; overflow: visible;
> div { > div {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 5mm; width: 5mm;
z-index: 1; z-index: 1;
background: linear-gradient(90deg, #3636364f, #00000000); background: linear-gradient(90deg, #3636364f, #00000000);
} }
} }
> div { > div {
#TopRightSkillsText { #TopRightSkillsText {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
display: grid; display: grid;
place-items: center; place-items: center;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
place-content: center; place-content: center;
padding: 0; padding: 0;
height: 50mm; height: 50mm;
mask-image: linear-gradient(180deg, #000 0%, transparent 110%); mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
color: rgb(190, 190, 190); color: rgb(190, 190, 190);
font-family: 'CozetteVector'; font-family: 'CozetteVector';
font-size: x-large; font-size: x-large;
} }
#Credit { #Credit {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
display: flex; display: flex;
align-self: flex-end; align-self: flex-end;
} }
} }
} }
</style> </style>

498
src/routes/zhen/cv/rev1/+page.svelte
View File

@ -1,250 +1,250 @@
<script lang="ts"> <script lang="ts">
// 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"
import CombinedContacts from "../Comps/CombinedContacts.svelte" import CombinedContacts from "../Comps/CombinedContacts.svelte"
import LinkedInQR from "../Comps/LinkedInQR.svelte"; import LinkedInQR from "../Comps/LinkedInQR.svelte";
// Right side // Right side
import Profile from "../Comps/Profile.svelte"; import Profile from "../Comps/Profile.svelte";
import Education from "../Comps/Education.svelte"; import Education from "../Comps/Education.svelte";
import Experience from "../Comps/Experience.svelte"; import Experience from "../Comps/Experience.svelte";
// Decorations // Decorations
import LeftTopDecor from "../Comps/LeftTopDecor.svelte"; import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
import BottomRightDecor from "../Comps/BottomRightDecor.svelte"; import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
import AlexWatermark from "../Comps/AlexWatermark.svelte"; import AlexWatermark from "../Comps/AlexWatermark.svelte";
import RepeatedSkills from "../Comps/RepeatedSkills.svelte"; import RepeatedSkills from "../Comps/RepeatedSkills.svelte";
// Cedit // Cedit
import LinkToSource from "../Comps/LinkToSource.svelte"; import LinkToSource from "../Comps/LinkToSource.svelte";
// Discord embed // Discord embed
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png" import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
// Print detection setup // Print detection setup
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
// Check if the query parameter exists in the URL // Check if the query parameter exists in the URL
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const hideOnPrintParam = urlParams.get('hideOnPrint'); const hideOnPrintParam = urlParams.get('hideOnPrint');
// If the query parameter is not detected, reload the page with the parameter added // If the query parameter is not detected, reload the page with the parameter added
if (!hideOnPrintParam) { if (!hideOnPrintParam) {
window.location.href = `${window.location.href}?hideOnPrint=1`; window.location.href = `${window.location.href}?hideOnPrint=1`;
} }
}); });
function getFormattedDate(): string { function getFormattedDate(): string {
const date = new Date(); const date = new Date();
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear(); const year = date.getFullYear();
return `${day}-${month}-${year}`; return `${day}-${month}-${year}`;
} }
</script> </script>
<title>Zhentao Wei's CV {getFormattedDate()}</title> <title>Zhentao Wei's CV {getFormattedDate()}</title>
<meta content="Zhentao Wei's Epos CV" property="og: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="This CV is made completely with html + css + js" property="og:description" />
<meta content={preveiwImage} property="og:image" /> <meta content={preveiwImage} property="og:image" />
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" /> <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
<div class="cv-info-container hide-on-print"> <div class="cv-info-container hide-on-print">
<div> <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. 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. 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/>
<br/> <br/>
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :( I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
</div> </div>
</div> </div>
<div class="cv-container-container include-in-print"> <div class="cv-container-container include-in-print">
<div class="cv-container sections decorations"> <div class="cv-container sections decorations">
<div id="left-section"> <div id="left-section">
<LeftTopDecor/> <LeftTopDecor/>
<BottomRightDecor/> <BottomRightDecor/>
<div> <div>
<NameAndImage/> <NameAndImage/>
<ShortProfile/> <ShortProfile/>
<CombinedContacts/> <CombinedContacts/>
<LinkedInQR/> <LinkedInQR/>
</div> </div>
</div> </div>
<div id="leftSectionSeperator"><div/></div> <div id="leftSectionSeperator"><div/></div>
<div id="right-section"> <div id="right-section">
<AlexWatermark/> <AlexWatermark/>
<div id="TopRightSkillsText"> <div id="TopRightSkillsText">
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/> <RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
</div> </div>
<div id="Credit"> <div id="Credit">
<LinkToSource/> <LinkToSource/>
</div> </div>
<div> <div>
<Profile/> <Profile/>
<Experience/> <Experience/>
<Education/> <Education/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.cv-info-container { .cv-info-container {
height: 40mm; height: 40mm;
background-color: #2b2a2a; background-color: #2b2a2a;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.keyboard-key { .keyboard-key {
display: inline; display: inline;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
border-radius: 2mm; border-radius: 2mm;
background-color: #3e3d3d; background-color: #3e3d3d;
} }
> div { > div {
width: 80%; width: 80%;
height: 60%; height: 60%;
} }
} }
@media print { @media print {
.hide-on-print { .hide-on-print {
display: none; display: none;
} }
} }
.cv-container-container{ .cv-container-container{
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
} }
.cv-container-container * { .cv-container-container * {
color: black; // Set all text black color: black; // Set all text black
} }
.cv-container { .cv-container {
width: 210mm; width: 210mm;
height: 297mm; height: 297mm;
background-color: #eeeeee; background-color: #eeeeee;
overflow: visible; overflow: visible;
display: flex; display: flex;
padding: auto; padding: auto;
} }
.include-in-print { &, & * { .include-in-print { &, & * {
-webkit-print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important; print-color-adjust:exact !important;
}} }}
.sections { .sections {
// Shared between sections // Shared between sections
> div { > div {
display: grid; display: grid;
z-index: 0; z-index: 0;
// Needed to cuttoff the extra decoration // Needed to cuttoff the extra decoration
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
#left-section{ #left-section{
background-color: #bdd6ee; background-color: #bdd6ee;
width: calc(100% / 3 * 1); width: calc(100% / 3 * 1);
> div:last-child { > div:last-child {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
left: 0; left: 0;
display: grid; display: grid;
place-items: center; place-items: center;
padding-top: 30mm; padding-top: 30mm;
padding-bottom: 30mm; padding-bottom: 30mm;
} }
} }
#right-section{ #right-section{
width: calc(100% / 3 * 2); width: calc(100% / 3 * 2);
> div:last-child { > div:last-child {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
left: 0; left: 0;
display: grid; display: grid;
place-items: center; place-items: center;
row-gap: 6mm; row-gap: 6mm;
padding-top: 45mm; padding-top: 45mm;
padding-bottom: 30mm; padding-bottom: 30mm;
// Disable interactivity for padding // Disable interactivity for padding
pointer-events:none; pointer-events:none;
} }
} }
} }
.decorations { .decorations {
#leftSectionSeperator{ #leftSectionSeperator{
position: relative; position: relative;
height: 100%; height: 100%;
width: 0%; width: 0%;
z-index: 1; z-index: 1;
overflow: visible; overflow: visible;
> div { > div {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 5mm; width: 5mm;
z-index: 1; z-index: 1;
background: linear-gradient(90deg, #3636364f, #00000000); background: linear-gradient(90deg, #3636364f, #00000000);
} }
} }
> div { > div {
#TopRightSkillsText { #TopRightSkillsText {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
display: grid; display: grid;
place-items: center; place-items: center;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
place-content: center; place-content: center;
padding: 0; padding: 0;
height: 50mm; height: 50mm;
mask-image: linear-gradient(180deg, #000 0%, transparent 110%); mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
color: rgb(190, 190, 190); color: rgb(190, 190, 190);
font-family: 'CozetteVector'; font-family: 'CozetteVector';
font-size: x-large; font-size: x-large;
} }
#Credit { #Credit {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
display: flex; display: flex;
align-self: flex-end; align-self: flex-end;
} }
} }
} }
</style> </style>

506
src/routes/zhen/cv/rev2/+page.svelte
View File

@ -1,254 +1,254 @@
<script lang="ts"> <script lang="ts">
// Left side // Left side
import NameAndImage from "../CompsRev2/NameAndImage.svelte"; import NameAndImage from "../CompsRev2/NameAndImage.svelte";
import ShortProfile from "../CompsRev2/ShortProfile.svelte" import ShortProfile from "../CompsRev2/ShortProfile.svelte"
import CombinedContacts from "../CompsRev2/CombinedContacts.svelte" import CombinedContacts from "../CompsRev2/CombinedContacts.svelte"
import LinkedInQR from "../CompsRev2/LinkedInQR.svelte"; import LinkedInQR from "../CompsRev2/LinkedInQR.svelte";
// Right side // Right side
import Profile from "../CompsRev2/Profile.svelte"; import Profile from "../CompsRev2/Profile.svelte";
import Education from "../CompsRev2/Education.svelte"; import Education from "../CompsRev2/Education.svelte";
import Experience from "../CompsRev2/Experience.svelte"; import Experience from "../CompsRev2/Experience.svelte";
import BiggestFlex from "../CompsRev2/BiggestFlex.svelte"; import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
import TableOfProjects from "../CompsRev2/TableOfProjects.svelte"; import TableOfProjects from "../CompsRev2/TableOfProjects.svelte";
// Decorations // Decorations
import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte"; import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte"; import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte";
import AlexWatermark from "../CompsRev2/AlexWatermark.svelte"; import AlexWatermark from "../CompsRev2/AlexWatermark.svelte";
import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte"; import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte";
// Cedit // Cedit
import LinkToSource from "../CompsRev2/LinkToSource.svelte"; import LinkToSource from "../CompsRev2/LinkToSource.svelte";
// Discord embed // Discord embed
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png" import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
// Print detection setup // Print detection setup
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
// Check if the query parameter exists in the URL // Check if the query parameter exists in the URL
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const hideOnPrintParam = urlParams.get('hideOnPrint'); const hideOnPrintParam = urlParams.get('hideOnPrint');
// If the query parameter is not detected, reload the page with the parameter added // If the query parameter is not detected, reload the page with the parameter added
if (!hideOnPrintParam) { if (!hideOnPrintParam) {
window.location.href = `${window.location.href}?hideOnPrint=1`; window.location.href = `${window.location.href}?hideOnPrint=1`;
} }
}); });
function getFormattedDate(): string { function getFormattedDate(): string {
const date = new Date(); const date = new Date();
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear(); const year = date.getFullYear();
return `${day}-${month}-${year}`; return `${day}-${month}-${year}`;
} }
</script> </script>
<title>Zhentao Wei's CV {getFormattedDate()}</title> <title>Zhentao Wei's CV {getFormattedDate()}</title>
<meta content="Zhentao Wei's Epos CV" property="og: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="This CV is made completely with html + css + js" property="og:description" />
<meta content={preveiwImage} property="og:image" /> <meta content={preveiwImage} property="og:image" />
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" /> <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
<div class="cv-info-container hide-on-print"> <div class="cv-info-container hide-on-print">
<div> <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. 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. 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/>
<br/> <br/>
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :( I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
</div> </div>
</div> </div>
<div class="cv-container-container include-in-print"> <div class="cv-container-container include-in-print">
<div class="cv-container sections decorations"> <div class="cv-container sections decorations">
<div id="left-section"> <div id="left-section">
<LeftTopDecor Style="pointer-events: none;"/> <LeftTopDecor Style="pointer-events: none;"/>
<BottomRightDecor Style="pointer-events: none;"/> <BottomRightDecor Style="pointer-events: none;"/>
<div> <div>
<NameAndImage/> <NameAndImage/>
<ShortProfile/> <ShortProfile/>
<CombinedContacts/> <CombinedContacts/>
<LinkedInQR/> <LinkedInQR/>
</div> </div>
</div> </div>
<div id="leftSectionSeperator"><div/></div> <div id="leftSectionSeperator"><div/></div>
<div id="right-section"> <div id="right-section">
<AlexWatermark Style="pointer-events: none;"/> <AlexWatermark Style="pointer-events: none;"/>
<div id="TopRightSkillsText"> <div id="TopRightSkillsText">
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/> <RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
</div> </div>
<div id="Credit"> <div id="Credit">
<LinkToSource/> <LinkToSource/>
</div> </div>
<div> <div>
<Profile/> <Profile/>
<BiggestFlex/> <BiggestFlex/>
<TableOfProjects/> <TableOfProjects/>
<Experience/> <Experience/>
<Education/> <Education/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.cv-info-container { .cv-info-container {
height: 40mm; height: 40mm;
background-color: #2b2a2a; background-color: #2b2a2a;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.keyboard-key { .keyboard-key {
display: inline; display: inline;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
border-radius: 2mm; border-radius: 2mm;
background-color: #3e3d3d; background-color: #3e3d3d;
} }
> div { > div {
width: 80%; width: 80%;
height: 60%; height: 60%;
} }
} }
@media print { @media print {
.hide-on-print { .hide-on-print {
display: none; display: none;
} }
} }
.cv-container-container{ .cv-container-container{
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
} }
.cv-container-container * { .cv-container-container * {
color: black; // Set all text black color: black; // Set all text black
} }
.cv-container { .cv-container {
width: 210mm; width: 210mm;
height: 297mm; height: 297mm;
background-color: #eeeeee; background-color: #eeeeee;
overflow: visible; overflow: visible;
display: flex; display: flex;
padding: auto; padding: auto;
} }
.include-in-print { &, & * { .include-in-print { &, & * {
-webkit-print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important; print-color-adjust:exact !important;
}} }}
.sections { .sections {
// Shared between sections // Shared between sections
> div { > div {
display: grid; display: grid;
z-index: 0; z-index: 0;
// Needed to cuttoff the extra decoration // Needed to cuttoff the extra decoration
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
#left-section{ #left-section{
background-color: #bdd6ee; background-color: #bdd6ee;
width: calc(100% / 3 * 1); width: calc(100% / 3 * 1);
> div:last-child { > div:last-child {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
left: 0; left: 0;
display: grid; display: grid;
place-items: center; place-items: center;
padding-top: 30mm; padding-top: 30mm;
padding-bottom: 30mm; padding-bottom: 30mm;
} }
} }
#right-section{ #right-section{
width: calc(100% / 3 * 2); width: calc(100% / 3 * 2);
> div:last-child { > div:last-child {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
left: 0; left: 0;
display: grid; display: grid;
place-items: center; place-items: center;
row-gap: 6mm; row-gap: 6mm;
padding-top: 45mm; padding-top: 45mm;
padding-bottom: 30mm; padding-bottom: 30mm;
// Disable interactivity for padding // Disable interactivity for padding
pointer-events:none; pointer-events:none;
} }
} }
} }
.decorations { .decorations {
#leftSectionSeperator{ #leftSectionSeperator{
position: relative; position: relative;
height: 100%; height: 100%;
width: 0%; width: 0%;
z-index: 1; z-index: 1;
overflow: visible; overflow: visible;
> div { > div {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 5mm; width: 5mm;
z-index: 1; z-index: 1;
background: linear-gradient(90deg, #3636364f, #00000000); background: linear-gradient(90deg, #3636364f, #00000000);
} }
} }
> div { > div {
#TopRightSkillsText { #TopRightSkillsText {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
display: grid; display: grid;
place-items: center; place-items: center;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
place-content: center; place-content: center;
padding: 0; padding: 0;
height: 50mm; height: 50mm;
mask-image: linear-gradient(180deg, #000 0%, transparent 110%); mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
color: rgb(190, 190, 190); color: rgb(190, 190, 190);
font-family: 'CozetteVector'; font-family: 'CozetteVector';
font-size: x-large; font-size: x-large;
} }
#Credit { #Credit {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
display: flex; display: flex;
align-self: flex-end; align-self: flex-end;
} }
} }
} }
</style> </style>

232
src/routes/zhen/misc/linkedinBanner/+page.svelte
View File

@ -1,117 +1,117 @@
<script lang="ts"> <script lang="ts">
import RepeatedSkills from "../../cv/Comps/RepeatedSkills.svelte"; import RepeatedSkills from "../../cv/Comps/RepeatedSkills.svelte";
// Discord embed // Discord embed
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png" import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
// Print detection setup // Print detection setup
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
// Check if the query parameter exists in the URL // Check if the query parameter exists in the URL
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const hideOnPrintParam = urlParams.get('hideOnPrint'); const hideOnPrintParam = urlParams.get('hideOnPrint');
// If the query parameter is not detected, reload the page with the parameter added // If the query parameter is not detected, reload the page with the parameter added
if (!hideOnPrintParam) { if (!hideOnPrintParam) {
window.location.href = `${window.location.href}?hideOnPrint=1`; window.location.href = `${window.location.href}?hideOnPrint=1`;
} }
}); });
function getFormattedDate(): string { function getFormattedDate(): string {
const date = new Date(); const date = new Date();
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear(); const year = date.getFullYear();
return `${day}-${month}-${year}`; return `${day}-${month}-${year}`;
} }
</script> </script>
<title>Zhentao Wei's LinkedIn banner {getFormattedDate()}</title> <title>Zhentao Wei's LinkedIn banner {getFormattedDate()}</title>
<meta content="Zhentao Wei's LinkedIn banner" property="og:title" /> <meta content="Zhentao Wei's LinkedIn banner" property="og:title" />
<meta content="This Linkedin banner is made completely with html + css + js" property="og:description" /> <meta content="This Linkedin banner is made completely with html + css + js" property="og:description" />
<meta content={preveiwImage} property="og:image" /> <meta content={preveiwImage} property="og:image" />
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" /> <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
<div class="cv-info-container hide-on-print"> <div class="cv-info-container hide-on-print">
<div> <div>
Under here is my Linkedin banner. This page has been able to be saved as PDF, and the banner can be extracted as an image fro mthe pdf. Under here is my Linkedin banner. This page has been able to be saved as PDF, and the banner can be extracted as an image fro mthe pdf.
This can be done by pressing <div class="keyboard-key">P</div> + <div class="keyboard-key">CTRL</div>, then set scaling to 100% and no margins. Lastly, select save to PDF or print. 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/>
<br/> <br/>
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :( I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
</div> </div>
</div> </div>
<div class="container include-in-print"> <div class="container include-in-print">
<div> <div>
<RepeatedSkills targetTextHeight={70} targetTextWidth={175}/> <RepeatedSkills targetTextHeight={70} targetTextWidth={175}/>
</div> </div>
<div/> <div/>
</div> </div>
<style lang="scss"> <style lang="scss">
.cv-info-container { .cv-info-container {
height: 40mm; height: 40mm;
background-color: #2b2a2a; background-color: #2b2a2a;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.keyboard-key { .keyboard-key {
display: inline; display: inline;
padding-left: 1mm; padding-left: 1mm;
padding-right: 1mm; padding-right: 1mm;
border-radius: 2mm; border-radius: 2mm;
background-color: #3e3d3d; background-color: #3e3d3d;
} }
> div { > div {
width: 80%; width: 80%;
height: 60%; height: 60%;
} }
} }
@media print { @media print {
.hide-on-print { .hide-on-print {
display: none; display: none;
} }
} }
.include-in-print { &, & * { .include-in-print { &, & * {
-webkit-print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important; print-color-adjust:exact !important;
}} }}
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
> div:nth-child(1) { > div:nth-child(1) {
width: 419.1mm; width: 419.1mm;
height: 104.775mm; height: 104.775mm;
background-color: #383636; background-color: #383636;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
place-content: center; place-content: center;
font-size: 10mm; font-size: 10mm;
font-family: cozetteVector; font-family: cozetteVector;
color: #d4d4d4; color: #d4d4d4;
filter: blur(0); // Force save as image filter: blur(0); // Force save as image
} }
> div:nth-child(2){ > div:nth-child(2){
height: 0; height: 0;
} }
} }
</style> </style>

36
static/images/icons/discord.svg
View File

@ -1,18 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
fill="#000000" fill="#000000"
width="800.02313" width="800.02313"
height="609.78137" height="609.78137"
viewBox="0 0 24.000694 18.293441" viewBox="0 0 24.000694 18.293441"
role="img" role="img"
version="1.1" version="1.1"
id="svg1" id="svg1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs <defs
id="defs1" /> id="defs1" />
<path <path
d="m 20.317481,1.5163647 a 19.791,19.791 0 0 0 -4.885,-1.51500001 0.074,0.074 0 0 0 -0.079,0.037 c -0.21,0.375 -0.444,0.864 -0.608,1.25000001 a 18.27,18.27 0 0 0 -5.4870004,0 12.64,12.64 0 0 0 -0.617,-1.25000001 0.077,0.077 0 0 0 -0.079,-0.037 19.736,19.736 0 0 0 -4.885,1.51500001 0.07,0.07 0 0 0 -0.032,0.027 c -3.11199997,4.649 -3.96499997,9.1830003 -3.54599997,13.6600003 a 0.082,0.082 0 0 0 0.031,0.057 19.9,19.9 0 0 0 5.99299997,3.03 0.078,0.078 0 0 0 0.084,-0.028 14.09,14.09 0 0 0 1.226,-1.994 0.076,0.076 0 0 0 -0.041,-0.106 13.107,13.107 0 0 1 -1.872,-0.892 0.077,0.077 0 0 1 -0.008,-0.128 10.2,10.2 0 0 0 0.372,-0.292 0.074,0.074 0 0 1 0.077,-0.01 c 3.928,1.793 8.1800004,1.793 12.0620004,0 a 0.074,0.074 0 0 1 0.078,0.01 c 0.12,0.098 0.246,0.198 0.373,0.292 a 0.077,0.077 0 0 1 -0.006,0.127 12.299,12.299 0 0 1 -1.873,0.892 0.077,0.077 0 0 0 -0.041,0.107 c 0.36,0.698 0.772,1.362 1.225,1.993 a 0.076,0.076 0 0 0 0.084,0.028 19.839,19.839 0 0 0 6.002,-3.03 0.077,0.077 0 0 0 0.032,-0.054 c 0.5,-5.177 -0.838,-9.6740003 -3.549,-13.6600003 a 0.061,0.061 0 0 0 -0.031,-0.03 z M 8.0204806,12.476365 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.956,-2.4190003 2.157,-2.4190003 1.21,0 2.1760004,1.096 2.1570004,2.4200003 0,1.333 -0.9560004,2.418 -2.1570004,2.418 z m 7.9750004,0 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.955,-2.4190003 2.157,-2.4190003 1.21,0 2.176,1.096 2.157,2.4200003 0,1.333 -0.946,2.418 -2.157,2.418 z" d="m 20.317481,1.5163647 a 19.791,19.791 0 0 0 -4.885,-1.51500001 0.074,0.074 0 0 0 -0.079,0.037 c -0.21,0.375 -0.444,0.864 -0.608,1.25000001 a 18.27,18.27 0 0 0 -5.4870004,0 12.64,12.64 0 0 0 -0.617,-1.25000001 0.077,0.077 0 0 0 -0.079,-0.037 19.736,19.736 0 0 0 -4.885,1.51500001 0.07,0.07 0 0 0 -0.032,0.027 c -3.11199997,4.649 -3.96499997,9.1830003 -3.54599997,13.6600003 a 0.082,0.082 0 0 0 0.031,0.057 19.9,19.9 0 0 0 5.99299997,3.03 0.078,0.078 0 0 0 0.084,-0.028 14.09,14.09 0 0 0 1.226,-1.994 0.076,0.076 0 0 0 -0.041,-0.106 13.107,13.107 0 0 1 -1.872,-0.892 0.077,0.077 0 0 1 -0.008,-0.128 10.2,10.2 0 0 0 0.372,-0.292 0.074,0.074 0 0 1 0.077,-0.01 c 3.928,1.793 8.1800004,1.793 12.0620004,0 a 0.074,0.074 0 0 1 0.078,0.01 c 0.12,0.098 0.246,0.198 0.373,0.292 a 0.077,0.077 0 0 1 -0.006,0.127 12.299,12.299 0 0 1 -1.873,0.892 0.077,0.077 0 0 0 -0.041,0.107 c 0.36,0.698 0.772,1.362 1.225,1.993 a 0.076,0.076 0 0 0 0.084,0.028 19.839,19.839 0 0 0 6.002,-3.03 0.077,0.077 0 0 0 0.032,-0.054 c 0.5,-5.177 -0.838,-9.6740003 -3.549,-13.6600003 a 0.061,0.061 0 0 0 -0.031,-0.03 z M 8.0204806,12.476365 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.956,-2.4190003 2.157,-2.4190003 1.21,0 2.1760004,1.096 2.1570004,2.4200003 0,1.333 -0.9560004,2.418 -2.1570004,2.418 z m 7.9750004,0 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.955,-2.4190003 2.157,-2.4190003 1.21,0 2.176,1.096 2.157,2.4200003 0,1.333 -0.946,2.418 -2.157,2.418 z"
id="path1" id="path1"
style="fill:#fdfdfd;fill-opacity:1" /> style="fill:#fdfdfd;fill-opacity:1" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

446
static/portfolios/alex/Informatik3g2g/AsiatiskMad.html
View File

File diff suppressed because one or more lines are too long

180
static/portfolios/alex/Informatik3g2g/SpilHjemmeside.html
View File

@ -1,91 +1,91 @@
<body bgcolor="#2C2F33"> <body bgcolor="#2C2F33">
<div class="border: 5px solid #FFFF00; <div class="border: 5px solid #FFFF00;
text-align: center;"> text-align: center;">
<h1 style="color:#ffffff;"> <h1 style="color:#ffffff;">
GOOD GAMES!11!! GOOD GAMES!11!!
</h1> </h1>
<ol style="color:#ffffff;text-align: start;"> <ol style="color:#ffffff;text-align: start;">
<li>Cummy sussy baka!!!</li> <li>Cummy sussy baka!!!</li>
<li>Watermelon burger</li> <li>Watermelon burger</li>
<li>Minecraft girl</li> <li>Minecraft girl</li>
</ol> </ol>
<div> <div>
<image width=600 src="https://www.filmsnewsfeed.com/thumb/16x9/images/article/among-us-devs-tease-character-based-on-the-rock-amidst-movie-rumors-main.webp"/> <image width=600 src="https://www.filmsnewsfeed.com/thumb/16x9/images/article/among-us-devs-tease-character-based-on-the-rock-amidst-movie-rumors-main.webp"/>
</div> </div>
<h1 style="color:#bcbcbc;"> <h1 style="color:#bcbcbc;">
Cummy sussy baka!!! Cummy sussy baka!!!
</h1> </h1>
<p1 style="color:#ffffff;"> <p1 style="color:#ffffff;">
"Cummy sussy baka!!!" has won multiple game of the year awards for being the scariest game for 5 years in a row. The game is known for being the super detailed story line and thus immerses the player into the game and scarrying the player right after. This has made people across the world, shit their pants due to the scaryness of the game. "Cummy sussy baka!!!" has won multiple game of the year awards for being the scariest game for 5 years in a row. The game is known for being the super detailed story line and thus immerses the player into the game and scarrying the player right after. This has made people across the world, shit their pants due to the scaryness of the game.
</p1> </p1>
<div class="border: 5px solid #FFFF00; <div class="border: 5px solid #FFFF00;
text-align: center;" style="margin: 2in;color:#ffffff;"> text-align: center;" style="margin: 2in;color:#ffffff;">
<ul> <ul>
<li>White substance</li> <li>White substance</li>
<li>Among us</li> <li>Among us</li>
<li>The rock</li> <li>The rock</li>
<li>Und weissbier ist lekker</li> <li>Und weissbier ist lekker</li>
</ul> </ul>
</div> </div>
<div style="color:#ffffff;border: 0.5in solid #21e8ac; <div style="color:#ffffff;border: 0.5in solid #21e8ac;
border-radius: 50%;"> border-radius: 50%;">
<img width="300" src="https://media.discordapp.net/attachments/567446061837320203/1013783151803379722/unknown.png?width=1002&height=1002" alt="Fuck blind people."/> <img width="300" src="https://media.discordapp.net/attachments/567446061837320203/1013783151803379722/unknown.png?width=1002&height=1002" alt="Fuck blind people."/>
</div> </div>
<h2 style="color:#ffffff;"> <h2 style="color:#ffffff;">
Watermelon burger Watermelon burger
</h2> </h2>
<p1 style="color:#ffffff;"> <p1 style="color:#ffffff;">
The Watermelon burger game has been the 2nd most popular game of the year. It is a highly detailed cooking game with a horror twist built in it. From the outside of the game, it looks like your everyday average watermelon burger but when you actually play the game... You will not stop until you completely finish the 46 hour playtime. It literally paralises you until you are done with the whole game. The Watermelon burger game has been the 2nd most popular game of the year. It is a highly detailed cooking game with a horror twist built in it. From the outside of the game, it looks like your everyday average watermelon burger but when you actually play the game... You will not stop until you completely finish the 46 hour playtime. It literally paralises you until you are done with the whole game.
</p1> </p1>
<div class="border: 5px solid #FFFF00; <div class="border: 5px solid #FFFF00;
text-align: center;" style="margin: 2in;color:#ffffff;"> text-align: center;" style="margin: 2in;color:#ffffff;">
<ul> <ul>
<li>Bread</li> <li>Bread</li>
<li>Watermelon</li> <li>Watermelon</li>
<li>Beef</li> <li>Beef</li>
<li>Salad</li> <li>Salad</li>
</ul> </ul>
</div> </div>
<div style="border: 0.5in solid #21e8ac; <div style="border: 0.5in solid #21e8ac;
border-radius: 50%;"> border-radius: 50%;">
<img width="450" src="https://wallpaperaccess.com/full/2923420.jpg" alt="Fuck blind people."/> <img width="450" src="https://wallpaperaccess.com/full/2923420.jpg" alt="Fuck blind people."/>
</div> </div>
<h2 style="color:#ffffff;padding-bottom:2in"> <h2 style="color:#ffffff;padding-bottom:2in">
Minecraft girl Minecraft girl
</h2> </h2>
<p1 style="color:#ffffff;"> <p1 style="color:#ffffff;">
Minecraft girl has been the most popular game within the male gaming community. It is a complex plot of an interesting main charecter. Minecraft girl has been the most popular game within the male gaming community. It is a complex plot of an interesting main charecter.
</p1> </p1>
<div class="border: 5px solid #FFFF00; <div class="border: 5px solid #FFFF00;
text-align: center;" style="margin-bottom: 2in;color:#ffffff;"> text-align: center;" style="margin-bottom: 2in;color:#ffffff;">
<ul> <ul>
<li>Good looking eyes</li> <li>Good looking eyes</li>
<li>big boobies</li> <li>big boobies</li>
<li>Horror</li> <li>Horror</li>
<li>big boobies</li> <li>big boobies</li>
<li>Dish washing simulator</li> <li>Dish washing simulator</li>
<li>Big boobies</li> <li>Big boobies</li>
</ul> </ul>
</div> </div>
<p1 style="color:#ffffff;"><strong> <p1 style="color:#ffffff;"><strong>
1.1. Lovforslagets formål 1.1. Lovforslagets formål
Regeringen finder, at Danmark har et ansvar for danske statsborgeres handlinger både herhjemme og i udlandet. Regeringen lægger vægt på, at danske statsborgere ikke lovligt kan flytte strafbare handlinger i form af seksuelt misbrug af børn til udlandet. Også som led i en samlet international indsats mod seksuel udnyttelse af børn i 3. verdenslande finder regeringen derfor, at straffelovens regler om dansk straffemyndighed bør indrettes således, at man ikke kan unddrage sig strafansvar efter danske regler ved at foretage handlingerne under (midlertidige) ophold i et land, hvor forholdene ikke er strafbare. Regeringen finder, at Danmark har et ansvar for danske statsborgeres handlinger både herhjemme og i udlandet. Regeringen lægger vægt på, at danske statsborgere ikke lovligt kan flytte strafbare handlinger i form af seksuelt misbrug af børn til udlandet. Også som led i en samlet international indsats mod seksuel udnyttelse af børn i 3. verdenslande finder regeringen derfor, at straffelovens regler om dansk straffemyndighed bør indrettes således, at man ikke kan unddrage sig strafansvar efter danske regler ved at foretage handlingerne under (midlertidige) ophold i et land, hvor forholdene ikke er strafbare.
Formålet med lovforslaget er således at gøre det muligt at straffe danske statsborgere og herboende udlændinge, der i udlandet foretager seksuel udnyttelse af børn, selv om den pågældende handling ikke er strafbar i det land, hvor den er begået. Formålet med lovforslaget er således at gøre det muligt at straffe danske statsborgere og herboende udlændinge, der i udlandet foretager seksuel udnyttelse af børn, selv om den pågældende handling ikke er strafbar i det land, hvor den er begået.
Lovforslaget har endvi<em style="color:#5f32f3;">dere</em> til formål at sikre, at danske domstole ved strafudmålingen i de sager om seksuel udnyttelse af børn, hvor der efter forslaget ikke stilles krav om dobbelt strafbarhed, ikke skal være bundet af et udenlandsk strafmaksimum, hvis gerningsmanden var dansk statsborger eller bosat her i landet på gerningstidspunktet. Lovforslaget har endvi<em style="color:#5f32f3;">dere</em> til formål at sikre, at danske domstole ved strafudmålingen i de sager om seksuel udnyttelse af børn, hvor der efter forslaget ikke stilles krav om dobbelt strafbarhed, ikke skal være bundet af et udenlandsk strafmaksimum, hvis gerningsmanden var dansk statsborger eller bosat her i landet på gerningstidspunktet.
Lovforslaget bygger på en delbetænkning fra Justitsministeriets Jurisdiktionsudvalg om dansk straffemyndighed i forhold til seksuel udnyttelse af børn i udlandet (betænkning nr. 1470/2006) (herefter kaldet »betænkningen«). Jurisdiktionsudvalget har til opgave at foretage en generel gennemgang af straffelovens bestemmelser om straffemyndighed (jurisdiktion) med henblik på at vurdere, hvorvidt der kan være behov for at foretage ændringer i disse bestemmelser. Efter anmodning fra Justitsministeriet har udvalget i første række koncentreret sig om at afgive en delbetænkning om spørgsmålet om »sex-turisme« og dobbelt strafbarhed i forbindelse hermed. Lovforslaget bygger på en delbetænkning fra Justitsministeriets Jurisdiktionsudvalg om dansk straffemyndighed i forhold til seksuel udnyttelse af børn i udlandet (betænkning nr. 1470/2006) (herefter kaldet »betænkningen«). Jurisdiktionsudvalget har til opgave at foretage en generel gennemgang af straffelovens bestemmelser om straffemyndighed (jurisdiktion) med henblik på at vurdere, hvorvidt der kan være behov for at foretage ændringer i disse bestemmelser. Efter anmodning fra Justitsministeriet har udvalget i første række koncentreret sig om at afgive en delbetænkning om spørgsmålet om »sex-turisme« og dobbelt strafbarhed i forbindelse hermed.
1.2. Hovedtræk af lovforslaget</strong> 1.2. Hovedtræk af lovforslaget</strong>
</p1> </p1>
<div> <div>
<image src="https://c.tenor.com/SCG4zzYwpO0AAAAM/ping%C3%BCi.gif" width=300/> <image src="https://c.tenor.com/SCG4zzYwpO0AAAAM/ping%C3%BCi.gif" width=300/>
</div> </div>
</div> </div>
</body> </body>

93
static/stylesheets/global.css
View File

@ -1,44 +1,51 @@
/* --- FONTS --- */ /* --- FONTS --- */
@font-face { @font-face {
font-family: "CozetteVector"; font-family: "CozetteVector";
src: src:
local("CozetteVector"), local("CozetteVector"),
url("/fonts/CozetteVector.ttf") format("truetype"); url("/fonts/CozetteVector.ttf") format("truetype");
} }
html { @font-face {
background: var(--background1); font-family: "NotoSans";
} src:
local("NotoSans"),
body { url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
font-family: var(--main-font); }
color: var(--text1); /* Default to primary text color. */
background-color: var(--background); html {
margin: 0; background: var(--background1);
} }
a, a:link a:visited { body {
color: var(--text1); font-family: NotoSans, var(--main-font);
text-decoration: none; color: var(--text1); /* Default to primary text color. */
} background-color: var(--background);
margin: 0;
code { }
font-weight: 400;
font-size: 0.9rem; a, a:link a:visited {
line-height: 1.3; color: var(--text1);
letter-spacing: .32px; text-decoration: none;
border-radius: .25rem; }
padding: 0 .5rem;
background-color: #333333; code {
} font-weight: 400;
font-size: 0.9rem;
/* Print-specific styles */ line-height: 1.3;
@media print { letter-spacing: .32px;
.hide-on-print { border-radius: .25rem;
display: none; padding: 0 .5rem;
} background-color: #333333;
} }
.hidden { /* Print-specific styles */
display: none; @media print {
.hide-on-print {
display: none;
}
}
.hidden {
display: none;
} }

26
static/stylesheets/main-theme.css
View File

@ -1,13 +1,13 @@
:root { :root {
--title-font: 'CozetteVector'; --title-font: 'CozetteVector';
--main-font: 'Segoe UI'; --main-font: 'Segoe UI';
--text1: #fff; /* Primary text. */ --text1: #eee; /* Primary text. */
--text2: #cac9c6; /* Secondary text. */ --text2: #cac9c6; /* Secondary text. */
--text3: #b0afad; /* Third text color. */ --text3: #b0afad; /* Third text color. */
--text4: #868584; /* Fourth text color. */ --text4: #868584; /* Fourth text color. */
--background: #232222; --background: #232222;
--background1: #1b1a1a; --background1: #1b1a1a;
--primary: #227c9d; --primary: #227c9d;
--secondary: #ffcb77; --secondary: #ffcb77;
--accent: #17c3b2; --accent: #17c3b2;
} }

38
svelte.config.js
View File

@ -1,19 +1,19 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import adapter from '@sveltejs/adapter-static'; import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
export default { export default {
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: { kit: {
prerender: { prerender: {
handleHttpError: 'fail' handleHttpError: 'fail'
}, },
adapter: adapter({ adapter: adapter({
pages: 'build', pages: 'build',
assets: 'build', assets: 'build',
fallback: undefined, fallback: undefined,
precompress: false, precompress: false,
strict: true strict: true
}) })
} }
}; };

42
tailwind.config.js
View File

@ -1,30 +1,14 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [require("@tailwindcss/typography"), require('daisyui'),], plugins: [require("@tailwindcss/typography"), require('daisyui'),],
daisyui: { daisyui: {
themes: [ themes: [
"light", "forest",
"dark", ],
"synthwave",
"retro", },
"cyberpunk",
"valentine",
"halloween",
"forest",
"aqua",
"black",
"luxury",
"dracula",
"business",
"night",
"coffee",
"dim",
"sunset",
],
},
} }

13
vite.config.js
View File

@ -1,7 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import { imagetools } from '@zerodevx/svelte-img/vite' // https://zerodevx.github.io/svelte-img/
export default defineConfig({
export default defineConfig({ plugins: [sveltekit()],
plugins: [sveltekit(), imagetools()], });
});