Skip to content

Commit 95ae8fe

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#13 from NangialaiStoman/projects-logic-more-design
Projects logic more design
2 parents 5816c7c + 4713232 commit 95ae8fe

16 files changed

+30468
-30314
lines changed

‎package-lock.json

Lines changed: 29945 additions & 29927 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"postcss-preset-env": "^6.7.0",
2020
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
2121
"vue": "^3.0.0",
22-
"vue-router": "^4.0.0-0"
22+
"vue-router": "^4.0.0-0",
23+
"vue3-autocounter": "^1.0.6"
2324
},
2425
"devDependencies": {
2526
"@vue/cli-plugin-babel": "~4.5.0",

‎src/App.vue

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<template>
22
<div :class="appTheme">
3-
<!-- Header Start -->
3+
<!-- App header -->
44
<Header></Header>
55

6-
<!-- Render Active Component Contents Start -->
7-
<router-view />
6+
<!-- Render active component contents with transition -->
7+
<transition name="fade" mode="out-in">
8+
<router-view :theme="appTheme" />
9+
</transition>
810

9-
<!-- Footer Start -->
11+
<!-- App footer -->
1012
<Footer></Footer>
1113
</div>
1214
</template>
@@ -42,4 +44,37 @@ export default {
4244
-moz-osx-font-smoothing: grayscale;
4345
text-align: center;
4446
}
47+
48+
.fade-enter-active {
49+
animation: coming 0.4s;
50+
animation-delay: 0.2s;
51+
opacity: 0;
52+
}
53+
54+
.fade-leave-active {
55+
animation: going 0.4s;
56+
}
57+
58+
@keyframes going {
59+
from {
60+
transform: translateX(0);
61+
}
62+
63+
to {
64+
transform: translateX(-10px);
65+
opacity: 0;
66+
}
67+
}
68+
69+
@keyframes coming {
70+
from {
71+
transform: translateX(-10px);
72+
opacity: 0;
73+
}
74+
75+
to {
76+
transform: translateX(0px);
77+
opacity: 1;
78+
}
79+
}
4580
</style>

‎src/assets/images/dev.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/about/AboutCounter.vue

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,93 @@
11
<template>
22
<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
3+
<!-- About me counters start -->
34
<div
45
class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
56
>
7+
<!-- About me single counter start -->
68
<div class="mb-20 sm:mb-0">
7-
<p
9+
<counter
10+
ref="counter"
11+
:startAmount="0"
12+
:endAmount="12"
13+
:duration="1"
14+
:autoinit="true"
15+
@finished="alert(`Counting finished!`)"
816
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
9-
>
10-
12
11-
</p>
12-
<span class="text-md text-ternary-dark dark:text-ternary-light"
17+
/>
18+
<span
19+
class="block text-md text-ternary-dark dark:text-ternary-light"
1320
>Years of experience</span
1421
>
1522
</div>
23+
<!-- About me single counter end -->
24+
25+
<!-- About me single counter start -->
1626
<div class="mb-20 sm:mb-0">
17-
<p
27+
<counter
28+
ref="counter"
29+
:startAmount="0"
30+
:endAmount="20"
31+
:duration="1"
32+
suffix="k+"
33+
:autoinit="true"
34+
@finished="alert(`Counting finished!`)"
1835
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
19-
>
20-
20k+
21-
</p>
22-
<span class="text-md text-ternary-dark dark:text-ternary-light"
36+
/>
37+
<span
38+
class="block text-md text-ternary-dark dark:text-ternary-light"
2339
>Stars on GitHub</span
2440
>
2541
</div>
42+
<!-- About me single counter end -->
43+
44+
<!-- About me single counter start -->
2645
<div class="mb-20 sm:mb-0">
27-
<p
46+
<counter
47+
ref="counter"
48+
:startAmount="0"
49+
:endAmount="92"
50+
:duration="1"
51+
suffix="%"
52+
:autoinit="true"
53+
@finished="alert(`Counting finished!`)"
2854
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
29-
>
30-
92%
31-
</p>
32-
<span class="text-md text-ternary-dark dark:text-ternary-light"
55+
/>
56+
<span
57+
class="block text-md text-ternary-dark dark:text-ternary-light"
3358
>Positive feedback</span
3459
>
3560
</div>
36-
<div>
37-
<p
61+
<!-- About me single counter end -->
62+
63+
<!-- About me single counter start -->
64+
<div class="mb-20 sm:mb-0">
65+
<counter
66+
ref="counter"
67+
:startAmount="0"
68+
:endAmount="77"
69+
:duration="1"
70+
:autoinit="true"
71+
@finished="alert(`Counting finished!`)"
3872
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
39-
>
40-
77
41-
</p>
42-
<span class="text-md text-ternary-dark dark:text-ternary-light"
73+
/>
74+
<span
75+
class="block text-md text-ternary-dark dark:text-ternary-light"
4376
>Projects completed</span
4477
>
4578
</div>
79+
<!-- About me single counter end -->
4680
</div>
81+
<!-- About me counters end -->
4782
</div>
4883
</template>
4984

5085
<script>
86+
import counter from 'vue3-autocounter';
5187
export default {
88+
components: {
89+
counter,
90+
},
5291
setup() {},
5392
};
5493
</script>

‎src/components/about/AboutMe.vue

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,56 @@
11
<template>
22
<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
3+
<!-- About me portfolio image start -->
34
<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
45
<img
56
src="../../assets/images/profile.jpeg"
67
class="rounded-xl w-96"
78
alt=""
89
/>
910
</div>
11+
<!-- About me portfolio image end -->
12+
13+
<!-- About me details start -->
1014
<div class="w-full sm:w-3/4 text-left">
11-
<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
12-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
13-
vel illum asperiores dignissimos cumque quibusdam et fugiat
14-
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
15-
fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum,
16-
dolor sit amet consectetur adipisicing elit. Incidunt totam
17-
dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut
18-
quam natus similique inventore excepturi optio ipsa deleniti
19-
fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur
20-
adipisicing elit. Ipsum illo necessitatibus perspiciatis!
21-
Aperiam perferendis labore temporibus, eos culpa corporis
22-
recusandae quas, fuga voluptatibus nesciunt odit libero tenetur
23-
neque consequatur ea.
24-
</p>
25-
<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
26-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
27-
vel illum asperiores dignissimos cumque quibusdam et fugiat
28-
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
29-
fugit eligendi corporis laudantium adipisci soluta?
30-
</p>
31-
<p class="text-ternary-dark dark:text-ternary-light text-lg">
32-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
33-
vel illum asperiores dignissimos cumque quibusdam et fugiat
34-
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
35-
fugit eligendi corporis laudantium adipisci soluta?
36-
</p>
37-
<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
38-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
39-
vel illum asperiores dignissimos cumque quibusdam et fugiat
40-
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
41-
fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum,
42-
dolor sit amet consectetur adipisicing elit. Incidunt totam
43-
dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut
44-
quam natus similique inventore excepturi optio ipsa deleniti
45-
fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur
46-
adipisicing elit. Ipsum illo necessitatibus perspiciatis!
47-
Aperiam perferendis labore temporibus, eos culpa corporis
48-
recusandae quas, fuga voluptatibus nesciunt odit libero tenetur
49-
neque consequatur ea.
15+
<p
16+
v-for="bio in bios"
17+
:key="bio.id"
18+
class="mb-4 text-ternary-dark dark:text-ternary-light text-lg"
19+
>
20+
{{ bio.bio }}
5021
</p>
5122
</div>
23+
<!-- About me details end -->
5224
</div>
5325
</template>
5426

5527
<script>
5628
export default {
57-
setup() {},
29+
setup() {
30+
return {
31+
bios: [
32+
{
33+
id: 1,
34+
bio:
35+
'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.',
36+
},
37+
{
38+
id: 2,
39+
bio:
40+
'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?',
41+
},
42+
{
43+
id: 3,
44+
bio:
45+
'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?',
46+
},
47+
{
48+
id: 4,
49+
bio:
50+
'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.',
51+
},
52+
],
53+
};
54+
},
5855
};
5956
</script>

‎src/components/about/Clients.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<p
44
class="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold"
55
>
6-
Some of the best companies I worked with
6+
Some of the brands I worked with
77
</p>
88
<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
99
<div>
@@ -68,6 +68,8 @@
6868

6969
<script>
7070
export default {
71-
setup() {},
71+
data: () => {
72+
return {};
73+
},
7274
};
7375
</script>

0 commit comments

Comments
 (0)