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

reimplimented NotoSans font

Browse source
This commit is contained in:
MagicBOTAlex 2025-06-13 21:18:21 +02:00
parent efbaaef915
commit 0405b59ed6
7 changed files with 669 additions and 628 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/app.css
View file

@ -1,6 +1,40 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "daisyui"; @plugin "daisyui";
@plugin "daisyui/theme" {
name: "Deprived";
default: true;
prefersdark: true;
--color-base-100: oklch(14% 0 0);
--color-base-200: oklch(20% 0 0);
--color-base-300: oklch(26% 0 0);
--color-base-content: oklch(97% 0 0);
--color-primary: oklch(72% 0.219 149.579);
--color-primary-content: oklch(98% 0.018 155.826);
--color-secondary: oklch(58% 0.233 277.117);
--color-secondary-content: oklch(96% 0.018 272.314);
--color-accent: oklch(60% 0.25 292.717);
--color-accent-content: oklch(96% 0.016 293.756);
--color-neutral: oklch(20% 0 0);
--color-neutral-content: oklch(98% 0 0);
--color-info: oklch(58% 0.158 241.966);
--color-info-content: oklch(97% 0.013 236.62);
--color-success: oklch(64% 0.2 131.684);
--color-success-content: oklch(98% 0.031 120.757);
--color-warning: oklch(68% 0.162 75.834);
--color-warning-content: oklch(98% 0.026 102.212);
--color-error: oklch(57% 0.245 27.325);
--color-error-content: oklch(97% 0.013 17.38);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
@plugin "daisyui/theme" { @plugin "daisyui/theme" {
name: "dark"; name: "dark";
color-scheme: "dark"; color-scheme: "dark";
@ -34,7 +68,6 @@
--noise: 1; --noise: 1;
} }
@plugin "daisyui/theme" { @plugin "daisyui/theme" {
name: "pink"; name: "pink";
color-scheme: "light"; color-scheme: "light";
@ -68,7 +101,6 @@
--noise: 0; --noise: 0;
} }
@plugin "daisyui/theme" { @plugin "daisyui/theme" {
name: "netherrack"; name: "netherrack";
color-scheme: "dark"; color-scheme: "dark";
@ -138,8 +170,7 @@
.bg-grid-100 { .bg-grid-100 {
background: background:
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
#f2f2f2;
background-size: background-size:
4px 4px, 4px 4px,
4px 4px, 4px 4px,
@ -155,8 +186,7 @@
.bg-grid-200 { .bg-grid-200 {
background: background:
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
#f2f2f2;
background-size: background-size:
4px 4px, 4px 4px,
4px 4px, 4px 4px,
@ -172,8 +202,7 @@
.bg-grid-300 { .bg-grid-300 {
background: background:
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
#f2f2f2;
background-size: background-size:
4px 4px, 4px 4px,
4px 4px, 4px 4px,
@ -185,3 +214,9 @@
80px 80px; 80px 80px;
background-color: var(--color-base-300); background-color: var(--color-base-300);
} }
@media print {
.hide-on-print {
display: none !important;
}
}

33
src/app.html
View file

@ -1,9 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en" data-theme="Green" style="overflow-x: hidden;"> <html lang="en" data-theme="Deprived" style="overflow-x: hidden">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content=" <meta
We are the deprived devs, and we are a team of developers specializing in indie game development, full-stack development, and anything tech-related!"> name="description"
content="
We are the deprived devs, and we are a team of developers specializing in indie game development, full-stack development, and anything tech-related!"
/>
<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" />
@ -14,28 +17,26 @@
<script> <script>
let theme = null; let theme = null;
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== "undefined") {
theme = localStorage.getItem('theme'); theme = localStorage.getItem("theme");
} }
window.AvailableThemes = ["green", "netherrack", "dark", "pink"]; window.AvailableThemes = ["green", "netherrack", "dark", "pink"];
if (!theme) { if (!theme) {
const randomNumber = Math.floor(Math.random() * 4); // const randomNumber = Math.floor(Math.random() * 4);
console.log("Slecting: " + AvailableThemes[randomNumber]); // console.log("Slecting: " + AvailableThemes[randomNumber]);
document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]); // document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
localStorage.setItem('theme', AvailableThemes[randomNumber]); localStorage.setItem("theme", AvailableThemes[0]);
} else {
console.log("Slecting: " + theme);
document.documentElement.setAttribute('data-theme', theme);
} }
//else {
// console.log("Slecting: " + theme);
// document.documentElement.setAttribute('data-theme', theme);
//}
</script> </script>
</head> </head>
<body style="display: contents"> <body style="display: contents">
<div class="inline relative w-full h-full"> <div class="inline relative w-full h-full">%sveltekit.body%</div>
%sveltekit.body%
</div>
</body> </body>
</html> </html>

194
src/routes/+layout.svelte
View file

@ -1,85 +1,98 @@
<!-- 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 "../app.css"; import "../app.css";
const buildTime = __BUILD_TIME__; import { fly } from "svelte/transition";
import MediaQuery from "svelte-media-queries";
import { fly } from 'svelte/transition';
import MediaQuery from 'svelte-media-queries';
import { Dices } from "@lucide/svelte"; import { Dices } from "@lucide/svelte";
let hideOnPrint: boolean; let hideOnPrint: boolean = $state(false);
let { children } = $props(); let { children } = $props();
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";
import svelteLogo from "$lib/svelteLogos/svelte-logo.png" const footerCollapseThreshold: string = "1000px";
const headerCollapseThreshold: string = "1000px";
let footerCollapse: boolean;
let isMobile: boolean = $state(false);
const footerCollapseThreshold : string = '1000px'; let navbarHidden: boolean = $state(true);
const headerCollapseThreshold : string = '1000px';
let footerCollapse : boolean;
let isMobile : boolean;
let navbarHidden : boolean = true;
function resetNavBar() { function resetNavBar() {
navbarHidden = true; navbarHidden = true;
} }
import { afterNavigate } from '$app/navigation'; import { afterNavigate } from "$app/navigation";
afterNavigate(() => { afterNavigate(() => {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
hideOnPrint = params.get('hideOnPrint') === '1'; hideOnPrint = params.get("hideOnPrint") === "1";
//console.log(hideOnPrint); console.log(hideOnPrint);
}); });
import { onMount } from 'svelte'; import { onMount } from "svelte";
import Zooter from "./comps/Zooter.svelte";
onMount(async () => { onMount(async () => {
const lock = document.createElement('meta'); const lock = document.createElement("meta");
lock.name = 'darkreader-lock'; lock.name = "darkreader-lock";
document.head.appendChild(lock); document.head.appendChild(lock);
}); });
function nextTheme(){ function nextTheme() {
let theme: string | null = null; let theme: string | null = null;
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== "undefined") {
theme = localStorage.getItem('theme'); theme = localStorage.getItem("theme");
} }
const themesArr = (window as any).AvailableThemes; const themesArr = (window as any).AvailableThemes;
let nextTheme = "dark"; let nextTheme = "dark";
if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){ if (
theme == "null" ||
theme == "undefined" ||
theme == undefined ||
theme == null
) {
} else { } else {
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length]; nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
} }
console.log("Slecting: " + nextTheme); console.log("Slecting: " + nextTheme);
document.documentElement.setAttribute('data-theme', nextTheme); document.documentElement.setAttribute("data-theme", nextTheme);
localStorage.setItem('theme', nextTheme); localStorage.setItem("theme", nextTheme);
} }
</script> </script>
{#snippet SwitchThemeButton()} {#snippet SwitchThemeButton()}
<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme"> <div
<button class="cursor-pointer" on:click={nextTheme}> <Dices/></button> class="tooltip tooltip-bottom grid place-content-center"
</div> data-tip="Switch theme"
>
<button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
</div>
{/snippet} {/snippet}
<!-- Detect mobile --> <!-- Detect mobile -->
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} /> <MediaQuery
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} /> query="(max-width: {footerCollapseThreshold})"
bind:matches={footerCollapse}
/>
<MediaQuery
query="(max-width: {headerCollapseThreshold})"
bind:matches={isMobile}
/>
<!-- Nav bar --> <!-- Nav bar -->
<div class="bg-base-200 p-0"> <div class=" bg-base-200 p-0">
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300"> <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
<div class="nav-bar pr-4"> <div class="nav-bar pr-4">
{#if !isMobile} {#if !isMobile}
<div class="desktop"> <div class="desktop">
<a href="/" class="nav-head"> <a href="/" class="nav-head">
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> <DeprivedLogo
Class="fill-base-content p-2"
Style="width: 3.5rem; height: auto;"
/>
<!-- <h3 id="logo-text">The Deprived Devs</h3> --> <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
</a> </a>
<div class="nav-spacer" /> <div class="nav-spacer" />
@ -89,32 +102,49 @@
{@render SwitchThemeButton()} {@render SwitchThemeButton()}
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a> <a
href="/zhen/cv/rev2?hideOnPrint=1"
target="_blank"
style="width: 7.5rem;">Zhen CV</a
>
<a href="/tools" style="width: 7.5rem;">Tools</a> <a href="/tools" style="width: 7.5rem;">Tools</a>
<a href="https://botalex.itch.io/" target="_blank">Games</a> <a href="https://botalex.itch.io/" target="_blank">Games</a>
<!-- <a href="/posts">Blog</a> <!-- <a href="/posts">Blog</a>
<a href="/about">About</a> --> <a href="/about">About</a> -->
</div> </div>
{:else} {:else}
<div class="collapsed"> <div class="collapsed shadow-xl">
<a on:click={resetNavBar} href="/" class="nav-head"> <a onclick={resetNavBar} href="/" class="nav-head">
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> <DeprivedLogo
Class="fill-base-content p-2"
Style="width: 3.5rem; height: auto;"
/>
<!-- <h3 id="logo-text">The Deprived Devs</h3> --> <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
</a> </a>
<div class="nav-spacer" /> <div class="nav-spacer" />
{@render SwitchThemeButton()} {@render SwitchThemeButton()}
<div class="px-1"></div> <div class="px-1"></div>
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}> <button
<HamburgerMenuIcon Class="fill-base-content"/> id="toggle-nav"
onclick={() => {
navbarHidden = !navbarHidden;
console.log(navbarHidden);
}}
>
<HamburgerMenuIcon Class="fill-base-content" />
</button> </button>
</div> </div>
{#if !navbarHidden} {#if !navbarHidden}
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}> <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
<!-- <a on:click={resetNavBar} href="/">Home</a> --> <!-- <a onclick={resetNavBar} href="/">Home</a> -->
<a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a> <a
onclick={resetNavBar}
href="https://botalex.itch.io/"
target="_blank">Games</a
>
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a> <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
<!-- <a on:click={resetNavBar} href="/posts">Blog</a> <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
<a on:click={resetNavBar} href="/about">About</a> --> <a onclick={resetNavBar} href="/about">About</a> -->
</div> </div>
{/if} {/if}
{/if} {/if}
@ -124,50 +154,23 @@
<!-- Page content --> <!-- Page content -->
{@render children?.()} {@render children?.()}
<!-- About footer --> <Zooter bind:hideOnPrint />
<div class="{hideOnPrint ? 'hide-on-print' : ''} flex flex-col justify-center pt-8 bg-base-300 mt-8">
<div class="flex justify-center">
<div class="about-container">
<div class="credits">
<span>© 2023-2024</span>
<br>
<span>Benjamin Dreyer</span>
<br>
<span>Oliver Schwenger</span>
<br>
<span>Sylvester Junge</span>
<br>
<span>Snorre Ettrup Altschul</span>
<br>
<span>Zhentao Wei</span>
</div>
<div>
<h3><b>About this website</b></h3>
<!-- <a href="/" target="_blank">Recursion</a> -->
<div class="flex justify-center">
This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
<img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
</div>
<span>Website <a href="https://git.spoodythe.one/sveske-juice/deprived-main-website" target="_blank">source code</a></span>
</div>
<div class="contact">
<h3><b>Contact</b></h3>
<a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
<div class="mt-2"></div>
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
<!-- <span>Discord</span> -->
<img src="/images/icons/discord.svg" alt="Discord"/>
</a>
</div>
</div>
</div>
<div class="flex w-full justify-center border-t border-base-100 border-dashed">
Last build: {buildTime} (+2 UTC)
</div>
</div>
</div> </div>
{#if footerCollapse}
<style>
.about-container {
flex-direction: column;
justify-content: center !important;
gap: 25px;
}
</style>
{/if}
{#if isMobile}
<style>
</style>
{/if}
<style lang="scss"> <style lang="scss">
/* Nav bar. */ /* Nav bar. */
@ -201,7 +204,6 @@
border: none; border: none;
} }
.nav-list { .nav-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -308,26 +310,4 @@
a:hover { a:hover {
filter: brightness(130%); filter: brightness(130%);
} }
@media print {
.hide-on-print {
display: none;
}
}
</style> </style>
{#if footerCollapse}
<style>
.about-container {
flex-direction: column;
justify-content: center !important;
gap: 25px;
}
</style>
{/if}
{#if isMobile}
<style>
</style>
{/if}

18
src/routes/+page.svelte
View file

@ -48,14 +48,14 @@
<title id="TabTittle">We are the DEPRIVED DEVS</title> <title id="TabTittle">We are the DEPRIVED DEVS</title>
<meta content="We are the deprived devs" property="og:title" /> <meta content="We are the deprived devs" property="og:title" />
<meta content="We collaborate to create game, and hopefully more in the future! Wanna join? Hit us up." property="og:description" /> <meta content="We make everything frontend, backend, games, websites, machine learning, whatever. We're just abunch of nerds, and we love it!" property="og:description" />
<meta content={PreviewDeprivedLogo} property="og:image" /> <meta content={PreviewDeprivedLogo} 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="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;"> <div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
<img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/> <img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/>
<div class="main-title m-auto cozette" 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;"> <div class="main-title m-auto cozette" 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;"> <h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9);">
{#if !mobile} {#if !mobile}
Deprived Devs Deprived Devs
{:else} {:else}
@ -109,10 +109,10 @@
</span> </span>
</Profile> </Profile>
<Profile name="Zylvester" tags={["Sound/Story", "Story designer"]} isMobile={mobile}> <Profile name="Zylvester" tags={["Sound/Story", "2D/3D artist"]} isMobile={mobile}>
<span> <span>
<p>Hi, I am [insert text here]</p> <p>Closeted omega weeb</p>
<p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p> <p><a href="https://www.linkedin.com/in/sylvester-junge-0b2a73196/" target="_blank" style="color:lightblue;">Linked-in</a>, <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" style="color:lightblue;">Funny link</a></p>
</span> </span>
</Profile> </Profile>
</div> </div>
@ -158,7 +158,7 @@
<br/> <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> <p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
<div class="card-actions justify-end"> <div class="card-actions justify-end">
<a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-neutral">View on itch.io</a> <a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
</div> </div>
</div> </div>
</div> </div>
@ -180,7 +180,7 @@
<br/> <br/>
<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> <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"> <div class="card-actions justify-end">
<a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-neutral">View on itch.io</a> <a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
</div> </div>
</div> </div>
</div> </div>
@ -202,7 +202,7 @@
<br/> <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> <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"> <div class="card-actions justify-end">
<a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-neutral">View on itch.io</a> <a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
</div> </div>
</div> </div>
</div> </div>
@ -222,7 +222,7 @@
<div class="skeleton h-4 w-full"></div> <div class="skeleton h-4 w-full"></div>
<div class="flex grow"/> <div class="flex grow"/>
<div class="card-actions justify-end"> <div class="card-actions justify-end">
<a href="/" target="_blank" class="btn btn-neutral text-primary-content">RECURSION!</a> <a href="/" target="_blank" class="btn btn-primary text-primary-content text-primary-content">RECURSION!</a>
</div> </div>
</div> </div>
</div> </div>

17
src/routes/zhen/cv/CompsRev2/BottomRightDecor.svelte
View file

@ -2,18 +2,16 @@
export let Style = ""; export let Style = "";
</script> </script>
<div class="container" style="{Style}"> <div class="container" style={Style}>
<div> <div class="w-full flex justify-center">
<div> <div class="text-center"></div>
Thank you! ❤
</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(20.3mm, -5mm) rotate(-45deg);
display: grid; display: grid;
justify-self: end; justify-self: end;
vertical-align: bottom; vertical-align: bottom;
@ -25,7 +23,11 @@
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;
@ -48,3 +50,4 @@
} }
} }
</style> </style>

82
src/routes/zhen/cv/rev2/+page.svelte
View file

@ -1,8 +1,8 @@
<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
@ -22,75 +22,89 @@
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 CV" property="og:title" /> <meta content="Zhentao Wei's CV" property="og:title" />
<meta content="This CV is made completely with svelte + html + css + js" property="og:description" /> <meta
content="This CV is made completely with svelte + 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.
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. The page is designed to be saved as PDF. This can be done by pressing <div
<br/> class="keyboard-key"
<br/> >
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :( P
</div>
+
<div class="keyboard-key">CTRL</div>
, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
<br />
<br />
I have to sadly recommend chrome for this process. Firefox somehow messes with
the quality of the PDF :(
</div> </div>
</div> </div>
<div class="cv-container-container include-in-print"> <div class="NotoSans 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 id="leftSectionSeperator"></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
class="Cozette"
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>
@ -120,7 +134,7 @@
} }
} }
.cv-container-container{ .cv-container-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -154,7 +168,7 @@
overflow: hidden; overflow: hidden;
} }
#left-section{ #left-section {
background-color: #bdd6ee; background-color: #bdd6ee;
width: calc(100% / 3 * 1); width: calc(100% / 3 * 1);
@ -172,7 +186,7 @@
} }
} }
#right-section{ #right-section {
width: calc(100% / 3 * 2); width: calc(100% / 3 * 2);
> div:last-child { > div:last-child {
@ -189,13 +203,13 @@
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%;
@ -227,7 +241,7 @@
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;
} }

24
static/stylesheets/global.css
View file

@ -17,6 +17,10 @@
font-family: "CozetteVector"; font-family: "CozetteVector";
} }
.NotoSans * {
font-family: "NotoSans";
}
/* fuck it */ /* fuck it */
body * { body * {
font-family: "CozetteVector"; font-family: "CozetteVector";
@ -28,10 +32,13 @@ body * {
} }
} }
.include-in-print { &, & * { .include-in-print {
-webkit-print-color-adjust:exact !important; &,
print-color-adjust:exact !important; & * {
}} -webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
html { html {
background: var(--background1); background: var(--background1);
@ -44,7 +51,8 @@ body {
margin: 0; margin: 0;
} }
a, a:link a:visited { a,
a:link a:visited {
color: var(--text1); color: var(--text1);
text-decoration: none; text-decoration: none;
} }
@ -53,9 +61,9 @@ code {
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.3; line-height: 1.3;
letter-spacing: .32px; letter-spacing: 0.32px;
border-radius: .25rem; border-radius: 0.25rem;
padding: 0 .5rem; padding: 0 0.5rem;
background-color: #333333; background-color: #333333;
} }