Complete project pages

assets/css/tailwind.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';

components/Footer.vue

@@ -2,7 +2,7 @@
 <div>
   <footer>
       <div class="footer-left">
-          <h1>(C) 2019 Damillora</h1>
+          <h1>(C) 2019 Ryo Kenrie Wongso</h1>
       </div>
   </footer>
   <div class="h-12"></div>
@@ -18,7 +18,7 @@ export default {
 <style>
 footer {
     @apply h-12 bottom-0 w-full z-10 flex flex-row justify-start items-center px-4 fixed;
-    background-color: rgba(0,0,0,0.3);
+    background-color: rgba(0,0,0,0.4);
 }
 footer h1 {
     @apply text-white;

components/GalleryImage.vue

@@ -0,0 +1,56 @@
+<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">
+      <a class="gallery-popup-exit" @click="shown = !shown" href="#">x</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: [ 'src' ],
+    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>
+
+<style>
+.gallery-popup-hidden {
+    @apply fixed h-0 w-screen opacity-0 transition-opacity;
+}
+.gallery-popup {
+    @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 .gallery-zoomed-out {
+   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;
+}
+</style>

components/Header.vue

@@ -23,7 +23,7 @@ export default {
 <style>
 header {
     @apply h-16 fixed top-0 w-full z-10 flex flex-row justify-start items-center px-4;
-    background-color: rgba(0,0,0,0.3);
+    background-color: rgba(0,0,0,0.4);
 }
 .header-link {
     @apply text-white text-lg;

components/ProjectCard.vue

@@ -1,35 +1,51 @@
 <template>
     <div class="card project-card">
-        <div class="card-title">
-            <h1>{{name}}</h1>
+        <div class="card-image">
+          <img :src="require('~/assets/projects/'+codename+'/1.png')"></img>
         </div>
-        <div class="card-content my-4">
-            <p>{{description}}</p>
-        </div>
-        <div class="card-footer">
-            <p><a :href="url">Website</a></p>
+        <div class="card-content">
+          <div class="card-title">
+              <h1><nuxt-link :to="'/projects/'+codename">{{name}}</nuxt-link></h1>
+          </div>
+          <div class="card-content my-4">
+              <p>{{description}}</p>
+          </div>
+          <div class="card-footer">
+          </div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
-    props: [ 'name', 'description', 'url' ],
+    props: [ 'name', 'description', 'codename', 'noimage' ],
 }
 </script>
 
 <style>
 .project-card {
-    @apply mx-4 my-4 w-full;
+    @apply w-full flex flex-col;
+    min-height: 12rem;
 }
 @screen md {
     .project-card {
-        @apply w-1/2;
+        @apply flex-row;
     }
 }
-@screen lg {
-    .project-card {
-        @apply w-1/3;
+.card-image {
+    @apply w-full px-2 py-2;
+}
+@screen md {
+    .card-image {
+        @apply w-1/4;
+    }
+}
+.card-content {
+    @apply w-full px-2;
+}
+@screen md {
+    .card-content {
+        @apply w-3/4;
     }
 }
 </style>

layouts/default.vue

@@ -21,6 +21,7 @@ export default {
 </script>
 <style>
 .root {
+    @apply font-sans;
     background: url("~assets/bg.png") no-repeat center center fixed;
     background-size: cover;
     min-height: 100vh;
@@ -34,17 +35,51 @@ export default {
 }
 
 .card {
-    @apply px-4 py-4;
-    background-color: rgba(0,0,0,0.3);
+    @apply px-4 py-4 mx-4 my-4;
+    background-color: rgba(0,0,0,0.4);
 }
 .card .card-title {
     @apply text-xl;
 }
+.title-card {
+    @apply mx-0 my-0;
+}
 .title-card .card-title {
     @apply font-bold text-4xl pb-2;
 }
-.title-card .card-content {
+.title-card .card-subtitle {
     @apply text-xl;
 }
+.title-card .card-content {
+    @apply text-xl px-0;
+}
+.gallery {
+    @apply flex flex-row flex-wrap items-center;
+}
+.gallery .gallery-image {
+    @apply w-full px-4 py-4;
+}
+@screen md {
+    .gallery .gallery-image {
+        @apply w-1/2;
+    }
+}
+@screen lg {
+    .gallery .gallery-image {
+        @apply w-1/3;
+    }
+}
 
+ul {
+  @apply list-disc;
+}
+ul li {
+  @apply ml-4;
+}
+a {
+  @apply transition-colors;
+}
+a:hover {
+  @apply text-gray-400;
+}
 </style>

nuxt.config.js

@@ -1,11 +1,15 @@
 
 export default {
   mode: 'universal',
+  server: {
+    host: '0.0.0.0',
+    port: process.env.PORT || 9796,
+  },
   /*
   ** Headers of the page
   */
   head: {
-    title: 'Damillora',
+    title: 'Ryo Kenrie Wongso | [Web,Desktop,Mobile] Developer',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },

pages/index.vue

@@ -2,12 +2,17 @@
   <div class="page">
     <div class="card title-card absolute right-0 bottom-0 w-full sm:w-2/3 md:w-1/2 lg:w-2/5 xl:w-1/3">
         <div class="card-title">
-            <h1>Yuika Mitsumine</h1>
+            <h1>Ryo Kenrie Wongso</h1>
         </div>
         <div class="card-content">
-            <p>Web Developer</p>
+            <p>[Web,Desktop,Mobile] Developer</p>
         </div>
         <div class="card-social">
+          <p>
+            <a href="//github.com/Damillora">github</a>
+            &bull;
+            <a href="//twitter.com/Damillora">twitter</a>
+          </p>
         </div>
     </div>
   </div>

pages/projects.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="page">
-    <div class="card title-card">
-        <div class="card-title">
-            <h1>Projects</h1>
-        </div>
-    </div>
-    <div class="projects">
-        <ProjectCard name="Fracture" description="A quiz web application using Vue, Nuxt.js, and Vuetify." url="https://fracture.junna.moe" />
-    </div>
-  </div>
-</template>
-
-<script>
-import ProjectCard from '../components/ProjectCard';
-
-export default {
-    components: {
-        ProjectCard
-    }
-}
-</script>
-
-<style>
-.projects {
-    @apply flex flex-row flex-wrap;
-}
-</style>

pages/projects/example.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>nanao.moe</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            <a href="https://nanao.moe">live</a>
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Description</h1>
+        </div>
+        <div class="card-content">
+
+        </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/fracture.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>Fracture</h1>
+        </div>
+        <div class="card-content">
+          <a href="#">not yet released</a>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Description</h1>
+        </div>
+        <div class="card-content">
+          <p>Fracture is a quiz application web built using Vue, Nuxt.js, and Vuetify.</p>
+          <p>Fracture was developed for a Personal Quest for my student activity unit's recruitment process..</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Technologies</h1>
+        </div>
+        <div class="card-content">
+          <ul>
+            <li>Vue.js</li>
+            <li>Nuxt</li>
+            <li>Vuetify</li>
+            <li>JSON</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/fracture/1.png')" />
+            <GalleryImage :src="require('~/assets/projects/fracture/2.png')" />
+            <GalleryImage :src="require('~/assets/projects/fracture/3.png')" />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import GalleryImage from '~/components/GalleryImage';
+
+export default {
+    components: {
+        GalleryImage,
+    },
+}
+</script>
+<style>
+
+</style>

pages/projects/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-title">
+            <h1>Project Portfolio</h1>
+        </div>
+    </div>
+    <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="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>
+
+<script>
+import ProjectCard from '~/components/ProjectCard';
+
+export default {
+    components: {
+        ProjectCard
+    }
+}
+</script>
+
+<style>
+.projects {
+    @apply flex flex-row flex-wrap;
+}
+</style>

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>nanao.moe</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            <a href="https://nanao.moe">live</a>
+            &bull;
+            <a href="https://github.com/Damillora/miracle">source code</a>
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Description</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            A domain carves a person's place in the Internet. nanao.moe serves as one for my side hobbies.
+            The website contains information about my hobbies, such as games, and has a link to my hobby blog.
+          </p>
+          <p>
+            Originally, nanao.moe is styled in pure CSS. However, it later used Tailwind.
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Technologies</h1>
+        </div>
+        <div class="card-content">
+          <ul>
+            <li>Vue.js</li>
+            <li>Nuxt.js</li>
+            <li>Tailwind CSS</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/miracle/1.png')" />
+            <GalleryImage :src="require('~/assets/projects/miracle/2.png')" />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import GalleryImage from '~/components/GalleryImage';
+
+export default {
+    components: {
+        GalleryImage,
+    },
+}
+</script>
+<style>
+
+</style>

pages/projects/mitsumine.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>NC Rhythm Game Challenge</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 weekly challenge system for rhythm games.
+          </p>
+          <p>
+            Challenge organizers create challenge periods, games, challenges, and challenge songs.
+            Organizers are able to inspect players' scores, and either accept or reject their submissions.
+          </p>
+          <p>
+            Players submit their scores, and after checked by organizers enters the leaderboard.
+          </p>          
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Technologies</h1>
+        </div>
+        <div class="card-content">
+          <ul>
+            <li>Laravel</li>
+            <li>Bootstrap</li>
+            <li>Vue.js</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/mitsumine/1.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/2.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/3.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/4.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/5.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/6.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/7.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/8.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/9.png')" />
+            <GalleryImage :src="require('~/assets/projects/mitsumine/10.png')" />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import GalleryImage from '~/components/GalleryImage';
+
+export default {
+    components: {
+        GalleryImage,
+    },
+}
+</script>
+<style>
+
+</style>

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>

pages/projects/yuika.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="page">
+    <div class="card title-card">
+        <div class="card-subtitle">
+          <p>Projects</p>
+        </div>
+        <div class="card-title">
+          <h1>nanao.moe Blog</h1>
+        </div>
+        <div class="card-content">
+          <p>
+            <a href="https://blog.nanao.moe">live</a>
+            &bull;
+            <a href="https://github.com/Damillora/Yuika">source code</a>
+          </p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Description</h1>
+        </div>
+        <div class="card-content">
+          <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>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-title">
+          <h1>Technologies</h1>
+        </div>
+        <div class="card-content">
+          <ul>
+            <li>Ghost</li>
+            <li>Tailwind CSS</li>
+            <li>jQuery</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/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')" />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import GalleryImage from '~/components/GalleryImage';
+
+export default {
+    components: {
+        GalleryImage,
+    },
+}
+</script>
+<style>
+
+</style>