DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better main layout
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Details

Browse source
This commit is contained in:
BOTAlex 2025-08-14 17:29:02 +02:00
parent 990266de0c
commit a20a3b9cdc
4 changed files with 333 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/routes/+layout.svelte
View file

@ -82,8 +82,7 @@
bind:matches={isMobile}
/>
<!-- Nav bar -->
<div class=" bg-base-200 p-0">
<div class="flex flex-col min-h-screen bg-base-200 p-0">
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
<div class="nav-bar pr-4">
{#if !isMobile}

553
src/routes/+page.svelte
View file

@ -1,134 +1,217 @@
<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 { onMount, tick } from 'svelte'
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 { onMount, tick } from "svelte";
import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";
import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
import Carousel from './comps/Carousel.svelte';
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 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;
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";
onMount(()=> {
let tabTittleElement = window.document.getElementById("TabTittle");
if (tabTittleElement) // Not null
tabTittleElement.innerHTML = "Deprived devs";
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 params = new URLSearchParams(window.location.search);
debug = params.has('debug');
});
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} />
<MediaQuery query="(max-width: {mobileThreshold})" bind:matches={mobile} />
<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="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="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 cozette" 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);">
{#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
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>
<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/>
<DeprivedTrackerSection />
<div class="cozette flex flex-col justify-center items-center w-full md:px-8 pt-4">
<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
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">
<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="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
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 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 isSnorre={true} tags={["Programmer"]} isMobile={mobile} />
<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>
<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>
<div class="py-4"></div>
<div class="py-4"></div>
<div class="grid place-content-center place-items-center pointer-events-auto font-mono">
<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>
@ -138,129 +221,153 @@
<!-- <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 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 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>
<style>
#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>
<style>
.games {
width: 24rem /* 384px */;
}
</style>
{:else}
<style>
.games {
width: 80%;
display: flex;
justify-self: center;
}
</style>
<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>

2
src/routes/comps/Zooter.svelte
View file

@ -155,7 +155,7 @@
on:resize={onResize}
/>
<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
<div class="{hideOnPrint ? 'hide-on-print' : ''} mt-auto w-full">
<!-- Keep scrolling thing -->
<div class="hidden h-64 w-full flex flex-col justify-center items-center">
<div>Keep scrolling to veiw Zhen's portfolio site!</div>