removed the scroll thing, because i'm too lazy to continue for a while
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 21s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 21s
This commit is contained in:
parent
e3f015d4b3
commit
e65b6c97c6
2 changed files with 501 additions and 481 deletions
|
|
@ -1,291 +1,319 @@
|
||||||
<!-- 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";
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from "svelte/transition";
|
||||||
import MediaQuery from 'svelte-media-queries';
|
import MediaQuery from "svelte-media-queries";
|
||||||
import { Dices } from "@lucide/svelte";
|
import { Dices } from "@lucide/svelte";
|
||||||
let hideOnPrint: boolean;
|
let hideOnPrint: boolean;
|
||||||
|
|
||||||
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";
|
||||||
|
|
||||||
const footerCollapseThreshold : string = '1000px';
|
const footerCollapseThreshold: string = "1000px";
|
||||||
const headerCollapseThreshold : string = '1000px';
|
const headerCollapseThreshold: string = "1000px";
|
||||||
let footerCollapse : boolean;
|
let footerCollapse: boolean;
|
||||||
let isMobile : boolean = $state(false);
|
let isMobile: boolean = $state(false);
|
||||||
|
|
||||||
let navbarHidden : boolean = $state(true);
|
let navbarHidden: boolean = $state(true);
|
||||||
|
|
||||||
function resetNavBar() {
|
function resetNavBar() {
|
||||||
navbarHidden = true;
|
navbarHidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
import { afterNavigate } from "$app/navigation";
|
||||||
|
afterNavigate(() => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
hideOnPrint = params.get("hideOnPrint") === "1";
|
||||||
|
//console.log(hideOnPrint);
|
||||||
|
});
|
||||||
|
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
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';
|
) {
|
||||||
import Zooter from "./comps/Zooter.svelte";
|
} else {
|
||||||
|
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
|
||||||
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');
|
|
||||||
}
|
|
||||||
|
|
||||||
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" onclick={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 shadow-xl">
|
|
||||||
<a onclick={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" onclick={() => {navbarHidden = !navbarHidden; console.log(navbarHidden);}}>
|
|
||||||
<HamburgerMenuIcon Class="fill-base-content"/>
|
|
||||||
</button>
|
|
||||||
</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>
|
{:else}
|
||||||
|
<div class="collapsed shadow-xl">
|
||||||
<!-- Page content -->
|
<a onclick={resetNavBar} href="/" class="nav-head">
|
||||||
{@render children?.()}
|
<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"
|
||||||
|
onclick={() => {
|
||||||
|
navbarHidden = !navbarHidden;
|
||||||
|
console.log(navbarHidden);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HamburgerMenuIcon Class="fill-base-content" />
|
||||||
|
</button>
|
||||||
|
</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>
|
||||||
|
</header>
|
||||||
|
|
||||||
<Zooter bind:hideOnPrint/>
|
<!-- 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%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.hide-on-print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,268 +1,260 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
|
import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
|
||||||
import { browser } from "$app/environment";
|
import { browser } from "$app/environment";
|
||||||
import { onDestroy, onMount } from "svelte";
|
import { onDestroy, onMount } from "svelte";
|
||||||
import { ArrowBigDown } from "lucide-svelte";
|
import { ArrowBigDown } from "lucide-svelte";
|
||||||
import { fly } from "svelte/transition";
|
import { fly } from "svelte/transition";
|
||||||
const buildTime = __BUILD_TIME__;
|
const buildTime = __BUILD_TIME__;
|
||||||
|
|
||||||
let scrollY = 0;
|
let scrollY = 0;
|
||||||
const unscrollSpeed = 100;
|
const unscrollSpeed = 100;
|
||||||
let unscrollScrollDiv: HTMLDivElement;
|
let unscrollScrollDiv: HTMLDivElement;
|
||||||
let totalScroll = 0;
|
let totalScroll = 0;
|
||||||
|
|
||||||
let unscrollInterval: number | undefined = undefined;
|
let unscrollInterval: number | undefined = undefined;
|
||||||
let lastScrollTime = 0; // Used to have delay before unscrolling
|
let lastScrollTime = 0; // Used to have delay before unscrolling
|
||||||
let isBeingTouched = false; // Phone support
|
let isBeingTouched = false; // Phone support
|
||||||
const unscrollDelay = 100;
|
const unscrollDelay = 100;
|
||||||
|
|
||||||
let isLeavingAnimating = false;
|
let isLeavingAnimating = false;
|
||||||
|
|
||||||
// prevent direct scroll
|
// prevent direct scroll
|
||||||
let notFirstScroll = false;
|
let notFirstScroll = false;
|
||||||
|
|
||||||
let tranisitionOverlay: HTMLElement;
|
let tranisitionOverlay: HTMLElement;
|
||||||
|
|
||||||
// Function with more scroll control, by chatgpt
|
// Function with more scroll control, by chatgpt
|
||||||
function smoothScrollTo(targetY: number, duration: number = 500): void {
|
function smoothScrollTo(targetY: number, duration: number = 500): void {
|
||||||
const startY: number = window.scrollY;
|
const startY: number = window.scrollY;
|
||||||
const diff: number = targetY - startY;
|
const diff: number = targetY - startY;
|
||||||
|
|
||||||
if (duration <= 0) {
|
if (duration <= 0) {
|
||||||
window.scrollTo(0, targetY);
|
window.scrollTo(0, targetY);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let startTime: number | null = null;
|
let startTime: number | null = null;
|
||||||
|
|
||||||
function step(timestamp: number): void {
|
function step(timestamp: number): void {
|
||||||
if (startTime === null) startTime = timestamp;
|
if (startTime === null) startTime = timestamp;
|
||||||
const time = timestamp - startTime;
|
const time = timestamp - startTime;
|
||||||
const percent = Math.min(time / duration, 1);
|
const percent = Math.min(time / duration, 1);
|
||||||
|
|
||||||
// easeInOutQuad easing
|
// easeInOutQuad easing
|
||||||
const ease =
|
const ease =
|
||||||
percent < 0.5
|
percent < 0.5
|
||||||
? 2 * percent * percent
|
? 2 * percent * percent
|
||||||
: -1 + (4 - 2 * percent) * percent;
|
: -1 + (4 - 2 * percent) * percent;
|
||||||
|
|
||||||
window.scrollTo(0, startY + diff * ease);
|
window.scrollTo(0, startY + diff * ease);
|
||||||
|
|
||||||
if (time < duration) {
|
|
||||||
requestAnimationFrame(step);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (time < duration) {
|
||||||
requestAnimationFrame(step);
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Out animation:
|
requestAnimationFrame(step);
|
||||||
function flyInFromTop(
|
}
|
||||||
node: HTMLElement,
|
|
||||||
{
|
|
||||||
y = -window.innerHeight,
|
|
||||||
duration = 400,
|
|
||||||
opacity = 0,
|
|
||||||
}: { y?: number; duration?: number; opacity?: number } = {},
|
|
||||||
) {
|
|
||||||
const {
|
|
||||||
delay = 0,
|
|
||||||
duration: d,
|
|
||||||
easing = (t) => t,
|
|
||||||
css,
|
|
||||||
} = fly(node, { y, duration: d, opacity });
|
|
||||||
|
|
||||||
let start: number;
|
// Out animation:
|
||||||
function step(now: number) {
|
function flyInFromTop(
|
||||||
if (!start) start = now;
|
node: HTMLElement,
|
||||||
const elapsed = now - start - delay;
|
{
|
||||||
if (elapsed < 0) return requestAnimationFrame(step);
|
y = -window.innerHeight,
|
||||||
const t = Math.min(elapsed / d, 1);
|
duration = 400,
|
||||||
if (css) node.style.cssText = css(easing(t), 1 - easing(t));
|
opacity = 0,
|
||||||
if (elapsed < d) requestAnimationFrame(step);
|
}: { y?: number; duration?: number; opacity?: number } = {},
|
||||||
}
|
) {
|
||||||
requestAnimationFrame(step);
|
const {
|
||||||
|
delay = 0,
|
||||||
|
duration: d,
|
||||||
|
easing = (t) => t,
|
||||||
|
css,
|
||||||
|
} = fly(node, { y, duration: d, opacity });
|
||||||
|
|
||||||
|
let start: number;
|
||||||
|
function step(now: number) {
|
||||||
|
if (!start) start = now;
|
||||||
|
const elapsed = now - start - delay;
|
||||||
|
if (elapsed < 0) return requestAnimationFrame(step);
|
||||||
|
const t = Math.min(elapsed / d, 1);
|
||||||
|
if (css) node.style.cssText = css(easing(t), 1 - easing(t));
|
||||||
|
if (elapsed < d) requestAnimationFrame(step);
|
||||||
}
|
}
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
totalScroll =
|
return; // Fuck this, I'm too lazy to fix this atm
|
||||||
document.documentElement.scrollHeight - window.innerHeight;
|
totalScroll = document.documentElement.scrollHeight - window.innerHeight;
|
||||||
|
|
||||||
unscrollInterval = setInterval(() => {
|
unscrollInterval = setInterval(() => {
|
||||||
// Prevents scroll to bottom on first try
|
// Prevents scroll to bottom on first try
|
||||||
if (
|
if (
|
||||||
!notFirstScroll &&
|
!notFirstScroll &&
|
||||||
scrollY > totalScroll - unscrollScrollDiv.scrollHeight
|
scrollY > totalScroll - unscrollScrollDiv.scrollHeight
|
||||||
) {
|
) {
|
||||||
smoothScrollTo(
|
smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight * 1.1, 0);
|
||||||
totalScroll - unscrollScrollDiv.scrollHeight * 1.1,
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
|
|
||||||
// Allow further scroll after delay
|
// Allow further scroll after delay
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
notFirstScroll = true;
|
notFirstScroll = true;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
|
// console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
|
||||||
// console.log(isBeingTouched);
|
// console.log(isBeingTouched);
|
||||||
if (
|
if (
|
||||||
!notFirstScroll ||
|
!notFirstScroll ||
|
||||||
isBeingTouched ||
|
isBeingTouched ||
|
||||||
Date.now() < lastScrollTime - -unscrollDelay
|
Date.now() < lastScrollTime - -unscrollDelay
|
||||||
) {
|
) {
|
||||||
// console.log("nah");
|
// console.log("nah");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
|
if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
|
||||||
smoothScrollTo(
|
smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
|
||||||
totalScroll - unscrollScrollDiv.scrollHeight,
|
}
|
||||||
200,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (totalScroll <= scrollY) {
|
if (totalScroll <= scrollY) {
|
||||||
console.log("Hit!");
|
console.log("Hit!");
|
||||||
// isLeavingAnimating = true;
|
// isLeavingAnimating = true;
|
||||||
flyInFromTop(tranisitionOverlay, { duration: 800 });
|
flyInFromTop(tranisitionOverlay, { duration: 800 });
|
||||||
}
|
}
|
||||||
}, 10);
|
}, 10);
|
||||||
});
|
});
|
||||||
|
|
||||||
function onScroll() {
|
function onScroll() {
|
||||||
lastScrollTime = Date.now();
|
lastScrollTime = Date.now();
|
||||||
// console.log("scroll");
|
// console.log("scroll");
|
||||||
}
|
}
|
||||||
|
|
||||||
function onResize() {
|
function onResize() {
|
||||||
totalScroll =
|
totalScroll = document.documentElement.scrollHeight - window.innerHeight;
|
||||||
document.documentElement.scrollHeight - window.innerHeight;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
clearInterval(unscrollInterval);
|
clearInterval(unscrollInterval);
|
||||||
});
|
});
|
||||||
|
|
||||||
export let hideOnPrint: boolean;
|
export let hideOnPrint: boolean;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window
|
<svelte:window
|
||||||
bind:scrollY
|
bind:scrollY
|
||||||
on:scroll={() => {
|
on:scroll={() => {
|
||||||
onScroll();
|
onScroll();
|
||||||
}}
|
}}
|
||||||
on:touchstart={() => {
|
on:touchstart={() => {
|
||||||
isBeingTouched = true;
|
isBeingTouched = true;
|
||||||
}}
|
}}
|
||||||
on:touchend={() => {
|
on:touchend={() => {
|
||||||
isBeingTouched = false;
|
isBeingTouched = false;
|
||||||
}}
|
}}
|
||||||
on:resize={onResize}
|
on:resize={onResize}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<!-- Keep scrolling thing -->
|
<!-- Keep scrolling thing -->
|
||||||
<div
|
<div class="hidden h-64 w-full flex flex-col justify-center items-center">
|
||||||
class="h-64 w-full flex flex-col justify-center items-center"
|
<div>Keep scrolling to veiw Zhen's portfolio site!</div>
|
||||||
>
|
<div class="flex justify-center">
|
||||||
<div>Keep scrolling to veiw Zhen's portfolio site!</div>
|
<ArrowBigDown />
|
||||||
<div class="flex justify-center">
|
<ArrowBigDown />
|
||||||
<ArrowBigDown />
|
<ArrowBigDown />
|
||||||
<ArrowBigDown />
|
<ArrowBigDown />
|
||||||
<ArrowBigDown />
|
|
||||||
<ArrowBigDown />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="h-64 w-full flex flex-col justify-end items-center"
|
<div
|
||||||
bind:this={unscrollScrollDiv}
|
class="hidden h-64 w-full flex flex-col justify-end items-center"
|
||||||
>
|
bind:this={unscrollScrollDiv}
|
||||||
<img
|
>
|
||||||
src="/images/memes/WhatDaDog.png"
|
<img
|
||||||
class="w-32 h-32 object-contain"
|
src="/images/memes/WhatDaDog.png"
|
||||||
alt="da dog"
|
class="w-32 h-32 object-contain"
|
||||||
/>
|
alt="da dog"
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- About footer -->
|
<!-- About footer -->
|
||||||
<div
|
<div
|
||||||
class="{hideOnPrint
|
class="{hideOnPrint
|
||||||
? 'hide-on-print'
|
? 'hide-on-print'
|
||||||
: ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
|
: ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
|
||||||
>
|
>
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<div class="grid gap-8 sm:grid-cols-3 items-center w-full">
|
<div class="grid gap-8 sm:grid-cols-3 items-center w-full">
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<span class="font-bold">© 2023-2025</span>
|
<span class="font-bold">© 2023-2025</span>
|
||||||
<br />
|
<br />
|
||||||
<span>Benjamin Dreyer</span>
|
<span>Benjamin Dreyer</span>
|
||||||
<br />
|
<br />
|
||||||
<span>Oliver Schwenger</span>
|
<span>Oliver Schwenger</span>
|
||||||
<br />
|
<br />
|
||||||
<span>Sylvester Junge</span>
|
<span>Sylvester Junge</span>
|
||||||
<br />
|
<br />
|
||||||
<span>Snorre Ettrup Altschul</span>
|
<span>Snorre Ettrup Altschul</span>
|
||||||
<br />
|
<br />
|
||||||
<span>Zhentao Wei</span>
|
<span>Zhentao Wei</span>
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<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: 1.5rem;"
|
|
||||||
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="flex flex-col items-center">
|
|
||||||
<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"
|
|
||||||
class="w-8 h-8 object-contain"
|
|
||||||
alt="Discord"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="flex flex-col items-center">
|
||||||
class="flex w-full justify-center border-t border-base-100 border-dashed"
|
<h3><b>About this website</b></h3>
|
||||||
>
|
<!-- <a href="/" target="_blank">Recursion</a> -->
|
||||||
Last build: {buildTime} (+2 UTC)
|
<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: 1.5rem;"
|
||||||
|
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>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<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"
|
||||||
|
class="w-8 h-8 object-contain"
|
||||||
|
alt="Discord"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
bind:this={tranisitionOverlay}
|
bind:this={tranisitionOverlay}
|
||||||
class="{isLeavingAnimating
|
class="{isLeavingAnimating
|
||||||
? ''
|
? ''
|
||||||
: 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
|
: 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
|
||||||
></div>
|
></div>
|
||||||
<!-- {#if isLeavingAnimating}
|
<!-- {#if isLeavingAnimating}
|
||||||
{/if} -->
|
{/if} -->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue