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

Added confetti

Browse source
This commit is contained in:
BOTAlex 2024-10-17 21:21:51 +02:00
parent 55ab4d342a
commit beb02ef577
5 changed files with 476 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app.html
View file

@ -8,7 +8,6 @@
<!-- Change theme for site here -->
<link rel="stylesheet" href="/stylesheets/main-theme.css" />
<link rel="stylesheet" href="/stylesheets/global.css" />
%sveltekit.head%
</head>

62
src/routes/+page.svelte
View file

@ -6,53 +6,26 @@
import { ButtonType } from '$lib/IO/ButtonType.ts';
import Timeline from '../comps/timeline/timeline.svelte';
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
import { Confetti } from "svelte-confetti"
import { tick } from 'svelte'
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
import FrontFold from './comps/FrontFold.svelte';
export let data; // <- contains post data
$: most_recent_post = data.summaries[0];
const mobileThreshold : string = '600px'; // was 1000px. zhen testing
let mobile : boolean;
import { onMount } from 'svelte';
// Function to set a cookie
function setCookie(name: string, value: string, days: number): void {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}
// Function to get a cookie
function getCookie(name: string): string | undefined {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop()?.split(';').shift();
return undefined;
}
// Store scroll position in a cookie when the user scrolls
function handleScroll(): void {
setCookie('scrollPosition', window.scrollY.toString(), 1);
}
// Restore scroll position on mount
onMount(() => {
const scrollPosition = getCookie('scrollPosition');
if (scrollPosition) {
window.scrollTo(0, parseInt(scrollPosition, 10));
}
window.addEventListener('scroll', handleScroll);
let showConfetti: boolean = false;
function onProgressConfetti(progress: number){
// console.log(progress > 0.225);
// Cleanup event listener on component unmount
return () => {
window.removeEventListener('scroll', handleScroll);
};
});
showConfetti = progress > 0.225;
}
</script>
@ -68,14 +41,14 @@
{#if mobile}
<div style="width: 100px; height: 100px;"></div>
{/if}
</div>
</div>
</div>
</div>
</ParallaxLayer>
<ParallaxLayer offset={0.55} rate={0.3} class="bg-base-200 pointer-events-none">
</ParallaxLayer>
<ParallaxLayer offset={0.75}>
<ParallaxLayer onProgress={onProgressConfetti} offset={0.75}>
<div class="prose flex justify-center m-auto">
<h1 class="main-title text-center" style="font-size: {!mobile ? 3 : 2}rem;">
Developers!
@ -85,9 +58,14 @@
<!-- Decorative: -->
<StickyLayer offset={(!mobile) ? ({ top: 0.4, bottom: 0.75 }) : ({ top: 0.4, bottom: 0.4 })} class="pointer-events-none">
<div class="prose font-mono pointer-events-auto h-full" style="max-width: 100%;">
<div class="grid place-content-center h-full">
<div class="grid gap-4 p-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">
<div class="prose font-mono pointer-events-auto h-full" style="max-width: 100%;">
<div class="flex justify-center items-center h-full relative">
<div style="position: absolute; top: 30vh; {!mobile ? "max-width: 35vw;" : "width: 100%;"}">
{#if showConfetti}
<Confetti amount={10} colorArray={["white"]} />
{/if}
</div>
<div class="grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">
<FrontFold Title="Alex / Zhen" Checked={true}>
<p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
@ -98,7 +76,7 @@
</FrontFold>
<FrontFold Title="Zylvester">
<p>Hi, I am [insert text here]</p>
<p>Here's a joke about recursion: <a href="" style="color:lightblue;">recursion</a></p>
<p>Here's a joke about recursion: <a href="/" style="color:lightblue;">recursion</a></p>
</FrontFold>
</div>
</div>