<div id="app">
	<div class="title-container">
		<div>
			<h3 class="title">
				Our Projects
			</h3>
		</div>
		<div class="filters">
			<span class="filter" v-bind:class="{ active: currentFilter === 'ALL' }" v-on:click="setFilter('ALL')">ALL</span>
			<span class="filter" v-bind:class="{ active: currentFilter === 'ART' }" v-on:click="setFilter('ART')">ART</span>
			<span class="filter" v-bind:class="{ active: currentFilter === 'WORKSHOPS' }" v-on:click="setFilter('WORKSHOPS')">WORKSHOPS</span>
			<span class="filter" v-bind:class="{ active: currentFilter === 'FUN' }" v-on:click="setFilter('FUN')">FUN</span>
		</div>
	</div>

	<transition-group class="projects" name="projects" >
		<div class="project" v-if="currentFilter === project.category || currentFilter === 'ALL'" v-bind:key="project.title" v-for="project in projects">
			<div class="project-image-wrapper">
				<img class="project-image" v-bind:src="project.image">
				<div class="gradient-overlay"></div>
				<div class="circle">
				<span class="project-title">{{project.title}}</span>
			</div>
			</div>
		</div>
	</transition-group>
</div>