Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test

This commit is contained in:
BOT Alex 2024-12-31 17:51:57 +01:00
parent 37d075fbd6
commit 4e4747d718
18 changed files with 759 additions and 616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/lib/GamePreviews/Blood-title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/lib/GamePreviews/Corrobot-rebouce-gameplay1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 829 KiB

BIN
src/lib/GamePreviews/Corrobot-rebouce-gameplay2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 708 KiB

BIN
src/lib/GamePreviews/Corrobot-rebouce-title.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
src/lib/GamePreviews/Time-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
src/lib/GamePreviews/time-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
src/lib/GamePreviews/time-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
src/lib/GamePreviews/time-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
src/lib/GamePreviews/time-5.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

582
src/routes/+layout.svelte
View File

@ -1,290 +1,292 @@
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements --> <!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
<script lang="ts"> <script lang="ts">
import "$lib/app.css"; import "$lib/app.css";
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import MediaQuery from 'svelte-media-queries'; import MediaQuery from 'svelte-media-queries';
export let hideOnPrint: boolean; export let hideOnPrint: boolean;
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte"; import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte"; import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
import svelteLogo from "$lib/svelteLogos/svelte-logo.png" import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
const footerCollapseThreshold : string = '1000px'; import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
const headerCollapseThreshold : string = '1000px';
let footerCollapse : boolean; const footerCollapseThreshold : string = '1000px';
let isMobile : boolean; const headerCollapseThreshold : string = '1000px';
let footerCollapse : boolean;
let navbarHidden : boolean = true; let isMobile : boolean;
function resetNavBar() { let navbarHidden : boolean = true;
navbarHidden = true;
} function resetNavBar() {
navbarHidden = true;
import { afterNavigate } from '$app/navigation'; }
afterNavigate(() => {
const params = new URLSearchParams(window.location.search); import { afterNavigate } from '$app/navigation';
hideOnPrint = params.get('hideOnPrint') === '1'; afterNavigate(() => {
//console.log(hideOnPrint); const params = new URLSearchParams(window.location.search);
}); hideOnPrint = params.get('hideOnPrint') === '1';
//console.log(hideOnPrint);
import { onMount } from 'svelte'; });
import { themeChange } from 'theme-change'
onMount(() => { import { onMount } from 'svelte';
const lock = document.createElement('meta'); import { themeChange } from 'theme-change'
lock.name = 'darkreader-lock'; onMount(() => {
document.head.appendChild(lock); const lock = document.createElement('meta');
lock.name = 'darkreader-lock';
themeChange(false) // false parameter is required for svelte document.head.appendChild(lock);
});
</script> themeChange(false) // false parameter is required for svelte
});
</script>
<!-- Detect mobile -->
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} /> <!-- Detect mobile -->
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
<!-- Nav bar --> <MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
<div class="bg-base-200 p-0">
<header class="{hideOnPrint ? 'hide-on-print' : ''}"> <!-- Nav bar -->
<div class="nav-bar pr-4 bg-base-200"> <div class="bg-base-200 p-0">
{#if !isMobile} <header class="{hideOnPrint ? 'hide-on-print' : ''}">
<div class="desktop"> <div class="nav-bar pr-4 bg-base-200">
<a href="/" class="nav-head"> {#if !isMobile}
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> <div class="desktop">
<!-- <h3 id="logo-text">The Deprived Devs</h3> --> <a href="/" class="nav-head">
</a> <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
<div class="nav-spacer" /> <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
</a>
<!-- <a href="/">Home</a> --> <div class="nav-spacer" />
<a href="https://botalex.itch.io/" target="_blank">Games</a>
<!-- <a href="/posts">Blog</a> <!-- <a href="/">Home</a> -->
<a href="/about">About</a> --> <a href="https://botalex.itch.io/" target="_blank">Games</a>
</div> <!-- <a href="/posts">Blog</a>
{:else} <a href="/about">About</a> -->
<div class="collapsed"> </div>
<a on:click={resetNavBar} href="/" class="nav-head"> {:else}
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> <div class="collapsed">
<!-- <h3 id="logo-text">The Deprived Devs</h3> --> <a on:click={resetNavBar} href="/" class="nav-head">
</a> <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
<div class="nav-spacer" /> <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}> </a>
<HamburgerMenuIcon Class="fill-base-content"/> <div class="nav-spacer" />
</button> <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
</div> <HamburgerMenuIcon Class="fill-base-content"/>
{#if !navbarHidden} </button>
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}> </div>
<!-- <a on:click={resetNavBar} href="/">Home</a> --> {#if !navbarHidden}
<a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a> <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
<!-- <a on:click={resetNavBar} href="/posts">Blog</a> <!-- <a on:click={resetNavBar} href="/">Home</a> -->
<a on:click={resetNavBar} href="/about">About</a> --> <a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
</div> <!-- <a on:click={resetNavBar} href="/posts">Blog</a>
{/if} <a on:click={resetNavBar} href="/about">About</a> -->
{/if} </div>
</div> {/if}
</header> {/if}
</div>
<!-- Page content --> </header>
<slot />
<!-- Page content -->
<!-- About footer --> <slot />
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
<div class="about-container"> <!-- About footer -->
<div class="credits"> <footer class="{hideOnPrint ? 'hide-on-print' : ''}">
<span>© 2023-2024</span> <div class="about-container">
<br> <div class="credits">
<span>Benjamin Dreyer</span> <span>© 2023-2024</span>
<br> <br>
<span>Oliver Schwenger</span> <span>Benjamin Dreyer</span>
<br> <br>
<span>Sylvester Junge</span> <span>Oliver Schwenger</span>
<br> <br>
<span>Zhentao Wei</span> <span>Sylvester Junge</span>
</div> <br>
<div> <span>Zhentao Wei</span>
<h3><b>About this website</b></h3> </div>
<!-- <a href="/" target="_blank">Recursion</a> --> <div>
<div class="flex justify-center"> <h3><b>About this website</b></h3>
This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/"> <!-- <a href="/" target="_blank">Recursion</a> -->
<img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a> <div class="flex justify-center">
</div> This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span> <img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
</div>
</div> <span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
<div class="contact">
<h3><b>Contact</b></h3> </div>
<a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a> <div class="contact">
<div class="mt-2"></div> <h3><b>Contact</b></h3>
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social"> <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
<!-- <span>Discord</span> --> <div class="mt-2"></div>
<img src="/images/icons/discord.svg" alt="Discord"/> <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
</a> <!-- <span>Discord</span> -->
</div> <img src="/images/icons/discord.svg" alt="Discord"/>
</div> </a>
</footer> </div>
</div> </div>
</footer>
</div>
<style lang="scss">
/* Nav bar. */
header { <style lang="scss">
display: flex; /* Nav bar. */
justify-content: center; header {
} display: flex;
justify-content: center;
header a { }
text-decoration: none;
} header a {
text-decoration: none;
.nav-bar { }
width: 100%;
max-width: 1400px; .nav-bar {
} width: 100%;
max-width: 1400px;
.desktop { }
width: 100%;
display: flex; .desktop {
gap: 30px; width: 100%;
} display: flex;
gap: 30px;
.collapsed { }
width: 100%;
display: flex; .collapsed {
} width: 100%;
display: flex;
#toggle-nav { }
background: transparent;
border: none; #toggle-nav {
} background: transparent;
border: none;
}
.nav-list {
display: flex;
flex-direction: column; .nav-list {
gap: 10px; display: flex;
flex-direction: column;
align-items: center; gap: 10px;
}
align-items: center;
.nav-head { }
display: flex;
align-items: center; .nav-head {
gap: 10px; display: flex;
} align-items: center;
gap: 10px;
#logo-link { }
width: 64px;
aspect-ratio: 1 / 1; #logo-link {
} width: 64px;
aspect-ratio: 1 / 1;
#logo-text { }
font-size: 24px;
color: oklch(var(--bc)); #logo-text {
font-family: var(--title-font); font-size: 24px;
margin: 0; color: oklch(var(--bc));
font-family: var(--title-font);
min-width: 200px; margin: 0;
}
min-width: 200px;
.nav-spacer { }
width: 100%;
} .nav-spacer {
width: 100%;
header a { }
display: flex;
align-items: center; header a {
display: flex;
font-size: 22px; align-items: center;
font-family: var(--title-font);
// Text color font-size: 22px;
color: oklch(var(--bc)); font-family: var(--title-font);
} // Text color
color: oklch(var(--bc));
/* Footer. */ }
footer {
margin-top: 50px; /* Footer. */
padding: 25px 0; footer {
background-color: oklch(var(--b3)); margin-top: 50px;
padding: 25px 0;
height: 100%; background-color: oklch(var(--b3));
display: flex; height: 100%;
justify-content: center;
} display: flex;
justify-content: center;
.about-container { }
width: 80%;
height: 100%; .about-container {
width: 80%;
color: oklch(var(--bc)); height: 100%;
display: flex; color: oklch(var(--bc));
flex-wrap: wrap;
justify-content: space-evenly; display: flex;
flex-wrap: wrap;
& h3 { justify-content: space-evenly;
font-size: larger;
} & h3 {
} font-size: larger;
}
.about-container > div { }
align-items: center;
text-align: center; .about-container > div {
} align-items: center;
text-align: center;
.credits { }
line-height: 2;
} .credits {
line-height: 2;
.contact { }
display: flex;
flex-direction: column; .contact {
} display: flex;
flex-direction: column;
.social { }
display: flex;
align-content: center; .social {
gap: 10px; display: flex;
} align-content: center;
gap: 10px;
.social > img { }
width: 24px;
} .social > img {
width: 24px;
footer h3 { }
margin-top: 0px;
color: var(--text2); footer h3 {
} margin-top: 0px;
color: var(--text2);
footer a { }
color: var(--text2);
text-decoration-line: underline; footer a {
} color: var(--text2);
text-decoration-line: underline;
a:hover { }
filter: brightness(130%);
} a:hover {
filter: brightness(130%);
@media print { }
.hide-on-print {
display: none; @media print {
} .hide-on-print {
} display: none;
</style> }
}
{#if footerCollapse} </style>
<style>
.about-container { {#if footerCollapse}
flex-direction: column; <style>
justify-content: center !important; .about-container {
gap: 25px; flex-direction: column;
} justify-content: center !important;
</style> gap: 25px;
{/if} }
</style>
{#if isMobile} {/if}
<style>
{#if isMobile}
</style> <style>
{/if}
</style>
{/if}

488
src/routes/+page.svelte
View File

@ -1,244 +1,244 @@
<script lang="ts"> <script lang="ts">
import ProfileSpacer from './comps/ProfileSpacer.svelte'; import ProfileSpacer from './comps/ProfileSpacer.svelte';
import MediaQuery from 'svelte-media-queries'; import MediaQuery from 'svelte-media-queries';
import NewsCard from '$lib/posts/NewsCard.svelte'; import NewsCard from '$lib/posts/NewsCard.svelte';
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte'; import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
import Button from '$lib/IO/Button.svelte'; import Button from '$lib/IO/Button.svelte';
import { ButtonType } from '$lib/IO/ButtonType.ts'; import { ButtonType } from '$lib/IO/ButtonType.ts';
import Timeline from '../comps/timeline/timeline.svelte'; import Timeline from '../comps/timeline/timeline.svelte';
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax"; import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
import { tick } from 'svelte' import { tick } from 'svelte'
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif" import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
import Carousel from './comps/Carousel.svelte'; import Carousel from './comps/Carousel.svelte';
import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg" import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png" import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png" import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"
import Blood1 from "$lib/GamePreviews/Blood-title.png" import Blood1 from "$lib/GamePreviews/Blood-title.png"
import Blood2 from "$lib/GamePreviews/Blood-preview1.png" import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
import Blood3 from "$lib/GamePreviews/Blood-preview2.png" import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
import Blood4 from "$lib/GamePreviews/Blood-preview3.png" import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
import Blood5 from "$lib/GamePreviews/Blood-preview4.png" import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
import Time1 from "$lib/GamePreviews/Time-1.png" import Time1 from "$lib/GamePreviews/Time-1.png"
import Time2 from "$lib/GamePreviews/time-2.png" import Time2 from "$lib/GamePreviews/time-2.png"
import Time3 from "$lib/GamePreviews/time-3.png" import Time3 from "$lib/GamePreviews/time-3.png"
import Time4 from "$lib/GamePreviews/time-4.png" import Time4 from "$lib/GamePreviews/time-4.png"
import Time5 from "$lib/GamePreviews/time-5.gif" import Time5 from "$lib/GamePreviews/time-5.gif"
const mobileThreshold : string = '600px'; // was 1000px. zhen testing const mobileThreshold : string = '600px'; // was 1000px. zhen testing
let mobile : boolean; let mobile : boolean;
</script> </script>
<!-- Detect mobile --> <!-- Detect mobile -->
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} /> <MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;"> <div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
<img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/> <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;"> <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;"> <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} {#if !mobile}
Deprived Devs Deprived Devs
{:else} {:else}
Deprived Deprived
<br/> <br/>
<h1 class="-mt-6 prose" style="font-size: 2rem;"> <h1 class="-mt-6 prose" style="font-size: 2rem;">
Devs Devs
</h1> </h1>
{/if} {/if}
</h1> </h1>
{#if mobile} {#if mobile}
<div style="width: 100px; height: 100px;"></div> <div style="width: 100px; height: 100px;"></div>
{/if} {/if}
</div> </div>
</div> </div>
<div class="flex justify-center w-full px-8 py-4"> <div class="flex justify-center w-full px-8 py-4">
<div class="grid space-y-5" style="width: 100%; max-width: 21cm;"> <div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
<h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;"> <h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
Developers Developers
</h1> </h1>
<div class="developersProfile pl-4 font-mono"> <div class="developersProfile pl-4 font-mono">
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2> <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2>
<span> <span>
<p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p> <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> <p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
</span> </span>
</div> </div>
<ProfileSpacer/> <ProfileSpacer/>
<div class="developersProfile pl-4 font-mono"> <div class="developersProfile pl-4 font-mono">
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2> <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2>
<span> <span>
<p>Hi, I use Arch, btw.</p> <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> <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>
</span> </span>
</div> </div>
<ProfileSpacer/> <ProfileSpacer/>
<div class="developersProfile pl-4 font-mono"> <div class="developersProfile pl-4 font-mono">
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2> <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2>
<span> <span>
<p>Hi, I am [insert text here]</p> <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> <p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<!-- space --> <!-- space -->
<div class="py-8 flex justify-center"> <div class="py-8 flex justify-center">
<div style="width: 50%;"> <div style="width: 50%;">
<ProfileSpacer/> <ProfileSpacer/>
</div> </div>
</div> </div>
<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono"> <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" : ""}"> <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h1> <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 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> <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> </article>
<!-- Spacer --> <!-- Spacer -->
<div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}"> <div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
<ProfileSpacer/> <ProfileSpacer/>
</div> </div>
<article class="pt-16 prose {mobile ? "px-8" : ""}"> <article class="pt-16 prose {mobile ? "px-8" : ""}">
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h1> <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h1>
<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> <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> </article>
<!-- Spacer --> <!-- Spacer -->
<div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}"> <div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
</div> </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"> <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 --> <!-- Corro rebounce -->
<div class="games card bg-base-100 shadow-xl"> <div class="games card bg-base-100 shadow-xl">
<figure style="height: 15em;"> <figure style="height: 15em;">
<Carousel images={[ <Carousel images={[
Corrobot1, Corrobot1,
Corrobot2, Corrobot2,
Corrobot3, Corrobot3,
]}/> ]}/>
</figure> </figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Corrobot-rebounce</h2> <h2 class="card-title">Corrobot-rebounce</h2>
<p>A 3D sequel to Corrobot-Takeover</p> <p>A 3D sequel to Corrobot-Takeover</p>
<br/> <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> <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"> <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> <a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary">View on itch.io</a>
</div> </div>
</div> </div>
</div> </div>
<!-- Blood --> <!-- Blood -->
<div class="games card bg-base-100 w-96 shadow-xl"> <div class="games card bg-base-100 w-96 shadow-xl">
<figure style="height: 15em;"> <figure style="height: 15em;">
<Carousel images={[ <Carousel images={[
Blood1, Blood1,
Blood2, Blood2,
Blood3, Blood3,
Blood4, Blood4,
Blood5, Blood5,
]}/> ]}/>
</figure> </figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Unnamed blood game</h2> <h2 class="card-title">Unnamed blood game</h2>
<p>A game based on an unique kind of combat</p> <p>A game based on an unique kind of combat</p>
<br/> <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> <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"> <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> <a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary">View on itch.io</a>
</div> </div>
</div> </div>
</div> </div>
<!-- Time --> <!-- Time -->
<div class="games card bg-base-100 w-96 shadow-xl"> <div class="games card bg-base-100 w-96 shadow-xl">
<figure style="height: 15em;"> <figure style="height: 15em;">
<Carousel images={[ <Carousel images={[
Time1, Time1,
Time2, Time2,
Time3, Time3,
Time4, Time4,
Time5, Time5,
]}/> ]}/>
</figure> </figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">One More Time</h2> <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> <p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
<br/> <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> <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"> <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> <a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary">View on itch.io</a>
</div> </div>
</div> </div>
</div> </div>
<div class="games card bg-base-100 w-96 shadow-xl"> <div class="games card bg-base-100 w-96 shadow-xl">
<figure class="skeleton rounded-b-none" style="height: 15em;"></figure> <figure class="skeleton rounded-b-none" style="height: 15em;"></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">What's next?</h2> <h2 class="card-title">What's next?</h2>
<div class="skeleton mt-1 h-4 w-28"></div> <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-full"></div> <div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-28"></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 class="flex grow"/> <div class="flex grow"/>
<div class="card-actions justify-end"> <div class="card-actions justify-end">
<a href="/" target="_blank" class="btn btn-primary">RECURSION!</a> <a href="/" target="_blank" class="btn btn-primary">RECURSION!</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.main-title { .main-title {
width: 80%; width: 80%;
font-family: var(--title-font); font-family: var(--title-font);
} }
.developersProfile{ .developersProfile{
border-left: dashed oklch(var(--p)); border-left: dashed oklch(var(--p));
} }
#backgroundGif{ #backgroundGif{
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 40vh; max-height: 40vh;
object-fit: cover; object-fit: cover;
filter: blur(5px) brightness(0.6); filter: blur(5px) brightness(0.6);
} }
</style> </style>
{#if !mobile} {#if !mobile}
<style> <style>
.games { .games {
width: 24rem /* 384px */; width: 24rem /* 384px */;
} }
</style> </style>
{:else} {:else}
<style> <style>
.games { .games {
width: 80%; width: 80%;
display: flex; display: flex;
justify-self: center; justify-self: center;
} }
</style> </style>
{/if} {/if}

133
src/routes/comps/Carousel.svelte Normal file
View File

@ -0,0 +1,133 @@
<script lang="ts">
import { onMount } from "svelte";
export let images: string[] = []; // Expose images as a parameter
let currentIndex: number = 0;
let startX: number | null = null; // Track touch start X position
let deltaX: number = 0; // Track touch delta X
const nextSlide = (): void => {
currentIndex = (currentIndex + 1) % images.length;
};
const prevSlide = (): void => {
currentIndex = (currentIndex - 1 + images.length) % images.length;
};
const handleTouchStart = (event: TouchEvent): void => {
startX = event.touches[0].clientX;
};
const handleTouchMove = (event: TouchEvent): void => {
if (startX !== null) {
deltaX = event.touches[0].clientX - startX;
}
};
const handleTouchEnd = (): void => {
if (startX !== null) {
if (deltaX > 50) {
prevSlide(); // Swipe right
} else if (deltaX < -50) {
nextSlide(); // Swipe left
}
}
// Reset touch variables
startX = null;
deltaX = 0;
};
</script>
<style>
.carousel {
position: relative;
overflow: hidden;
width: 100%;
max-width: 800px;
height: 100%;
margin: auto;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}
.slide {
flex: 0 0 100%;
object-fit: cover;
object-position: center;
}
.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.control {
background: rgba(0, 0, 0, 0.5);
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
}
.indicators {
display: flex;
justify-content: center;
position: absolute;
bottom: 10px;
width: 100%;
}
.indicator {
width: 10px;
height: 10px;
margin: 0 5px;
background: white;
border-radius: 50%;
opacity: 0.5;
cursor: pointer;
}
.indicator.active {
opacity: 1;
}
</style>
<div
class="carousel"
on:touchstart|preventDefault={handleTouchStart}
on:touchmove|preventDefault={handleTouchMove}
on:touchend|preventDefault={handleTouchEnd}
>
<div
class="slides"
style="transform: translateX(-{currentIndex * 100}%);"
>
{#each images as image (image)}
<img class="slide" src={image} alt="Carousel Slide" />
{/each}
</div>
<div class="controls">
<button class="control" on:click={prevSlide}>&lt;</button>
<button class="control" on:click={nextSlide}>&gt;</button>
</div>
<div class="indicators">
{#each images as _, index}
<div
class="indicator {index === currentIndex ? 'active' : ''}"
on:click={() => (currentIndex = index)}
></div>
{/each}
</div>
</div>

8
src/routes/comps/ProfileSpacer.svelte Normal file
View File

@ -0,0 +1,8 @@
<div class="profileSpacer"></div>
<style>
.profileSpacer{
height: 1px;
border-bottom: solid oklch(var(--b3));
}
</style>

BIN
static/fonts/NotoSans-VariableFont_wdth,wght.ttf Normal file
View File

Binary file not shown.

100
static/stylesheets/global.css
View File

@ -1,51 +1,51 @@
/* --- FONTS --- */ /* --- FONTS --- */
@font-face { @font-face {
font-family: "CozetteVector"; font-family: "CozetteVector";
src: src:
local("CozetteVector"), local("CozetteVector"),
url("/fonts/CozetteVector.ttf") format("truetype"); url("/fonts/CozetteVector.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: "NotoSans"; font-family: "NotoSans";
src: src:
local("NotoSans"), local("NotoSans"),
url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype"); url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
} }
html { html {
background: var(--background1); background: var(--background1);
} }
body { body {
font-family: NotoSans, var(--main-font); font-family: NotoSans, var(--main-font);
color: var(--text1); /* Default to primary text color. */ color: var(--text1); /* Default to primary text color. */
background-color: var(--background); background-color: var(--background);
margin: 0; margin: 0;
} }
a, a:link a:visited { a, a:link a:visited {
color: var(--text1); color: var(--text1);
text-decoration: none; text-decoration: none;
} }
code { code {
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.3; line-height: 1.3;
letter-spacing: .32px; letter-spacing: .32px;
border-radius: .25rem; border-radius: .25rem;
padding: 0 .5rem; padding: 0 .5rem;
background-color: #333333; background-color: #333333;
} }
/* Print-specific styles */ /* Print-specific styles */
@media print { @media print {
.hide-on-print { .hide-on-print {
display: none; display: none;
} }
} }
.hidden { .hidden {
display: none; display: none;
} }

26
static/stylesheets/main-theme.css
View File

@ -1,13 +1,13 @@
:root { :root {
--title-font: 'CozetteVector'; --title-font: 'CozetteVector';
--main-font: 'Segoe UI'; --main-font: 'Segoe UI';
--text1: #eee; /* Primary text. */ --text1: #eee; /* Primary text. */
--text2: #cac9c6; /* Secondary text. */ --text2: #cac9c6; /* Secondary text. */
--text3: #b0afad; /* Third text color. */ --text3: #b0afad; /* Third text color. */
--text4: #868584; /* Fourth text color. */ --text4: #868584; /* Fourth text color. */
--background: #232222; --background: #232222;
--background1: #1b1a1a; --background1: #1b1a1a;
--primary: #227c9d; --primary: #227c9d;
--secondary: #ffcb77; --secondary: #ffcb77;
--accent: #17c3b2; --accent: #17c3b2;
} }

26
tailwind.config.js
View File

@ -1,14 +1,14 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [require("@tailwindcss/typography"), require('daisyui'),], plugins: [require("@tailwindcss/typography"), require('daisyui'),],
daisyui: { daisyui: {
themes: [ themes: [
"forest", "forest",
], ],
}, },
} }

12
vite.config.js
View File

@ -1,6 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()], plugins: [sveltekit()],
}); });