Match layout to Yuika 2.6

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,29 +1,34 @@
<template> <template>
<div class="page"> <div class="page">
<h1 class="title">Game Profile: CUE!</h1> <PageHeader>
<p><a href="https://www.cue-liber.jp/">Game Website</a></p> <h1 class="title">Game Profile: CUE!</h1>
<h2>My Review</h2> <p><a href="https://www.cue-liber.jp/">Game Website</a></p>
<h3>One Year of CUE!</h3> </PageHeader>
<blockquote> <main class="container mx-auto main">
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. <h2>My Review</h2>
<br/><br/> <h3>One Year of CUE!</h3>
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>
</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.
<p><a href="https://blog.nanao.moe/game-reviews/one-year-of-cue/">Read more</a></p> <br/><br/>
<h3>Original Release Date Review</h3> 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> </blockquote>
Despite the similarities and the amount of grinding, CUE! manages to stand out for me. <p><a href="https://blog.nanao.moe/game-reviews/one-year-of-cue/">Read more</a></p>
I recommend to try it sometimes, and get to the point where you can change casts in the anime. You will appreciate it. <h3>Original Release Date Review</h3>
</blockquote> <blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/cue/">Read more</a></p> 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> </div>
</template> </template>
<script> <script>
import PageHeader from "@/components/PageHeader";
export default { export default {
components: { components: {
PageHeader,
}, },
head: { head: {
title: "Game Profile: CUE!", title: "Game Profile: CUE!",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,20 +1,25 @@
<template> <template>
<div class="page"> <div class="page">
<h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1> <PageHeader>
<p><a href="https://pjsekai.sega.jp/">Game Website</a></p> <h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
<h2>My Review</h2> <p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
<blockquote> </PageHeader>
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. <main class="container mx-auto main">
</blockquote> <h2>My Review</h2>
<p><a href="https://blog.nanao.moe/game-reviews/project-sekai-colorful-stage/">Read more</a></p> <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> </div>
</template> </template>
<script> <script>
import PageHeader from "@/components/PageHeader";
export default { export default {
components: { components: {
PageHeader,
}, },
head: { head: {
title: "Game Profile: Project SEKAI COLORFUL STAGE!", title: "Game Profile: Project SEKAI COLORFUL STAGE!",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,40 +1,46 @@
<template> <template>
<div class="page"> <div class="page">
<h1>nanao.moe</h1> <PageHeader>
<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/miracle">source code</a> &bull;
</p> <a href="https://github.com/Damillora/miracle">source code</a>
<h2>Description</h2> </p>
<p> </PageHeader>
A domain carves a person's place in the Internet. nanao.moe now serves as my primary web page. <main class="container mx-auto main">
The website contains information about my projects and interests. <h2>Description</h2>
</p> <p>
<p> A domain carves a person's place in the Internet. nanao.moe now serves as my primary web page.
Originally, nanao.moe is styled in pure CSS. However, it later used Tailwind. The website contains information about my projects and interests.
</p> </p>
<h2>Technologies</h2> <p>
<ul> Originally, nanao.moe is styled in pure CSS. However, it later used Tailwind.
<li>Vue.js</li> </p>
<li>Nuxt.js</li> <h2>Technologies</h2>
<li>Tailwind CSS</li> <ul>
</ul> <li>Vue.js</li>
<h2>Screenshots</h2> <li>Nuxt.js</li>
<div class="gallery"> <li>Tailwind CSS</li>
<GalleryImage :src="require('~/assets/projects/miracle/1.png')" /> </ul>
<GalleryImage :src="require('~/assets/projects/miracle/2.png')" /> <h2>Screenshots</h2>
</div> <div class="gallery">
<GalleryImage :src="require('~/assets/projects/miracle/1.png')" />
<GalleryImage :src="require('~/assets/projects/miracle/2.png')" />
</div>
</main>
</div> </div>
</template> </template>
<script> <script>
import ProjectItem from "@/components/ProjectItem"; import ProjectItem from "@/components/ProjectItem";
import PageHeader from "@/components/PageHeader";
import GalleryImage from '@/components/GalleryImage'; import GalleryImage from '@/components/GalleryImage';
export default { export default {
components: { components: {
ProjectItem, ProjectItem,
PageHeader,
GalleryImage GalleryImage
}, },
head: { head: {

View File

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