Damillora/miracle
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Match layout to Yuika 2.6

Browse Source
This commit is contained in:
Damillora 2020-12-26 16:50:33 +07:00
parent be1319374f
commit 51f2277fd4
31 changed files with 572 additions and 405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/Header.vue
View File

@ -1,19 +1,19 @@
<template>
<div v-click-outside="menuHide">
<div :class="menu_shown ? ['site-header','enabled'] : ['site-header']">
<div :class="menu_shown ? ['site-background','enabled'] : ['site-background']"></div>
<div>
<div :class="{ 'site-header': true, 'enabled': menu_shown }">
<div :class="{ 'site-background': true, 'enabled': menu_shown }"></div>
<div class="site-header-inner">
<header>
<div class="header-top">
<a @click="menu_shown = !menu_shown" id="menushow">
<span class="h-12 w-12 px-2 py-3 text-white material-icons" alt="menu">menu</span>
</a>
<div class="header-title" @click="menu_shown = !menu_shown" >
<div class="header-title" @click="menu_shown = menu_shown ? !menu_shown : menu_shown" >
<nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
</div>
</div>
<div class="header-menu">
<div :class="menu_shown ? ['nav-menu','enabled'] : ['nav-menu']">
<div :class="{ 'nav-menu': true, 'enabled': menu_shown }">
<NavItem
link="/about"
icon="person"
@ -69,6 +69,7 @@ export default {
<style>
.site-header {
z-index: 100;
height: 4rem;
width: 100vw;
overflow: hidden;
@ -85,35 +86,17 @@ export default {
@apply transition-all duration-300 ease-in-out;
}
.site-background {
opacity: 0%;
top: -23vh;
}
.site-background.enabled {
opacity: 100%;
top: 0;
}
@screen md {
.site-background {
top: 0;
right: -25vw;
}
.site-background.enabled {
top: 0;
right: 0;
}
}
.site-header.enabled {
height: 100vh;
width: 100vw;
}
@screen md {
.site-header {
@apply fixed;
height: 100vh;
width: 4rem;
}
.site-header.enabled {
width: 100vw;
}
}
@screen sm {
.site-background {
background-image: url('~assets/images/bg-md.jpg');
@ -136,8 +119,10 @@ export default {
}
.site-header-inner {
z-index: 1;
background: rgba(0,0,0,0.5);
@apply w-full h-full;
@apply w-full h-full transition duration-300 ease-in-out;
}
.site-header.enabled .site-header-inner {
background: rgba(0,0,0,0.5);
}
header {
@apply flex flex-col transition duration-300 ease-in-out;

65
components/PageHeader.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="relative group page-header">
<div class="h-full w-full page-header-background">
<div class="w-full h-full opacity-50 bg-black">
</div>
</div>
<div class="absolute bottom-0 py-2 left-0 right-0">
<div class="container mx-auto main">
<div>
<slot></slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.page-header {
width: 100%;
min-height: 200px;
height: 70vh;
@apply text-white font-light;
}
.page-header a {
@apply text-white;
}
@screen md {
.page-header {
min-height: 300px;
height: 70vh;
}
}
.page-header-background {
background-image: url('~assets/images/bg-sm.jpg');
background-size: cover;
background-position: right 25% top 20%;
}
@screen sm {
.page-header-background {
background-image: url('~assets/images/bg-md.jpg');
}
}
@screen md {
.page-header-background {
background-image: url('~assets/images/bg-lg.jpg');
}
}
@screen lg {
.page-header-background {
background-image: url('~assets/images/bg-xl.jpg');
}
}
@screen xl {
.page-header-background {
background-image: url('~assets/images/bg-xxl.jpg');
}
}
</style>

65
layouts/default.vue
View File

@ -1,13 +1,9 @@
<template>
<div>
<div class="main">
<div>
<Header />
<div class="content">
<main>
<nuxt />
</main>
<Footer />
</div>
<nuxt />
<Footer />
</div>
</div>
</template>
@ -33,81 +29,70 @@ export default {
html {
@apply font-sans;
}
.content {
@apply w-full;
padding-top: 4rem;
}
@screen md {
.main {
@apply flex flex-row;
}
.content {
padding-top: 0;
margin-left: 4rem;
}
}
main {
.main {
@apply px-4 py-4;
}
@screen md {
main {
.main {
@apply px-8;
}
}
@screen lg {
main {
.main {
@apply px-16;
}
}
@screen xl {
main {
.main {
@apply px-32;
}
}
main p {
.page {
@apply w-full;
}
.main p {
@apply my-4;
}
main h1 {
.main h1 {
@apply my-4 text-4xl font-light;
}
main h2 {
.main h2 {
@apply my-4 text-3xl font-light;
}
main h3 {
.main h3 {
@apply my-4 text-2xl font-light;
}
main h4 {
.main h4 {
@apply my-4 text-xl font-light;
}
main h5 {
.main h5 {
@apply my-4 text-lg font-light;
}
main h6 {
.main h6 {
@apply my-4 text-base font-light;
}
main a {
.main a {
@apply text-yuika-blue-700;
}
main a:hover {
.main a:hover {
@apply underline;
}
main ul {
.main ul {
@apply list-disc;
}
main ul li p {
.main ul li p {
@apply my-0;
}
main ol {
.main ol {
@apply list-decimal;
}
main code {
.main code {
@apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
}
main blockquote {
.main blockquote {
@apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
}
main pre {
.main pre {
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
}

15
pages/about.vue
View File

@ -1,16 +1,21 @@
<template>
<div class="page">
<h1 class="title">About Damillora</h1>
<p>Hello! My name is Damillora.</p>
<p>I enjoy playing rhythm games, and talking about idol and rhythm games in general!</p>
</div>
<PageHeader>
<h1>About Damillora</h1>
</PageHeader>
<main class="container mx-auto main">
<p>Hello! My name is Damillora.</p>
<p>I enjoy playing rhythm games, and talking about idol and rhythm games in general!</p>
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
export default {
components: {
PageHeader
},
head: {
title: 'About Damillora',

11
pages/games/arcaea.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Arcaea</h1>
<p><a href="https://arcaea.lowiro.com">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Arcaea</h1>
<p><a href="https://arcaea.lowiro.com">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Arcaea",

23
pages/games/arknights.vue
View File

@ -1,21 +1,26 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Arknights</h1>
<p><a href="https://www.arknights.global">Game Website</a></p>
<h2>My Review</h2>
<blockquote>
The strength of this game is in its complexities, getting you invested into the game.
If you like tower defenses and also like to think about tactics and strategies, this game is for you.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/arknights/">Read more</a></p>
<PageHeader>
<h1 class="title">Game Profile: Arknights</h1>
<p><a href="https://www.arknights.global">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
The strength of this game is in its complexities, getting you invested into the game.
If you like tower defenses and also like to think about tactics and strategies, this game is for you.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/arknights/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Arknights",

11
pages/games/azurlane.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Azur Lane (EN)</h1>
<p><a href="">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Azur Lane (EN)</h1>
<p><a href="">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Azur Lane",

11
pages/games/bandori.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: BanG Dream! Girls Band Party (JP)</h1>
<p><a href="https://bang-dream.bushimo.jp/">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: BanG Dream! Girls Band Party (JP)</h1>
<p><a href="https://bang-dream.bushimo.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: BanG Dream! Girls Band Party (JP)",

39
pages/games/cue.vue
View File

@ -1,29 +1,34 @@
<template>
<div class="page">
<h1 class="title">Game Profile: CUE!</h1>
<p><a href="https://www.cue-liber.jp/">Game Website</a></p>
<h2>My Review</h2>
<h3>One Year of CUE!</h3>
<blockquote>
Overall, since the game was released, CUE! has improved a lot, with some areas receiving a welcome UX improvement, convenience features that make CUE!'s idle aspect not feel like wasting time, and an entirely new mode for those who want something that feels more like actual gameplay. Here's to hoping that CUE! will continue to improve and move forward.
<br/><br/>
For those who haven't played CUE! yet, there's no better time than now! It's one of the games that will take just a little bit of your time. It also requires no significant time investments for those who doesn't play to rank in events or Compe, so adding CUE! to your daily tasks list doesn't hurt. As with my first review, I recommend to try it out, you will appreciate it.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/one-year-of-cue/">Read more</a></p>
<h3>Original Release Date Review</h3>
<blockquote>
Despite the similarities and the amount of grinding, CUE! manages to stand out for me.
I recommend to try it sometimes, and get to the point where you can change casts in the anime. You will appreciate it.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/cue/">Read more</a></p>
<PageHeader>
<h1 class="title">Game Profile: CUE!</h1>
<p><a href="https://www.cue-liber.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<h3>One Year of CUE!</h3>
<blockquote>
Overall, since the game was released, CUE! has improved a lot, with some areas receiving a welcome UX improvement, convenience features that make CUE!'s idle aspect not feel like wasting time, and an entirely new mode for those who want something that feels more like actual gameplay. Here's to hoping that CUE! will continue to improve and move forward.
<br/><br/>
For those who haven't played CUE! yet, there's no better time than now! It's one of the games that will take just a little bit of your time. It also requires no significant time investments for those who doesn't play to rank in events or Compe, so adding CUE! to your daily tasks list doesn't hurt. As with my first review, I recommend to try it out, you will appreciate it.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/one-year-of-cue/">Read more</a></p>
<h3>Original Release Date Review</h3>
<blockquote>
Despite the similarities and the amount of grinding, CUE! manages to stand out for me.
I recommend to try it sometimes, and get to the point where you can change casts in the anime. You will appreciate it.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/cue/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: CUE!",

11
pages/games/fgo.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Fate/Grand Order (JP)</h1>
<p><a href="https://www.fate-go.jp">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Fate/Grand Order (JP)</h1>
<p><a href="https://www.fate-go.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Fate/Grand Order (JP)",

11
pages/games/genshin.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Genshin Impact</h1>
<p><a href="https://genshin.mihoyo.com">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Genshin Impact</h1>
<p><a href="https://genshin.mihoyo.com">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Genshin Impact",

11
pages/games/honkai.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Honkai Impact 3rd</h1>
<p><a href="https://honkaiimpact3.mihoyo.com">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Honkai Impact 3rd</h1>
<p><a href="https://honkaiimpact3.mihoyo.com">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Honkai Impact 3rd",

272
pages/games/index.vue
View File

@ -1,147 +1,153 @@
<template>
<div class="page">
<h1 class="title">Game Profile</h1>
<p>I play arcade and mobile games mostly, not all are recorded / streamed.</p>
<p>My most frequently played genre is rhythm games, but sometimes I try other genres too</p>
<h2>Game IDs</h2>
<div class="card-list">
<GameListItem
name="SOUND VOLTEX VIVID WAVE"
link="/games/sdvx"
playername="YUIKA283"
gameid="SV-6457-6694"
/>
<GameListItem
name="maimai DX"
link="/games/maimai"
playername="YUIKA283"
gameid="6027059823123"
/>
<GameListItem
name="The IDOLM@STER Million Live: Theater Days"
link="/games/mirishita"
playername="Damillora"
gameid="CGTEDUQ4"
/>
<GameListItem
name="Arcaea"
link="/games/arcaea"
playername="Damillora"
gameid="264202217"
/>
<GameListItem
name="Tokyo 7th Sisters"
link="/games/t7s"
playername="Damillora"
gameid="M2mXkWk"
/>
<GameListItem
name="BanG Dream! Girls Band Party (JP)"
link="/games/bandori"
playername="Damillora"
gameid="106205253"
/>
<GameListItem
name="Love Live! School Idol Festival (JP)"
link="/games/llsif"
playername="Damillora"
gameid="755897396"
/>
<GameListItem
name="Revue Starlight Re LIVE (EN)"
link="/games/starira"
playername="[RS]Damillora"
gameid="2490812618"
/>
<GameListItem
name="Shadowverse"
link="/games/shadowverse"
playername="Damillora"
gameid="778908673"
/>
<GameListItem
name="Nogikoi"
link="/games/nogikoi"
playername="-"
gameid="1673068678"
/>
<GameListItem
name="THE IDOLM@STER: Shiny Colors"
link="/games/shinymas"
playername="Damillora"
gameid="ePmtJyTwzn"
/>
<GameListItem
name="欅坂46・日向坂46 UNI'S ON AIR"
link="games/unison"
playername="Damillora"
gameid="y2medy4d"
/>
<GameListItem
name="CUE!"
link="/games/cue"
playername="Damillora"
gameid="37132287893"
/>
<GameListItem
name="Love Live! School idol festival ALL STARS"
link="/games/llsifas"
playername="-"
gameid="-"
/>
<GameListItem
name="Arknights"
link="/games/arknights"
playername="Damillora"
gameid="Damillora#0835"
/>
<GameListItem
name="Azur Lane (EN)"
link="/games/azurlane"
playername="Damillora"
gameid="204960914"
/>
<GameListItem
name="Fate/Grand Order (JP)"
link="/games/fgo"
playername="Damillora"
gameid="744497723"
/>
<GameListItem
name="Project SEKAI COLORFUL STAGE"
link="/games/puroseka"
playername="Damillora"
gameid="5121608293470214"
/>
<GameListItem
name="Honkai Impact 3rd"
link="/games/honkai"
playername="Damillora"
gameid="17918429"
/>
<GameListItem
name="Genshin Impact"
link="/games/genshin"
playername="Damillora"
gameid="804547223"
/>
<!--
<GameListItem
name=""
link=""
gameid=""
/>
-->
</div>
<PageHeader>
<h1 class="title">Game Profile</h1>
</PageHeader>
<main class="container mx-auto main">
<p>I play arcade and mobile games mostly, not all are recorded / streamed.</p>
<p>My most frequently played genre is rhythm games, but sometimes I try other genres too</p>
<h2>Game IDs</h2>
<div class="card-list">
<GameListItem
name="SOUND VOLTEX VIVID WAVE"
link="/games/sdvx"
playername="YUIKA283"
gameid="SV-6457-6694"
/>
<GameListItem
name="maimai DX"
link="/games/maimai"
playername="YUIKA283"
gameid="6027059823123"
/>
<GameListItem
name="The IDOLM@STER Million Live: Theater Days"
link="/games/mirishita"
playername="Damillora"
gameid="CGTEDUQ4"
/>
<GameListItem
name="Arcaea"
link="/games/arcaea"
playername="Damillora"
gameid="264202217"
/>
<GameListItem
name="Tokyo 7th Sisters"
link="/games/t7s"
playername="Damillora"
gameid="M2mXkWk"
/>
<GameListItem
name="BanG Dream! Girls Band Party (JP)"
link="/games/bandori"
playername="Damillora"
gameid="106205253"
/>
<GameListItem
name="Love Live! School Idol Festival (JP)"
link="/games/llsif"
playername="Damillora"
gameid="755897396"
/>
<GameListItem
name="Revue Starlight Re LIVE (EN)"
link="/games/starira"
playername="[RS]Damillora"
gameid="2490812618"
/>
<GameListItem
name="Shadowverse"
link="/games/shadowverse"
playername="Damillora"
gameid="778908673"
/>
<GameListItem
name="Nogikoi"
link="/games/nogikoi"
playername="-"
gameid="1673068678"
/>
<GameListItem
name="THE IDOLM@STER: Shiny Colors"
link="/games/shinymas"
playername="Damillora"
gameid="ePmtJyTwzn"
/>
<GameListItem
name="欅坂46・日向坂46 UNI'S ON AIR"
link="games/unison"
playername="Damillora"
gameid="y2medy4d"
/>
<GameListItem
name="CUE!"
link="/games/cue"
playername="Damillora"
gameid="37132287893"
/>
<GameListItem
name="Love Live! School idol festival ALL STARS"
link="/games/llsifas"
playername="-"
gameid="-"
/>
<GameListItem
name="Arknights"
link="/games/arknights"
playername="Damillora"
gameid="Damillora#0835"
/>
<GameListItem
name="Azur Lane (EN)"
link="/games/azurlane"
playername="Damillora"
gameid="204960914"
/>
<GameListItem
name="Fate/Grand Order (JP)"
link="/games/fgo"
playername="Damillora"
gameid="744497723"
/>
<GameListItem
name="Project SEKAI COLORFUL STAGE"
link="/games/puroseka"
playername="Damillora"
gameid="5121608293470214"
/>
<GameListItem
name="Honkai Impact 3rd"
link="/games/honkai"
playername="Damillora"
gameid="17918429"
/>
<GameListItem
name="Genshin Impact"
link="/games/genshin"
playername="Damillora"
gameid="804547223"
/>
<!--
<GameListItem
name=""
link=""
gameid=""
/>
-->
</div>
</main>
</div>
</template>
<script>
import GameListItem from "@/components/GameListItem";
import PageHeader from "@/components/PageHeader";
export default {
components: {
GameListItem,
PageHeader,
},
head: {
title: "Game Profile",

11
pages/games/llsif.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1>
<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1>
<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Love Live! School Idol Festival (JP)",

17
pages/games/llsifas.vue
View File

@ -1,21 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Love Live! School idol festival ALL STARS</h1>
<p><a href="https://lovelive-as.bushimo.jp/">Game Website</a></p>
<!--
<h2>My Review</h2>
<blockquote>
</blockquote>
<p><a href="">Read more</a></p>
-->
<PageHeader>
<h1 class="title">Game Profile: Love Live! School idol festival ALL STARS</h1>
<p><a href="https://lovelive-as.bushimo.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Love Live! School idol festival ALL STARS",

11
pages/games/maimai.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: maimai DX</h1>
<p><a href="https://maimai.sega.com/">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: maimai DX</h1>
<p><a href="https://maimai.sega.com/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: maimai DX",

11
pages/games/mirishita.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: The IDOLM@STER Million Live: Theater Days</h1>
<p><a href="https://millionlive.idolmaster.jp/theaterdays/">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: The IDOLM@STER Million Live: Theater Days</h1>
<p><a href="https://millionlive.idolmaster.jp/theaterdays/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: The IDOLM@STER Million Live: Theater Days",

11
pages/games/nogikoi.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Nogikoi</h1>
<p><a href="https://nogikoi.jp">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Nogikoi</h1>
<p><a href="https://nogikoi.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Nogikoi",

21
pages/games/puroseka.vue
View File

@ -1,20 +1,25 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
<p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
<h2>My Review</h2>
<blockquote>
Overall, I've gotten what I wanted to see in a mobile rhythm game. Virtual Lives are also very interesting with many possibilities that can happen. The other aspects are cherry on top, and they're also not bad too. Project SEKAI is great.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/project-sekai-colorful-stage/">Read more</a></p>
<PageHeader>
<h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
<p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
Overall, I've gotten what I wanted to see in a mobile rhythm game. Virtual Lives are also very interesting with many possibilities that can happen. The other aspects are cherry on top, and they're also not bad too. Project SEKAI is great.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/project-sekai-colorful-stage/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Project SEKAI COLORFUL STAGE!",

11
pages/games/sdvx.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: SOUND VOLTEX VIVID WAVE</h1>
<p><a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: SOUND VOLTEX VIVID WAVE</h1>
<p><a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: SOUND VOLTEX VIVID WAVE",

9
pages/games/shadowverse.vue
View File

@ -1,15 +1,18 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Shadowverse</h1>
<p><a href="https://shadowverse.com/">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Shadowverse</h1>
<p><a href="https://shadowverse.com/">Game Website</a></p>
</PageHeader>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Shadowverse",

11
pages/games/shinymas.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
<p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
<p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: THE IDOLM@STER: Shiny Colors",

11
pages/games/starira.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Revue Starlight Re LIVE (EN)</h1>
<p><a href="https://www.en.revuestarlight-relive.com/">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Revue Starlight Re LIVE (EN)</h1>
<p><a href="https://www.en.revuestarlight-relive.com/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Revue Starlight Re LIVE (EN)",

12
pages/games/t7s.vue
View File

@ -1,14 +1,20 @@
<template>
<div class="page">
<h1 class="title">Game Profile: Tokyo 7th Sisters</h1>
<p><a href="https://t7s.jp">Game Website</a></p>
<PageHeader>
<h1 class="title">Game Profile: Tokyo 7th Sisters</h1>
<p><a href="https://t7s.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Tokyo 7th Sisters",

19
pages/games/template.vue
View File

@ -1,19 +1,24 @@
<template>
<div class="page">
<h1 class="title">Game Profile: </h1>
<p><a href="">Game Website</a></p>
<h2>My Review</h2>
<blockquote>
</blockquote>
<p><a href="">Read more</a></p>
<PageHeader>
<h1 class="title">Game Profile: </h1>
<p><a href="">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
</blockquote>
<p><a href="">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: ",

21
pages/games/unison.vue
View File

@ -1,20 +1,25 @@
<template>
<div class="page">
<h1 class="title">Game Profile: 欅坂46・日向坂46 UNI'S ON AIR</h1>
<p><a href="https://keyahina-unisonair.com/">Game Website</a></p>
<h2>My Review</h2>
<blockquote>
Suffice to say, I enjoy this game more than Nogizaka46's rhythm game, which requires memorization of songs a bit too much.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/keyakizaka46-hinatazaka46-unis-on-air/">Read more</a></p>
<PageHeader>
<h1 class="title">Game Profile: 欅坂46・日向坂46 UNI'S ON AIR</h1>
<p><a href="https://keyahina-unisonair.com/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
Suffice to say, I enjoy this game more than Nogizaka46's rhythm game, which requires memorization of songs a bit too much.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/keyakizaka46-hinatazaka46-unis-on-air/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: 欅坂46・日向坂46 UNI'S ON AIR",

15
pages/index.vue
View File

@ -1,17 +1,22 @@
<template>
<div>
<h1>Damillora</h1>
<p>A curious technologist, a web programmer, and a future EN Vtuber</p>
<p>EN/ID OK, JP read only</p>
<div class="page">
<PageHeader>
<h1>Damillora</h1>
<p>A curious technologist, a web programmer, and a future EN Vtuber</p>
<p>EN/ID OK, JP read only</p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
export default {
components: {
PageHeader
},
head: {
title: 'Damillora',

64
pages/links.vue
View File

@ -1,44 +1,44 @@
<template>
<div class="page">
<h1 class="title">Links</h1>
<p>I maintain a number of profiles on various sites, be sure to follow me there!</p>
<p>
<ul>
<li>
<p>Twitter:</p>
<p><a href="/twitter">Damillora</a></p>
</li>
<li>
<p>YouTube:</p>
<p><a href="/channel">Damillora</a></p>
</li>
<li>
<p>Twitch:</p>
<p><a href="/twitch">Damillora</a></p>
</li>
<li>
<p>SoundCloud:</p>
<p><a href="/soundcloud">damillora</a></p>
</li>
<li>
<p>GitHub:</p>
<p><a href="/github">Damillora</a></p>
</li>
<li>
<p>Keybase:</p>
<p><a href="/keybase">damillora</a></p>
</li>
</ul>
</p>
<PageHeader>
<h1>Links</h1>
</PageHeader>
<main class="container mx-auto main">
<p>I maintain a number of profiles on various sites, be sure to follow me there!</p>
<p>
<ul>
<li>
<p>Twitter:</p>
<p><a href="/twitter">Damillora</a></p>
</li>
<li>
<p>YouTube:</p>
<p><a href="/channel">Damillora</a></p>
</li>
<li>
<p>Twitch:</p>
<p><a href="/twitch">Damillora</a></p>
</li>
<li>
<p>SoundCloud:</p>
<p><a href="/soundcloud">damillora</a></p>
</li>
<li>
<p>GitHub:</p>
<p><a href="/github">Damillora</a></p>
</li>
</ul>
</p>
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
export default {
components: {
PageHeader
},
head: {
title: 'Social Media',

18
pages/projects/index.vue
View File

@ -1,20 +1,26 @@
<template>
<div class="page">
<h1 class="title">Project Portfolio</h1>
<p>I build applications in my spare time, but currently only some are published / live right now</p>
<div class="card-list">
<ProjectItem name="nanao.moe" codename="miracle" description="The home page for my online identity." />
<ProjectItem name="nanao.moe Blog" codename="yuika" description="The blog for my hobbies" />
</div>
<PageHeader>
<h1>Project Portfolio</h1>
</PageHeader>
<main class="container mx-auto main">
<p>I build applications in my spare time, but currently only some are published / live right now</p>
<div class="card-list">
<ProjectItem name="nanao.moe" codename="miracle" description="The home page for my online identity." />
<ProjectItem name="nanao.moe Blog" codename="yuika" description="The blog for my hobbies" />
</div>
</main>
</div>
</template>
<script>
import ProjectItem from "@/components/ProjectItem";
import PageHeader from "@/components/PageHeader";
export default {
components: {
ProjectItem,
PageHeader,
},
head: {
title: "Project Portfolio",

58
pages/projects/miracle.vue
View File

@ -1,40 +1,46 @@
<template>
<div class="page">
<h1>nanao.moe</h1>
<p>
<a href="https://nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/miracle">source code</a>
</p>
<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.
</p>
<p>
Originally, nanao.moe is styled in pure CSS. However, it later used Tailwind.
</p>
<h2>Technologies</h2>
<ul>
<li>Vue.js</li>
<li>Nuxt.js</li>
<li>Tailwind CSS</li>
</ul>
<h2>Screenshots</h2>
<div class="gallery">
<GalleryImage :src="require('~/assets/projects/miracle/1.png')" />
<GalleryImage :src="require('~/assets/projects/miracle/2.png')" />
</div>
<PageHeader>
<h1>nanao.moe</h1>
<p>
<a href="https://nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/miracle">source code</a>
</p>
</PageHeader>
<main class="container mx-auto main">
<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.
</p>
<p>
Originally, nanao.moe is styled in pure CSS. However, it later used Tailwind.
</p>
<h2>Technologies</h2>
<ul>
<li>Vue.js</li>
<li>Nuxt.js</li>
<li>Tailwind CSS</li>
</ul>
<h2>Screenshots</h2>
<div class="gallery">
<GalleryImage :src="require('~/assets/projects/miracle/1.png')" />
<GalleryImage :src="require('~/assets/projects/miracle/2.png')" />
</div>
</main>
</div>
</template>
<script>
import ProjectItem from "@/components/ProjectItem";
import PageHeader from "@/components/PageHeader";
import GalleryImage from '@/components/GalleryImage';
export default {
components: {
ProjectItem,
PageHeader,
GalleryImage
},
head: {

62
pages/projects/yuika.vue
View File

@ -1,43 +1,49 @@
<template>
<div class="page">
<h1>nanao.moe Blog</h1>
<p>
<a href="https://blog.nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/Yuika">source code</a>
</p>
<h2>Description</h2>
<p>
The nanao.moe blog is my hobby-related blog, writing about games and idols.
</p>
<p>
The blog runs on Ghost, a publication-focused CMS, while the theme uses Tailwind CSS for its CSS framework.
</p>
<h2>Technologies</h2>
<ul>
<li>Ghost</li>
<li>Tailwind CSS</li>
<li>jQuery</li>
</ul>
<h2>Screenshots</h2>
<div class="gallery">
<GalleryImage :src="require('~/assets/projects/yuika/1.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/2.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/3.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/4.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/5.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/6.png')" />
</div>
<PageHeader>
<h1>nanao.moe Blog</h1>
<p>
<a href="https://blog.nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/Yuika">source code</a>
</p>
</PageHeader>
<main class="container mx-auto main">
<h2>Description</h2>
<p>
The nanao.moe blog is my hobby-related blog, writing about games and idols.
</p>
<p>
The blog runs on Ghost, a publication-focused CMS, while the theme uses Tailwind CSS for its CSS framework.
</p>
<h2>Technologies</h2>
<ul>
<li>Ghost</li>
<li>Tailwind CSS</li>
<li>jQuery</li>
</ul>
<h2>Screenshots</h2>
<div class="gallery">
<GalleryImage :src="require('~/assets/projects/yuika/1.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/2.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/3.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/4.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/5.png')" />
<GalleryImage :src="require('~/assets/projects/yuika/6.png')" />
</div>
</main>
</div>
</template>
<script>
import ProjectItem from "@/components/ProjectItem";
import PageHeader from "@/components/PageHeader";
import GalleryImage from '@/components/GalleryImage';
export default {
components: {
ProjectItem,
PageHeader,
GalleryImage
},
head: {