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