From 791c2e559c33d62d68bacdd177b2dc0098145579 Mon Sep 17 00:00:00 2001
From: steverusso <steverusso@protonmail.com>
Date: Mon, 30 Mar 2020 12:38:02 +0000
Subject: [PATCH] Created a 'Portfolio' page and link to it from Websites on
 the services page. (#6)

Created a 'Portfolio' page and link to it from Websites on the services page.

Reviewed-by: jeff <jeff@simplesystems.tech>
---
 src/pages/Portfolio.vue   | 68 +++++++++++++++++++++++++++++++++++++++
 src/pages/Services.vue    | 15 ++++++++-
 src/plugins/vue-router.js |  1 +
 3 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Portfolio.vue

diff --git a/src/pages/Portfolio.vue b/src/pages/Portfolio.vue
new file mode 100644
index 0000000..b011b67
--- /dev/null
+++ b/src/pages/Portfolio.vue
@@ -0,0 +1,68 @@
+<template>
+  <app-container>
+    <v-row>
+      <v-col cols="12" class="text-center">
+        <h1 class="display-2">Our Portfolio</h1>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" class="text-center">
+				<hr>
+      </v-col>
+    </v-row>
+
+    <v-row class="justify-center justify-md-start">
+      <v-col
+				v-for="(p, i) in projects"
+				:key="i"
+				cols="12"
+				sm="10"
+				md="6"
+			>
+				<v-card>
+					<v-card-title class="grey" :class="$vuetify.theme.dark ? 'darken-2' : 'lighten-5'">
+						<img :src="p.logo" class="mr-3" width="48" height="48">
+						{{ p.title }}
+
+						<div class="flex-grow-1"/>
+
+						<v-btn text color="blue" class="px-0" :href="p.href" target="_blank">
+							Visit Site
+							<v-icon class="ml-1" small>launch</v-icon>
+						</v-btn>
+					</v-card-title>
+
+					<v-divider />
+
+					<v-card-text>
+						{{ p.desc }}
+
+						<!--
+						<div class="text-right">
+							<v-btn small class="primary" :href="p.href" target="_blank">Visit Site</v-btn>
+						</div>
+						-->
+					</v-card-text>
+				</v-card>
+      </v-col>
+    </v-row>
+  </app-container>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			projects: [
+				{
+					title: 'SBA Ponderay',
+					logo: 'https://sbaponderay.com/img/sba-ponderay.png',
+					desc: 'SBA Ponderay is a Jiu Jitsu gym in Ponderay, ID. It specializes in the Progressive System of Brazilian Jiu Jitsu. Simple Systems\' owner trains there several times a week.',
+					href: 'https://sbaponderay.com/',
+				},
+			],
+		}
+	},
+}
+</script>
diff --git a/src/pages/Services.vue b/src/pages/Services.vue
index 61a32f7..885b696 100644
--- a/src/pages/Services.vue
+++ b/src/pages/Services.vue
@@ -16,6 +16,16 @@
 
           <v-card-text>
             <p v-for="d in serv.desc" class="service_desc">{{ d }}</p>
+						<div class="text-right">
+							<v-btn
+								v-for="(l, i) in serv.links"
+								:key="i"
+								:to="l.to"
+								class="primary"
+							>
+								{{ l.text }}
+							</v-btn>
+						</div>
           </v-card-text>
         </v-card>
       </v-col>
@@ -43,7 +53,10 @@ export default {
 						'Every business needs a web presence.  It is one of the most effective ways to drive customers to your business.',
 						'It can be a deterrent if it is not high quality though!  Over half of users will abandon your site if it does not load in under 3 seconds.  It is crucial that the website displays quickly and looks good.',
 						'Simple Systems can improve your prospective clients\' experience by building a website from scratch, or cleaning up the existing one.  We can handle all the hosting for you too!'
-					]
+					],
+					links: [
+						{ text: 'Our Portfolio', to: '/portfolio' },
+					],
 				},
 				{
 					name: 'Data Management',
diff --git a/src/plugins/vue-router.js b/src/plugins/vue-router.js
index 45af488..d2222c3 100644
--- a/src/plugins/vue-router.js
+++ b/src/plugins/vue-router.js
@@ -36,6 +36,7 @@ export default new VueRouter({
 	routes: [
 		{ path: '/',          component: () => import('@/pages/Home') },
 		{ path: '/services',  component: () => import('@/pages/Services') },
+		{ path: '/portfolio', component: () => import('@/pages/Portfolio.vue') },
 		{ path: '/about',     component: () => import('@/pages/About') },
 		{ path: '/blog',      component: () => import('@/pages/Blog') },
 		...blogRoutes,