88 lines
3.3 KiB
Svelte
88 lines
3.3 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;
|
|
</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;">
|
|
<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;">
|
|
<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.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;" : ""}">
|
|
<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>
|
|
</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>
|
|
</ParallaxLayer>
|
|
</Parallax>
|
|
|
|
<Timeline/>
|
|
|
|
<style>
|
|
.main-title {
|
|
margin: 0 auto;
|
|
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}
|
|
|