Complete project pages

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">
+    <div :class="shown ? 'gallery-popup' : 'gallery-popup-hidden'" @click.self="shown = !shown" @mousemove="calculate">
-      <img :src='src'>
+      <img :src='src' @click="zoom" :class="zoom_status" :style="{left: cursor_x, top: cursor_y }" draggable="false">
       <a class="gallery-popup-exit" @click="shown = !shown" href="#">x</a>
     </div>
   </div>
@@ -14,8 +14,24 @@ 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';
+        }
+      },
+      calculate(e) {
+        this.cursor_x = ((e.clientX)-(window.innerWidth/2))*2+'px';
+        this.cursor_y = ((e.clientY)-(window.innerHeight/2))*2+'px';
+      }
+    },
 }
 </script>
 
@@ -27,8 +43,12 @@ export default {
     @apply fixed w-screen h-screen left-0 top-0 py-16 px-16 z-20 flex flex-row items-center justify-center transition-opacity;
     background: rgba(0,0,0,0.7);
 }
-.gallery-popup img {
+.gallery-popup .gallery-zoomed-out {
-    @apply h-full;
+   max-height: 100%;
+}
+.gallery-popup .gallery-zoomed-in {
+   @apply fixed;
+   width: 400vw;
 }
 .gallery-popup-exit {
     @apply fixed right-0 top-0 z-30 mx-8 my-4 text-2xl;

pages/projects/fracture.vue

@@ -8,7 +8,7 @@
           <h1>Fracture</h1>
         </div>
         <div class="card-content">
-          <a href="https://github.com/Damillora/fracture"></a>
+          <a href="#">not yet released</a>
         </div>
     </div>
     <div class="card">

pages/projects/index.vue

@@ -8,8 +8,11 @@
     <div class="projects">
         <ProjectCard name="nanao.moe" codename="miracle" description="The home page for my more playful side." />
         <ProjectCard name="nanao.moe Blog" codename="yuika" description="The blog for my hobbies" />
-        <ProjectCard name="Fracture" codename="fracture" description="A quiz web application using Vue, Nuxt.js, and Vuetify." />
+        <ProjectCard name="Mas CHATBOT" codename="maschatbot" description="Utilizing NLP for a connected home." />
         <ProjectCard name="NC Rhythm Game Challenge" codename="mitsumine" description="A weekly rhythm game challenge system" />
+        <ProjectCard name="Junna-chan as Information Provider" codename="junnachan" description="A general-purpose Discord bot." />
+        <ProjectCard name="Fracture" codename="fracture" description="A quiz web application using Vue, Nuxt.js, and Vuetify." />
+        <ProjectCard name="Starlight" codename="starlight" description="Registration application for my student unit." />
     </div>
   </div>
 </template>

pages/projects/junnachan.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>Junna-chan as Information Provider</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            <a href="#">not yet released</a>
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Description</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            A Discord bot designed to be extensible with commands.
+          </p>
+          <p>
+            The currently live bot is used to provide reaction images. It also can send Twitter feeds straight to Discord.
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Technologies</h1>
+        </div>
+        <div class="card-content">
+          <ul>
+            <li>Node.js</li>
+            <li>MongoDB</li>
+          </ul>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Screenshots</h1>
+        </div>
+        <div class="card-content">
+          <div class="gallery">
+            <GalleryImage :src="require('~/assets/projects/junnachan/1.png')" />
+            <GalleryImage :src="require('~/assets/projects/junnachan/2.png')" />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import GalleryImage from '~/components/GalleryImage';
+
+export default {
+    components: {
+        GalleryImage,
+    },
+}
+</script>
+<style>
+
+</style>

pages/projects/maschatbot.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>Mas CHATBOT</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            <a href="#">not yet released</a>
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Description</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            This project is an experiment for new approaches, exploring concepts such as GraphQL, Microservices, Websockets.
+          </p>
+          <p>
+            Because of the microservices nature, this project is composed of 5 different applications:
+          </p>
+          <ul>
+            <li>Yuika is the chat proxy service, forwarding Discord and Telegram messages to the chat service.</li>
+            <li>Mamimi is the main chat service, using NLP to categorize chat messages and respond appropriately.</li>
+            <li>Sakuya is the repository service, storing user and device data on PostgreSQL</li>
+            <li>Kogane is the desktop client service, allowing the user to order the computer.</li>
+            <li>Kiriko is the frontend service, exposing the other services' API in a website.</li>
+          </ul>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Technologies</h1>
+        </div>
+        <div class="card-content">
+          <ul>
+            <li></li>
+          </ul>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Screenshots</h1>
+        </div>
+        <div class="card-content">
+          <div class="gallery">
+            <!--
+            <GalleryImage :src="require('~/assets/projects/example/1.png')" />
+            -->
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import GalleryImage from '~/components/GalleryImage';
+
+export default {
+    components: {
+        GalleryImage,
+    },
+}
+</script>
+<style>
+
+</style>

pages/projects/mitsumine.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="card-content">
           <p>
-            <a href="#">private</a>
+            <a href="#">not yet released</a>
           </p>
         </div>
     </div>

pages/projects/starlight.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>Starlight</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            <a href="#">not yet released</a>
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Description</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            A set of backend and frontend applications for registrations.
+          </p>
+          <p>
+            Revue Starlight is the main frontend through which new members register.
+          </p>
+          <p>
+            Starlight Server is a local server for storing data temporarily, 
+            because internet connection might be non-existent on-site.
+          </p>
+          <p>
+            Sana is the final repository of registration data. Local data from Starlight Server is uploaded
+            and processed to yield the final database.
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Technologies</h1>
+        </div>
+        <div class="card-content">
+          <p>Revue Starlight:</p>
+          <ul>
+            <li>Vue.js</li>
+            <li>Vuetify</li>
+          </ul>
+          <p>Starlight Server:</p>
+          <ul>
+            <li>Go</li>
+            <li>JSON</li>
+          </ul>
+          <p>Sana:</p>
+          <ul>
+            <li>Laravel</li>
+            <li>Bootstrap</li>
+          </ul>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Screenshots</h1>
+        </div>
+        <div class="card-content">
+          <div class="gallery">
+            <GalleryImage :src="require('~/assets/projects/starlight/1.png')" />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import GalleryImage from '~/components/GalleryImage';
+
+export default {
+    components: {
+        GalleryImage,
+    },
+}
+</script>
+<style>
+
+</style>