deprived-main-website/src/routes/+page.svelte

<script lang="ts">
	import ProfileSpacer from './comps/ProfileSpacer.svelte';
    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 { tick } from 'svelte'

    import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";

    import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
    import Carousel from './comps/Carousel.svelte';

    import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
    import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
    import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"

    import Blood1 from "$lib/GamePreviews/Blood-title.png"
    import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
    import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
    import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
    import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
    
    import Time1 from "$lib/GamePreviews/Time-1.png"
    import Time2 from "$lib/GamePreviews/time-2.png"
    import Time3 from "$lib/GamePreviews/time-3.png"
    import Time4 from "$lib/GamePreviews/time-4.png"
    import Time5 from "$lib/GamePreviews/time-5.gif"
    import Tags from './comps/Tags.svelte';
    import NameAndTag from './comps/NameAndTag.svelte';
    import Profile from './comps/Profile.svelte';
    
    const mobileThreshold : string = '600px'; // was 1000px. zhen testing
    let mobile : boolean;
</script>


<!-- Detect mobile -->
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />

<title>We are the DEPRIVED DEVS</title>
<meta content="We are the deprived devs" property="og:title" />
<meta content="We collaborate to create game, and hopefully more in the future! Wanna join? Hit us up." property="og:description" />
<meta content={PreviewDeprivedLogo} property="og:image" />
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />

<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
    <img id="backgroundGif" src="{BackgroundVideo}" 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;">
            {#if !mobile}
                Deprived Devs
            {:else}
                Deprived
                <br/>
                <span class="-mt-6 prose" style="font-size: 2rem;">
                    Devs
                </span>
            {/if}
        </h1>
        {#if mobile}
            <div style="width: 100px; height: 100px;"></div>
        {/if}
    </div>
</div>

<div class="flex justify-center w-full px-8 py-4">
    <div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
        <h2 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
            Developers
        </h2>

        <Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
            <span>
                <p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
                <p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
            </span>
        </Profile>
        
        <ProfileSpacer/>
        <Profile name="Sveske / Benjamin" tags={["Programmer", "Back-end Admin"]} isMobile={mobile}>
            <span>
                <p>Hi, I use Arch, btw.</p>
                <p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
            </span>
        </Profile>
        
        <ProfileSpacer/>
        <Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>

        <ProfileSpacer/>
        <Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
            <span>
                <p>Snorre does not get paid.</p>
                <p><a href="https://www.linkedin.com/in/oliver-schwenger-291944278/" target="_blank" style="color:lightblue;">Linked-in</a></p>
            </span>
        </Profile>

        <ProfileSpacer/>
        <Profile name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
            <span>
                <p>Abla espaniol</p>
                <p><a href="https://www.linkedin.com/in/kim-rex-de-dios-408860299/" target="_blank" style="color:lightblue;">Linked-in</a></p>
            </span>
        </Profile>
        
        <ProfileSpacer/>
        <Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
            <span>
                <p>Hi, I am [insert text here]</p>
                <p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
            </span>
        </Profile>
    </div>
</div>

<!-- space -->
<div class="py-8 flex justify-center">
    <div style="width: 50%;">
        <ProfileSpacer/>
    </div>
</div>

<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
    <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
        <h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h2>
        <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 style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
        <ProfileSpacer/>
    </div>
    
    <article class="pt-16 prose {mobile ? "px-8" : ""}">
        <h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h2>
        <p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
    </article>

    <!-- Spacer -->
    <div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
        
    </div>

    <div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">                
        <!-- Corro rebounce -->
        <div class="games card bg-base-100 shadow-xl">
            <figure style="height: 15em;">
                <Carousel images={[
                    Corrobot1,
                    Corrobot2,
                    Corrobot3,
                    ]}/>
            </figure>
            <div class="card-body">
                <h2 class="card-title">Corrobot-rebounce</h2>
                <p>A 3D sequel to Corrobot-Takeover</p>
                <br/>
                <p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
                <div class="card-actions justify-end">
                <a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary">View on itch.io</a>
                </div>
            </div>
        </div>

        <!-- Blood -->
        <div class="games card bg-base-100 w-96 shadow-xl">
            <figure style="height: 15em;">
                <Carousel images={[
                    Blood1,
                    Blood2,
                    Blood3,
                    Blood4,
                    Blood5,
                    ]}/>
            </figure>
            <div class="card-body">
                <h2 class="card-title">Unnamed blood game</h2>
                <p>A game based on an unique kind of combat</p>
                <br/>
                <p>This was made during <a href="https://itch.io/jam/future-game-makers-jam-2024" class="underline">Future Game Makers</a>, and of course our team won the competition.</p>
                <div class="card-actions justify-end">
                <a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary">View on itch.io</a>
                </div>
            </div>
        </div>

        <!-- Time -->
        <div class="games card bg-base-100 w-96 shadow-xl">
            <figure style="height: 15em;">
                <Carousel images={[
                    Time1,
                    Time2,
                    Time3,
                    Time4,
                    Time5,
                    ]}/>
            </figure>
            <div class="card-body">
                <h2 class="card-title">One More Time</h2>
                <p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
                <br/>
                <p>This was made during <a href="https://itch.io/jam/dmspiljam-november-2021" class="underline">Denmark Masters jam</a>. This jam has youths allover Denmark to compete, and of course our team won the competition again.</p>
                <div class="card-actions justify-end">
                <a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary">View on itch.io</a>
                </div>
            </div>
        </div>

        

        <div class="games card bg-base-100 w-96 shadow-xl">
            <figure class="skeleton rounded-b-none" style="height: 15em;"></figure>
            <div class="card-body">
                <h2 class="card-title">What's next?</h2>
                <div class="skeleton mt-1 h-4 w-28"></div>
                <div class="skeleton h-4 w-full"></div>
                <div class="skeleton h-4 w-full"></div>
                <div class="skeleton h-4 w-28"></div>
                <div class="skeleton h-4 w-full"></div>
                <div class="flex grow"/>
                <div class="card-actions justify-end">
                    <a href="/" target="_blank" class="btn btn-primary">RECURSION!</a>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    .main-title {
        width: 80%;
        font-family: var(--title-font);
    }

    #backgroundGif{
        width: 100%; 
        height: 100%;
        max-height: 40vh;
        object-fit: cover; 
        filter: blur(5px) brightness(0.6);
    }
</style>

{#if !mobile}
    <style>
        .games {
            width: 24rem /* 384px */;
        }
    </style>

{:else}
    <style>
        .games {
            width: 80%;
            display: flex;
            justify-self: center;
        }
    </style>
{/if}