Skip to content

Commit 0e92497

Browse files
realstomanrealstoman
committed
About section refactoring
1 parent 526aaa1 commit 0e92497

File tree

4 files changed

+63
-66
lines changed

4 files changed

+63
-66
lines changed

‎src/components/about/AboutClientSingle.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
<script>
2+
export default {
3+
props: ['client'],
4+
};
5+
</script>
6+
17
<template>
2-
<!-- Client single image -->
38
<div>
49
<img
510
:src="client.img"
@@ -9,10 +14,4 @@
914
</div>
1015
</template>
1116

12-
<script>
13-
export default {
14-
props: ['client'],
15-
};
16-
</script>
17-
1817
<style lang="scss" scoped></style>

‎src/components/about/AboutClients.vue‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
<template>
2-
<!-- About page clients section -->
3-
<div class="mt-10 sm:mt-20">
4-
<p
5-
class="font-general-medium text-2xl sm:text-3xl text-primary-dark dark:text-primary-light"
6-
>
7-
{{ clientsHeading }}
8-
</p>
9-
<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
10-
<AboutClientSingle
11-
v-for="client in clients"
12-
:key="client.id"
13-
:client="client"
14-
/>
15-
</div>
16-
</div>
17-
</template>
18-
191
<script>
202
import AboutClientSingle from './AboutClientSingle.vue';
213
@@ -72,3 +54,20 @@ export default {
7254
},
7355
};
7456
</script>
57+
58+
<template>
59+
<div class="mt-10 sm:mt-20">
60+
<p
61+
class="font-general-medium text-2xl sm:text-3xl text-primary-dark dark:text-primary-light"
62+
>
63+
{{ clientsHeading }}
64+
</p>
65+
<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
66+
<AboutClientSingle
67+
v-for="client in clients"
68+
:key="client.id"
69+
:client="client"
70+
/>
71+
</div>
72+
</div>
73+
</template>

‎src/components/about/AboutCounter.vue‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
<script>
2+
import counter from 'vue3-autocounter';
3+
export default {
4+
components: {
5+
counter,
6+
},
7+
data: () => {
8+
return {
9+
experienceTitle: 'Years of experience',
10+
githubTitle: 'Stars on GitHub',
11+
feedbackTitle: 'Positive feedback',
12+
projectsTitle: 'Projects completed',
13+
};
14+
},
15+
};
16+
</script>
17+
118
<template>
219
<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
320
<!-- About me counters -->
@@ -80,20 +97,3 @@
8097
</div>
8198
</div>
8299
</template>
83-
84-
<script>
85-
import counter from 'vue3-autocounter';
86-
export default {
87-
components: {
88-
counter,
89-
},
90-
data: () => {
91-
return {
92-
experienceTitle: 'Years of experience',
93-
githubTitle: 'Stars on GitHub',
94-
feedbackTitle: 'Positive feedback',
95-
projectsTitle: 'Projects completed',
96-
};
97-
},
98-
};
99-
</script>

‎src/components/about/AboutMe.vue‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
1+
<script>
2+
export default {
3+
setup() {
4+
return {
5+
bios: [
6+
{
7+
id: 1,
8+
bio:
9+
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
10+
},
11+
{
12+
id: 2,
13+
bio:
14+
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
15+
},
16+
],
17+
};
18+
},
19+
};
20+
</script>
21+
122
<template>
2-
<!-- About me bio section -->
323
<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
4-
<!-- About me portfolio image -->
24+
<!-- About profile image -->
525
<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
626
<img
727
src="@/assets/images/profile.jpeg"
@@ -10,7 +30,7 @@
1030
/>
1131
</div>
1232

13-
<!-- About me details -->
33+
<!-- About details -->
1434
<div class="w-full sm:w-3/4 text-left">
1535
<p
1636
v-for="bio in bios"
@@ -22,24 +42,3 @@
2242
</div>
2343
</div>
2444
</template>
25-
26-
<script>
27-
export default {
28-
setup() {
29-
return {
30-
bios: [
31-
{
32-
id: 1,
33-
bio:
34-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
35-
},
36-
{
37-
id: 2,
38-
bio:
39-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
40-
},
41-
],
42-
};
43-
},
44-
};
45-
</script>

0 commit comments

Comments
 (0)