Major overhaul of images and some pages

assets/css/tailwind.css

@@ -89,3 +89,7 @@ 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: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg.jpg') }}');
+                --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,7 @@ export default {
   props: [ 'imageType' ],
   computed: {
     normalImageType() {
-      return this.imageType ?? 'yuika';
+      return this.imageType ?? '283-yuika';
     }
   },
 

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>
+      <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/index.vue

@@ -156,7 +156,4 @@ export default {
 </script>
 
 <style>
-.card-list {
-     @apply flex flex-col;
-}
 </style>

pages/links.vue

@@ -4,74 +4,27 @@
       <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>