Damillora
/
popskip
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Complete project pages

This commit is contained in:
Damillora 2019-12-05 09:00:42 +07:00
parent c3da0c1c18
commit 162bff80e1
14 changed files with 247 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/projects/junnachan/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
assets/projects/junnachan/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
assets/projects/maschatbot/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
assets/projects/maschatbot/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
assets/projects/maschatbot/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/projects/maschatbot/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
assets/projects/starlight/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

28
components/GalleryImage.vue
View File

@ -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">
<img :src='src'>
<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>
@ -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 {
@apply h-full;
.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;

2
pages/projects/fracture.vue
View File

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

5
pages/projects/index.vue
View File

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

64
pages/projects/junnachan.vue Normal file
View File

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

71
pages/projects/maschatbot.vue Normal file
View File

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

2
pages/projects/mitsumine.vue
View File

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

82
pages/projects/starlight.vue Normal file
View File

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