Skip to content

Commit 0cb9972

Browse files
zlrundefinedzlrundefined
committed
Home and router components structure
1 parent d340bc5 commit 0cb9972

File tree

6 files changed

+206
-176
lines changed

6 files changed

+206
-176
lines changed

‎src/components/Projects.vue

Lines changed: 0 additions & 164 deletions
This file was deleted.

‎src/components/home/Banner.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<!-- Banner Start -->
2+
<!-- Banner start -->
33
<section class="flex flex-col items-center sm:flex-row justify-between">
44
<div class="w-full sm:w-1/3 text-left">
55
<h1
@@ -29,7 +29,7 @@
2929
<img src="@/assets/images/developer.svg" alt="Developer" />
3030
</div>
3131
</section>
32-
<!-- Banner End -->
32+
<!-- Banner end -->
3333
</template>
3434

3535
<script>

‎src/components/project/ProjectsGrid.vue

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

‎src/router/index.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ const routes = [
2929
// this generates a separate chunk (projects.[hash].js) for this route
3030
// which is lazy-loaded when the route is visited.
3131
component: () =>
32-
import(
33-
/* webpackChunkName: "projects" */ '../components/Projects.vue'
34-
),
32+
import(/* webpackChunkName: "projects" */ '../views/Projects.vue'),
3533
meta: {
3634
title: 'Stoman - Projects',
3735
},
@@ -44,7 +42,7 @@ const routes = [
4442
// which is lazy-loaded when the route is visited.
4543
component: () =>
4644
import(
47-
/* webpackChunkName: "projects" */ '../components/SingleProject.vue'
45+
/* webpackChunkName: "projects" */ '../views/SingleProject.vue'
4846
),
4947
meta: {
5048
title: 'Stoman - Single Project',
@@ -57,9 +55,7 @@ const routes = [
5755
// this generates a separate chunk (projects.[hash].js) for this route
5856
// which is lazy-loaded when the route is visited.
5957
component: () =>
60-
import(
61-
/* webpackChunkName: "projects" */ '../components/Contact.vue'
62-
),
58+
import(/* webpackChunkName: "projects" */ '../views/Contact.vue'),
6359
meta: {
6460
title: 'Stoman - Contact',
6561
},

‎src/views/Home.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
<template>
2-
<!-- Banner Start -->
3-
<Banner />
4-
<!-- Banner End -->
2+
<div class="container mx-auto px-4 py-10">
3+
<!-- Banner start -->
4+
<Banner />
5+
<!-- Banner snd -->
6+
7+
<!-- Projects start -->
8+
<ProjectsGrid />
9+
<!-- Projects end -->
10+
</div>
511
</template>
612

713
<script>
814
import Banner from '@/components/home/Banner';
15+
import ProjectsGrid from '@/components/project/ProjectsGrid';
916
import feather from 'feather-icons';
1017
1118
export default {
1219
name: 'Home',
1320
components: {
1421
Banner,
22+
ProjectsGrid,
1523
},
1624
props: {
1725
msg: String,

0 commit comments

Comments
 (0)