Skip to content

Commit d63d999

Browse files
zlrundefinedzlrundefined
committed
Projects page cards
1 parent 421d25b commit d63d999

File tree

2 files changed

+159
-19
lines changed

2 files changed

+159
-19
lines changed

‎src/components/Home.vue

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
</div>
4747

4848
<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
49-
<a
50-
href="#"
49+
<router-link
50+
to="/projects/single-project"
5151
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
5252
>
5353
<div>
@@ -65,9 +65,9 @@
6565
>Wen Application</span
6666
>
6767
</div>
68-
</a>
69-
<a
70-
href="#"
68+
</router-link>
69+
<router-link
70+
to="/projects/single-project"
7171
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
7272
>
7373
<div>
@@ -85,9 +85,9 @@
8585
>Mobile Application</span
8686
>
8787
</div>
88-
</a>
89-
<a
90-
href="#"
88+
</router-link>
89+
<router-link
90+
to="/projects/single-project"
9191
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
9292
>
9393
<div>
@@ -103,9 +103,9 @@
103103
</p>
104104
<span class="text-lg text-gray-500">UI / Frontend</span>
105105
</div>
106-
</a>
107-
<a
108-
href="#"
106+
</router-link>
107+
<router-link
108+
to="/projects/single-project"
109109
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
110110
>
111111
<div>
@@ -121,9 +121,9 @@
121121
</p>
122122
<span class="text-lg text-gray-500">UI / Frontend</span>
123123
</div>
124-
</a>
125-
<a
126-
href="#"
124+
</router-link>
125+
<router-link
126+
to="/projects/single-project"
127127
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
128128
>
129129
<div>
@@ -141,9 +141,9 @@
141141
>Mobile Application</span
142142
>
143143
</div>
144-
</a>
145-
<a
146-
href="#"
144+
</router-link>
145+
<router-link
146+
to="/projects/single-project"
147147
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
148148
>
149149
<div>
@@ -161,7 +161,7 @@
161161
>Web Application</span
162162
>
163163
</div>
164-
</a>
164+
</router-link>
165165
</div>
166166
<div class="mt-10 sm:mt-20 flex justify-center">
167167
<button

‎src/components/Projects.vue

Lines changed: 141 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,146 @@
11
<template>
22
<div class="container mx-auto px-4">
3-
<p>Projects Page</p>
3+
<!-- Home Poject Section Start -->
4+
<section class="pt-12 sm:pt-20">
5+
<div class="text-center">
6+
<p
7+
class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600"
8+
>
9+
Projects Portfolio
10+
</p>
11+
<p class="text-md sm:text-xl text-gray-500">
12+
Some of the projects I have successfully completed
13+
</p>
14+
</div>
15+
16+
<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
17+
<router-link
18+
to="/projects/single-project"
19+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
20+
>
21+
<div>
22+
<img
23+
src="../assets/images/web-project-2.jpg"
24+
alt=""
25+
class="rounded-t-3xl border-none"
26+
/>
27+
</div>
28+
<div class="text-center px-4 py-4">
29+
<p class="text-2xl text-gray-600 font-semibold mb-3">
30+
King Health Platform
31+
</p>
32+
<span class="text-lg text-gray-500"
33+
>Wen Application</span
34+
>
35+
</div>
36+
</router-link>
37+
<router-link
38+
to="/projects/single-project"
39+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
40+
>
41+
<div>
42+
<img
43+
src="../assets/images/mobile-project-2.jpg"
44+
alt=""
45+
class="rounded-t-3xl border-none"
46+
/>
47+
</div>
48+
<div class="text-center px-4 py-4">
49+
<p class="text-2xl text-gray-600 font-semibold mb-3">
50+
Pheonix Digital Agenncy
51+
</p>
52+
<span class="text-lg text-gray-500"
53+
>Mobile Application</span
54+
>
55+
</div>
56+
</router-link>
57+
<router-link
58+
to="/projects/single-project"
59+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
60+
>
61+
<div>
62+
<img
63+
src="../assets/images/ui-project-1.jpg"
64+
alt=""
65+
class="rounded-t-3xl border-none"
66+
/>
67+
</div>
68+
<div class="text-center px-4 py-4">
69+
<p class="text-2xl text-gray-600 font-semibold mb-3">
70+
Project Management UI
71+
</p>
72+
<span class="text-lg text-gray-500">UI / Frontend</span>
73+
</div>
74+
</router-link>
75+
<router-link
76+
to="/projects/single-project"
77+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
78+
>
79+
<div>
80+
<img
81+
src="../assets/images/ui-project-2.jpg"
82+
alt=""
83+
class="rounded-t-3xl border-none"
84+
/>
85+
</div>
86+
<div class="text-center px-4 py-4">
87+
<p class="text-2xl text-gray-600 font-semibold mb-3">
88+
Cloud Storage Platform
89+
</p>
90+
<span class="text-lg text-gray-500">UI / Frontend</span>
91+
</div>
92+
</router-link>
93+
<router-link
94+
to="/projects/single-project"
95+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
96+
>
97+
<div>
98+
<img
99+
src="../assets/images/mobile-project-1.jpg"
100+
alt=""
101+
class="rounded-t-3xl border-none"
102+
/>
103+
</div>
104+
<div class="text-center px-4 py-4">
105+
<p class="text-2xl text-gray-600 font-semibold mb-3">
106+
Kabul Social App
107+
</p>
108+
<span class="text-lg text-gray-500"
109+
>Mobile Application</span
110+
>
111+
</div>
112+
</router-link>
113+
<router-link
114+
to="/projects/single-project"
115+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
116+
>
117+
<div>
118+
<img
119+
src="../assets/images/web-project-1.jpg"
120+
alt=""
121+
class="rounded-t-3xl border-none"
122+
/>
123+
</div>
124+
<div class="text-center px-4 py-4">
125+
<p class="text-2xl text-gray-600 font-semibold mb-3">
126+
Apple Design System
127+
</p>
128+
<span class="text-lg text-gray-500"
129+
>Web Application</span
130+
>
131+
</div>
132+
</router-link>
133+
</div>
134+
<div class="mt-10 sm:mt-20 flex justify-center">
135+
<button
136+
class="flex items-center px-6 py-3 rounded-xl shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 text-white text-lg sm:text-xl font-medium"
137+
>
138+
<i data-feather="refresh-cw" class="w-5 mr-3"></i>
139+
<span>Load More</span>
140+
</button>
141+
</div>
142+
</section>
143+
<!-- Home Poject Section End -->
4144
</div>
5145
</template>
6146

0 commit comments

Comments
 (0)