source code location updated. and something else but too drunk lol
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
f1a8ccd319
commit
e3f015d4b3
1 changed files with 146 additions and 47 deletions
|
|
@ -1,23 +1,27 @@
|
|||
<script lang="ts">
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
import { browser } from '$app/environment';
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
|
||||
import { browser } from "$app/environment";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import { ArrowBigDown } from "lucide-svelte";
|
||||
import { fly } from "svelte/transition";
|
||||
const buildTime = __BUILD_TIME__;
|
||||
|
||||
|
||||
let scrollY = 0;
|
||||
const unscrollSpeed = 100;
|
||||
let unscrollScrollDiv: HTMLDivElement;
|
||||
let totalScroll = 0;
|
||||
|
||||
let unscrollInterval: number |undefined = undefined;
|
||||
|
||||
let unscrollInterval: number | undefined = undefined;
|
||||
let lastScrollTime = 0; // Used to have delay before unscrolling
|
||||
let isBeingTouched = false; // Phone support
|
||||
const unscrollDelay = 100;
|
||||
|
||||
let isLeavingAnimating = false;
|
||||
|
||||
// prevent direct scroll
|
||||
let notFirstScroll = false;
|
||||
|
||||
let tranisitionOverlay: HTMLElement;
|
||||
|
||||
// Function with more scroll control, by chatgpt
|
||||
function smoothScrollTo(targetY: number, duration: number = 500): void {
|
||||
|
|
@ -37,29 +41,63 @@
|
|||
const percent = Math.min(time / duration, 1);
|
||||
|
||||
// easeInOutQuad easing
|
||||
const ease = percent < 0.5
|
||||
? 2 * percent * percent
|
||||
: -1 + (4 - 2 * percent) * percent;
|
||||
const ease =
|
||||
percent < 0.5
|
||||
? 2 * percent * percent
|
||||
: -1 + (4 - 2 * percent) * percent;
|
||||
|
||||
window.scrollTo(0, startY + diff * ease);
|
||||
|
||||
if (time < duration) {
|
||||
requestAnimationFrame(step);
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
// Out animation:
|
||||
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 });
|
||||
|
||||
onMount(()=>{
|
||||
totalScroll = document.documentElement.scrollHeight - window.innerHeight
|
||||
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(() => {
|
||||
totalScroll =
|
||||
document.documentElement.scrollHeight - window.innerHeight;
|
||||
|
||||
unscrollInterval = setInterval(() => {
|
||||
|
||||
// Prevents scroll to bottom on first try
|
||||
if (!notFirstScroll && scrollY > totalScroll - unscrollScrollDiv.scrollHeight){
|
||||
smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight*1.1, 0);
|
||||
if (
|
||||
!notFirstScroll &&
|
||||
scrollY > totalScroll - unscrollScrollDiv.scrollHeight
|
||||
) {
|
||||
smoothScrollTo(
|
||||
totalScroll - unscrollScrollDiv.scrollHeight * 1.1,
|
||||
0,
|
||||
);
|
||||
|
||||
// Allow further scroll after delay
|
||||
setTimeout(() => {
|
||||
|
|
@ -69,49 +107,67 @@
|
|||
|
||||
// console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
|
||||
// console.log(isBeingTouched);
|
||||
if (!notFirstScroll || isBeingTouched || Date.now() < lastScrollTime - -unscrollDelay){
|
||||
if (
|
||||
!notFirstScroll ||
|
||||
isBeingTouched ||
|
||||
Date.now() < lastScrollTime - -unscrollDelay
|
||||
) {
|
||||
// console.log("nah");
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
if(totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
|
||||
smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
|
||||
if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
|
||||
smoothScrollTo(
|
||||
totalScroll - unscrollScrollDiv.scrollHeight,
|
||||
200,
|
||||
);
|
||||
}
|
||||
|
||||
if (totalScroll <= scrollY){
|
||||
if (totalScroll <= scrollY) {
|
||||
console.log("Hit!");
|
||||
// isLeavingAnimating = true;
|
||||
flyInFromTop(tranisitionOverlay, { duration: 800 });
|
||||
}
|
||||
}, 10);
|
||||
});
|
||||
|
||||
function onScroll(){
|
||||
function onScroll() {
|
||||
lastScrollTime = Date.now();
|
||||
// console.log("scroll");
|
||||
}
|
||||
|
||||
function onResize(){
|
||||
totalScroll = document.documentElement.scrollHeight - window.innerHeight
|
||||
function onResize() {
|
||||
totalScroll =
|
||||
document.documentElement.scrollHeight - window.innerHeight;
|
||||
}
|
||||
|
||||
onDestroy(()=>{
|
||||
onDestroy(() => {
|
||||
clearInterval(unscrollInterval);
|
||||
});
|
||||
|
||||
export let hideOnPrint: boolean;
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY on:scroll={()=>{onScroll();}}
|
||||
on:touchstart={()=>{isBeingTouched = true}}
|
||||
on:touchend={()=>{isBeingTouched = false}}
|
||||
<svelte:window
|
||||
bind:scrollY
|
||||
on:scroll={() => {
|
||||
onScroll();
|
||||
}}
|
||||
on:touchstart={() => {
|
||||
isBeingTouched = true;
|
||||
}}
|
||||
on:touchend={() => {
|
||||
isBeingTouched = false;
|
||||
}}
|
||||
on:resize={onResize}
|
||||
/>
|
||||
/>
|
||||
|
||||
<div class="w-full">
|
||||
<!-- Keep scrolling thing -->
|
||||
<div bind:this={unscrollScrollDiv} class="h-64 w-full flex flex-col justify-center items-center">
|
||||
<div>
|
||||
Keep scrolling to veiw Zhen's portfolio site!
|
||||
</div>
|
||||
<div
|
||||
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">
|
||||
<ArrowBigDown />
|
||||
<ArrowBigDown />
|
||||
|
|
@ -120,50 +176,93 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-64 w-full flex flex-col justify-end items-center">
|
||||
<img src="/images/memes/WhatDaDog.png" class="w-32 h-32 object-contain" alt="da dog">
|
||||
<div class="h-64 w-full flex flex-col justify-end items-center"
|
||||
bind:this={unscrollScrollDiv}
|
||||
>
|
||||
<img
|
||||
src="/images/memes/WhatDaDog.png"
|
||||
class="w-32 h-32 object-contain"
|
||||
alt="da dog"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- About footer -->
|
||||
<div class="{hideOnPrint ? 'hide-on-print' : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8">
|
||||
<div
|
||||
class="{hideOnPrint
|
||||
? 'hide-on-print'
|
||||
: ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
|
||||
>
|
||||
<div class="flex justify-center">
|
||||
<div class="grid gap-8 sm:grid-cols-3 items-center w-full">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="font-bold">© 2023-2025</span>
|
||||
<br>
|
||||
<br />
|
||||
<span>Benjamin Dreyer</span>
|
||||
<br>
|
||||
<br />
|
||||
<span>Oliver Schwenger</span>
|
||||
<br>
|
||||
<br />
|
||||
<span>Sylvester Junge</span>
|
||||
<br>
|
||||
<br />
|
||||
<span>Snorre Ettrup Altschul</span>
|
||||
<br>
|
||||
<br />
|
||||
<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>
|
||||
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>
|
||||
|
||||
<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">
|
||||
<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"/>
|
||||
<img
|
||||
src="/images/icons/discord.svg"
|
||||
class="w-8 h-8 object-contain"
|
||||
alt="Discord"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full justify-center border-t border-base-100 border-dashed">
|
||||
<div
|
||||
class="flex w-full justify-center border-t border-base-100 border-dashed"
|
||||
>
|
||||
Last build: {buildTime} (+2 UTC)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
bind:this={tranisitionOverlay}
|
||||
class="{isLeavingAnimating
|
||||
? ''
|
||||
: 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
|
||||
></div>
|
||||
<!-- {#if isLeavingAnimating}
|
||||
{/if} -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue