Complete portfolio

This commit is contained in:
Damillora 2019-12-04 23:20:29 +07:00
parent 7d91cf3ab4
commit c3da0c1c18
34 changed files with 471 additions and 41 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 285 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 728 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 998 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
assets/projects/yuika/1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/projects/yuika/2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 646 KiB

BIN
assets/projects/yuika/3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 918 KiB

BIN
assets/projects/yuika/4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
assets/projects/yuika/5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

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

View File

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

View File

@ -23,7 +23,7 @@ export default {
<style> <style>
header { header {
@apply h-16 fixed top-0 w-full z-10 flex flex-row justify-start items-center px-4; @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 { .header-link {
@apply text-white text-lg; @apply text-white text-lg;

View File

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

View File

@ -35,17 +35,51 @@ export default {
} }
.card { .card {
@apply px-4 py-4; @apply px-4 py-4 mx-4 my-4;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.4);
} }
.card .card-title { .card .card-title {
@apply text-xl; @apply text-xl;
} }
.title-card {
@apply mx-0 my-0;
}
.title-card .card-title { .title-card .card-title {
@apply font-bold text-4xl pb-2; @apply font-bold text-4xl pb-2;
} }
.title-card .card-content { .title-card .card-subtitle {
@apply text-xl; @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> </style>

View File

@ -9,7 +9,7 @@ export default {
** Headers of the page ** Headers of the page
*/ */
head: { head: {
title: 'Damillora', title: 'Ryo Kenrie Wongso | [Web,Desktop,Mobile] Developer',
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' },

View File

@ -2,12 +2,17 @@
<div class="page"> <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-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"> <div class="card-title">
<h1>Yuika Mitsumine</h1> <h1>Ryo Kenrie Wongso</h1>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Web Developer</p> <p>[Web,Desktop,Mobile] Developer</p>
</div> </div>
<div class="card-social"> <div class="card-social">
<p>
<a href="//github.com/Damillora">github</a>
&bull;
<a href="//twitter.com/Damillora">twitter</a>
</p>
</div> </div>
</div> </div>
</div> </div>

View File

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

View File

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

View File

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

31
pages/projects/index.vue Normal file
View File

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

View File

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

View File

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

70
pages/projects/yuika.vue Normal file
View File

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