1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useAppData } from '@/stores/mockup'
const appData = useAppData()
const { params } = useRoute()
const activeProject = computed(() => {
if ('id' in params) {
const id = params.id
return appData.projects.find(prj => +prj.id === +id)
}
})
</script>
<template>
<Section
id="story-alt"
class="bg-surface-light pb-12"
space="10"
>
<v-row
align="center"
justify="center"
no-gutters
>
<v-col
cols="12"
md="6"
>
<v-img
:src="activeProject?.src"
class="ma-1"
min-height="500px"
min-width="50%"
/>
</v-col>
<v-col
class="px-5 py-2"
cols="12"
md="6"
>
<Heading
:title="activeProject?.title"
align="left"
class="font-weight-bold"
/>
<Subheading
:title="activeProject?.subtitle"
/>
<Subtitle
title="Date"
weight="bold"
/>
<Body
:text="activeProject?.date"
space="2"
/>
<Subtitle
title="Description"
weight="bold"
/>
<Body
:text="activeProject?.description"
space="3"
/>
<Subtitle
title="Tags"
weight="bold"
/>
<template v-for="(tag, _i) in activeProject?.tags" :key="_i">
<Tag
:text="tag"
/>
</template>
<div />
<Btn
class="mt-10 elevation-0 mx-1"
color="black"
dark
depressed
>
<span
class="font-weight-black text-none"
v-text="'Order Work'"
/>
</Btn>
</v-col>
</v-row>
</Section>
</template>
<style lang="scss" scoped>
</style>