Skip to content

Commit b325069

Browse files
realstomanrealstoman
committed
Dynamic single project
1 parent bdae9b8 commit b325069

File tree

2 files changed

+126
-83
lines changed

2 files changed

+126
-83
lines changed

‎src/components/project/SingleProjectGallery.vue

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
11
<template>
22
<!-- Project gallery start -->
33
<div class="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
4-
<div class="mb-10 sm:mb-0">
4+
<div
5+
class="mb-10 sm:mb-0"
6+
v-for="projectImage in projectImages"
7+
:key="projectImage.id"
8+
>
59
<img
6-
src="../../assets/images/ui-project-1.jpg"
10+
:src="projectImage.img"
711
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
8-
alt="Kabul Project Management UI"
9-
/>
10-
</div>
11-
<div class="mb-10 sm:mb-0">
12-
<img
13-
src="../../assets/images/web-project-2.jpg"
14-
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
15-
alt="Kabul Project Management UI"
16-
/>
17-
</div>
18-
<div>
19-
<img
20-
src="../../assets/images/mobile-project-2.jpg"
21-
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
22-
alt="Kabul Project Management UI"
12+
alt="{{ projectImage.title }}"
2313
/>
2414
</div>
2515
</div>
@@ -28,6 +18,26 @@
2818

2919
<script>
3020
export default {
31-
setup() {},
21+
data() {
22+
return {
23+
projectImages: [
24+
{
25+
id: 1,
26+
title: 'Kabul Project Management UI',
27+
img: require('../../assets/images/ui-project-1.jpg'),
28+
},
29+
{
30+
id: 2,
31+
title: 'Kabul Project Management UI',
32+
img: require('../../assets/images/web-project-2.jpg'),
33+
},
34+
{
35+
id: 3,
36+
title: 'Kabul Project Management UI',
37+
img: require('../../assets/images/mobile-project-2.jpg'),
38+
},
39+
],
40+
};
41+
},
3242
};
3343
</script>

‎src/components/project/SingleProjectInfo.vue

Lines changed: 98 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,10 @@
4444
<p
4545
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
4646
>
47-
Tools & Technologies
47+
{{ technlogies[0].title }}
4848
</p>
4949
<p class="text-primary-dark dark:text-ternary-light">
50-
HTML, CSS, JavaScript, Vue.js, TailwindCSS, AdobeXD
50+
{{ technlogies[0].techs.join(', ') }}
5151
</p>
5252
</div>
5353
<div>
@@ -58,35 +58,12 @@
5858
</p>
5959
<div class="flex items-center gap-3 mt-5">
6060
<a
61-
href="https://twitter.com/NangialaiStoman"
61+
v-for="social in socialSharings"
62+
:key="social.id"
63+
:href="social.url"
6264
target="__blank"
6365
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
64-
><i data-feather="twitter" class="w-5 h-5"></i
65-
></a>
66-
<a
67-
href="https://instagram.com/NangialaiStoman"
68-
target="__blank"
69-
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
70-
><i data-feather="instagram" class="w-5 h-5"></i
71-
></a>
72-
<a
73-
href="https://facebook.com/nangialai.stoman"
74-
target="__blank"
75-
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
76-
><i data-feather="facebook" class="w-5 h-5"></i
77-
></a>
78-
79-
<a
80-
href="https://linkedin.com/"
81-
target="__blank"
82-
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
83-
><i data-feather="linkedin" class="w-5 h-5"></i
84-
></a>
85-
<a
86-
href="https://www.youtube.com/c/StomanStudio"
87-
target="__blank"
88-
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
89-
><i data-feather="youtube" class="w-5 h-5"></i
66+
><i :data-feather="social.icon" class="w-5 h-5"></i
9067
></a>
9168
</div>
9269
</div>
@@ -97,49 +74,105 @@
9774
>
9875
Challenge
9976
</p>
100-
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
101-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
102-
ipsa, ullam modi esse ea molestiae, non quidem expedita
103-
perspiciatis nihil eligendi maxime eum eos exercitationem.
104-
Aliquam labore amet odio quisquam? Lorem ipsum dolor sit amet
105-
consectetur, adipisicing elit. Velit, consectetur? Soluta,
106-
minus, quia tenetur distinctio asperiores aperiam impedit
107-
provident at autem omnis odio, atque dicta minima alias
108-
voluptatum ullam animi.
109-
</p>
110-
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
111-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
112-
ipsa, ullam modi esse ea molestiae, non quidem expedita
113-
perspiciatis nihil eligendi maxime eum eos exercitationem.
114-
Aliquam labore amet odio quisquam? Lorem ipsum dolor sit amet
115-
consectetur, adipisicing elit. Velit, consectetur? Soluta,
116-
minus, quia tenetur distinctio asperiores aperiam impedit
117-
provident at autem omnis odio, atque dicta minima alias
118-
voluptatum ullam animi.
119-
</p>
120-
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
121-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
122-
ipsa, ullam modi esse ea molestiae, non quidem expedita
123-
perspiciatis nihil eligendi maxime eum eos exercitationem.
124-
Aliquam labore amet odio quisquam? Lorem ipsum dolor sit amet
125-
consectetur, adipisicing elit. Velit, consectetur? Soluta,
126-
minus, quia tenetur distinctio asperiores aperiam impedit
127-
provident at autem omnis odio, atque dicta minima alias
128-
voluptatum ullam animi.
129-
</p>
130-
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
131-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
132-
ipsa, ullam modi esse ea molestiae, non quidem expedita
133-
perspiciatis nihil eligendi maxime eum eos exercitationem.
134-
Aliquam labore amet odio quisquam?
77+
<p
78+
v-for="projectDetail in projectDetails"
79+
:key="projectDetail.id"
80+
class="mb-5 text-lg text-ternary-dark dark:text-ternary-light"
81+
>
82+
{{ projectDetail.details }}
13583
</p>
13684
</div>
13785
</div>
13886
<!-- Project information end -->
13987
</template>
14088

14189
<script>
90+
import feather from 'feather-icons';
91+
14292
export default {
143-
setup() {},
93+
data() {
94+
return {
95+
technlogies: [
96+
{
97+
title: 'Tools & Technologies',
98+
techs: [
99+
'HTML',
100+
'CSS',
101+
'JavaScript',
102+
'Vue.js',
103+
'TailwindCSS',
104+
'AdobeXD',
105+
],
106+
},
107+
],
108+
projectDetails: [
109+
{
110+
id: 1,
111+
details:
112+
'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.',
113+
},
114+
{
115+
id: 2,
116+
details:
117+
'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?',
118+
},
119+
{
120+
id: 3,
121+
details:
122+
'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?',
123+
},
124+
{
125+
id: 4,
126+
details:
127+
'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.',
128+
},
129+
],
130+
socialSharings: [
131+
{
132+
id: 1,
133+
name: 'Twitter',
134+
icon: 'twitter',
135+
url: 'https://twitter.com/NangialaiStoman',
136+
},
137+
{
138+
id: 2,
139+
name: 'Instagram',
140+
icon: 'instagram',
141+
url: 'https://instagram.com/NangialaiStoman',
142+
},
143+
{
144+
id: 3,
145+
name: 'Facebook',
146+
icon: 'facebook',
147+
url: 'https://facebook.com/',
148+
},
149+
{
150+
id: 4,
151+
name: 'LinkedIn',
152+
icon: 'linkedin',
153+
url: 'https://linkedin.com/',
154+
},
155+
{
156+
id: 5,
157+
name: 'Youtube',
158+
icon: 'youtube',
159+
url: 'https://www.youtube.com/c/StomanStudio',
160+
},
161+
{
162+
id: 5,
163+
name: 'Dribbble',
164+
icon: 'dribbble',
165+
url: 'https://www.dribbble.com/',
166+
},
167+
],
168+
};
169+
},
170+
mounted() {
171+
feather.replace();
172+
},
173+
methods: {},
174+
updated() {
175+
feather.replace();
176+
},
144177
};
145178
</script>

0 commit comments

Comments
 (0)