feat: rework site

This commit is contained in:
Damillora 2024-03-19 23:34:25 +07:00
parent 38731bfaf2
commit d85eb74f6d
21 changed files with 363 additions and 218 deletions

14
package-lock.json generated
View File

@ -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",
"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.0.3.tgz",
"integrity": "sha512-/mH7xNVgvXxksBCGs+CEFDs2xOpeMKJ8z0PhUwmkUtrWhLBMuIIp1UiSUCRcL1DU7Lxqdel8Hx6Pq1YWWPtJ7Q==",
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.1.1.tgz",
"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",
"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.0.3.tgz",
"integrity": "sha512-/mH7xNVgvXxksBCGs+CEFDs2xOpeMKJ8z0PhUwmkUtrWhLBMuIIp1UiSUCRcL1DU7Lxqdel8Hx6Pq1YWWPtJ7Q==",
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.1.1.tgz",
"integrity": "sha512-VRIJHLfgywZ7eSqPiFQWzTy/kx6V0Q9qqwg6N0zgJDxba/gVHVBjHjChrqmym2aDJFsSoinPtzYYFPxi4JRn/A==",
"requires": {
"@sveltejs/package": "^2.2.0",
"svelte": "^4.1.2",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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
Twitter! I will gladly help set up the things needed.
You can also contact me via Twitter for shorter correspondences.
</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>

View File

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

View File

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

View File

@ -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>
<h1>Projects</h1>
<Post>
<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>

View File

@ -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>
<p>
<a href="https://altessimo.nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/Altessimo">source code</a>
</p>
<PageHeaderContents>
<h1>Altessimo</h1>
<p>
<a href="https://altessimo.nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/Altessimo">source code</a>
</p>
</PageHeaderContents>
</PageHeader>
<PostMain comments={false}>
<h2>Description</h2>

View File

@ -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>
<p>
<a href="https://github.com/Damillora/miracle">source code</a>
</p>
<PageHeaderContents>
<h1>nanao.moe (legacy)</h1>
<p>
<a href="https://github.com/Damillora/miracle">source code</a>
</p>
</PageHeaderContents>
</PageHeader>
<PostMain comments={false}>
<h2>Description</h2>

View File

@ -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>
<p>
<a href="https://nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/rinze">source code</a>
</p>
<PageHeaderContents>
<h1>nanao.moe</h1>
<p>
<a href="https://nanao.moe">live</a>
&bull;
<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.
The website contains information about my projects and interests.
A domain carves a person's place in the Internet. nanao.moe now serves as my primary web
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>

View File

@ -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>
<p>
<a href="https://blog.nanao.moe">live</a>
&bull;
<a href="https://git.nanao.moe/Damillora/Shallie">source code</a>
</p>
<PageHeaderContents>
<h1>Damillora's Virtual Memoir</h1>
<p>
<a href="https://blog.nanao.moe">live</a>
&bull;
<a href="https://git.nanao.moe/Damillora/Shallie">source code</a>
</p>
</PageHeaderContents>
</PageHeader>
<PostMain comments={false}>
<h2>Description</h2>

View File

@ -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>
<p>
<a href="https://github.com/Damillora/Shioriko">source code</a>
</p>
<PageHeaderContents>
<h1>Shioriko</h1>
<p>
<a href="https://github.com/Damillora/Shioriko">source code</a>
</p>
</PageHeaderContents>
</PageHeader>
<PostMain comments={false}>
<h2>Description</h2>

View File

@ -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>
<p>
<a href="https://github.com/Damillora/Yuika">source code</a>
</p>
<PageHeaderContents>
<h1>Yuika theme</h1>
<p>
<a href="https://github.com/Damillora/Yuika">source code</a>
</p>
</PageHeaderContents>
</PageHeader>
<PostMain comments={false}>
<h2>Description</h2>

View File

@ -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>
<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" />
<SiteHeader />
<slot />
<Footer>
<p>Copyright (c) 2023 Damillora</p>
<p>Copyright (c) 2024 Damillora</p>
</Footer>
</Base>

View File

@ -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>
<Index>
<h1>Welcome to Damillora's website</h1>
<p>
Welcome to my personal website. I'm a programmer by day, and a DJ by night.
This site serves as my introduction, and lists my coding projects and game reviews as well.
</p>
<h2>
</Index>
</Container>
<HeroList>
<Hero background="/images/bg/283-yuika/bg-xxl.jpg">
<HeroContent>
<h1>Programmer by day, DJ at night</h1>
<p>
Welcome to my personal website. I'm a programmer by day, and a DJ by night.
This site serves as my introduction, and lists my coding projects and game reviews as well.
</p>
</HeroContent>
</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>

View File

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

View File

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

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