Complete portfolio

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,36 @@
+<template>
+  <div class="gallery-image">
+    <img :src='src' @click="shown = !shown">
+    <div :class="shown ? 'gallery-popup' : 'gallery-popup-hidden'" @click.self="shown = !shown">
+      <img :src='src'>
+      <a class="gallery-popup-exit" @click="shown = !shown" href="#">x</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: [ 'src' ],
+    data() {
+      return {
+        shown: false,
+      };
+    },
+}
+</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 img {
+    @apply h-full;
+}
+.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,16 +1,16 @@
 <template>
     <div class="card project-card">
         <div class="card-image">
+          <img :src="require('~/assets/projects/'+codename+'/1.png')"></img>
         </div>
         <div class="card-content">
           <div class="card-title">
-              <h1>{{name}}</h1>
+              <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">
-              <p><a :href="url || '#'">Website</a></p>
           </div>
         </div>
     </div>
@@ -18,17 +18,34 @@
 
 <script>
 export default {
-    props: [ 'name', 'description', 'url' ],
+    props: [ 'name', 'description', 'codename', 'noimage' ],
 }
 </script>
 
 <style>
 .project-card {
-    @apply mx-4 my-4 w-full flex flex-col;
+    @apply w-full flex flex-col;
+    min-height: 12rem;
 }
 @screen md {
     .project-card {
         @apply flex-row;
     }
 }
+.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

@@ -35,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

@@ -9,7 +9,7 @@ export default {
   ** 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="https://github.com/Damillora/fracture"></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,31 @@
+<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="Fracture" codename="fracture" description="A quiz web application using Vue, Nuxt.js, and Vuetify." />
+        <ProjectCard name="NC Rhythm Game Challenge" codename="mitsumine" description="A weekly rhythm game challenge system" />
+    </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/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="#">private</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/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>