Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a small "about us section"

This commit is contained in:
BOTAlex 2024-10-12 04:31:19 +02:00
parent ba58ba5f59
commit f1d32c7316
3 changed files with 91 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+layout.svelte
View File

@ -96,7 +96,7 @@
<span>Zhentao Wei</span>
<br>
<br>
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website" target="_blank">source code</a></span>
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
</div>
<div>
<h3>About Us</h3>

82
src/routes/+page.svelte
View File

@ -17,16 +17,53 @@
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);
// Cleanup event listener on component unmount
return () => {
window.removeEventListener('scroll', handleScroll);
};
});
</script>
<!-- Detect mobile -->
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
<Parallax sections={1.2}>
<ParallaxLayer span={0.6} rate={0.2}>
<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">
<Parallax sections={2.5}>
<ParallaxLayer span={0.6} rate={0.2} class="pointer-events-none">
<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
<img src="{BackgroundVideo}" style="width: 100%; height: 100%; object-fit: cover; filter: blur(5px) brightness(0.6);" alt="Background video"/>
<div class="main-title" 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" 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;">{@html !mobile ? "Deprived Devs" : "Deprived<br/>Devs"}</h1>
{#if mobile}
<div style="width: 100px; height: 100px;"></div>
@ -34,9 +71,23 @@
</div>
</div>
</ParallaxLayer>
<ParallaxLayer offset={0.6} rate={0.3} class="bg-base-200">
<div class="grid place-items-center prose font-mono">
<div class="p-4 grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""}">
<ParallaxLayer offset={0.55} rate={0.3} class="bg-base-200 pointer-events-none">
</ParallaxLayer>
<ParallaxLayer 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!
</h1>
</div>
</ParallaxLayer>
<!-- 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%)">
<FrontFold Title="Alex / Zhen">
<p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
<p>Here's my CV: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
@ -51,14 +102,29 @@
</FrontFold>
</div>
</div>
</div>
</StickyLayer>
<ParallaxLayer offset={1.5} rate={0.3} class="bg-base-200 pointer-events-none" style="box-shadow: 0 -1rem 10px rgba(0, 0, 0, 0.2);" >
<div class="flex justify-center">
<article class="pt-16 prose overflow-hidden font-mono pointer-events-auto {mobile ? "px-8" : ""}">
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 5 : 3}rem; ">About us</h1>
<p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
</article>
</div>
</ParallaxLayer>
<!-- <StickyLayer offset={{ top: 1.75, bottom: 2 }} >
<div class="flex justify-center prose main-title overflow-hidden">
<h1 style="font-size: {!mobile ? 5 : 3}rem;">About us</h1>
</div>
</StickyLayer> -->
</Parallax>
<Timeline/>
<style>
.main-title {
margin: 0 auto;
width: 80%;
font-family: var(--title-font);
}

4
src/routes/comps/FrontFold.svelte
View File

@ -2,10 +2,10 @@
export let Title = "";
</script>
<div class="collapse collapse-arrow bg-base-100 text-start" {...$$restProps}>
<div class="collapse collapse-arrow bg-base-100 text-start shadow-sm" {...$$restProps}>
<input type="radio" name="my-accordion-2" checked/>
<div class="collapse-title text-xl font-medium "><b>{Title}</b></div>
<div class="collapse-content ">
<div class="collapse-content" style="border-top: dotted 0.15rem oklch(var(--b3));">
<slot/>
</div>
</div>