popskip/pages/projects/maschatbot.vue

<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>
            Mas CHATBOT is a chatbot application facilitating control of connected devices.
          </p>
          <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>Node.js</li>
            <li>WebSockets</li>
            <li>NLP</li>
            <li>PostgreSQL</li>
            <li>GraphQL</li>
            <li>Go</li>
            <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/maschatbot/1.png')" />
            <GalleryImage :src="require('~/assets/projects/maschatbot/2.png')" />
            <GalleryImage :src="require('~/assets/projects/maschatbot/3.png')" />
            <GalleryImage :src="require('~/assets/projects/maschatbot/4.png')" />
            <GalleryImage :src="require('~/assets/projects/maschatbot/5.png')" />
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import GalleryImage from '~/components/GalleryImage';

export default {
    components: {
        GalleryImage,
    },
}
</script>
<style>

</style>