Dynamic projects

Author: realstoman

src/assets/images/dev.svg

@@ -14,29 +14,31 @@
 
 		<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
 			<router-link
+				v-for="project in projects"
+				:key="project.id"
 				to="/projects/single-project"
 				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
 				<div>
 					<img
-						src="../../assets/images/web-project-2.jpg"
-						alt=""
+						:src="project.img"
+						:alt="project.title"
 						class="rounded-t-3xl border-none"
 					/>
 				</div>
 				<div class="text-center px-4 py-6">
 					<p
 						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
 					>
-						Google Health Platform
+						{{ project.title }}
 					</p>
 					<span
 						class="text-lg text-ternary-dark dark:text-ternary-light"
-						>Wen Application</span
+						>{{ project.category }}</span
 					>
 				</div>
 			</router-link>
-			<router-link
+			<!-- <router-link
 				to="/projects/single-project"
 				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
@@ -150,7 +152,7 @@
 						>Web Application</span
 					>
 				</div>
-			</router-link>
+			</router-link> -->
 		</div>
 		<div class="mt-10 sm:mt-20 flex justify-center">
 			<button
@@ -169,6 +171,49 @@ import feather from 'feather-icons';
 
 export default {
 	name: 'Projects',
+	data() {
+		return {
+			projects: [
+				{
+					id: 1,
+					title: 'Google Health Platform',
+					category: 'Wen Application',
+					img: require('../../assets/images/web-project-2.jpg'),
+				},
+				{
+					id: 2,
+					title: 'Pheonix Digital Agenncy',
+					category: 'Mobile Application',
+					img: require('../../assets/images/mobile-project-2.jpg'),
+				},
+				{
+					id: 3,
+					title: 'Project Management UI',
+					category: 'UI / Frontend',
+					img: require('../../assets/images/ui-project-1.jpg'),
+				},
+				{
+					id: 4,
+					title: 'Cloud Storage Platform',
+					category: 'UI / Frontend',
+					img: require('../../assets/images/ui-project-2.jpg'),
+				},
+				{
+					id: 5,
+					title: 'Kabul Social App',
+					category: 'Mobile Application',
+					img: require('../../assets/images/mobile-project-1.jpg'),
+				},
+				{
+					id: 6,
+					title: 'Apple Design System',
+					category: 'Web Application',
+					img: require('../../assets/images/web-project-1.jpg'),
+				},
+			],
+			// publicPath: process.env.BASE_URL,
+		};
+	},
 	mounted() {
 		feather.replace();
 	},

src/components/project/ProjectsGrid.vue

@@ -196,7 +196,7 @@
 											>
 												<option
 													v-for="category in categories"
-													:key="category"
+													:key="category.id"
 													:value="category.value"
 													>{{ category.name }}</option
 												>
@@ -259,18 +259,22 @@ export default {
 			modal: false,
 			categories: [
 				{
+					id: 1,
 					value: 'web',
 					name: 'Web Application',
 				},
 				{
+					id: 2,
 					value: 'mobile',
 					name: 'Mobile Applicaiton',
 				},
 				{
+					id: 3,
 					value: 'ui-ux',
 					name: 'UI/UX Design',
 				},
 				{
+					id: 4,
 					value: 'branding',
 					name: 'Branding',
 				},