feat: rework site

package-lock.json

@@ -8,7 +8,7 @@
       "name": "~TODO~",
       "version": "0.0.1",
       "dependencies": {
-        "@damillora/plachta": "^4.0.0",
+        "@damillora/plachta": "^4.1.1",
         "@sveltejs/adapter-node": "^1.1.6",
         "dayjs": "^1.11.7",
         "howler": "^2.2.3",
@@ -155,9 +155,9 @@
       }
     },
     "node_modules/@damillora/plachta": {
-      "version": "4.0.3",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.1.1.tgz",
-      "integrity": "sha512-/mH7xNVgvXxksBCGs+CEFDs2xOpeMKJ8z0PhUwmkUtrWhLBMuIIp1UiSUCRcL1DU7Lxqdel8Hx6Pq1YWWPtJ7Q==",
+      "integrity": "sha512-VRIJHLfgywZ7eSqPiFQWzTy/kx6V0Q9qqwg6N0zgJDxba/gVHVBjHjChrqmym2aDJFsSoinPtzYYFPxi4JRn/A==",
       "dependencies": {
         "@sveltejs/package": "^2.2.0",
         "svelte": "^4.1.2",
@@ -3776,9 +3776,9 @@
       }
     },
     "@damillora/plachta": {
-      "version": "4.0.3",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.1.1.tgz",
-      "integrity": "sha512-/mH7xNVgvXxksBCGs+CEFDs2xOpeMKJ8z0PhUwmkUtrWhLBMuIIp1UiSUCRcL1DU7Lxqdel8Hx6Pq1YWWPtJ7Q==",
+      "integrity": "sha512-VRIJHLfgywZ7eSqPiFQWzTy/kx6V0Q9qqwg6N0zgJDxba/gVHVBjHjChrqmym2aDJFsSoinPtzYYFPxi4JRn/A==",
       "requires": {
         "@sveltejs/package": "^2.2.0",
         "svelte": "^4.1.2",

package.json

@@ -25,7 +25,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@damillora/plachta": "^4.0.0",
+    "@damillora/plachta": "^4.1.1",
     "@sveltejs/adapter-node": "^1.1.6",
     "dayjs": "^1.11.7",
     "howler": "^2.2.3",

src/lib/components/DjItem.svelte

@@ -0,0 +1,83 @@
+<script>
+	import { Card, CardContent, CardTitle, CardDescription } from '@damillora/plachta';
+
+	export let title, location, date;
+	export let link = "";
+</script>
+
+<Card>
+	<div class="dj-item">
+		<CardContent>
+			<CardTitle>
+				{#if link}
+					<a href={link}>
+						{title}
+					</a>
+				{:else}
+					{title}
+				{/if}
+			</CardTitle>
+		</CardContent>
+		<div class="dj-item__info">
+			<div class="dj-item__id dj-item__id--top">
+				<span class="dj-item__icon material-icons">calendar_month</span>{date}
+			</div>
+			<div class="dj-item__id dj-item__id--bottom">
+				<span class="dj-item__icon material-icons">pin_drop</span>{location}
+			</div>
+		</div>
+	</div>
+</Card>
+
+<style lang="scss">
+	@import '@damillora/plachta/dist/styles/global';
+
+	.dj-item {
+		width: 100%;
+		display: grid;
+		grid-template-rows: 1fr 150px;
+		grid-template-columns: 1fr;
+
+		@include screen(md) {
+			grid-template-rows: 1fr;
+			grid-template-columns: 6fr 300px;
+		}
+
+		&__info {
+			border-radius: 0px 0px 20px 20px;
+		}
+		&__id {
+			height: 50%;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			min-height: 4rem;
+			padding-left: 0.5rem;
+			@include transition;
+
+			&--top {
+				border-radius: 0px;
+
+				@include screen(md) {
+					border-radius: 0px 20px 0px 0px;
+				}
+			}
+			&--bottom {
+				border-radius: 0px 0px 20px 20px;
+
+				@include screen(md) {
+					border-radius: 0px 0px 20px 0px;
+				}
+			}
+		}
+
+		&__version {
+			font-size: $text-base;
+			font-weight: 300;
+			color: var(--primary-color);
+		}
+		&__icon {
+			margin-right: 0.5rem;
+		}
+	}
+</style>

src/lib/components/SiteHeader.svelte

@@ -0,0 +1,20 @@
+<script>
+
+	import { Header, NavMenu, NavDarkMode} from "@damillora/plachta";
+
+</script>
+
+<Header>
+    <svelte:fragment slot="title">
+        <a href="/"> <strong>Damillora</strong></a>
+    </svelte:fragment>
+    <svelte:fragment slot="nav">
+        <NavMenu label="About" url="/about" />
+        <NavMenu label="Software" url="/projects" />
+        <NavMenu label="DJ Damillora" url="/dj" />
+        <NavMenu label="Game Profile" url="/games" />
+        <NavMenu label="Contact" url="/contact" />
+        <NavMenu label="Blog" url="/blog" />
+        <NavDarkMode />
+    </svelte:fragment>
+</Header>

src/routes/(pages)/+layout.svelte

@@ -0,0 +1,9 @@
+<script>
+
+	import { Hero } from "@damillora/plachta";
+
+</script>
+
+
+<Hero background="/images/bg/283-yuika/bg-xxl.jpg" />
+<slot/>

src/routes/(pages)/about/+page.svelte

@@ -0,0 +1,54 @@
+<script>
+	import { Container, Post } from '@damillora/plachta';
+</script>
+
+<svelte:head>
+	<title>Damillora: About</title>
+</svelte:head>
+
+<Container>
+	<Post>
+		<h1 class="page-header__heading">About Damillora</h1>
+		<p>
+			Hello! My name is Damillora. I'm a programmer by day, and DJ by night. My DJ style is
+			combining electronic dance music with vocals from anime and J-Pop songs.
+			I also sometimes appear on the internet as a VTuber, but currently I am focused on being a DJ and helping out with the Indonesian Denonbu community!
+		</p>
+		<h2>VTuber Avatar Credits</h2>
+		<h3>Illustrator: Mira Cassiela (<a href="https://linktr.ee/miracassiela">Links</a>)</h3>
+		<h3>Live2D Rigging: Siauw Adhie (<a href="https://twitter.com/siauwadhie">Twitter / X</a>)</h3>
+		<h2>Where you can find me</h2>
+		<h3>Mainstream platforms</h3>
+		<ul>
+			<li>
+				<p>YouTube: <a href="/channel">Damillora</a></p>
+			</li>
+			<li>
+				<p>Twitch: <a href="https://www.twitch.tv/damillora">Damillora</a></p>
+			</li>
+			<li>
+				<p>SoundCloud: <a href="https://soundcloud.com/damillora">damillora</a></p>
+			</li>
+			<li>
+				<p>GitHub: <a href="https://github.com/Damillora">Damillora</a></p>
+			</li>
+		</ul>
+		<h3>Alternative platforms</h3>
+		<ul>
+			<li>
+				<p>Fediverse: <a href="https://fed.nanao.moe/@Damillora">Damillora@fed.nanao.moe</a></p>
+			</li>
+			<li>
+				<p>Bluesky (AT protocol): <a href="http://bsky.app/profile/damillora.com">@damillora.com</a></p>
+			</li>
+			<li>
+				<p>PeerTube: <a href="/fedichan">damillora@live.nanao.moe</a></p>
+			</li>
+			<li>
+				<p>Matrix: @damillora:matrix.nanao.moe</p>
+			</li>
+		</ul>
+		<h2>GPG public key</h2>
+		<p>My public key is accessible <a href="/damillora.asc">here</a>.</p>
+	</Post>
+</Container>

src/routes/(pages)/contact/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Hero, Container, Index } from '@damillora/plachta';
+	import { Hero, Container, Post } from '@damillora/plachta';
 </script>
 
 <svelte:head>
@@ -7,7 +7,7 @@
 </svelte:head>
 
 <Container>
-	<Index>
+	<Post>
 		<h1>Contact</h1>
 		<p>You can contact me via various channels.</p>
 		<h2>Email: damillora(at)damillora.com</h2>
@@ -17,8 +17,11 @@
 		</p>
 		<h2>Twitter: <a href="https://twitter.com/Damillora">Damillora</a></h2>
 		<p>
-			If you're a VTuber and want to collaborate, please send me a Direct Message my way via
+			You can also contact me via Twitter for shorter correspondences. 
-			Twitter! I will gladly help set up the things needed.
 		</p>
-	</Index>
+		<h2>Discord: damillora</h2>
+		<p>
+			Please try to contact me via the two channels above first, correspondences will move to Discord when needed! I cannot guarantee any reply if you try to contact me via Discord directly.
+		</p>
+	</Post>
 </Container>

src/routes/(pages)/dj/+page.svelte

@@ -0,0 +1,80 @@
+<script>
+	import DjItem from '$lib/components/DjItem.svelte';
+
+	import { Container, Hero, HeroContent, Index, Post } from '@damillora/plachta';
+</script>
+
+<svelte:head>
+	<title>Damillora: About</title>
+</svelte:head>
+
+<Hero background="/images/feature-dj.jpg">
+	<HeroContent>
+		<h1 class="page-header__heading">DJ Damillora</h1>
+		<p>
+			My specialization is playing vocals from Japanese music on top of club music. Weaving popular
+			songs and hidden gems together, I strive to make your event <strong>fun</strong>!
+		</p>
+	</HeroContent>
+</Hero>
+<Container>
+	<Post>
+		<h2>Want me for your event?</h2>
+		<p>
+			If you want me to perform at your event, <a href="/contact">contact me</a>!
+		</p>
+		<h2>Event List</h2>
+		<DjItem
+			title="OMEN Project Volume 2"
+			date="10 March 2024"
+			location="Online"
+		/>
+		<DjItem
+			title="OTAKARA: Otaku Karaoke Party Night VOLUME 02!"
+			date="8 February 2024"
+			location="Redline Space"
+		/>
+		<DjItem
+			title="Anikura Unison 2024"
+			link="https://www.youtube.com/watch?v=7x8V3Jg5rEA"
+			date="30 December 2023"
+			location="Online"
+		/>
+		<DjItem
+			title="Comic Frontier 17 Denonbu Indonesia booth"
+			link="https://www.youtube.com/watch?v=XdxKERq0uzI"
+			date="16 December 2023"
+			location="ICE BSD"
+		/>
+		<DjItem
+			title="GROUND:0"
+			link="https://www.youtube.com/watch?v=U3Fv4NxHkGE"
+			date="19 August 2023"
+			location="Toribar Fatmawati"
+		/>
+		<DjItem
+			title="DJ Music Night"
+			link="https://www.youtube.com/watch?v=4l5-5xZSaK4"
+			date="15 July 2023"
+			location="Online"
+		/>
+		<DjItem
+			title="Weebeats!: Dance after Work"
+			link="https://www.youtube.com/watch?v=Ooq-j0X4rAQ"
+			date="5 June 2023"
+			location="Sun Katsura SCBD"
+		/>
+		<DjItem
+			title="VTuber DJ Liveset Volume 2"
+			link="https://www.youtube.com/watch?v=ztb-G-SdYXg"
+			date="1 June 2023"
+			location="Online"
+		/>
+		<DjItem
+			title="Comic Frontier 16 Denonbu Indonesia booth"
+			link="https://youtu.be/4JWRewQ8vs4"
+			date="7 May 2023"
+			location="ICE BSD"
+		/>
+	</Post>
+</Container>

src/routes/(pages)/games/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Container, Index } from '@damillora/plachta';
+	import { Container, Post } from '@damillora/plachta';
 	import GameListItem from '$lib/components/GameListItem.svelte';
 </script>
 
@@ -8,7 +8,7 @@
 </svelte:head>
 
 <Container>
-	<Index>
+	<Post>
 		<h1>Game Profile</h1>
 		<p>This page lists various IDs from games that I play and/or review.</p>
 		<h2>Game Consoles and Arcade Games</h2>
@@ -40,6 +40,14 @@
 			reviewlink="https://blog.nanao.moe/game-reviews/arknights/"
 			version="Global server"
 		/>
+		<GameListItem 
+			name="Atelier Resleriana"
+			link="https://resleriana.atelier.games/"
+			playername="Damillora"
+			gameid="949135363692"
+			reviewlink="https://blog.nanao.moe/game-reviews/atelier-resleriana-forgotten-alchemy-and-the-polar-night-liberator/"
+			version="Global server"
+		/>
 		<GameListItem
 			name="Azur Lane"
 			link="https://azurlane.yo-star.com"
@@ -91,6 +99,7 @@
 			playername="Damillora"
 			gameid="232492238926"
 			reviewlink="https://blog.nanao.moe/game-reviews/atelier-resleriana-forgotten-alchemy-and-the-polar-night-liberator/"
+			version="Japanese server"
 		/>
 		<GameListItem
 			name="Blue Archive"
@@ -152,5 +161,5 @@
 		  gameid=""
 		  />
 		-->
-	</Index>
+	</Post>
 </Container>

src/routes/(pages)/projects/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Container, Index } from '@damillora/plachta';
+	import { Container, Post } from '@damillora/plachta';
 	import ProjectItem from '$lib/components/ProjectItem.svelte';
 </script>
 
@@ -8,10 +8,10 @@
 </svelte:head>
 
 <Container>
-	<Index>
+	<Post>
-		<h1>Projects</h1>
+		<h1>Software Projects</h1>
 
-		<p>This is a list of projects that I maintain and publicly available on my GitHub.</p>
+		<p>This is a list of software projects that I maintain and publicly available on my GitHub.</p>
 		<h2>Active Projects</h2>
 		<div class="card-list">
 			<ProjectItem
@@ -45,5 +45,5 @@
 			/>
 			<ProjectItem name="Yuika theme" codename="yuika" description="Previous theme for my blog" />
 		</div>
-	</Index>
+	</Post>
 </Container>

src/routes/(pages)/projects/altessimo/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PageHeader, Container, Post, PostMain } from '@damillora/plachta';
+	import { PageHeader, Container, Post, PostMain, PageHeaderContents } from '@damillora/plachta';
 </script>
 
 <svelte:head>
@@ -9,12 +9,14 @@
 <Container>
 	<Post>
 		<PageHeader>
-			<h1>Altessimo</h1>
+			<PageHeaderContents>
-			<p>
+				<h1>Altessimo</h1>
-				<a href="https://altessimo.nanao.moe">live</a>
+				<p>
-				&bull;
+					<a href="https://altessimo.nanao.moe">live</a>
-				<a href="https://github.com/Damillora/Altessimo">source code</a>
+					&bull;
-			</p>
+					<a href="https://github.com/Damillora/Altessimo">source code</a>
+				</p>
+			</PageHeaderContents>
 		</PageHeader>
 		<PostMain comments={false}>
 			<h2>Description</h2>

src/routes/(pages)/projects/miracle/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PageHeader, Container, Post, PostMain } from '@damillora/plachta';
+	import { PageHeader, Container, Post, PostMain, PageHeaderContents } from '@damillora/plachta';
 </script>
 
 <svelte:head>
@@ -9,10 +9,12 @@
 <Container>
 	<Post>
 		<PageHeader>
-			<h1>nanao.moe (legacy)</h1>
+			<PageHeaderContents>
-			<p>
+				<h1>nanao.moe (legacy)</h1>
-				<a href="https://github.com/Damillora/miracle">source code</a>
+				<p>
-			</p>
+					<a href="https://github.com/Damillora/miracle">source code</a>
+				</p>
+			</PageHeaderContents>
 		</PageHeader>
 		<PostMain comments={false}>
 			<h2>Description</h2>

src/routes/(pages)/projects/rinze/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PageHeader, Container, Post, PostMain } from '@damillora/plachta';
+	import { PageHeader, Container, Post, PostMain, PageHeaderContents } from '@damillora/plachta';
 </script>
 
 <svelte:head>
@@ -9,21 +9,24 @@
 <Container>
 	<Post>
 		<PageHeader>
-			<h1>nanao.moe</h1>
+			<PageHeaderContents>
-			<p>
+				<h1>nanao.moe</h1>
-				<a href="https://nanao.moe">live</a>
+				<p>
-				&bull;
+					<a href="https://nanao.moe">live</a>
-				<a href="https://github.com/Damillora/rinze">source code</a>
+					&bull;
-			</p>
+					<a href="https://github.com/Damillora/rinze">source code</a>
+				</p>
+			</PageHeaderContents>
 		</PageHeader>
 		<PostMain comments={false}>
 			<h2>Description</h2>
 			<p>
-				A domain carves a person's place in the Internet. nanao.moe now serves as my primary web page.
+				A domain carves a person's place in the Internet. nanao.moe now serves as my primary web
-				The website contains information about my projects and interests.
+				page. The website contains information about my projects and interests.
 			</p>
 			<p>
-				nanao.moe is now using the new Mare Serenitatis design language. However, the technology stack remains the same.
+				nanao.moe is now using the new Mare Serenitatis design language. However, the technology
+				stack remains the same.
 			</p>
 			<h2>Technologies</h2>
 			<ul>

src/routes/(pages)/projects/shallie/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PageHeader, Container, Post, PostMain } from '@damillora/plachta';
+	import { PageHeader, Container, Post, PostMain, PageHeaderContents } from '@damillora/plachta';
 </script>
 
 <svelte:head>
@@ -9,12 +9,14 @@
 <Container>
 	<Post>
 		<PageHeader>
-			<h1>Damillora's Virtual Memoir</h1>
+			<PageHeaderContents>
-			<p>
+				<h1>Damillora's Virtual Memoir</h1>
-				<a href="https://blog.nanao.moe">live</a>
+				<p>
-				&bull;
+					<a href="https://blog.nanao.moe">live</a>
-				<a href="https://git.nanao.moe/Damillora/Shallie">source code</a>
+					&bull;
-			</p>
+					<a href="https://git.nanao.moe/Damillora/Shallie">source code</a>
+				</p>
+			</PageHeaderContents>
 		</PageHeader>
 		<PostMain comments={false}>
 			<h2>Description</h2>

src/routes/(pages)/projects/shioriko/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PageHeader, Container, Post, PostMain } from '@damillora/plachta';
+	import { PageHeader, Container, Post, PostMain, PageHeaderContents } from '@damillora/plachta';
 </script>
 
 <svelte:head>
@@ -9,10 +9,12 @@
 <Container>
 	<Post>
 		<PageHeader>
-			<h1>Shioriko</h1>
+			<PageHeaderContents>
-			<p>
+				<h1>Shioriko</h1>
-				<a href="https://github.com/Damillora/Shioriko">source code</a>
+				<p>
-			</p>
+					<a href="https://github.com/Damillora/Shioriko">source code</a>
+				</p>
+			</PageHeaderContents>
 		</PageHeader>
 		<PostMain comments={false}>
 			<h2>Description</h2>

src/routes/(pages)/projects/yuika/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PageHeader, Container, Post, PostMain } from '@damillora/plachta';
+	import { PageHeader, Container, Post, PostMain, PageHeaderContents } from '@damillora/plachta';
 </script>
 
 
@@ -10,10 +10,12 @@
 <Container>
 	<Post>
 		<PageHeader>
-			<h1>Yuika theme</h1>
+			<PageHeaderContents>
-			<p>
+				<h1>Yuika theme</h1>
-				<a href="https://github.com/Damillora/Yuika">source code</a>
+				<p>
-			</p>
+					<a href="https://github.com/Damillora/Yuika">source code</a>
+				</p>
+			</PageHeaderContents>
 		</PageHeader>
 		<PostMain comments={false}>
 			<h2>Description</h2>

src/routes/+layout.svelte

@@ -3,37 +3,21 @@
 		Base,
 		Header,
 		Hero,
-		NavMenu,
-		NavDarkMode,
 		Footer,
 		NavigationLoading
 	} from '@damillora/plachta';
 	import FloatingYuriko from '$lib/components/FloatingYuriko.svelte';
 	import { isYurikoBirthday } from '$lib/yuriko-birthday.js';
+	import SiteHeader from '$lib/components/SiteHeader.svelte';
 </script>
 
 <Base>
-	<Header>
+	<SiteHeader />
-		<svelte:fragment slot="title">
-			<a href="/"> <strong>Damillora</strong></a>
-		</svelte:fragment>
-		<svelte:fragment slot="nav">
-			<NavMenu label="About" url="/about" />
-			<NavMenu label="Projects" url="/projects" />
-			<NavMenu label="Game Profile" url="/games" />
-			<NavMenu label="Links" url="/links" />
-			<NavMenu label="Contact" url="/contact" />
-			<NavMenu label="Blog" url="/blog" />
-			<NavDarkMode />
-		</svelte:fragment>
-	</Header>
-
-	<Hero background="/images/bg/283-yuika/bg-xl.jpg" />
 
 	<slot />
 
 	<Footer>
-		<p>Copyright (c) 2023 Damillora</p>
+		<p>Copyright (c) 2024 Damillora</p>
 	</Footer>
 </Base>
 

src/routes/+page.svelte

@@ -1,18 +1,35 @@
 <script>
-	import { Hero, Container, Index } from '@damillora/plachta';
+	import { Hero, HeroContent, HeroList, Container, Index } from '@damillora/plachta';
 </script>
 
 <svelte:head>
 	<title>Damillora</title>
 </svelte:head>
 
-<Container>
+<HeroList>
-	<Index>
+	<Hero background="/images/bg/283-yuika/bg-xxl.jpg">
-		<h1>Welcome to Damillora's website</h1>
+		<HeroContent>
-		<p>
+			<h1>Programmer by day, DJ at night</h1>
-			Welcome to my personal website. I'm a programmer by day, and a DJ by night. 
+			<p>
-			This site serves as my introduction, and lists my coding projects and game reviews as well.
+				Welcome to my personal website. I'm a programmer by day, and a DJ by night. 
-		</p>
+				This site serves as my introduction, and lists my coding projects and game reviews as well.
-		<h2>
+			</p>
-	</Index>
+		</HeroContent>
-</Container>
+	</Hero>
+	<Hero background="/images/default-feature.jpg" halfWidth>
+		<HeroContent>
+			<h1><a href="/projects">Software Projects</a></h1>
+			<p>
+				I make various software, including this very website.
+			</p>
+		</HeroContent>
+	</Hero>
+	<Hero background="/images/feature-dj.jpg" halfWidth>
+		<HeroContent>
+			<h1><a href="/dj">DJ Damillora</a></h1>
+			<p>
+				I focus on playing Japanese music vocals on top of club music.
+			</p>
+		</HeroContent>
+	</Hero>
+</HeroList>

src/routes/about/+page.svelte

@@ -1,103 +0,0 @@
-<script>
-	import { Container, Index } from '@damillora/plachta';
-</script>
-
-<svelte:head>
-	<title>Damillora: About</title>
-</svelte:head>
-
-<Container>
-	<Index>
-		<h1 class="page-header__heading">About Damillora</h1>
-		<p>
-			Hello! My name is Damillora. I'm a programmer by day, and DJ by night. My DJ style is
-			combining electronic dance music with vocals from anime and J-Pop songs.
-			I also sometimes appear on the internet as a VTuber, but currently I am helping out with the Indonesian Denonbu community!
-		</p>
-		<h2>Profile</h2>
-		<ul>
-			<li><strong>Name: </strong> Damillora</li>
-			<li><strong>Birthday: </strong>February 29</li>
-		</ul>
-		<h2>Credits</h2>
-		<p>
-			I am thankful to several for bringing my Virtual YouTuber project to life, and I will list
-			them here.
-		</p>
-		<h3>Illustrator: Mira Cassiela</h3>
-		<p>Virtual artist | L2D artist + freelance character designer and illustrator</p>
-		<p>
-			<a href="https://www.youtube.com/channel/UCW62PICl31M0TDhTcvwepqw">YouTube</a>
-			&bull;
-			<a href="https://twitter.com/miracassiela">Twitter</a>
-			&bull;
-			<a href="https://www.instagram.com/miracassiela/">Instagram</a>
-			&bull;
-			<a href="https://linktr.ee/miracassiela">Links</a>
-		</p>
-		<h3>Live2D Rigging: Siauw Adhie</h3>
-		<p>
-			<a href="https://twitter.com/adhiesc123">Twitter</a>
-			&bull;
-			<a href="https://www.youtube.com/c/SiauwAdhie">YouTube</a>
-			&bull;
-			<a href="https://www.fiverr.com/adhiesc">Fiverr</a>
-		</p>
-		<h2>Where you can find me</h2>
-		<h3>Publishing media</h3>
-		<p>I publish content mainly in those sites</p>
-		<ul>
-			<li>
-				<p>YouTube:</p>
-				<p><a href="/channel">Damillora</a></p>
-			</li>
-			<li>
-				<p>Twitch:</p>
-				<p><a href="https://www.twitch.tv/damillora">Damillora</a></p>
-			</li>
-			<li>
-				<p>SoundCloud:</p>
-				<p><a href="https://soundcloud.com/damillora">damillora</a></p>
-			</li>
-			<li>
-				<p>GitHub:</p>
-				<p><a href="https://github.com/Damillora">Damillora</a></p>
-			</li>
-		</ul>
-		<h3>Alternative technologies</h3>
-		<p>
-			Mainstream platforms control what you can post, and you can lose access to data rightfully
-			yours.
-			<br />
-			I maintain presence in several altenative platforms and technologies to ensure I have control of
-			data I post, to contribute to a possible future, and as a backup when mainstream platforms go down.
-			<br />
-			If you have a presence in those platforms, I encourage you to use these instead, you will help
-			the adoption of those technologies!
-		</p>
-		<ul>
-			<li>
-				<p>Fediverse:</p>
-				<p><a href="https://fed.nanao.moe/@Damillora">Damillora@fed.nanao.moe</a></p>
-			</li>
-			<li>
-				<p>PeerTube:</p>
-				<p><a href="/fedichan">damillora@live.nanao.moe</a></p>
-			</li>
-			<li>
-				<p>Funkwhale:</p>
-				<p><a href="https://sounds.nanao.moe/@Damillora">@Damillora@live.nanao.moe</a></p>
-			</li>
-			<li>
-				<p>Matrix</p>
-				<p>@damillora:matrix.nanao.moe</p>
-			</li>
-			<li>
-				<p>Gemini</p>
-				<p><a href="gemini://gemini.nanao.moe">gemini.nanao.moe</a></p>
-			</li>
-		</ul>
-		<h2>GPG public key</h2>
-		<p>My public key is accessible <a href="/damillora.asc">here</a>.</p>
-	</Index>
-</Container>

src/routes/links/+page.svelte

@@ -1,24 +0,0 @@
-<script>
-	import { Hero, Container, Index } from '@damillora/plachta';
-	import MediaItem from '$lib/components/MediaItem.svelte';
-</script>
-
-<svelte:head>
-	<title>Damillora: Links</title>
-</svelte:head>
-
-<Container>
-	<Index>
-		<h1>Links</h1>
-
-		<p>Here, I post links that is of my interest, and might be for you too!</p>
-		<h2>Personal Links</h2>
-		<div class="card-list">
-			<MediaItem
-				title="Damillora's Favorite Music Playlist"
-				link="/favmusiclist"
-				description="This playlist contains some of the music I listen to frequently."
-			/>
-		</div>
-	</Index>
-</Container>

static/images

@@ -1 +1 @@
-Subproject commit 38296b9cbc72f9a91286b4ca83dba8ad6267ab21
+Subproject commit 40045981b1a76a47b0bcdd4ef3d5280966380f61