There's complexity in simplicity:
This commit is contained in:
parent
73c366e0f0
commit
5f78e8bf04
File diff suppressed because it is too large
Load Diff
|
|
@ -10,22 +10,18 @@
|
|||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@poppanator/sveltekit-svg": "^4.2.1",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@zerodevx/svelte-img": "^2.1.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"daisyui": "^4.12.12",
|
||||
"postcss": "^8.4.47",
|
||||
"sass": "^1.77.4",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"svelte-confetti": "^1.0.0",
|
||||
"svelte-highlight": "^7.6.0",
|
||||
"svelte-parallax": "^0.6.0",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
|
|
@ -34,8 +30,7 @@
|
|||
"type": "module",
|
||||
"dependencies": {
|
||||
"svelte-media-queries": "^1.6.2",
|
||||
"svelte-particles": "^2.12.0",
|
||||
"theme-change": "^2.5.0",
|
||||
"tsparticles-slim": "^2.12.0"
|
||||
"svelte-parallax": "^0.6.0",
|
||||
"theme-change": "^2.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
import HorizonalStack from "../Utils/HorizonalStack.svelte";
|
||||
import Img from '@zerodevx/svelte-img'
|
||||
import VerticalStack from "../Utils/VerticalStack.svelte";
|
||||
import ZSpacer from "../Utils/ZSpacer.svelte";
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
|
|
|
|||
|
|
@ -9,10 +9,12 @@
|
|||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
|
||||
const footerCollapseThreshold : string = '1000px';
|
||||
const headerCollapseThreshold : string = '1000px';
|
||||
let footerCollapse : boolean;
|
||||
let headerCollapse : boolean;
|
||||
let isMobile : boolean;
|
||||
|
||||
let navbarHidden : boolean = true;
|
||||
|
||||
|
|
@ -38,43 +40,25 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
|
||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
|
||||
|
||||
<!-- Nav bar -->
|
||||
<div class="bg-base-200 p-0">
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="nav-bar pr-4 bg-base-200">
|
||||
{#if !headerCollapse}
|
||||
{#if !isMobile}
|
||||
<div class="desktop">
|
||||
<a href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<h3 id="logo-text">The Deprived Devs</h3>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<select class="prose" data-choose-theme>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="synthwave">Synthwave</option>
|
||||
<option value="retro">Retro</option>
|
||||
<option value="cyberpunk">Cyberpunk</option>
|
||||
<option value="valentine">Valentine</option>
|
||||
<option value="halloween">Halloween</option>
|
||||
<option value="forest">Forest</option>
|
||||
<option value="aqua">Aqua</option>
|
||||
<option value="black">Black</option>
|
||||
<option value="luxury">Luxury</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="business">Business</option>
|
||||
<option value="night">Night</option>
|
||||
<option value="coffee">Coffee</option>
|
||||
<option value="dim">Dim</option>
|
||||
<option value="sunset" selected>Sunset</option>
|
||||
</select>
|
||||
|
||||
<a href="/">Home</a>
|
||||
<a href="https://botalex.itch.io/">Games</a>
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
<a href="/about">About</a> -->
|
||||
</div>
|
||||
|
|
@ -82,7 +66,7 @@
|
|||
<div class="collapsed">
|
||||
<a on:click={resetNavBar} href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<h3 id="logo-text">The Deprived Devs</h3>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
|
||||
|
|
@ -91,43 +75,8 @@
|
|||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<select data-choose-theme>
|
||||
<option value="light">Default</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="cupcake">Cupcake</option>
|
||||
<option value="bumblebee">Bumblebee</option>
|
||||
<option value="emerald">Emerald</option>
|
||||
<option value="corporate">Corporate</option>
|
||||
<option value="synthwave">Synthwave</option>
|
||||
<option value="retro">Retro</option>
|
||||
<option value="cyberpunk">Cyberpunk</option>
|
||||
<option value="valentine">Valentine</option>
|
||||
<option value="halloween">Halloween</option>
|
||||
<option value="garden">Garden</option>
|
||||
<option value="forest">Forest</option>
|
||||
<option value="aqua">Aqua</option>
|
||||
<option value="lofi">Lofi</option>
|
||||
<option value="pastel">Pastel</option>
|
||||
<option value="fantasy">Fantasy</option>
|
||||
<option value="wireframe">Wireframe</option>
|
||||
<option value="black">Black</option>
|
||||
<option value="luxury">Luxury</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="cmyk">CMYK</option>
|
||||
<option value="autumn">Autumn</option>
|
||||
<option value="business">Business</option>
|
||||
<option value="acid">Acid</option>
|
||||
<option value="lemonade">Lemonade</option>
|
||||
<option value="night">Night</option>
|
||||
<option value="coffee">Coffee</option>
|
||||
<option value="winter">Winter</option>
|
||||
<option value="dim">Dim</option>
|
||||
<option value="nord">Nord</option>
|
||||
<option value="sunset">Sunset</option>
|
||||
</select>
|
||||
|
||||
<a on:click={resetNavBar} href="/">Home</a>
|
||||
<a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a>
|
||||
<!-- <a on:click={resetNavBar} href="/">Home</a> -->
|
||||
<a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
|
||||
<a on:click={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
|
|
@ -152,19 +101,24 @@
|
|||
<span>Sylvester Junge</span>
|
||||
<br>
|
||||
<span>Zhentao Wei</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
|
||||
</div>
|
||||
<div>
|
||||
<h3>About Us</h3>
|
||||
<a href="/about">About</a>
|
||||
<h3><b>About this website</b></h3>
|
||||
<!-- <a href="/" target="_blank">Recursion</a> -->
|
||||
<div class="flex justify-center">
|
||||
This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
|
||||
<img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
|
||||
</div>
|
||||
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
|
||||
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<h3><b>Contact</b></h3>
|
||||
<a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
|
||||
<div class="mt-2"></div>
|
||||
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
|
||||
<!-- <span>Discord</span> -->
|
||||
<img src="/images/icons/discord.svg" alt="Discord"/>
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -268,6 +222,10 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
& h3 {
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.about-container > div {
|
||||
|
|
@ -325,7 +283,7 @@
|
|||
</style>
|
||||
{/if}
|
||||
|
||||
{#if headerCollapse}
|
||||
{#if isMobile}
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<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';
|
||||
|
|
@ -6,163 +7,238 @@
|
|||
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
||||
import Timeline from '../comps/timeline/timeline.svelte';
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import { Confetti } from "svelte-confetti"
|
||||
import { tick } from 'svelte'
|
||||
|
||||
|
||||
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
|
||||
import FrontFold from './comps/FrontFold.svelte';
|
||||
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"
|
||||
|
||||
const mobileThreshold : string = '600px'; // was 1000px. zhen testing
|
||||
let mobile : boolean;
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
// Restore scroll position on mount
|
||||
|
||||
let showConfetti: boolean = false;
|
||||
function onProgressConfetti(progress: number){
|
||||
console.log(progress);
|
||||
|
||||
showConfetti = !mobile && progress > 0.225 || mobile && progress > 0.32;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
|
||||
|
||||
<Parallax sections={2.5}>
|
||||
<ParallaxLayer span={0.6} rate={0.2} class="pointer-events-none">
|
||||
<div class="pointer-events-auto" 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="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;">{@html !mobile ? "Deprived Devs" : "Deprived<br/>Devs"}</h1>
|
||||
<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/>
|
||||
<h1 class="-mt-6 prose" style="font-size: 2rem;">
|
||||
Devs
|
||||
</h1>
|
||||
{/if}
|
||||
</h1>
|
||||
{#if mobile}
|
||||
<div style="width: 100px; height: 100px;"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
<ParallaxLayer offset={0.55} rate={0.3} class="bg-base-200 pointer-events-none">
|
||||
</div>
|
||||
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer onProgress={onProgressConfetti} offset={0.75}>
|
||||
<div class="prose flex justify-center m-auto">
|
||||
<h1 class="main-title text-center" style="font-size: {!mobile ? 3 : 2}rem;">
|
||||
Developers!
|
||||
<div class="flex justify-center w-full px-8 py-4">
|
||||
<div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
|
||||
<h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
|
||||
Developers
|
||||
</h1>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
|
||||
<!-- Decorative: -->
|
||||
<StickyLayer offset={(!mobile) ? ({ top: 0.4, bottom: 0.75 }) : ({ top: 0.4, bottom: 0.4 })} class="pointer-events-none">
|
||||
<div class="prose font-mono pointer-events-auto h-full" style="max-width: 100%;">
|
||||
<div class="flex justify-center items-center h-full relative">
|
||||
<div class="flex justify-center" style="position: absolute; top: 30vh; {!mobile ? "max-width: 35vw;" : "width: 100%;"}">
|
||||
{#if showConfetti}
|
||||
<div>
|
||||
<Confetti noGravity cone amount={50} colorArray={["white"]} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">
|
||||
<FrontFold Title="Alex / Zhen" Checked={true}>
|
||||
<p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
|
||||
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2>
|
||||
<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>
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StickyLayer>
|
||||
|
||||
<ParallaxLayer offset={1.5} rate={0.3} class="bg-base-200 pointer-events-none" style="box-shadow: 0 -1rem 10px rgba(0, 0, 0, 0.2);" >
|
||||
<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto">
|
||||
<article class="pt-16 prose overflow-hidden font-mono {mobile ? "px-8" : ""}">
|
||||
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 5 : 3}rem; ">About us</h1>
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2>
|
||||
<span>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2>
|
||||
<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>
|
||||
</div>
|
||||
</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" : ""}">
|
||||
<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>
|
||||
</article>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div class="{!mobile ? "py-16" : "py-4"}"/>
|
||||
<div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<div class="flex w-52 flex-col gap-4">
|
||||
<div class="skeleton h-32 w-full"></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>
|
||||
<!-- 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 class="flex w-52 flex-col gap-4">
|
||||
<div class="skeleton h-32 w-full"></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>
|
||||
{#if !mobile}
|
||||
<div class="flex w-52 flex-col gap-4">
|
||||
<div class="skeleton h-32 w-full"></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>
|
||||
<div class="flex w-52 flex-col gap-4">
|
||||
<div class="skeleton h-32 w-full"></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>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h6 class="prose text-base-300"><b>(These will never load)</b></h6>
|
||||
<!-- 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>
|
||||
</ParallaxLayer>
|
||||
|
||||
<!-- <StickyLayer offset={{ top: 1.75, bottom: 2 }} >
|
||||
<div class="flex justify-center prose main-title overflow-hidden">
|
||||
<h1 style="font-size: {!mobile ? 5 : 3}rem;">About us</h1>
|
||||
</div>
|
||||
</StickyLayer> -->
|
||||
</Parallax>
|
||||
|
||||
<Timeline/>
|
||||
<!-- 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);
|
||||
}
|
||||
|
||||
.developersProfile{
|
||||
border-left: dashed oklch(var(--p));
|
||||
}
|
||||
|
||||
#backgroundGif{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 40vh;
|
||||
object-fit: cover;
|
||||
filter: blur(5px) brightness(0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if mobile}
|
||||
{#if !mobile}
|
||||
<style>
|
||||
#news-section {
|
||||
transition-duration: 500ms;
|
||||
transition-property: width;
|
||||
width: 90% !important;
|
||||
.games {
|
||||
width: 24rem /* 384px */;
|
||||
}
|
||||
.news-container {
|
||||
flex-direction: column !important;
|
||||
</style>
|
||||
|
||||
{:else}
|
||||
<style>
|
||||
.games {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.dummy {
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
/* #more-posts { */
|
||||
/* flex-grow: 1 !important; */
|
||||
/* } */
|
||||
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,19 @@
|
|||
url("/fonts/CozetteVector.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "NotoSans";
|
||||
src:
|
||||
local("NotoSans"),
|
||||
url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--main-font);
|
||||
font-family: NotoSans, var(--main-font);
|
||||
color: var(--text1); /* Default to primary text color. */
|
||||
background-color: var(--background);
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
:root {
|
||||
--title-font: 'CozetteVector';
|
||||
--main-font: 'Segoe UI';
|
||||
--text1: #fff; /* Primary text. */
|
||||
--text1: #eee; /* Primary text. */
|
||||
--text2: #cac9c6; /* Secondary text. */
|
||||
--text3: #b0afad; /* Third text color. */
|
||||
--text4: #868584; /* Fourth text color. */
|
||||
|
|
|
|||
|
|
@ -7,23 +7,7 @@ export default {
|
|||
plugins: [require("@tailwindcss/typography"), require('daisyui'),],
|
||||
daisyui: {
|
||||
themes: [
|
||||
"light",
|
||||
"dark",
|
||||
"synthwave",
|
||||
"retro",
|
||||
"cyberpunk",
|
||||
"valentine",
|
||||
"halloween",
|
||||
"forest",
|
||||
"aqua",
|
||||
"black",
|
||||
"luxury",
|
||||
"dracula",
|
||||
"business",
|
||||
"night",
|
||||
"coffee",
|
||||
"dim",
|
||||
"sunset",
|
||||
],
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import { imagetools } from '@zerodevx/svelte-img/vite' // https://zerodevx.github.io/svelte-img/
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit(), imagetools()],
|
||||
plugins: [sveltekit()],
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue