Compare commits
2 Commits
bf48e66dbe
...
bc746e82b6
Author | SHA1 | Date |
---|---|---|
DutchEllie | bc746e82b6 | |
DutchEllie | 6e5f1f6903 |
|
@ -2,3 +2,7 @@
|
|||
|
||||
I want to test SvelteKit.
|
||||
Might want to rewrite my website in it.
|
||||
|
||||
## TODOs
|
||||
|
||||
- <https://jochemvogel.medium.com/how-to-cache-dynamic-pages-on-demand-with-a-service-worker-in-sveltekit-4b4a7652583d>
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
let dob = new Date('2000-12-01');
|
||||
// @ts-ignore
|
||||
let age = new Date() - dob;
|
||||
let years = Math.floor(age / 1000 / 60 / 60 / 24 / 365);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
Hi, I am DutchEllie. I am the creator of this website. Thanks for checking it out! I made this
|
||||
website partly to have some project to express myself with and to learn some new skills.
|
||||
<br />
|
||||
<br />
|
||||
I am a {years} year old person from The Netherlands. I am still a student and I am aspiring to be a
|
||||
Cloud Engineer.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
My favorite programming language is Go. It's just so nice. Unfortunately, browsers don't run Go code
|
||||
(or well, they can with WebAssembly) and that's why I had to make this website in JavaScript. I had
|
||||
done this in Go, but it was just too clunky. The results of that can be seen in the Gitea repository
|
||||
<a
|
||||
class="underline text-[#002896] hover:text-blue-500"
|
||||
href="https://dutchellie.nl/DutchEllie/proper-website-2">DutchEllie/proper-website-2</a
|
||||
>.
|
||||
<br>
|
||||
<br>
|
||||
As for other things, here is a list!
|
||||
</div>
|
|
@ -0,0 +1,60 @@
|
|||
<script>
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full bg-red-100 rounded-xl">
|
||||
<div class="p-3 rounded-t-xl bg-indigo-200">
|
||||
<h1 class="font-semibold">Profile:</h1>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p><span class="font-bold">Name: </span>DutchEllie</p>
|
||||
<p><span class="font-bold">Country: </span>The Netherlands</p>
|
||||
<p><span class="font-bold">Occupation: </span>Student</p>
|
||||
<div>
|
||||
<span class="font-bold">Languages:</span>
|
||||
<ul class="grid grid-cols-10 list-none">
|
||||
<div class="col-start-2 col-span-3">
|
||||
<p>🌍</p>
|
||||
<p>Dutch</p>
|
||||
<p>English</p>
|
||||
<p>Japanese</p>
|
||||
<p>💻</p>
|
||||
<p>Go</p>
|
||||
<p>C/C++</p>
|
||||
<p>JS</p>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div class="mb-1 h-5 flex-grow rounded-xl">
|
||||
<div class="h-5 w-7/12 rounded-xl" />
|
||||
</div>
|
||||
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
||||
<div class="h-5 w-12/12 bg-indigo-300 rounded-xl" />
|
||||
</div>
|
||||
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
||||
<div class="h-5 w-11/12 bg-indigo-300 rounded-xl" />
|
||||
</div>
|
||||
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
||||
<div class="h-5 w-2/12 bg-indigo-300 rounded-xl" />
|
||||
</div>
|
||||
<div class="mb-1 h-5 flex-grow rounded-xl">
|
||||
<div class="h-5 w-7/12 rounded-xl" />
|
||||
</div>
|
||||
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
||||
<div class="h-5 w-11/12 bg-indigo-300 rounded-xl" />
|
||||
</div>
|
||||
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
||||
<div class="h-5 w-8/12 bg-indigo-300 rounded-xl" />
|
||||
</div>
|
||||
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
||||
<div class="h-5 w-4/12 bg-indigo-300 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.break {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
|
@ -1,28 +0,0 @@
|
|||
<script>
|
||||
import Button from './navbutton.svelte';
|
||||
</script>
|
||||
|
||||
<div class="md:h-16 h-24 align-middle grid grid-cols-7 sm:grid-rows-1 grid-rows-2">
|
||||
<div class="h-16 col-span-7 sm:col-span-4 flex flex-row flex-wrap">
|
||||
<img
|
||||
class="h-4/5 md:ml-20 my-auto"
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
|
||||
alt="Icon"
|
||||
/>
|
||||
<div class="pl-5 mt-1">
|
||||
<h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
|
||||
<p class="h-min text-xs">Surviving the rewriting</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-start-5 col-start-1 col-end-7 grid grid-cols-6">
|
||||
<nav
|
||||
class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md"
|
||||
>
|
||||
<Button link="/" text="Home" />
|
||||
<Button link="/about" text="About" />
|
||||
</nav>
|
||||
</div>
|
||||
<!-->
|
||||
<hr class="col-span-full border-slate-700" />
|
||||
</!-->
|
||||
</div>
|
|
@ -1,4 +1,6 @@
|
|||
<div class="md:pl-10 px-5 md:px-0 col-span-7 md:col-span-6 lg:col-span-5">
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<h1
|
||||
class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
|
||||
>
|
||||
|
@ -41,22 +43,21 @@
|
|||
<a href="https://drone.dutchellie.nl/DutchEllie/svelte-testing"
|
||||
>Drone CI/CD
|
||||
<img
|
||||
class="ml-2 mb-1 inline"
|
||||
class="ml-2 mb-1 inline"
|
||||
src="https://drone.dutchellie.nl/api/badges/DutchEllie/svelte-testing/status.svg?ref=refs/heads/main"
|
||||
alt="Drone build status"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
<br />
|
||||
<p>
|
||||
This entire project is open source (GPL-3) and the source code is linked above.
|
||||
In addition, a CI/CD pipeline deploys this website on every push.
|
||||
This entire project is open source (GPL-3) and the source code is linked above. In
|
||||
addition, a CI/CD pipeline deploys this website on every push.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
|
||||
<style>
|
||||
|
|
|
@ -1,31 +1,31 @@
|
|||
<script>
|
||||
let img = '/images/literallyme.jpg'
|
||||
let clicked = false
|
||||
let img = '/images/literallyme.jpg';
|
||||
let clicked = false;
|
||||
function cursify() {
|
||||
if (!clicked) {
|
||||
img = '/images/whydidyoudothis.png'
|
||||
clicked = true
|
||||
img = '/images/whydidyoudothis.png';
|
||||
clicked = true;
|
||||
} else {
|
||||
img = '/images/literallyme.jpg'
|
||||
clicked = false
|
||||
img = '/images/literallyme.jpg';
|
||||
clicked = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="hidden md:block col-start-7 mt-10 mr-2">
|
||||
<img
|
||||
class="w-auto "
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-len1.webp"
|
||||
alt="Rin and Len"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<img class="rounded"
|
||||
src="{img}" alt="literally me wink wink" on:click={cursify}/>
|
||||
<p class="text-center mt-2">
|
||||
{#if !clicked}
|
||||
yes, i love japanese stuff, how can you tell?
|
||||
{:else}
|
||||
oh god, what have you done?! TAKE IT AWAY!
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 mr-2">
|
||||
<img
|
||||
class="w-auto "
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-len1.webp"
|
||||
alt="Rin and Len"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<img class="rounded" src={img} alt="literally me wink wink" on:click={cursify} />
|
||||
<p class="text-center mt-2">
|
||||
{#if !clicked}
|
||||
yes, i love japanese stuff, how can you tell?
|
||||
{:else}
|
||||
oh god, what have you done?! TAKE IT AWAY!
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -1,24 +1,35 @@
|
|||
<div
|
||||
class="hidden col-start-1 col-span-1 rounded-xl ml-2 mt-10 lg:flex flex-col justify-start gap-2 p-2"
|
||||
>
|
||||
<div class=" shrink">
|
||||
<h2 class="font-semibold text-left mb-2">Special place</h2>
|
||||
<p class="">
|
||||
Welcome to my sidebar (o^▽^o)
|
||||
<br />
|
||||
Here you will find random shit!
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col xl:flex-row gap-2 xl:mr-2">
|
||||
<img
|
||||
class="flex-1 rounded xl:w-1/2"
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/kanata-1.gif"
|
||||
alt="Amane Kanata"
|
||||
/>
|
||||
<img
|
||||
class=" flex-1 rounded xl:w-1/2"
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/kanata-1.gif"
|
||||
alt="Amane Kanata"
|
||||
/>
|
||||
</div>
|
||||
<script lang="ts">
|
||||
import CurrentMusicStore from '../../stores/currentMusic';
|
||||
import Musicplayer from '../misc/musicplayer.svelte';
|
||||
|
||||
let newMusicUrl = '';
|
||||
|
||||
function onSubmit() {
|
||||
$CurrentMusicStore.musicUrl = newMusicUrl;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class=" shrink">
|
||||
<h2 class="font-semibold text-left mb-2">Special place</h2>
|
||||
<p class="">
|
||||
Welcome to my sidebar (o^▽^o)
|
||||
<br />
|
||||
Here you will find random shit!
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col xl:flex-row gap-2 xl:mr-2">
|
||||
<img
|
||||
class="flex-1 rounded xl:w-1/2"
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/kanata-1.gif"
|
||||
alt="Amane Kanata"
|
||||
/>
|
||||
<img
|
||||
class=" flex-1 rounded xl:w-1/2"
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/kanata-1.gif"
|
||||
alt="Amane Kanata"
|
||||
/>
|
||||
</div>
|
||||
<form on:submit|preventDefault={onSubmit}>
|
||||
<input type="text" name="musicurl" placeholder="URL" bind:value={newMusicUrl} />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
<div class="h-full w-full grid grid-cols-7 gap-3 overflow-auto">
|
||||
<slot/>
|
||||
</div>
|
|
@ -0,0 +1,3 @@
|
|||
<div class="">
|
||||
|
||||
</div>
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import Menu from './menu.svelte';
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click={() => {
|
||||
open = !open;
|
||||
}}
|
||||
class="w-full h-full min-w-max"
|
||||
>
|
||||
<img src="/images/icons8-menu.svg" alt="Hamburger menu" />
|
||||
</button>
|
||||
|
||||
<Menu bind:open />
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import Hamburger from './hamburger.svelte';
|
||||
import Button from './navbutton.svelte';
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-7 grid-rows-1 sm:grid-rows-1 gap-y-2 mt-2 sm:mt-4 sm:pl-4 align-middle h-24 md:h-16">
|
||||
<div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row">
|
||||
<div class="h-full">
|
||||
<img
|
||||
class="hidden sm:block h-full my-auto"
|
||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
|
||||
alt="Icon"
|
||||
/>
|
||||
<div class="block sm:hidden ml-2 mt-4">
|
||||
<Hamburger />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full sm:w-auto sm:pl-5 sm:my-auto text-center mx-auto sm:mx-0 pr-9 sm:pr-0">
|
||||
<h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
|
||||
<p class="h-min text-xs">Surviving the rewriting</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
|
||||
<nav class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md">
|
||||
<Button link="/" text="Home" />
|
||||
<Button link="/about" text="About" />
|
||||
</nav>
|
||||
</div>
|
||||
<!-->
|
||||
<hr class="col-span-full border-slate-700" />
|
||||
</!-->
|
||||
</div>
|
|
@ -0,0 +1,3 @@
|
|||
<div class="h-full w-full grid grid-cols-7 gap-3">
|
||||
<slot/>
|
||||
</div>
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import Button from './navbutton.svelte';
|
||||
export /**
|
||||
* @type {any}
|
||||
*/
|
||||
let open;
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
on:click={() => {
|
||||
open = !open;
|
||||
}}
|
||||
class="z-10 bg-white absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
|
||||
>
|
||||
<Button link="/" text="Home" />
|
||||
<Button link="/about" text="About" />
|
||||
</div>
|
||||
{/if}
|
|
@ -0,0 +1,8 @@
|
|||
<script lang="ts">
|
||||
import CurrentMusicStore from '../../stores/currentMusic';
|
||||
|
||||
$: musicUrl = $CurrentMusicStore.musicUrl;
|
||||
|
||||
</script>
|
||||
|
||||
<audio src={musicUrl} bind:paused={$CurrentMusicStore.paused}/>
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
import CurrentMusicStore from '../../stores/currentMusic';
|
||||
import musicStore from '../../stores/musicStore';
|
||||
|
||||
export let show = false;
|
||||
|
||||
/**
|
||||
* @type {{ musicTitle: string; musicUrl: string; musicArtist: string; }[]}
|
||||
*/
|
||||
let musicSelection = $musicStore;
|
||||
const sleep = (/** @type {number | undefined} */ ms) => new Promise((r) => setTimeout(r, ms));
|
||||
/**
|
||||
* @param {{ musicTitle: string; musicUrl: string; musicArtist: string; }} v
|
||||
*/
|
||||
async function setSong(v) {
|
||||
$CurrentMusicStore.musicArtist = v.musicArtist;
|
||||
$CurrentMusicStore.musicTitle = v.musicTitle;
|
||||
$CurrentMusicStore.musicUrl = v.musicUrl;
|
||||
// THIS IS SUCH A DUMB WORKAROUND!!!!
|
||||
// WITHOUT THIS, THE VALUE OF FALSE IS NEVER REASSIGNED AND THE MUSIC WILL NEVER START PLAYING!!!
|
||||
$CurrentMusicStore.paused = true;
|
||||
await sleep(10);
|
||||
$CurrentMusicStore.paused = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div
|
||||
on:click={() => {
|
||||
show = !show;
|
||||
}}
|
||||
class="h-screen w-screen bg-opacity-60 bg-black fixed top-0 left-0 z-10 py-20 "
|
||||
>
|
||||
<div class="h-full w-3/4 bg-red-100 mx-auto rounded-xl overflow-auto pb-3">
|
||||
<div class="w-full bg-indigo-200 rounded-t-xl p-3">
|
||||
<span>Music Selection</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
{#each musicSelection as v}
|
||||
<ul
|
||||
on:click={() => {
|
||||
setSong(v);
|
||||
}}
|
||||
class="ml-3 mt-3 hover:cursor-pointer underline shadow-lg hover:shadow-xl w-max bg-indigo-100 p-2 rounded-md"
|
||||
>
|
||||
{v.musicArtist} - {v.musicTitle}
|
||||
</ul>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
|
@ -4,7 +4,7 @@
|
|||
export let text = '';
|
||||
</script>
|
||||
|
||||
<a href="{link}">
|
||||
<a href="{link}" class="">
|
||||
<button class="{$page.url.pathname == link ? "active-now" : ""} text-murasaki md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
|
||||
{text}
|
||||
</button>
|
||||
|
@ -24,6 +24,7 @@
|
|||
.link-underline {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.link-underline:after {
|
||||
|
@ -37,11 +38,13 @@
|
|||
background-color: #421727;
|
||||
transform-origin: bottom right;
|
||||
transition: transform 0.25s ease-out;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.link-underline:hover:after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
background-color: #421727;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
|
@ -1,14 +1,60 @@
|
|||
<script>
|
||||
import '../app.css';
|
||||
import Header from '../components/header.svelte';
|
||||
import AlertHeader from '../components/alert-header.svelte';
|
||||
import Header from '../components/misc/header.svelte';
|
||||
import AlertHeader from '../components/misc/alert-header.svelte';
|
||||
import Musicplayer from '../components/misc/musicplayer.svelte';
|
||||
import CurrentMusicStore from '../stores/currentMusic';
|
||||
import Musicselectionmodal from '../components/misc/musicselectionmodal.svelte';
|
||||
import musicStore from '../stores/musicStore';
|
||||
|
||||
$: musicPaused = $CurrentMusicStore.paused;
|
||||
$: musicTitle = $CurrentMusicStore.musicTitle;
|
||||
$: musicArtist = $CurrentMusicStore.musicArtist;
|
||||
$: musicUrl = $CurrentMusicStore.musicUrl;
|
||||
|
||||
function onMusicToggle() {
|
||||
if (musicUrl == '') {
|
||||
$CurrentMusicStore.musicTitle = $musicStore[0].musicTitle;
|
||||
$CurrentMusicStore.musicArtist = $musicStore[0].musicArtist;
|
||||
$CurrentMusicStore.musicUrl = $musicStore[0].musicUrl;
|
||||
}
|
||||
|
||||
$CurrentMusicStore.paused = !$CurrentMusicStore.paused
|
||||
return;
|
||||
}
|
||||
|
||||
// Modal stuff
|
||||
let modalShow = false;
|
||||
</script>
|
||||
|
||||
<div class="-z-20 absolute">
|
||||
<Musicplayer />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki"
|
||||
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
|
||||
>
|
||||
<!-- modal -->
|
||||
<Musicselectionmodal bind:show={modalShow} />
|
||||
<!-- Possible alert header -->
|
||||
<!--<AlertHeader text='ALERT'/>-->
|
||||
<div class="bg-slate-100 w-full h-min md:h-10 lg:pl-20">
|
||||
<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20">
|
||||
{#if musicPaused}
|
||||
<span class="font-mono">▶</span>
|
||||
Play
|
||||
{:else}
|
||||
<span class="font-mono ">⏸︎</span>
|
||||
Pause
|
||||
{/if}
|
||||
</button>
|
||||
<button class="bg-white border-black border rounded h-min"
|
||||
on:click={() => {
|
||||
modalShow = !modalShow;
|
||||
}}>Show music selection</button
|
||||
>
|
||||
<br class="block md:hidden">
|
||||
<span>Current song: {musicArtist} - {musicTitle}</span>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<Header />
|
||||
<!-- Main content -->
|
||||
|
|
|
@ -1,5 +1,50 @@
|
|||
<script>
|
||||
import Maincontent from '../components/misc/maincontent.svelte';
|
||||
import Content from '../components/about/content.svelte';
|
||||
import Sidebar from '../components/about/sidebar.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
|
||||
About page
|
||||
<Maincontent>
|
||||
<div
|
||||
class="col-start-1 col-span-7 sm:col-span-5 md:col-span-3 lg:col-span-2 rounded-xl mt-5 sm:flex flex-col justify-start gap-2 p-2"
|
||||
>
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div class="px-5 sm:px-0 sm:pr-5 lg:pr-0 sm:mt-10 col-span-7 sm:col-span-2 md:col-span-4 lg:col-span-3 ">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<div class="px-2 col-span-7">
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5">
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">Music</p>
|
||||
<li>Hatsune Miku</li>
|
||||
<li>Amane Kanata</li>
|
||||
<li>Mothy/Akuno-p</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">TV</p>
|
||||
<li>Game of Thrones</li>
|
||||
<li>Avatar the Last Airbender</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">VTubers</p>
|
||||
<li>Momosuzu Nene</li>
|
||||
<li>Amane Kanata</li>
|
||||
<li>Petra Gurin</li>
|
||||
<li>Ninomae Ina'nis</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">Food</p>
|
||||
<li>Spaghetti</li>
|
||||
<li>Steak!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Maincontent>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import Content from '../components/homepage/content.svelte';
|
||||
import Sidebar from '../components/homepage/sidebar.svelte';
|
||||
import Maincontent from '../components/maincontent.svelte';
|
||||
import Sidebar from '../components/homepage/sidebar.svelte';
|
||||
import Maincontent from '../components/misc/maincontent.svelte';
|
||||
import Rightbar from '../components/homepage/rightbar.svelte';
|
||||
</script>
|
||||
|
||||
|
@ -10,7 +10,18 @@ import Sidebar from '../components/homepage/sidebar.svelte';
|
|||
</svelte:head>
|
||||
|
||||
<Maincontent>
|
||||
<Sidebar />
|
||||
<Content/>
|
||||
<Rightbar/>
|
||||
<div
|
||||
class="hidden col-start-1 col-span-1 rounded-xl ml-2 mt-10 lg:flex flex-col justify-start gap-2 p-2"
|
||||
>
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div class="px-5 md:px-0 md:pl-5 lg:pl-0 col-span-7 md:col-span-6 lg:col-span-5">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<div class="hidden md:block col-start-7 mt-10 mr-2">
|
||||
|
||||
<Rightbar />
|
||||
</div>
|
||||
</Maincontent>
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
const CurrentMusicStore = writable({
|
||||
musicUrl: '',
|
||||
musicTitle: '',
|
||||
musicArtist: '',
|
||||
paused: true,
|
||||
});
|
||||
|
||||
export default CurrentMusicStore;
|
|
@ -0,0 +1,46 @@
|
|||
import { readable } from "svelte/store";
|
||||
|
||||
const musicStore = readable([
|
||||
{
|
||||
musicTitle: "I'm glad you're evil too (feat. Hatsune Miku)",
|
||||
musicUrl: "/music/im-glad-youre-evil-too.m4a",
|
||||
musicArtist: "PinocchioP",
|
||||
},
|
||||
{
|
||||
musicTitle: "God-ish (神っぽいな) feat. Hatsune Miku",
|
||||
musicArtist: "PinocchioP",
|
||||
musicUrl: "/music/godish.m4a",
|
||||
},
|
||||
{
|
||||
musicTitle: "Servant of Evil (悪ノ召使) feat. Kagamine Len",
|
||||
musicArtist: "Mothy / Akuno-p",
|
||||
musicUrl: "/music/servant-of-evil.m4a"
|
||||
},
|
||||
{
|
||||
musicTitle: "Tokusya-Seizon Wonder-la-der!!",
|
||||
musicArtist: "Amane Kanata",
|
||||
musicUrl: "/music/Tokusya-Seizon Wonder-la-der!!.mp3"
|
||||
},
|
||||
{
|
||||
musicTitle: "Kegarenaki Barajuuji",
|
||||
musicArtist: "Ariabl'eyeS",
|
||||
musicUrl: "/music/kegarenaki-barajuuji.mp3"
|
||||
},
|
||||
{
|
||||
musicTitle: "-ERROR (Cover)",
|
||||
musicArtist: "Tokoyami Towa",
|
||||
musicUrl: "/music/error-towa.mp3"
|
||||
},
|
||||
{
|
||||
musicTitle: "Diamond City Lights",
|
||||
musicArtist: "LazuLight",
|
||||
musicUrl: "/music/diamond-city-lights-lazulight.opus"
|
||||
},
|
||||
{
|
||||
musicTitle: "TSUNAMI",
|
||||
musicArtist: "Finana Ryugu",
|
||||
musicUrl: "/music/tsunami-finana.opus"
|
||||
}
|
||||
]);
|
||||
|
||||
export default musicStore;
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" width="30px" height="30px">
|
||||
<g id="surface37736022">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 3 7 C 2.640625 6.996094 2.304688 7.183594 2.121094 7.496094 C 1.941406 7.808594 1.941406 8.191406 2.121094 8.503906 C 2.304688 8.816406 2.640625 9.003906 3 9 L 27 9 C 27.359375 9.003906 27.695312 8.816406 27.878906 8.503906 C 28.058594 8.191406 28.058594 7.808594 27.878906 7.496094 C 27.695312 7.183594 27.359375 6.996094 27 7 Z M 3 14 C 2.640625 13.996094 2.304688 14.183594 2.121094 14.496094 C 1.941406 14.808594 1.941406 15.191406 2.121094 15.503906 C 2.304688 15.816406 2.640625 16.003906 3 16 L 27 16 C 27.359375 16.003906 27.695312 15.816406 27.878906 15.503906 C 28.058594 15.191406 28.058594 14.808594 27.878906 14.496094 C 27.695312 14.183594 27.359375 13.996094 27 14 Z M 3 21 C 2.640625 20.996094 2.304688 21.183594 2.121094 21.496094 C 1.941406 21.808594 1.941406 22.191406 2.121094 22.503906 C 2.304688 22.816406 2.640625 23.003906 3 23 L 27 23 C 27.359375 23.003906 27.695312 22.816406 27.878906 22.503906 C 28.058594 22.191406 28.058594 21.808594 27.878906 21.496094 C 27.695312 21.183594 27.359375 20.996094 27 21 Z M 3 21 "/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -11,8 +11,8 @@ const config = {
|
|||
}),
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
adapter: adapter(),
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
Loading…
Reference in New Issue