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,
|
||||||
|
Loading…
Reference in New Issue
Block a user