parent
6e5f1f6903
commit
bc746e82b6
@ -2,3 +2,7 @@
|
|||||||
|
|
||||||
I want to test SvelteKit.
|
I want to test SvelteKit.
|
||||||
Might want to rewrite my website in it.
|
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>
|
||||||
|
28
src/components/about/content.svelte
Normal file
28
src/components/about/content.svelte
Normal file
@ -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>
|
60
src/components/about/sidebar.svelte
Normal file
60
src/components/about/sidebar.svelte
Normal file
@ -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,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
|
<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"
|
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"
|
<a href="https://drone.dutchellie.nl/DutchEllie/svelte-testing"
|
||||||
>Drone CI/CD
|
>Drone CI/CD
|
||||||
<img
|
<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"
|
src="https://drone.dutchellie.nl/api/badges/DutchEllie/svelte-testing/status.svg?ref=refs/heads/main"
|
||||||
alt="Drone build status"
|
alt="Drone build status"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<br>
|
<br />
|
||||||
<p>
|
<p>
|
||||||
This entire project is open source (GPL-3) and the source code is linked above.
|
This entire project is open source (GPL-3) and the source code is linked above. In
|
||||||
In addition, a CI/CD pipeline deploys this website on every push.
|
addition, a CI/CD pipeline deploys this website on every push.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
|
<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
|
||||||
<style>
|
<style>
|
||||||
|
@ -1,31 +1,31 @@
|
|||||||
<script>
|
<script>
|
||||||
let img = '/images/literallyme.jpg'
|
let img = '/images/literallyme.jpg';
|
||||||
let clicked = false
|
let clicked = false;
|
||||||
function cursify() {
|
function cursify() {
|
||||||
if (!clicked) {
|
if (!clicked) {
|
||||||
img = '/images/whydidyoudothis.png'
|
img = '/images/whydidyoudothis.png';
|
||||||
clicked = true
|
clicked = true;
|
||||||
} else {
|
} else {
|
||||||
img = '/images/literallyme.jpg'
|
img = '/images/literallyme.jpg';
|
||||||
clicked = false
|
clicked = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<div class="hidden md:block col-start-7 mt-10 mr-2">
|
|
||||||
<img
|
<div class="mt-10 mr-2">
|
||||||
class="w-auto "
|
<img
|
||||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-len1.webp"
|
class="w-auto "
|
||||||
alt="Rin and Len"
|
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-len1.webp"
|
||||||
/>
|
alt="Rin and Len"
|
||||||
<br />
|
/>
|
||||||
<br />
|
<br />
|
||||||
<img class="rounded"
|
<br />
|
||||||
src="{img}" alt="literally me wink wink" on:click={cursify}/>
|
<img class="rounded" src={img} alt="literally me wink wink" on:click={cursify} />
|
||||||
<p class="text-center mt-2">
|
<p class="text-center mt-2">
|
||||||
{#if !clicked}
|
{#if !clicked}
|
||||||
yes, i love japanese stuff, how can you tell?
|
yes, i love japanese stuff, how can you tell?
|
||||||
{:else}
|
{:else}
|
||||||
oh god, what have you done?! TAKE IT AWAY!
|
oh god, what have you done?! TAKE IT AWAY!
|
||||||
{/if}
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,24 +1,35 @@
|
|||||||
<div
|
<script lang="ts">
|
||||||
class="hidden col-start-1 col-span-1 rounded-xl ml-2 mt-10 lg:flex flex-col justify-start gap-2 p-2"
|
import CurrentMusicStore from '../../stores/currentMusic';
|
||||||
>
|
import Musicplayer from '../misc/musicplayer.svelte';
|
||||||
<div class=" shrink">
|
|
||||||
<h2 class="font-semibold text-left mb-2">Special place</h2>
|
let newMusicUrl = '';
|
||||||
<p class="">
|
|
||||||
Welcome to my sidebar (o^▽^o)
|
function onSubmit() {
|
||||||
<br />
|
$CurrentMusicStore.musicUrl = newMusicUrl;
|
||||||
Here you will find random shit!
|
}
|
||||||
</p>
|
</script>
|
||||||
</div>
|
|
||||||
<div class="flex flex-col xl:flex-row gap-2 xl:mr-2">
|
<div class=" shrink">
|
||||||
<img
|
<h2 class="font-semibold text-left mb-2">Special place</h2>
|
||||||
class="flex-1 rounded xl:w-1/2"
|
<p class="">
|
||||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/kanata-1.gif"
|
Welcome to my sidebar (o^▽^o)
|
||||||
alt="Amane Kanata"
|
<br />
|
||||||
/>
|
Here you will find random shit!
|
||||||
<img
|
</p>
|
||||||
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>
|
|
||||||
</div>
|
</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,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Button from '../components/navbutton.svelte';
|
import Button from './navbutton.svelte';
|
||||||
export /**
|
export /**
|
||||||
* @type {any}
|
* @type {any}
|
||||||
*/
|
*/
|
8
src/components/misc/musicplayer.svelte
Normal file
8
src/components/misc/musicplayer.svelte
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import CurrentMusicStore from '../../stores/currentMusic';
|
||||||
|
|
||||||
|
$: musicUrl = $CurrentMusicStore.musicUrl;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<audio src={musicUrl} bind:paused={$CurrentMusicStore.paused}/>
|
52
src/components/misc/musicselectionmodal.svelte
Normal file
52
src/components/misc/musicselectionmodal.svelte
Normal file
@ -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 = '';
|
export let text = '';
|
||||||
</script>
|
</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">
|
<button class="{$page.url.pathname == link ? "active-now" : ""} text-murasaki md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
|
||||||
{text}
|
{text}
|
||||||
</button>
|
</button>
|
||||||
@ -24,6 +24,7 @@
|
|||||||
.link-underline {
|
.link-underline {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-underline:after {
|
.link-underline:after {
|
||||||
@ -37,11 +38,13 @@
|
|||||||
background-color: #421727;
|
background-color: #421727;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transition: transform 0.25s ease-out;
|
transition: transform 0.25s ease-out;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-underline:hover:after {
|
.link-underline:hover:after {
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
transform-origin: bottom left;
|
transform-origin: bottom left;
|
||||||
background-color: #421727;
|
background-color: #421727;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -1,14 +1,60 @@
|
|||||||
<script>
|
<script>
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
import Header from '../components/header.svelte';
|
import Header from '../components/misc/header.svelte';
|
||||||
import AlertHeader from '../components/alert-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>
|
</script>
|
||||||
|
|
||||||
|
<div class="-z-20 absolute">
|
||||||
|
<Musicplayer />
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
|
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 -->
|
<!-- Possible alert header -->
|
||||||
<!--<AlertHeader text='ALERT'/>-->
|
<!--<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 -->
|
||||||
<Header />
|
<Header />
|
||||||
<!-- Main content -->
|
<!-- 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>
|
<svelte:head>
|
||||||
<title>About</title>
|
<title>About</title>
|
||||||
</svelte:head>
|
</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>
|
<script>
|
||||||
import Content from '../components/homepage/content.svelte';
|
import Content from '../components/homepage/content.svelte';
|
||||||
import Sidebar from '../components/homepage/sidebar.svelte';
|
import Sidebar from '../components/homepage/sidebar.svelte';
|
||||||
import Maincontent from '../components/maincontent.svelte';
|
import Maincontent from '../components/misc/maincontent.svelte';
|
||||||
import Rightbar from '../components/homepage/rightbar.svelte';
|
import Rightbar from '../components/homepage/rightbar.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -10,7 +10,18 @@ import Sidebar from '../components/homepage/sidebar.svelte';
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<Maincontent>
|
<Maincontent>
|
||||||
<Sidebar />
|
<div
|
||||||
<Content/>
|
class="hidden col-start-1 col-span-1 rounded-xl ml-2 mt-10 lg:flex flex-col justify-start gap-2 p-2"
|
||||||
<Rightbar/>
|
>
|
||||||
|
<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>
|
</Maincontent>
|
||||||
|
10
src/stores/currentMusic.js
Normal file
10
src/stores/currentMusic.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
const CurrentMusicStore = writable({
|
||||||
|
musicUrl: '',
|
||||||
|
musicTitle: '',
|
||||||
|
musicArtist: '',
|
||||||
|
paused: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default CurrentMusicStore;
|
46
src/stores/musicStore.js
Normal file
46
src/stores/musicStore.js
Normal file
@ -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;
|
BIN
static/music/Tokusya-Seizon Wonder-la-der!!.mp3
Normal file
BIN
static/music/Tokusya-Seizon Wonder-la-der!!.mp3
Normal file
Binary file not shown.
BIN
static/music/diamond-city-lights-lazulight.opus
Normal file
BIN
static/music/diamond-city-lights-lazulight.opus
Normal file
Binary file not shown.
BIN
static/music/error-towa.mp3
Normal file
BIN
static/music/error-towa.mp3
Normal file
Binary file not shown.
BIN
static/music/godish.m4a
Normal file
BIN
static/music/godish.m4a
Normal file
Binary file not shown.
BIN
static/music/im-glad-youre-evil-too.m4a
Normal file
BIN
static/music/im-glad-youre-evil-too.m4a
Normal file
Binary file not shown.
BIN
static/music/kegarenaki-barajuuji.mp3
Normal file
BIN
static/music/kegarenaki-barajuuji.mp3
Normal file
Binary file not shown.
BIN
static/music/servant-of-evil.m4a
Normal file
BIN
static/music/servant-of-evil.m4a
Normal file
Binary file not shown.
BIN
static/music/tsunami-finana.opus
Normal file
BIN
static/music/tsunami-finana.opus
Normal file
Binary file not shown.
@ -11,8 +11,8 @@ const config = {
|
|||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
kit: {
|
kit: {
|
||||||
adapter: adapter()
|
adapter: adapter(),
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
export default config;
|
||||||
|
Loading…
Reference in New Issue
Block a user