Created a 'Portfolio' page and link to it from Websites on the services page. #6
							
								
								
									
										68
									
								
								src/pages/Portfolio.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										68
									
								
								src/pages/Portfolio.vue
									
									
									
									
									
										Normal file
									
								
							@@ -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>
 | 
				
			||||||
@@ -16,6 +16,16 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
          <v-card-text>
 | 
					          <v-card-text>
 | 
				
			||||||
            <p v-for="d in serv.desc" class="service_desc">{{ d }}</p>
 | 
					            <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-text>
 | 
				
			||||||
        </v-card>
 | 
					        </v-card>
 | 
				
			||||||
      </v-col>
 | 
					      </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.',
 | 
											'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.',
 | 
											'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!'
 | 
											'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',
 | 
										name: 'Data Management',
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -36,6 +36,7 @@ export default new VueRouter({
 | 
				
			|||||||
	routes: [
 | 
						routes: [
 | 
				
			||||||
		{ path: '/',          component: () => import('@/pages/Home') },
 | 
							{ path: '/',          component: () => import('@/pages/Home') },
 | 
				
			||||||
		{ path: '/services',  component: () => import('@/pages/Services') },
 | 
							{ path: '/services',  component: () => import('@/pages/Services') },
 | 
				
			||||||
 | 
							{ path: '/portfolio', component: () => import('@/pages/Portfolio.vue') },
 | 
				
			||||||
		{ path: '/about',     component: () => import('@/pages/About') },
 | 
							{ path: '/about',     component: () => import('@/pages/About') },
 | 
				
			||||||
		{ path: '/blog',      component: () => import('@/pages/Blog') },
 | 
							{ path: '/blog',      component: () => import('@/pages/Blog') },
 | 
				
			||||||
		...blogRoutes,
 | 
							...blogRoutes,
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user