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

<script lang="ts">
  import ProfileSpacer from "./comps/ProfileSpacer.svelte";
  import MediaQuery from "svelte-media-queries";
  import { onMount, 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";
  import DeprivedTrackerSection from "./comps/DeprivedTrackerSection.svelte";

  const mobileThreshold: string = "600px"; // was 1000px. zhen testing
  let mobile: boolean;
  let debug = false;

  onMount(() => {
    let tabTittleElement = window.document.getElementById("TabTittle");
    if (tabTittleElement)
      // Not null
      tabTittleElement.innerHTML = "Deprived devs";

    const params = new URLSearchParams(window.location.search);
    debug = params.has("debug");
  });
</script>

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

<div class="h-full w-full">
  <title id="TabTittle">We are the DEPRIVED DEVS</title>
  <meta content="We are the deprived devs" property="og:title" />
  <meta
    content="We make everything frontend, backend, games, websites, machine learning, whatever. We're just abunch of nerds, and we love it!"
    property="og:description"
  />
  <meta content={PreviewDeprivedLogo} property="og:image" />
  <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />

  <div
    class="relative pointer-events-auto flex overflow-hidden w-full h-[70vh]"
  >
    <div class=" flex w-full h-full">
      <img
        class="w-full h-full object-cover filter blur-sm brightness-60"
        src={BackgroundVideo}
        alt="Background video"
      />
    </div>
    <div
      class="absolute left-0 top-0 w-full h-full flex justify-center items-center"
    >
      <h1
        style="font-size: {!mobile
          ? 5
          : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9);"
      >
        {#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>

  <DeprivedTrackerSection />

  <div
    class="cozette flex flex-col justify-center items-center h-full w-full md:px-8 pt-4"
  >
    <h2 class="text-center" style="font-size: {!mobile ? 3 : 2}rem;">
      Developers
    </h2>
    <div class="">
      <div
        class="grid max-lg:grid-cols-1 sm:grid-cols-2 gap-4 p-4 max-lg:px-0 w-full"
      >
        <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/rev3?hideOnPrint=1"
                style="color:lightblue;">pdf</a
              >
            </p>
          </span>
        </Profile>

        <Profile
          name="Sveske / Benjamin"
          tags={["Programmer", "Back-end Admin"]}
          isMobile={mobile}
        >
          <span>
            <p>
              <span class="inline line-through">Hi, I use Arch, btw. </span> I use
              NixOS now
            </p>
            <p>
              <a
                href="https://www.linkedin.com/in/benjamin-dreyer/"
                target="_blank"
                style="color:lightblue;">Linked-in</a
              >
            </p>
          </span>
        </Profile>

        <Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile} />

        <Profile
          replaced={true}
          name="Oliver"
          tags={["Sound/Story", "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>

        <Profile
          replaced={true}
          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>

        <Profile
          replaced={true}
          name="Zylvester"
          tags={["Sound/Story", "2D/3D artist"]}
          isMobile={mobile}
        >
          <span>
            <p>Closeted omega weeb</p>
            <p>
              <a
                href="https://www.linkedin.com/in/sylvester-junge-0b2a73196/"
                target="_blank"
                style="color:lightblue;">Linked-in</a
              >,
              <a
                href="https://www.youtube.com/watch?v=xvFZjo5PgG0"
                style="color:lightblue;">Funny link</a
              >
            </p>
          </span>
        </Profile>
      </div>
    </div>
  </div>

  <div class="py-4"></div>

  <div
    class="grid place-content-center place-items-center 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="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 text-primary-content">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 text-primary-content">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 text-primary-content">View on itch.io</a
            >
          </div>
        </div>
      </div>

      <div class="games card bg-base-100 w-96 shadow-xl">
        <figure class="rounded-b-none" style="height: 15em;">
          <div class="bg-grid-100 flex w-full h-full"></div>
        </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 text-primary-content text-primary-content"
              >RECURSION!</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{#if !mobile}
  <style>
    .games {
      width: 24rem /* 384px */;
    }
  </style>
{:else}
  <style>
    .games {
      width: 80%;
      display: flex;
      justify-self: center;
    }
  </style>
{/if}

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