From 51f2277fd41b39da87594a6b7ca7b27e3d7935bf Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Sat, 26 Dec 2020 16:50:33 +0700
Subject: [PATCH] Match layout to Yuika 2.6

---
 components/Header.vue       |  39 ++----
 components/PageHeader.vue   |  65 +++++++++
 layouts/default.vue         |  65 ++++-----
 pages/about.vue             |  15 +-
 pages/games/arcaea.vue      |  11 +-
 pages/games/arknights.vue   |  23 +--
 pages/games/azurlane.vue    |  11 +-
 pages/games/bandori.vue     |  11 +-
 pages/games/cue.vue         |  39 +++---
 pages/games/fgo.vue         |  11 +-
 pages/games/genshin.vue     |  11 +-
 pages/games/honkai.vue      |  11 +-
 pages/games/index.vue       | 272 ++++++++++++++++++------------------
 pages/games/llsif.vue       |  11 +-
 pages/games/llsifas.vue     |  17 ++-
 pages/games/maimai.vue      |  11 +-
 pages/games/mirishita.vue   |  11 +-
 pages/games/nogikoi.vue     |  11 +-
 pages/games/puroseka.vue    |  21 +--
 pages/games/sdvx.vue        |  11 +-
 pages/games/shadowverse.vue |   9 +-
 pages/games/shinymas.vue    |  11 +-
 pages/games/starira.vue     |  11 +-
 pages/games/t7s.vue         |  12 +-
 pages/games/template.vue    |  19 ++-
 pages/games/unison.vue      |  21 +--
 pages/index.vue             |  15 +-
 pages/links.vue             |  64 ++++-----
 pages/projects/index.vue    |  18 ++-
 pages/projects/miracle.vue  |  58 ++++----
 pages/projects/yuika.vue    |  62 ++++----
 31 files changed, 572 insertions(+), 405 deletions(-)
 create mode 100644 components/PageHeader.vue

diff --git a/components/Header.vue b/components/Header.vue
index a47ae24..d988a57 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -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;
diff --git a/components/PageHeader.vue b/components/PageHeader.vue
new file mode 100644
index 0000000..50cff32
--- /dev/null
+++ b/components/PageHeader.vue
@@ -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>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 3a0a7e7..c5a7f69 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -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;
 }
 
diff --git a/pages/about.vue b/pages/about.vue
index 9c4307a..ded00ac 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -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',
diff --git a/pages/games/arcaea.vue b/pages/games/arcaea.vue
index 9552167..7ef07eb 100644
--- a/pages/games/arcaea.vue
+++ b/pages/games/arcaea.vue
@@ -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",
diff --git a/pages/games/arknights.vue b/pages/games/arknights.vue
index 631f8c8..da555e7 100644
--- a/pages/games/arknights.vue
+++ b/pages/games/arknights.vue
@@ -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",
diff --git a/pages/games/azurlane.vue b/pages/games/azurlane.vue
index c109a1b..82ddfae 100644
--- a/pages/games/azurlane.vue
+++ b/pages/games/azurlane.vue
@@ -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",
diff --git a/pages/games/bandori.vue b/pages/games/bandori.vue
index 00c8b14..8718b0e 100644
--- a/pages/games/bandori.vue
+++ b/pages/games/bandori.vue
@@ -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)",
diff --git a/pages/games/cue.vue b/pages/games/cue.vue
index 5295f4c..d4e04d1 100644
--- a/pages/games/cue.vue
+++ b/pages/games/cue.vue
@@ -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!",
diff --git a/pages/games/fgo.vue b/pages/games/fgo.vue
index ccbc440..f0ff4c1 100644
--- a/pages/games/fgo.vue
+++ b/pages/games/fgo.vue
@@ -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)",
diff --git a/pages/games/genshin.vue b/pages/games/genshin.vue
index 154a54a..77cb91b 100644
--- a/pages/games/genshin.vue
+++ b/pages/games/genshin.vue
@@ -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",
diff --git a/pages/games/honkai.vue b/pages/games/honkai.vue
index 3640d54..6de1aa1 100644
--- a/pages/games/honkai.vue
+++ b/pages/games/honkai.vue
@@ -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",
diff --git a/pages/games/index.vue b/pages/games/index.vue
index b5dd2b5..d54aec9 100644
--- a/pages/games/index.vue
+++ b/pages/games/index.vue
@@ -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",
diff --git a/pages/games/llsif.vue b/pages/games/llsif.vue
index ce482d2..58e8b71 100644
--- a/pages/games/llsif.vue
+++ b/pages/games/llsif.vue
@@ -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)",
diff --git a/pages/games/llsifas.vue b/pages/games/llsifas.vue
index 69d0391..93913c4 100644
--- a/pages/games/llsifas.vue
+++ b/pages/games/llsifas.vue
@@ -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",
diff --git a/pages/games/maimai.vue b/pages/games/maimai.vue
index 2d73708..686d5be 100644
--- a/pages/games/maimai.vue
+++ b/pages/games/maimai.vue
@@ -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",
diff --git a/pages/games/mirishita.vue b/pages/games/mirishita.vue
index 32766d0..a136a9d 100644
--- a/pages/games/mirishita.vue
+++ b/pages/games/mirishita.vue
@@ -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",
diff --git a/pages/games/nogikoi.vue b/pages/games/nogikoi.vue
index 5251eee..8898f4d 100644
--- a/pages/games/nogikoi.vue
+++ b/pages/games/nogikoi.vue
@@ -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",
diff --git a/pages/games/puroseka.vue b/pages/games/puroseka.vue
index 90395d8..6eacd03 100644
--- a/pages/games/puroseka.vue
+++ b/pages/games/puroseka.vue
@@ -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!",
diff --git a/pages/games/sdvx.vue b/pages/games/sdvx.vue
index bcd13a6..056eeeb 100644
--- a/pages/games/sdvx.vue
+++ b/pages/games/sdvx.vue
@@ -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",
diff --git a/pages/games/shadowverse.vue b/pages/games/shadowverse.vue
index 722ba1c..7575326 100644
--- a/pages/games/shadowverse.vue
+++ b/pages/games/shadowverse.vue
@@ -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",
diff --git a/pages/games/shinymas.vue b/pages/games/shinymas.vue
index 8008b26..bae896a 100644
--- a/pages/games/shinymas.vue
+++ b/pages/games/shinymas.vue
@@ -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",
diff --git a/pages/games/starira.vue b/pages/games/starira.vue
index 61ab879..82b6ede 100644
--- a/pages/games/starira.vue
+++ b/pages/games/starira.vue
@@ -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)",
diff --git a/pages/games/t7s.vue b/pages/games/t7s.vue
index b035f17..7d5f908 100644
--- a/pages/games/t7s.vue
+++ b/pages/games/t7s.vue
@@ -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",
diff --git a/pages/games/template.vue b/pages/games/template.vue
index c6c2ffd..eecf0a5 100644
--- a/pages/games/template.vue
+++ b/pages/games/template.vue
@@ -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: ",
diff --git a/pages/games/unison.vue b/pages/games/unison.vue
index 5d85dcd..d281b99 100644
--- a/pages/games/unison.vue
+++ b/pages/games/unison.vue
@@ -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",
diff --git a/pages/index.vue b/pages/index.vue
index 241f9a6..08f0636 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -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',
diff --git a/pages/links.vue b/pages/links.vue
index 2d6c91a..9b006df 100644
--- a/pages/links.vue
+++ b/pages/links.vue
@@ -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',
diff --git a/pages/projects/index.vue b/pages/projects/index.vue
index 3cbb89e..26d4159 100644
--- a/pages/projects/index.vue
+++ b/pages/projects/index.vue
@@ -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",
diff --git a/pages/projects/miracle.vue b/pages/projects/miracle.vue
index 4c1f54c..4b80b6b 100644
--- a/pages/projects/miracle.vue
+++ b/pages/projects/miracle.vue
@@ -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: {
diff --git a/pages/projects/yuika.vue b/pages/projects/yuika.vue
index 655d6d7..055e35f 100644
--- a/pages/projects/yuika.vue
+++ b/pages/projects/yuika.vue
@@ -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: {