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