189 lines
7.8 KiB
Svelte
189 lines
7.8 KiB
Svelte
<script lang="ts">
|
|
import MediaQuery from 'svelte-media-queries';
|
|
import NewsCard from '$lib/posts/NewsCard.svelte';
|
|
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
|
|
import Button from '$lib/IO/Button.svelte';
|
|
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
|
import Timeline from '../comps/timeline/timeline.svelte';
|
|
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
|
|
|
|
|
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);
|
|
|
|
// Cleanup event listener on component unmount
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- Detect mobile -->
|
|
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
|
|
|
|
<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 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>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</ParallaxLayer>
|
|
<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" 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>
|
|
</FrontFold>
|
|
<FrontFold Title="Sveske / Benjamin">
|
|
<p>Hi, I use Arch, btw.</p>
|
|
<p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>'
|
|
</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>
|
|
</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="grid place-content-center place-items-center min-h-screen pointer-events-auto">
|
|
<article class="pt-16 prose overflow-hidden font-mono {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>
|
|
|
|
<!-- Spacer -->
|
|
<div class="{!mobile ? "py-16" : "py-4"}"/>
|
|
|
|
<div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
<div class="flex w-52 flex-col gap-4">
|
|
<div class="skeleton h-32 w-full"></div>
|
|
<div class="skeleton h-4 w-28"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
</div>
|
|
<div class="flex w-52 flex-col gap-4">
|
|
<div class="skeleton h-32 w-full"></div>
|
|
<div class="skeleton h-4 w-28"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
</div>
|
|
{#if !mobile}
|
|
<div class="flex w-52 flex-col gap-4">
|
|
<div class="skeleton h-32 w-full"></div>
|
|
<div class="skeleton h-4 w-28"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
</div>
|
|
<div class="flex w-52 flex-col gap-4">
|
|
<div class="skeleton h-32 w-full"></div>
|
|
<div class="skeleton h-4 w-28"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<h6 class="prose text-base-300"><b>(These will never load)</b></h6>
|
|
</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 {
|
|
width: 80%;
|
|
font-family: var(--title-font);
|
|
}
|
|
</style>
|
|
|
|
{#if mobile}
|
|
<style>
|
|
#news-section {
|
|
transition-duration: 500ms;
|
|
transition-property: width;
|
|
width: 90% !important;
|
|
}
|
|
.news-container {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.dummy {
|
|
width: 0% !important;
|
|
}
|
|
|
|
/* #more-posts { */
|
|
/* flex-grow: 1 !important; */
|
|
/* } */
|
|
|
|
</style>
|
|
{/if}
|
|
|