Update README

Signed-off-by: Damillora <damillora@damillora.com>

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "assets/images/bg"]
+	path = assets/images/bg
+	url = https://git.nanao.moe/Damillora/nanaomoe-bg.git
+	branch = master

README.md

@@ -1,6 +1,9 @@
 # miracle
 
-> The current web application that presents [nanao.moe](https://nanao.moe), my current homepage.
+## This project has been obsoleted by [Rinze](https://github.com/Damillora/Rinze)
+
+I migrated the website to use Svelte and SASS for multiple reasons,
+including much faster build times. miracle is now obsolete and unmaintained.
 
 ## Build Setup
 

assets/css/tailwind.css

@@ -8,53 +8,88 @@
 
 @import 'tailwindcss/utilities';
 
+
 html {
     @apply font-sans;
 }
-body {
-    background-image: url('~assets/images/bg-sm.jpg');
-    background-size: cover;
-    background-position: center;
-    @apply min-h-screen;
-}
-@screen sm {
-    body {
-        background-image: url('~assets/images/bg-md.jpg');
-    }
+.main {
+    @apply px-4 py-4;
 }
 @screen md {
-    body {
-        background-image: url('~assets/images/bg-lg.jpg');
-    }
+  .main {
+    @apply px-8;
+  }
 }
 @screen lg {
-    body {
-        background-image: url('~assets/images/bg-xl.jpg');
-    }
+  .main {
+    @apply px-16;
+  }
 }
 @screen xl {
-    body {
-        background-image: url('~assets/images/bg-xxl.jpg');
-    }
+  .main {
+    @apply px-32;
+  }
+}
+.page {
+  @apply w-full;
+}
+.main p {
+  @apply my-4;
+}
+.main h1 {
+  @apply my-4 text-4xl font-light;
+}
+.main h2 {
+  @apply my-4 text-3xl font-light;
+}
+.main h3 {
+  @apply my-4 text-2xl font-light;
+}
+.main h4 {
+  @apply my-4 text-xl font-light;
+}
+.main h5 {
+  @apply my-4 text-lg font-light;
+}
+.main h6 {
+  @apply my-4 text-base font-light;
+}
+.main a {
+  @apply text-yuika-blue-700;
+}
+.main a:hover {
+  @apply underline;
+}
+.main ul {
+  @apply list-disc;
+}
+.main ul li p {
+  @apply my-0;
+}
+.main ol {
+  @apply list-decimal;
+}
+.main code {
+  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
+}
+.main blockquote {
+  @apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
+}
+.main pre {
+  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
 }
 
-.content h1 {
-    @apply text-4xl;
-}
-.content h2 {
-    @apply text-3xl;
+blockquote {
+   @apply border-l-4 border-white pl-8 text-yuika-blue-500;
 }
 
-.content ul {
-    @apply list-disc;
+.gallery {
+    @apply flex flex-row flex-wrap items-center;
 }
-.content ul li {
-    @apply ml-4;
-}
-.content a {
-    @apply text-yuika-blue-200;
+.gallery .gallery-image {
+    @apply w-full px-4 py-4;
 }
 
-.content blockquote {
-   @apply border-l-4 border-white pl-8 text-gray-200;
-}
+.card-list {
+  @apply flex flex-col;
+}

assets/images/bg

@@ -0,0 +1 @@
+Subproject commit ae64538f0a9a3830c6e64d97c7b25f267b442f81

components/GalleryImage.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="gallery-image">
     <img :src='src' @click="shown = !shown">
-    <div :class="shown ? 'gallery-popup' : 'gallery-popup-hidden'" @click.self="shown = !shown" @mousemove="calculate">
-      <img :src='src' @click="zoom" :class="zoom_status" :style="{left: cursor_x, top: cursor_y }" draggable="false">
+    <div :class="shown ? 'gallery-popup' : 'gallery-popup-hidden'" @click.self="shown = !shown">
+      <img :src='src' @click="open"  draggable="false">
       <a class="gallery-popup-exit" @click="shown = !shown" href="#">x</a>
     </div>
   </div>
@@ -14,23 +14,12 @@ export default {
     data() {
       return {
         shown: false,
-        zoom_status: 'gallery-zoomed-out',
-        cursor_x: 300,
-        cursor_y: 300,
       };
     },
     methods: {
-      zoom() {
-        if(this.zoom_status == 'gallery-zoomed-out') {
-          this.zoom_status = 'gallery-zoomed-in';
-        } else {
-          this.zoom_status = 'gallery-zoomed-out';
-        }
+      open() {
+        window.open(this.src,"_blank");
       },
-      calculate(e) {
-        this.cursor_x = ((e.clientX)-(window.innerWidth/2))*2+'px';
-        this.cursor_y = ((e.clientY)-(window.innerHeight/2))*2+'px';
-      }
     },
 }
 </script>
@@ -50,7 +39,7 @@ export default {
    @apply fixed;
    width: 400vw;
 }
-.gallery-popup-exit {
-    @apply fixed right-0 top-0 z-30 mx-8 my-4 text-2xl text-white;
+a.gallery-popup-exit {
+    @apply fixed right-0 top-0 mx-8 my-4 text-2xl text-white;
 }
 </style>

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, 'detached': detached }">
+    <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"
@@ -34,10 +34,16 @@
               />
             <NavItem
               link="/links"
-              icon="contacts"
+              icon="share"
               text="Links"
               @click="menu_shown = !menu_shown" 
               />
+            <NavItem
+              link="/contact"
+              icon="contacts"
+              text="Contact"
+              @click="menu_shown = !menu_shown" 
+              />
             <NavItem
               link="//blog.nanao.moe"
               icon="rss_feed"
@@ -62,13 +68,30 @@ export default {
   data() {
     return {
       menu_shown: false,
+      scrollY: 0,
+      originTop: 0,
+      detached: false,
     };
   },
+  mounted() {
+    window.addEventListener('scroll', (e) => {
+      this.scrollY = Math.round(window.scrollY);
+    })
+    this.originTop = this.$el.getBoundingClientRect().top;
+  },
+  watch: {
+    scrollY(newValue) {
+      const rect = this.$el.getBoundingClientRect();
+      const newTop = this.scrollY;
+      this.detached = newTop > 64;
+    }
+  },
 }
 </script>
 
 <style>
 .site-header {
+  z-index: 10;
   height: 4rem;
   width: 100vw;
   overflow: hidden;
@@ -79,65 +102,52 @@ export default {
   width: 100vw;
   height: 100vh;
   position: absolute;
-  background-image: url('~assets/images/bg-sm.jpg');
+  background-image: url('~assets/images/bg/283-yuika/bg-sm.jpg');
   background-size: cover;
   background-position: right 25% top 20%;
   @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');
+        background-image: url('~assets/images/bg/283-yuika/bg-md.jpg');
     }
 }
 @screen md {
     .site-background {
-        background-image: url('~assets/images/bg-lg.jpg');
+        background-image: url('~assets/images/bg/283-yuika/bg-lg.jpg');
     }
 }
 @screen lg {
     .site-background {
-        background-image: url('~assets/images/bg-xl.jpg');
+        background-image: url('~assets/images/bg/283-yuika/bg-xl.jpg');
     }
 }
 @screen xl {
     .site-background {
-        background-image: url('~assets/images/bg-xxl.jpg');
+        background-image: url('~assets/images/bg/283-yuika/bg-xxl.jpg');
     }
 }
 .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);
+}
+.site-header.detached .site-header-inner {
+  background: rgba(0,0,0,0.5);
 }
 header {
     @apply flex flex-col transition duration-300 ease-in-out;
@@ -155,7 +165,7 @@ header {
     @apply bg-yuika-blue-500;
 }
 #menushow {
-  @apply w-16 h-16 cursor-pointer relative p-2 text-center whitespace-no-wrap transition duration-300 ease-in-out;
+  @apply w-16 h-16 cursor-pointer relative p-2 text-center whitespace-nowrap transition duration-300 ease-in-out;
 }
 #menushow:hover {
   @apply bg-yuika-blue-500;

components/MediaItem.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="card game-card">
+        <div class="card-content">
+          <div class="card-title">
+              <p class="card-caption"><a :href="link">{{title}}</a></p>
+          </div>
+          <div class="card-content">
+            <p><slot></slot></p>
+          </div>
+          <div class="card-footer">
+          </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props : [ 'title', 'link' ],
+}
+</script>
+
+<style>
+.game-card {
+    padding: 0.25rem 1rem;
+    @apply w-full flex flex-row transition duration-300 ease-in-out;
+}
+.game-card:hover {
+    @apply bg-yuika-blue-200;
+}
+.card-caption {
+    @apply text-2xl my-1;
+}
+.card-content {
+    @apply my-2 w-full;
+}
+.card-content p {
+    @apply my-1;
+}
+ 
+
+</style>

components/PageHeader.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="relative group page-header">
+        <component is="style">
+            :root {
+                --bg-ps: {{ positioning }};
+                --bg-sm: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-sm.jpg') }}');
+                --bg-md: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-md.jpg') }}');
+                --bg-lg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-lg.jpg') }}');
+                --bg-xl: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-xl.jpg') }}');
+                --bg-xxl: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-xxl.jpg') }}');
+            }
+        </component>
+        <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 {
+  props: [ 'imageType' ],
+  computed: {
+    normalImageType() {
+      return this.imageType ?? '283-yuika';
+    },
+    positioning() {
+        switch(this.normalImageType) {
+            case '283-yuika':
+                return 'right 25% top 20%';
+            case 'cue-mei':
+                return 'center top';
+            case 'cue-mei2':
+                return 'center top';
+            case '765-yuriko':
+                return 'right 15% top 10%';
+            case '765-yuriko2':
+                return 'right 35% top 30%';
+            default:
+                return 'center';
+        }
+    }
+  },
+
+}
+</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: var(--bg-sm);
+  background-size: cover;
+  background-position: var(--bg-ps);
+}
+@screen sm {
+    .page-header-background {
+        background-image: var(--bg-md);
+    }
+}
+@screen md {
+    .page-header-background {
+        background-image: var(--bg-lg);
+    }
+}
+@screen lg {
+    .page-header-background {
+        background-image: var(--bg-xl);
+    }
+}
+@screen xl {
+    .page-header-background {
+        background-image: var(--bg-xxl);
+    }
+}
+</style>

layouts/default.vue

@@ -1,126 +1,23 @@
 <template>
   <div>
-    <div class="main">
+    <div>
       <Header />
-      <div class="content">
-        <main>
-          <nuxt />
-        </main>
-        <Footer />
-      </div>
+      <nuxt />
+      <Footer />
     </div>
   </div>
 </template>
 
 <script>
-// import FloatingYuriko from '~/components/FloatingYuriko'
 import Header from '~/components/Header'
 export default {
   components: {
-//    FloatingYuriko
     Header,
   }
 }
 </script>
 
 <style>
-@import 'tailwindcss/base';
-
-@import 'tailwindcss/components';
-
-@import 'tailwindcss/utilities';
-
-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 {
-    @apply px-4 py-4;
-}
-@screen md {
-  main {
-    @apply px-8;
-  }
-}
-@screen lg {
-  main {
-    @apply px-16;
-  }
-}
-@screen xl {
-  main {
-    @apply px-32;
-  }
-}
-
-main p {
-  @apply my-4;
-}
-main h1 {
-  @apply my-4 text-4xl font-light;
-}
-main h2 {
-  @apply my-4 text-3xl font-light;
-}
-main h3 {
-  @apply my-4 text-2xl font-light;
-}
-main h4 {
-  @apply my-4 text-xl font-light;
-}
-main h5 {
-  @apply my-4 text-lg font-light;
-}
-main h6 {
-  @apply my-4 text-base font-light;
-}
-main a {
-  @apply text-yuika-blue-700;
-}
-main a:hover {
-  @apply underline;
-}
-main ul {
-  @apply list-disc;
-}
-main ul li p {
-  @apply my-0;
-}
-main ol {
-  @apply list-decimal;
-}
-main code {
-  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
-}
-main blockquote {
-  @apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
-}
-main pre {
-  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
-}
-
-blockquote {
-   @apply border-l-4 border-white pl-8 text-yuika-blue-500;
-}
-
-.gallery {
-    @apply flex flex-row flex-wrap items-center;
-}
-.gallery .gallery-image {
-    @apply w-full px-4 py-4;
-}
 
 </style>
 

nuxt.config.js

@@ -34,6 +34,7 @@ module.exports = {
   ** Global CSS
   */
   css: [
+      '@/assets/css/tailwind.css',
   ],
   env: {
     subheader: process.env.SUBHEADER || "" ,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@damillora/miracle",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "nanao.moe homepage, but in Vue",
   "author": "Damillora",
   "private": true,
@@ -17,9 +17,11 @@
     "howler": "^2.1.2",
     "node-fetch": "^2.6.0",
     "nuxt": "^2.0.0",
-    "tailwindcss": "^1.4.6"
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   },
   "devDependencies": {
-    "nodemon": "^2.0"
+    "autoprefixer": "^9",
+    "nodemon": "^2.0",
+    "postcss": "^7"
   }
 }

pages/about.vue

@@ -1,16 +1,30 @@
 <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'm currently reconstructing my about page for new things, but I'm a web developer, rhythm game player and music enthusiast!</p>
+      <h2>GPG public key</h2>
+      <p>My public key is accessible <a href="/damillora.asc">here</a>.</p>
+      <h2>Producer Meishi</h2>
+      <div class="gallery">
+        <GalleryImage :src="require('~/assets/images/meishi/front.png')" />
+        <GalleryImage :src="require('~/assets/images/meishi/back.png')" />
+      </div>
+    </main>
+  </div>
 </template>
 
 <script>
+import PageHeader from '~/components/PageHeader';
+import GalleryImage from '@/components/GalleryImage';
 
 export default {
   components: {
-
+    PageHeader,
+    GalleryImage,
   },
   head: {
     title: 'About Damillora',

pages/contact.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="page">
+    <PageHeader imageType="765-yuriko2">
+      <h1>Contact</h1>
+    </PageHeader>
+    <main class="container mx-auto main">
+      <p>You can contact me via various channels.</p>
+      <h2>Common channels</h2>
+      <p>Those are the ones I use for interacting with the wider community!</p>
+      <ul>
+        <li>
+          <p>Email</p>
+          <p>damillora(at)damillora.com</p>
+        </li>
+        <li>
+          <p>Twitter:</p>
+          <p><a href="/twitter">Damillora</a></p>
+        </li>
+      </ul>
+      <h2>Publishing media</h2>
+      <p>I publish content mainly in those sites</p>
+      <ul>
+        <li>
+          <p>YouTube:</p>
+          <p><a href="/channel">Damillora</a></p>
+        </li>
+        <li>
+          <p>Twitch:</p>
+          <p><a href="/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>
+      <h2>Alternative technologies</h2>
+      <p>
+        Mainstream platforms control what you can post, and you can lose access to data rightfully yours.
+        <br>
+        I maintain presence in several altenative platforms and technologies to ensure I have control of data I post,
+        to contribute to a possible future, and as a backup when mainstream platforms go down.
+        <br>
+        If you have a presence in those platforms, I encourage you to use these instead, you will  help
+        the adoption of those technologies!
+      </p>
+      <ul>
+        <li>
+          <p>Fediverse:</p>
+          <p><a href="/fediverse">Damillora@fed.nanao.moe</a></p>
+        </li>
+        <li>
+          <p>Video Channel:</p>
+          <p><a href="/fedichan">damillora@live.nanao.moe</a></p>
+        </li>
+        <li>
+          <p>Matrix</p>
+          <p>@damillora:matrix.nanao.moe</p>
+        </li>
+        <li>
+          <p>Gemini</p>
+          <p><a href="gemini://gemini.nanao.moe">gemini.nanao.moe</a></p>
+        </li>
+      </ul>
+    </main>
+  </div>
+</template>
+
+<script>
+import PageHeader from '~/components/PageHeader';
+
+export default {
+  components: {
+    PageHeader
+  },
+  head: {
+    title: 'Contact',
+  }
+}
+</script>
+
+<style>
+</style>

pages/games/aaside.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="page">
+    <PageHeader imageType="cue-mei2">
+      <h1 class="title">Game Profile: ARGONAVIS from BanG Dream! AAside</h1>
+      <p><a href="https://aaside.bushimo.jp">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: ",
+  },
+}
+</script>
+
+<style>
+</style>

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+      <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)",

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 imageType="cue-mei">
+      <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!",

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 imageType="cue-mei2">
+      <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)",

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+      <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",

pages/games/index.vue

@@ -1,147 +1,160 @@
 <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 imageType="cue-mei2">
+      <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="ARGONAVIS from BanG Dream! AAside"
+                link="/games/aaside"
+                playername="Damilora"
+                gameid="3BUWJibt"
+                />
+              <!--
+              <GameListItem
+                name=""
+                link=""
+                playername=""
+                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",
@@ -150,7 +163,4 @@ export default {
 </script>
 
 <style>
-.card-list {
-     @apply flex flex-col;
-}
 </style>

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 imageType="cue-mei2">
+      <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)",

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+      <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",

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 imageType="765-yuriko">
+      <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",

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+    <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!",

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+      <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",

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 imageType="283-yuika">
+      <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",

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 imageType="cue-mei2">
+      <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)",

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 imageType="cue-mei2">
+      <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",

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 imageType="cue-mei2">
+      <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: ",

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 imageType="cue-mei2">
+      <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",

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',

pages/links.vue

@@ -1,47 +1,30 @@
 <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 imageType="765-yuriko">
+      <h1>Links</h1>
+    </PageHeader>
+    <main class="container mx-auto main">
+      <p>Here, I post links that is of my interest, and might be for you too!</p>
+      <div class="card-list">
+        <MediaItem title="Damillora's Favorite Music Playlist" link="/favmusiclist">
+          This playlist contains some of the music I listen to frequently.
+        </MediaItem>
+      </div>
+    </main>
   </div>
 </template>
 
 <script>
+import PageHeader from '~/components/PageHeader';
+import MediaItem from '~/components/MediaItem';
 
 export default {
   components: {
-
+    PageHeader,
+    MediaItem
   },
   head: {
-    title: 'Social Media',
+    title: 'Links',
   }
 }
 </script>

pages/projects/altessimo.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="page">
+    <PageHeader imageType="cue-mei">
+      <h1>Altessimo</h1>
+      <p>
+        <a href="https://altessimo.nanao.moe">live</a>
+        &bull;
+        <a href="https://github.com/Damillora/Altessimo">source code</a>
+      </p>
+    </PageHeader>
+    <main class="container mx-auto main">
+      <h2>Description</h2>
+        <p>
+          Altessimo is a web application I built to catalogue and put in context Idolmaster lyricists, composers, and arrangers.
+        </p>
+        <p>
+          The database itself is definitely a work-in-progress.</p>
+        </p>
+      <h2>Technologies</h2>
+      <ul>
+        <li>Django</li>
+        <li>Bootstrap</li>
+      </ul>
+      <h2>Screenshots</h2>
+      <div class="gallery">
+        <GalleryImage :src="require('~/assets/projects/altessimo/1.png')" />
+        <GalleryImage :src="require('~/assets/projects/altessimo/2.png')" />
+        <GalleryImage :src="require('~/assets/projects/altessimo/3.png')" />
+        <GalleryImage :src="require('~/assets/projects/altessimo/4.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: {
+    title: "Project Portfolio",
+  }
+}
+</script>
+
+<style>
+.card-list {
+     @apply flex flex-col;
+}
+</style>

pages/projects/index.vue

@@ -1,20 +1,27 @@
 <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 imageType="cue-mei">
+      <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" />
+          <ProjectItem name="Altessimo" codename="altessimo" description="Web database of Idolmaster composers" />
+      </div>
+    </main>
   </div>
 </template>
 
 <script>
 import ProjectItem from "@/components/ProjectItem";
+import PageHeader from "@/components/PageHeader";
 
 export default {
   components: {
     ProjectItem,
+    PageHeader,
   },
   head: {
     title: "Project Portfolio",

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 imageType="cue-mei">
+      <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: {

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 imageType="cue-mei">
+      <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: {

static/damillora.asc

@@ -0,0 +1,169 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+=DuW0
+-----END PGP PUBLIC KEY BLOCK-----

static/keybase.txt

@@ -0,0 +1,56 @@
+==================================================================
+https://keybase.io/damillora
+--------------------------------------------------------------------
+
+I hereby claim:
+
+  * I am an admin of https://nanao.moe
+  * I am damillora (https://keybase.io/damillora) on keybase.
+  * I have a public key ASB1b8gThlePeU5irqkaYNKz_P30KoR83J_mNjjRe_s4YQo
+
+To do so, I am signing this object:
+
+{
+  "body": {
+    "key": {
+      "eldest_kid": "0120756fc81386578f794e62aea91a60d2b3fcfdf42a847cdc9fe63638d17bfb38610a",
+      "host": "keybase.io",
+      "kid": "0120756fc81386578f794e62aea91a60d2b3fcfdf42a847cdc9fe63638d17bfb38610a",
+      "uid": "c8acd919e656b29d93aacd4022415019",
+      "username": "damillora"
+    },
+    "merkle_root": {
+      "ctime": 1611079819,
+      "hash": "d7f5ff56c12879a36816f9ed5348d00d705c7980a3f9fdb00ab968eeabcbcaac3e06d063f984517e7112be29e6f1780dd6a83e50184ac2c4b2a5f6ea68095301",
+      "hash_meta": "00e615f1394e666502ea83ef17b1fe27a59a43bd0322f149a04ee7761a1994be",
+      "seqno": 18835417
+    },
+    "service": {
+      "entropy": "o3OMtL+GRf/5fXv6hoXIa/Je",
+      "hostname": "nanao.moe",
+      "protocol": "https:"
+    },
+    "type": "web_service_binding",
+    "version": 2
+  },
+  "client": {
+    "name": "keybase.io go client",
+    "version": "5.5.2"
+  },
+  "ctime": 1611079827,
+  "expire_in": 504576000,
+  "prev": "7d2c3d8acbed28735fc3194c0cfb83357fff7122f17e0b81268617941f3be534",
+  "seqno": 51,
+  "tag": "signature"
+}
+
+which yields the signature:
+
+hKRib2R5hqhkZXRhY2hlZMOpaGFzaF90eXBlCqNrZXnEIwEgdW/IE4ZXj3lOYq6pGmDSs/z99CqEfNyf5jY40Xv7OGEKp3BheWxvYWTESpcCM8QgfSw9isvtKHNfwxlMDPuDNX//cSLxfguBJoYXlB875TTEIK4W+LY02+pl/anYYETWAVtlaOHqBxvAhP006jDJGjyzAgHCo3NpZ8RAKtrGN0eg4wbs4L09Gsly0Xnw8trJkg8mCSlBjXTJdlnu+JfThK4CbDzGDTwP7L16gOM4oSAq0k3Zt2Dok1hBA6hzaWdfdHlwZSCkaGFzaIKkdHlwZQildmFsdWXEICzaLIARO+jwfRUn16XcPSJGzIp/yeQi2osYLmGTb/CRo3RhZ80CAqd2ZXJzaW9uAQ==
+
+And finally, I am proving ownership of this host by posting or
+appending to this document.
+
+View my publicly-auditable identity here: https://keybase.io/damillora
+
+==================================================================

store/index.js

@@ -1,6 +1,6 @@
 
 export const state = () => ({
-  title: 'Damillora'
+  title: 'Damillora',
 })
 
 export const mutations = {

tailwind.config.js

@@ -38,8 +38,4 @@ module.exports = {
     }
   },
   variants: ['responsive', 'group-hover', 'hover', 'active' ],
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
 }