Change contacts page header image

assets/css/tailwind.css

@@ -88,4 +88,8 @@ blockquote {
 }
 .gallery .gallery-image {
     @apply w-full px-4 py-4;
+}
+
+.card-list {
+  @apply flex flex-col;
 }

components/Header.vue

@@ -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"
@@ -96,7 +102,7 @@ export default {
   width: 100vw;
   height: 100vh;
   position: absolute;
-  background-image: url('~assets/images/yuika/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;
@@ -115,22 +121,22 @@ export default {
 }
 @screen sm {
     .site-background {
-        background-image: url('~assets/images/yuika/bg-md.jpg');
+        background-image: url('~assets/images/bg/283-yuika/bg-md.jpg');
     }
 }
 @screen md {
     .site-background {
-        background-image: url('~assets/images/yuika/bg-lg.jpg');
+        background-image: url('~assets/images/bg/283-yuika/bg-lg.jpg');
     }
 }
 @screen lg {
     .site-background {
-        background-image: url('~assets/images/yuika/bg-xl.jpg');
+        background-image: url('~assets/images/bg/283-yuika/bg-xl.jpg');
     }
 }
 @screen xl {
     .site-background {
-        background-image: url('~assets/images/yuika/bg-xxl.jpg');
+        background-image: url('~assets/images/bg/283-yuika/bg-xxl.jpg');
     }
 }
 .site-header-inner {

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

@@ -2,12 +2,12 @@
     <div class="relative group page-header">
         <component is="style">
             :root {
-                --bg: url('{{ require('@/assets/images/'+normalImageType+'/bg.jpg') }}');
-                --bg-sm: url('{{ require('@/assets/images/'+normalImageType+'/bg-sm.jpg') }}');
-                --bg-md: url('{{ require('@/assets/images/'+normalImageType+'/bg-md.jpg') }}');
-                --bg-lg: url('{{ require('@/assets/images/'+normalImageType+'/bg-lg.jpg') }}');
-                --bg-xl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xl.jpg') }}');
-                --bg-xxl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xxl.jpg') }}');
+                --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">
@@ -29,7 +29,23 @@ export default {
   props: [ 'imageType' ],
   computed: {
     normalImageType() {
-      return this.imageType ?? 'yuika';
+      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';
+        }
     }
   },
 
@@ -56,7 +72,7 @@ export default {
 .page-header-background {
   background-image: var(--bg-sm);
   background-size: cover;
-  background-position: right 25% top 20%;
+  background-position: var(--bg-ps);
 }
 @screen sm {
     .page-header-background {
@@ -78,4 +94,4 @@ export default {
         background-image: var(--bg-xxl);
     }
 }
-</style>
+</style>

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,

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/arcaea.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Arcaea</h1>
       <p><a href="https://arcaea.lowiro.com">Game Website</a></p>
     </PageHeader>

pages/games/arknights.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Arknights</h1>
       <p><a href="https://www.arknights.global">Game Website</a></p>
     </PageHeader>

pages/games/azurlane.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Azur Lane (EN)</h1>
       <p><a href="">Game Website</a></p>
     </PageHeader>

pages/games/bandori.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/games/cue.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: CUE!</h1>
       <p><a href="https://www.cue-liber.jp/">Game Website</a></p>
     </PageHeader>

pages/games/fgo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/games/genshin.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Genshin Impact</h1>
       <p><a href="https://genshin.mihoyo.com">Game Website</a></p>
     </PageHeader>

pages/games/honkai.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/games/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile</h1>
     </PageHeader>
     <main class="container mx-auto main">
@@ -156,7 +156,4 @@ export default {
 </script>
 
 <style>
-.card-list {
-     @apply flex flex-col;
-}
 </style>

pages/games/llsif.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/games/llsifas.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/games/maimai.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: maimai DX</h1>
       <p><a href="https://maimai.sega.com/">Game Website</a></p>
     </PageHeader>

pages/games/mirishita.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <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>

pages/games/nogikoi.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Nogikoi</h1>
       <p><a href="https://nogikoi.jp">Game Website</a></p>
     </PageHeader>

pages/games/puroseka.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-  <PageHeader>
+  <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>

pages/games/sdvx.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/games/shadowverse.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Shadowverse</h1>
       <p><a href="https://shadowverse.com/">Game Website</a></p>
     </PageHeader>

pages/games/shinymas.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
       <p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
     </PageHeader>

pages/games/starira.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/games/t7s.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Tokyo 7th Sisters</h1>
       <p><a href="https://t7s.jp">Game Website</a></p>
     </PageHeader>

pages/games/template.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: </h1>
       <p><a href="">Game Website</a></p>
     </PageHeader>

pages/games/unison.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <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>

pages/links.vue

@@ -1,77 +1,30 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="765-yuriko">
       <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>
-      <h2>Common social media</h2>
-      <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>
-      <h2>For decentralized web users and the brave</h2>
-      <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>
-      </p>
-      <h2>Miscellanous things</h2>
-      <p>
-        <ul>
-          <li>
-            <p><a href="/favmusiclist">Damillora's Favorite Music Playlist</a></p>
-          </li>
-        </ul>
-      </p>
+      <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
+    PageHeader,
+    MediaItem
   },
   head: {
-    title: 'Social Media',
+    title: 'Links',
   }
 }
 </script>

pages/projects/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader imageType="mei">
+    <PageHeader imageType="cue-mei">
       <h1>Project Portfolio</h1>
     </PageHeader>
     <main class="container mx-auto main">

pages/projects/miracle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader imageType="mei">
+    <PageHeader imageType="cue-mei">
       <h1>nanao.moe</h1>
       <p>
         <a href="https://nanao.moe">live</a>

pages/projects/yuika.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader imageType="mei">
+    <PageHeader imageType="cue-mei">
       <h1>nanao.moe Blog</h1>
       <p>
         <a href="https://blog.nanao.moe">live</a>