MUSIC MAAAAN
continuous-integration/drone/push Build is passing Details

This commit is contained in:
DutchEllie 2022-07-03 21:45:45 +02:00
parent 6e5f1f6903
commit bc746e82b6
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
30 changed files with 390 additions and 65 deletions

View File

@ -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>

View 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>

View 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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,5 +1,5 @@
<script> <script>
import Button from '../components/navbutton.svelte'; import Button from './navbutton.svelte';
export /** export /**
* @type {any} * @type {any}
*/ */

View File

@ -0,0 +1,8 @@
<script lang="ts">
import CurrentMusicStore from '../../stores/currentMusic';
$: musicUrl = $CurrentMusicStore.musicUrl;
</script>
<audio src={musicUrl} bind:paused={$CurrentMusicStore.paused}/>

View 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}

View File

@ -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>

View File

@ -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 ">&#xFE0E;</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 -->

View File

@ -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>

View File

@ -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>

View 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
View 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;

Binary file not shown.

Binary file not shown.

BIN
static/music/error-towa.mp3 Normal file

Binary file not shown.

BIN
static/music/godish.m4a Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -11,8 +11,8 @@ const config = {
}), }),
], ],
kit: { kit: {
adapter: adapter() adapter: adapter(),
} },
}; };
export default config; export default config;