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;
}
}

67
src/app.html
View file

@ -1,41 +1,42 @@
<!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"
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> content="
<meta name="viewport" content="width=device-width, initial-scale=1" /> 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" />
<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/global.css" /> <link rel="stylesheet" href="/stylesheets/global.css" />
%sveltekit.head% %sveltekit.head%
<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); //else {
document.documentElement.setAttribute('data-theme', theme); // console.log("Slecting: " + theme);
} // document.documentElement.setAttribute('data-theme', theme);
</script> //}
</script>
</head>
</head> <body style="display: contents">
<div class="inline relative w-full h-full">%sveltekit.body%</div>
<body style="display: contents"> </body>
<div class="inline relative w-full h-full">
%sveltekit.body%
</div>
</body>
</html> </html>

578
src/routes/+layout.svelte
View file

@ -1,333 +1,313 @@
<!-- 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 { Dices } from "@lucide/svelte";
let hideOnPrint: boolean = $state(false);
import { fly } from 'svelte/transition'; let { children } = $props();
import MediaQuery from 'svelte-media-queries';
import { Dices } from "@lucide/svelte";
let hideOnPrint: boolean;
let { children } = $props(); import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte"; const footerCollapseThreshold: string = "1000px";
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte"; const headerCollapseThreshold: string = "1000px";
let footerCollapse: boolean;
let isMobile: boolean = $state(false);
import svelteLogo from "$lib/svelteLogos/svelte-logo.png" let navbarHidden: boolean = $state(true);
const footerCollapseThreshold : string = '1000px'; function resetNavBar() {
const headerCollapseThreshold : string = '1000px'; navbarHidden = true;
let footerCollapse : boolean; }
let isMobile : boolean;
let navbarHidden : boolean = true; import { afterNavigate } from "$app/navigation";
afterNavigate(() => {
const params = new URLSearchParams(window.location.search);
hideOnPrint = params.get("hideOnPrint") === "1";
console.log(hideOnPrint);
});
function resetNavBar() { import { onMount } from "svelte";
navbarHidden = true; import Zooter from "./comps/Zooter.svelte";
onMount(async () => {
const lock = document.createElement("meta");
lock.name = "darkreader-lock";
document.head.appendChild(lock);
});
function nextTheme() {
let theme: string | null = null;
if (typeof localStorage !== "undefined") {
theme = localStorage.getItem("theme");
} }
import { afterNavigate } from '$app/navigation'; const themesArr = (window as any).AvailableThemes;
afterNavigate(() => { let nextTheme = "dark";
const params = new URLSearchParams(window.location.search); if (
hideOnPrint = params.get('hideOnPrint') === '1'; theme == "null" ||
//console.log(hideOnPrint); theme == "undefined" ||
}); theme == undefined ||
theme == null
import { onMount } from 'svelte'; ) {
} else {
onMount(async () => { nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
const lock = document.createElement('meta');
lock.name = 'darkreader-lock';
document.head.appendChild(lock);
});
function nextTheme(){
let theme: string | null = null;
if (typeof localStorage !== 'undefined') {
theme = localStorage.getItem('theme');
}
const themesArr = (window as any).AvailableThemes;
let nextTheme = "dark";
if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
} else {
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
}
console.log("Slecting: " + nextTheme);
document.documentElement.setAttribute('data-theme', nextTheme);
localStorage.setItem('theme', nextTheme);
} }
console.log("Slecting: " + nextTheme);
document.documentElement.setAttribute("data-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
<!-- <h3 id="logo-text">The Deprived Devs</h3> --> Class="fill-base-content p-2"
</a> Style="width: 3.5rem; height: auto;"
<div class="nav-spacer" /> />
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
</a>
<div class="nav-spacer" />
<!-- <a href="/">Home</a> --> <!-- <a href="/">Home</a> -->
<!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> --> <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
{@render SwitchThemeButton()} {@render SwitchThemeButton()}
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a> <a
<a href="/tools" style="width: 7.5rem;">Tools</a> href="/zhen/cv/rev2?hideOnPrint=1"
<a href="https://botalex.itch.io/" target="_blank">Games</a> target="_blank"
<!-- <a href="/posts">Blog</a> style="width: 7.5rem;">Zhen CV</a
>
<a href="/tools" style="width: 7.5rem;">Tools</a>
<a href="https://botalex.itch.io/" target="_blank">Games</a>
<!-- <a href="/posts">Blog</a>
<a href="/about">About</a> --> <a href="/about">About</a> -->
</div>
{:else}
<div class="collapsed">
<a on:click={resetNavBar} href="/" class="nav-head">
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
</a>
<div class="nav-spacer" />
{@render SwitchThemeButton()}
<div class="px-1"></div>
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
<HamburgerMenuIcon Class="fill-base-content"/>
</button>
</div>
{#if !navbarHidden}
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
<!-- <a on:click={resetNavBar} href="/">Home</a> -->
<a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
<a on:click={resetNavBar} href="/about">About</a> -->
</div>
{/if}
{/if}
</div> </div>
</header> {:else}
<div class="collapsed shadow-xl">
<!-- Page content --> <a onclick={resetNavBar} href="/" class="nav-head">
{@render children?.()} <DeprivedLogo
Class="fill-base-content p-2"
<!-- About footer --> Style="width: 3.5rem; height: auto;"
<div class="{hideOnPrint ? 'hide-on-print' : ''} flex flex-col justify-center pt-8 bg-base-300 mt-8"> />
<div class="flex justify-center"> <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
<div class="about-container"> </a>
<div class="credits"> <div class="nav-spacer" />
<span>© 2023-2024</span> {@render SwitchThemeButton()}
<br> <div class="px-1"></div>
<span>Benjamin Dreyer</span> <button
<br> id="toggle-nav"
<span>Oliver Schwenger</span> onclick={() => {
<br> navbarHidden = !navbarHidden;
<span>Sylvester Junge</span> console.log(navbarHidden);
<br> }}
<span>Snorre Ettrup Altschul</span> >
<br> <HamburgerMenuIcon Class="fill-base-content" />
<span>Zhentao Wei</span> </button>
</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>
{#if !navbarHidden}
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
<!-- <a onclick={resetNavBar} href="/">Home</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 onclick={resetNavBar} href="/posts">Blog</a>
<a onclick={resetNavBar} href="/about">About</a> -->
</div>
{/if}
{/if}
</div> </div>
</header>
<!-- Page content -->
{@render children?.()}
<Zooter bind:hideOnPrint />
</div> </div>
<style lang="scss">
/* Nav bar. */
header {
display: flex;
justify-content: center;
}
header a {
text-decoration: none;
}
.nav-bar {
width: 100%;
max-width: 1400px;
}
.desktop {
width: 100%;
display: flex;
gap: 30px;
}
.collapsed {
width: 100%;
display: flex;
}
#toggle-nav {
background: transparent;
border: none;
}
.nav-list {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.nav-head {
display: flex;
align-items: center;
gap: 10px;
}
#logo-link {
width: 64px;
aspect-ratio: 1 / 1;
}
#logo-text {
font-size: 24px;
color: oklch(var(--bc));
font-family: var(--title-font);
margin: 0;
min-width: 200px;
}
.nav-spacer {
width: 100%;
}
header a {
display: flex;
align-items: center;
font-size: 22px;
font-family: var(--title-font);
// Text color
color: oklch(var(--bc));
}
/* Footer. */
footer {
margin-top: 50px;
padding: 25px 0;
background-color: oklch(var(--b3));
height: 100%;
display: flex;
justify-content: center;
}
.about-container {
width: 80%;
height: 100%;
color: oklch(var(--bc));
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
& h3 {
font-size: larger;
}
}
.about-container > div {
align-items: center;
text-align: center;
}
.credits {
line-height: 2;
}
.contact {
display: flex;
flex-direction: column;
}
.social {
display: flex;
align-content: center;
gap: 10px;
}
.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} {#if footerCollapse}
<style> <style>
.about-container { .about-container {
flex-direction: column; flex-direction: column;
justify-content: center !important; justify-content: center !important;
gap: 25px; gap: 25px;
} }
</style> </style>
{/if} {/if}
{#if isMobile} {#if isMobile}
<style> <style>
</style>
</style>
{/if} {/if}
<style lang="scss">
/* Nav bar. */
header {
display: flex;
justify-content: center;
}
header a {
text-decoration: none;
}
.nav-bar {
width: 100%;
max-width: 1400px;
}
.desktop {
width: 100%;
display: flex;
gap: 30px;
}
.collapsed {
width: 100%;
display: flex;
}
#toggle-nav {
background: transparent;
border: none;
}
.nav-list {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.nav-head {
display: flex;
align-items: center;
gap: 10px;
}
#logo-link {
width: 64px;
aspect-ratio: 1 / 1;
}
#logo-text {
font-size: 24px;
color: oklch(var(--bc));
font-family: var(--title-font);
margin: 0;
min-width: 200px;
}
.nav-spacer {
width: 100%;
}
header a {
display: flex;
align-items: center;
font-size: 22px;
font-family: var(--title-font);
// Text color
color: oklch(var(--bc));
}
/* Footer. */
footer {
margin-top: 50px;
padding: 25px 0;
background-color: oklch(var(--b3));
height: 100%;
display: flex;
justify-content: center;
}
.about-container {
width: 80%;
height: 100%;
color: oklch(var(--bc));
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
& h3 {
font-size: larger;
}
}
.about-container > div {
align-items: center;
text-align: center;
}
.credits {
line-height: 2;
}
.contact {
display: flex;
flex-direction: column;
}
.social {
display: flex;
align-content: center;
gap: 10px;
}
.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%);
}
</style>

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>

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

@ -1,50 +1,53 @@
<script> <script>
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;
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(
background-position: top; to right,
background-size: 6mm 1.5mm; #4472c4 70%,
background-repeat: repeat-x; rgba(255, 255, 255, 0) 0%
} );
background-position: top;
> div:nth-child(2) { background-size: 6mm 1.5mm;
background-color: #2f5496; background-repeat: repeat-x;
width: 100mm;
height: 25mm;
// Text
display: grid;
place-content: center;
align-content: flex-start;
> div {
padding-top: 3.5mm;
color: #4a7bcf;
font-weight: bold;
}
}
} }
> div:nth-child(2) {
background-color: #2f5496;
width: 100mm;
height: 25mm;
// Text
display: grid;
place-content: center;
align-content: flex-start;
> div {
padding-top: 3.5mm;
color: #4a7bcf;
font-weight: bold;
}
}
}
</style> </style>

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

@ -1,243 +1,257 @@
<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 {
const date = new Date();
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();
return `${day}-${month}-${year}`;
} }
})
function getFormattedDate(): string {
const date = new Date();
const day = String(date.getDate()).padStart(2, "0");
const month = String(date.getMonth() + 1).padStart(2, "0");
const year = date.getFullYear();
return `${day}-${month}-${year}`;
}
</script> </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>
+
<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 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 id="leftSectionSeperator"></div>
<div id="right-section">
<AlexWatermark Style="pointer-events: none;"/>
<div id="TopRightSkillsText">
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
</div>
<div id="Credit">
<LinkToSource/>
</div>
<div>
<Profile/>
<BiggestFlex/>
<TableOfProjects/>
<Experience/>
<Education/>
</div>
</div>
</div> </div>
<div id="leftSectionSeperator"></div>
<div id="right-section">
<AlexWatermark Style="pointer-events: none;" />
<div id="TopRightSkillsText">
<RepeatedSkills
class="Cozette"
targetTextHeight={30}
targetTextWidth={75}
/>
</div>
<div id="Credit">
<LinkToSource />
</div>
<div>
<Profile/>
<BiggestFlex />
<TableOfProjects />
<Experience />
<Education />
</div>
</div>
</div>
</div> </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 {
width: 80%;
height: 60%;
}
} }
.cv-container-container{ > div {
width: 80%;
height: 60%;
}
}
.cv-container-container {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.cv-container-container * {
color: black; // Set all text black
}
.cv-container {
width: 210mm;
height: 297mm;
background-color: #eeeeee;
overflow: visible;
display: flex;
padding: auto;
}
.sections {
// Shared between sections
> div {
display: grid;
z-index: 0;
// Needed to cuttoff the extra decoration
position: relative;
overflow: hidden;
}
#left-section {
background-color: #bdd6ee;
width: calc(100% / 3 * 1);
> div:last-child {
z-index: 1;
width: 100%; width: 100%;
height: 100%;
left: 0;
display: grid; display: grid;
place-items: center; place-items: center;
}
.cv-container-container * { padding-top: 30mm;
color: black; // Set all text black padding-bottom: 30mm;
}
.cv-container {
width: 210mm;
height: 297mm;
background-color: #eeeeee;
overflow: visible;
display: flex;
padding: auto;
}
.sections {
// Shared between sections
> div {
display: grid;
z-index: 0;
// Needed to cuttoff the extra decoration
position: relative;
overflow: hidden;
}
#left-section{
background-color: #bdd6ee;
width: calc(100% / 3 * 1);
> div:last-child {
z-index: 1;
width: 100%;
left: 0;
display: grid;
place-items: center;
padding-top: 30mm;
padding-bottom: 30mm;
}
}
#right-section{
width: calc(100% / 3 * 2);
> div:last-child {
z-index: 1;
width: 100%;
left: 0;
display: grid;
place-items: center;
row-gap: 6mm;
padding-top: 45mm;
padding-bottom: 30mm;
// Disable interactivity for padding
pointer-events:none;
}
}
}
.decorations {
#leftSectionSeperator{
position: relative;
height: 100%;
width: 0%;
z-index: 1;
overflow: visible;
> div {
position: absolute;
height: 100%;
width: 5mm;
z-index: 1;
background: linear-gradient(90deg, #3636364f, #00000000);
}
}
> div {
#TopRightSkillsText {
position: absolute;
z-index: 0;
display: grid;
place-items: center;
vertical-align: top;
width: 100%;
place-content: center;
padding: 0;
height: 50mm;
mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
color: rgb(190, 190, 190);
font-family: 'CozetteVector';
font-size: x-large;
}
#Credit {
position: absolute;
z-index: 0;
display: flex;
align-self: flex-end;
}
} }
} }
#right-section {
width: calc(100% / 3 * 2);
> div:last-child {
z-index: 1;
width: 100%;
left: 0;
display: grid;
place-items: center;
row-gap: 6mm;
padding-top: 45mm;
padding-bottom: 30mm;
// Disable interactivity for padding
pointer-events: none;
}
}
}
.decorations {
#leftSectionSeperator {
position: relative;
height: 100%;
width: 0%;
z-index: 1;
overflow: visible;
> div {
position: absolute;
height: 100%;
width: 5mm;
z-index: 1;
background: linear-gradient(90deg, #3636364f, #00000000);
}
}
> div {
#TopRightSkillsText {
position: absolute;
z-index: 0;
display: grid;
place-items: center;
vertical-align: top;
width: 100%;
place-content: center;
padding: 0;
height: 50mm;
mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
color: rgb(190, 190, 190);
font-family: "CozetteVector";
font-size: x-large;
}
#Credit {
position: absolute;
z-index: 0;
display: flex;
align-self: flex-end;
}
}
}
</style> </style>

64
static/stylesheets/global.css
View file

@ -14,58 +14,66 @@
} }
.cozette * { .cozette * {
font-family: "CozetteVector"; font-family: "CozetteVector";
}
.NotoSans * {
font-family: "NotoSans";
} }
/* fuck it */ /* fuck it */
body * { body * {
font-family: "CozetteVector"; font-family: "CozetteVector";
} }
@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; &,
print-color-adjust:exact !important; & * {
}} -webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
html { html {
background: var(--background1); background: var(--background1);
} }
body { body {
font-family: NotoSans, var(--main-font); font-family: NotoSans, var(--main-font);
color: var(--text1); /* Default to primary text color. */ color: var(--text1); /* Default to primary text color. */
background-color: var(--background); background-color: var(--background);
margin: 0; margin: 0;
} }
a, a:link a:visited { a,
color: var(--text1); a:link a:visited {
text-decoration: none; color: var(--text1);
text-decoration: none;
} }
code { 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;
} }
/* Print-specific styles */ /* Print-specific styles */
@media print { @media print {
.hide-on-print { .hide-on-print {
display: none; display: none;
} }
} }
.hidden { .hidden {
display: none; display: none;
} }