Compare commits

...

3 Commits

Author SHA1 Message Date
e073df59fd
feat: add cool stuff section 2025-04-02 12:32:12 +03:00
31d9b779e4
feat: add new icons 2025-04-02 09:17:19 +03:00
731a211371
feat: redo the home page layout 2025-04-02 09:05:15 +03:00
7 changed files with 231 additions and 213 deletions

@ -1,25 +1,25 @@
import { getLastPosts } from "$lib/bluesky.js"
import { getNowPlaying } from "$lib/lastfm"
import { getLastGame } from "$lib/steam"
import { noteFromBskyPost } from "../components/note.svelte"
import { getLastPosts } from '$lib/bluesky.js';
import { getNowPlaying } from '$lib/lastfm';
import { getLastGame } from '$lib/steam';
import { noteFromBskyPost } from '../components/note.svelte';
export const load = async ({}) => {
const lastTrack = getNowPlaying()
const lastGame = getLastGame()
const lastPosts = getLastPosts()
const lastNote = lastPosts.length > 0 ? noteFromBskyPost(lastPosts[0]) : null
let banners: number[] = []
while (banners.length < 3) {
const no = getBannerNo(banners)
banners.push(no)
}
return {banners, lastTrack, lastGame, lastNote}
}
export const load = async () => {
const lastTrack = getNowPlaying();
const lastGame = getLastGame();
const lastPosts = getLastPosts();
const lastNote = lastPosts.length > 0 ? noteFromBskyPost(lastPosts[0]) : null;
let banners: number[] = [];
while (banners.length < 3) {
const no = getBannerNo(banners);
banners.push(no);
}
return { banners, lastTrack, lastGame, lastNote };
};
const getBannerNo = (others: number[]) => {
const no = Math.floor(Math.random() * 20) + 1
if (others.includes(no)) {
return ((no + (Math.floor(Math.random() * 20))) % 20) + 1
}
return no
};
const no = Math.floor(Math.random() * 20) + 1;
if (others.includes(no)) {
return ((no + Math.floor(Math.random() * 20)) % 20) + 1;
}
return no;
};

@ -3,6 +3,7 @@
import Note from '../components/note.svelte';
import Window from '../components/window.svelte';
import LatestStuff from './lateststuff.md';
import CoolStuff from './coolstuff.md';
import { renderDate, renderRelativeDate } from '$lib/dateFmt';
import Tooltip from '../components/tooltip.svelte';
@ -14,110 +15,119 @@
let { data }: Props = $props();
</script>
<div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
<div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto">
<Window title="readme?" iconUri="/icons/question.webp" removePadding>
<div class="flex flex-col p-1.5 gap-1.5 prose prose-ralsei prose-img:m-0 leading-none">
<div class="flex flex-row gap-3 mx-auto bg-ralsei-black/20 overflow-hidden">
{#each data.banners as bannerNo, index}
{@const hideIfMobile = index === data.banners.length - 1}
<img
width="150"
height="20"
title="banners from https://blinkies.cafe/"
alt="banner"
class="
{hideIfMobile ? 'hidden' : ''} sm:inline w-[150px] [height:20px]
[image-rendering:pixelated_!important] shadow-ralsei-black shadow-[0px_4px_2px_0_rgb(0_0_0_/_0.05)]
"
src="/banners/{bannerNo}.gif"
/>
{/each}
</div>
<div class="flex flex-grow">
<Tooltip>
{#snippet tooltipContent()}
that's me! my angelsona :3c
{/snippet}
<div
class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black/20"
>
<img
class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]"
src="/pfp-iojkqpwerojnasduijf.webp"
alt="my angelsona"
/>
</div>
</Tooltip>
<div
class="flex flex-row flex-grow place-content-center ml-1.5 [padding:8px] bg-ralsei-black/20"
>
<ul
class="place-self-center m-0 mr-4 [padding-left:1em] sm:[padding-left:0.5em] leading-none marker:[content:'->'] [list-style-type:'->']"
>
<li class="[list-style-type:'->'] p-note">trying to do stuff</li>
<li class="[list-style-type:'->'] p-note">
<Tooltip
x="translate-x-none"
y="translate-y-none"
targetX="group-hover:translate-x-[80%]"
targetY="group-hover:-translate-y-[70%]"
>
{#snippet tooltipContent()}
angelrobotdollpuppything
{/snippet}
is a thing (it/they)
</Tooltip>
</li>
<li class="[list-style-type:'->']">
<span class="p-category">software engineer</span>,
<span class="p-category">indie game dev</span>
</li>
<li class="[list-style-type:'->']">
in <span class="p-country-name">turkey</span>
<i class="text-[0.5rem]">(get me out)</i>
</li>
<li class="[list-style-type:'->']">aka <span class="p-nickname">yusdacra</span></li>
</ul>
</div>
</div>
<div class="flex flex-row [padding:8px] bg-ralsei-black/20">
<p class="leading-none m-0 text-sm">
hi there
<img
class="relative inline h-5 animate-squiggle pb-1"
src="/wavey.gif"
alt="wavey"
title="hi :33"
/>
<i
>i'm <a class="m-0 [padding:0px] p-name u-url u-uid" href={PUBLIC_BASE_URL}
><span>dusk</span></a
></i
>
</p>
<div class="grow"></div>
<a
class="
place-self-end [font-family:'Doll_Mono'] text-ralsei-pink-neon text-shadow-none hover:text-shadow-pink
hover:!animate-none hover:!no-underline opacity-20 hover:opacity-100 transition-opacity [transition-duration:300ms]
"
title="dollcode? sure hope they do"
href="https://dollcode.v01dlabs.sh/">▌▖▌▖‍▌▌▘▌‍▌▌▘▖‍▌▘▘▘‍</a
>
</div>
</div>
</Window>
<Window title="latest stuff" style="mt-auto">
<div class="flex flex-col md:flex-row gap-4 md:gap-8 md:h-full h-card">
<div class="flex flex-col gap-4 md:gap-8 ml-auto place-items-end">
<Window title="stuff im doing.." iconUri="/icons/msg_information.webp">
<div class="prose prose-ralsei prose-img:m-0 leading-6">
<LatestStuff />
</div>
</Window>
<Window style="md:mr-4" title="status" iconUri="/icons/msn.webp" removePadding>
{#if data.lastNote}
<div class="m-1.5 flex flex-col font-monospace text-sm">
<p
class="prose prose-ralsei p-1 border-4 text-sm bg-ralsei-black"
style="border-style: double double none double;"
title={renderDate(data.lastNote.published)}
>
<a href="/entries">last log was…</a>
published {renderRelativeDate(data.lastNote.published)}!
</p>
<div class="mt-0 p-1.5 border-4 border-double bg-ralsei-black min-w-full max-w-[60ch]">
<Note note={data.lastNote} onlyContent />
</div>
</div>
{/if}
{#if data.lastTrack}
<div class="flex flex-row gap-0.5 m-1.5 border-4 border-double bg-ralsei-black">
<!-- svelte-ignore a11y_missing_attribute -->
{#if data.lastTrack.image}
<img
class="border-4 w-[4.5rem] h-[4.5rem]"
style="border-style: none double none none;"
src={data.lastTrack.image}
/>
{:else}
<img
class="border-4 w-[4.5rem] h-[4.5rem] p-2"
style="border-style: none double none none; image-rendering: pixelated;"
src="/icons/cd_audio.webp"
/>
{/if}
<div class="flex flex-col max-w-[60ch] p-2">
<p
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white"
>{data.lastTrack.playing ? 'listening to' : 'listened to'}</span
>
<a
title={data.lastTrack.name}
href="https://www.last.fm/user/yusdacra"
class="hover:underline motion-safe:hover:animate-squiggle">{data.lastTrack.name}</a
>
</p>
<p
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
>
<span class="text-shadow-white text-ralsei-white">by</span>
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
</p>
<p
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
>
{renderRelativeDate(data.lastTrack.when)}
</p>
</div>
</div>
{/if}
{#if data.lastGame}
<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
<!-- svelte-ignore a11y_missing_attribute -->
<img
class="border-4 w-[4.5rem] h-[4.5rem]"
style="border-style: none double none none;"
width="64"
height="64"
src={data.lastGame.icon}
/>
<div class="flex flex-col max-w-[60ch] p-2 gap-0.5 overflow-hidden">
<p
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white"
>{data.lastGame.playing ? 'playing' : 'played'}</span
>
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}
>{data.lastGame.name}</a
>
</p>
<p
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
>
{renderRelativeDate(data.lastGame.when)}
</p>
<!-- svelte-ignore a11y_missing_attribute -->
<a
href="https://steamcommunity.com/id/yusdacra"
class="text-xs hover:underline text-shadow-green text-ralsei-green-light"
><img class="inline w-4" src={data.lastGame.pfp} />
<span class="align-middle">steam profile</span></a
>
</div>
</div>
{/if}
</Window>
<Window title="cool stuff,,">
<div class="max-w-[50ch] prose prose-ralsei prose-a:!animate-none prose-img:m-0 leading-snug">
<CoolStuff />
</div>
</Window>
</div>
<div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto w-full md:w-fit place-items-end">
<div class="flex flex-col gap-4 md:gap-8 mr-auto w-full md:w-fit place-items-start">
<Window title="links!" iconUri="/icons/contact.webp">
<div
class="prose prose-ralsei prose-ul:px-[0.9rem] prose-ul:leading-[1.1rem] prose-headings:leading-none"
class="[width:40ch] prose prose-ralsei prose-ul:px-[0.9rem] prose-ul:leading-[1.1rem] prose-headings:leading-none"
>
<ul>
<li>discord: yusdacra</li>
@ -168,101 +178,97 @@
</div>
</div>
</Window>
<Window title="status" style="mt-auto" removePadding>
{#if data.lastNote}
<div class="m-1.5 flex flex-col font-monospace text-sm">
<p
class="prose prose-ralsei p-1 border-4 text-sm bg-ralsei-black"
style="border-style: double double none double;"
title={renderDate(data.lastNote.published)}
<Window style="md:ml-2" title="readme?" iconUri="/icons/question.webp" removePadding>
<div class="flex flex-col p-1.5 gap-1.5 prose prose-ralsei prose-img:m-0 leading-none">
<div class="flex flex-row gap-3 mx-auto bg-ralsei-black/20 overflow-hidden">
{#each data.banners as bannerNo, index}
{@const hideIfMobile = index === data.banners.length - 1}
<img
width="150"
height="20"
title="banners from https://blinkies.cafe/ (refresh to get different ones! :3)"
alt="banner"
class="
{hideIfMobile ? 'hidden' : ''} sm:inline w-[150px] [height:20px]
[image-rendering:pixelated_!important] shadow-ralsei-black shadow-[0px_4px_2px_0_rgb(0_0_0_/_0.05)]
"
src="/banners/{bannerNo}.gif"
/>
{/each}
</div>
<div class="flex flex-grow">
<Tooltip>
{#snippet tooltipContent()}
that's me! my angelsona ^^
{/snippet}
<div
class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black/20"
>
<img
class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]"
src="/pfp-iojkqpwerojnasduijf.webp"
alt="my angelsona"
/>
</div>
</Tooltip>
<div
class="flex flex-row flex-grow place-content-center ml-1.5 [padding:8px] bg-ralsei-black/20"
>
<a href="/entries">last log was…</a>
published {renderRelativeDate(data.lastNote.published)}!
<ul
class="place-self-center m-0 mr-4 [padding-left:1em] sm:[padding-left:0.5em] leading-none marker:[content:'->'] [list-style-type:'->']"
>
<li class="[list-style-type:'->'] p-note">trying to do stuff</li>
<li class="[list-style-type:'->'] p-note">
<Tooltip
x="translate-x-none"
y="-translate-y-[40%]"
targetX="group-hover:translate-x-[40%]"
targetY="group-hover:-translate-y-[70%]"
>
{#snippet tooltipContent()}
angelrobotpuppydollthing
{/snippet}
is a <i>thing</i> (it/they)
</Tooltip>
</li>
<li class="[list-style-type:'->']">
<span class="p-category">software engineer</span>,
<span class="p-category">indie game dev</span>
</li>
<li class="[list-style-type:'->']">
in <span class="p-country-name">turkey</span>
<i class="text-[0.5rem]">(get me out)</i>
</li>
<li class="[list-style-type:'->']">aka <span class="p-nickname">yusdacra</span></li>
</ul>
</div>
</div>
<div class="flex flex-row [padding:8px] bg-ralsei-black/20">
<p class="leading-none m-0 text-sm">
hi there
<img
class="relative inline h-5 animate-squiggle pb-1"
src="/wavey.gif"
alt="wavey"
title="hi :33"
/>
<i
>i'm <a class="m-0 [padding:0px] p-name u-url u-uid" href={PUBLIC_BASE_URL}
><span>dusk</span></a
></i
>
</p>
<div class="mt-0 p-1.5 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
<Note note={data.lastNote} onlyContent />
</div>
<div class="grow"></div>
<a
class="
place-self-end [font-family:'Doll_Mono'] text-ralsei-pink-neon text-shadow-none hover:text-shadow-pink
hover:!animate-none hover:!no-underline opacity-20 hover:opacity-100 transition-opacity [transition-duration:300ms]
"
title="dollcode? sure hope they do"
href="https://dollcode.v01dlabs.sh/">▌▖▌▖‍▌▌▘▌‍▌▌▘▖‍▌▘▘▘‍</a
>
</div>
{/if}
{#if data.lastTrack}
<div class="flex flex-row gap-0.5 m-1.5 border-4 border-double bg-ralsei-black">
<!-- svelte-ignore a11y_missing_attribute -->
{#if data.lastTrack.image}
<img
class="border-4 w-[4.5rem] h-[4.5rem]"
style="border-style: none double none none;"
src={data.lastTrack.image}
/>
{:else}
<img
class="border-4 w-[4.5rem] h-[4.5rem] p-2"
style="border-style: none double none none; image-rendering: pixelated;"
src="/icons/cd_audio.webp"
/>
{/if}
<div class="flex flex-col max-w-[40ch] p-2">
<p
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white"
>{data.lastTrack.playing ? 'listening to' : 'listened to'}</span
>
<a
title={data.lastTrack.name}
href="https://www.last.fm/user/yusdacra"
class="hover:underline motion-safe:hover:animate-squiggle">{data.lastTrack.name}</a
>
</p>
<p
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-shadow-white text-ralsei-white">by</span>
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
</p>
<p
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
{renderRelativeDate(data.lastTrack.when)}
</p>
</div>
</div>
{/if}
{#if data.lastGame}
<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
<!-- svelte-ignore a11y_missing_attribute -->
<img
class="border-4 w-[4.5rem] h-[4.5rem]"
style="border-style: none double none none;"
width="64"
height="64"
src={data.lastGame.icon}
/>
<div class="flex flex-col max-w-[40ch] p-2 gap-0.5 overflow-hidden">
<p
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white"
>{data.lastGame.playing ? 'playing' : 'played'}</span
>
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}
>{data.lastGame.name}</a
>
</p>
<p
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
{renderRelativeDate(data.lastGame.when)}
</p>
<!-- svelte-ignore a11y_missing_attribute -->
<a
href="https://steamcommunity.com/id/yusdacra"
class="text-xs hover:underline text-shadow-green text-ralsei-green-light"
><img class="inline w-4" src={data.lastGame.pfp} />
<span class="align-middle">steam profile</span></a
>
</div>
</div>
{/if}
</div>
</Window>
</div>
</div>

12
src/routes/coolstuff.md Normal file

@ -0,0 +1,12 @@
+++
layout = false
+++
<div class="flex flex-row gap-3 place-items-start">
<a title="skyrina" href="https://skyrina.dev/"><img src="/others/skylar.gif" alt="skyrina"></a>
<a title="candlelitsmiles" href="https://candlelitsmiles.neocities.org"><img src="https://candlelitsmiles.neocities.org/candlebuttonone.png" alt="candlelitsmiles"></a>
<a title="indieweb" href="https://indieweb.org/"><img src="https://indieweb.org/images/9/91/indieweb88x31-retro-gif.gif" alt="indieweb"></a>
</div>
<span class="text-sm">please send me your buttons or stuff to add !! ;3</span><br>
<span class="text-xs italic">last updated on: 02-04-2025</span>

@ -2,6 +2,6 @@
layout = false
+++
*last updated on: 19-02-2025*
currently working on a game under the name `packet.runner`, read some very WIP stuff about it [here](https://doc.gaze.systems/LsE08EU7QOSKm7xps_treA).
currently working on a game under the name `packet.runner`, read some very WIP stuff about it [here](https://doc.gaze.systems/LsE08EU7QOSKm7xps_treA).
<span class="text-xs italic">last updated on: 19-02-2025</span>

Binary file not shown.

After

(image error) Size: 178 B

BIN
static/icons/msn.webp Normal file

Binary file not shown.

After

(image error) Size: 200 B

BIN
static/others/skylar.gif Normal file

Binary file not shown.

After

(image error) Size: 12 KiB