Skip to content

Commit 1040cc4

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#5 from NangialaiStoman/home-projects-section-layout
Home Projects Section Design
2 parents 0eaa082 + d63d999 commit 1040cc4

File tree

6 files changed

+426
-170
lines changed

6 files changed

+426
-170
lines changed

‎src/components/About.vue

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
<template>
2-
<div class="container mx-auto px-4">
3-
<p>About Page</p>
4-
<i data-feather="home"></i>
5-
</div>
2+
<div class="container mx-auto px-4">
3+
<p>About Page</p>
4+
</div>
65
</template>
76

87
<script>
9-
import feather from 'feather-icons'
8+
import feather from 'feather-icons';
109
1110
export default {
12-
name: 'About',
13-
props: {
14-
msg: String
15-
},
16-
mounted() {
17-
feather.replace();
18-
},
19-
updated() {
20-
feather.replace();
21-
}
22-
}
11+
name: 'About',
12+
props: {
13+
msg: String,
14+
},
15+
mounted() {
16+
feather.replace();
17+
},
18+
updated() {
19+
feather.replace();
20+
},
21+
};
2322
</script>
2423

25-
<style scoped>
26-
27-
</style>
24+
<style scoped></style>

‎src/components/Home.vue

Lines changed: 113 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,28 @@
33
<!-- Banner Start -->
44
<section class="flex flex-col items-center sm:flex-row justify-between">
55
<div class="w-full sm:w-1/3 text-left">
6-
<h1 class="text-5xl font-semibold text-gray-700 uppercase">
6+
<h1
7+
class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-gray-700 uppercase"
8+
>
79
Hi, Iam Stoman
810
</h1>
911
<p
10-
class="mt-4 text-4xl font-semibold leading-none text-gray-400"
12+
class="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
1113
>
1214
A Full-Stack Developer & Design Enthusiast
1315
</p>
14-
<a
15-
href="#"
16-
class="flex w-48 mt-10 text-lg border border-indigo-500 py-3 shadow-sm rounded-xl bg-indigo-50 hover:bg-indigo-500 hover:text-white"
17-
>
18-
<i data-feather="arrow-down-circle" class="ml-4 mr-3"></i>
19-
<span>Download CV</span></a
20-
>
16+
<div class="flex justify-center sm:block">
17+
<a
18+
href="#"
19+
class="flex justify-center items-center w-36 sm:w-48 mt-10 mb-6 sm:mb-0 text-lg border border-indigo-200 py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 hover:bg-indigo-500 hover:text-white"
20+
>
21+
<i
22+
data-feather="arrow-down-circle"
23+
class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"
24+
></i>
25+
<span class="text-sm sm:text-lg">Download CV</span></a
26+
>
27+
</div>
2128
</div>
2229
<div class="w-full sm:w-2/3 text-right">
2330
<img src="@/assets/images/developer.svg" alt="Developer" />
@@ -26,94 +33,143 @@
2633
<!-- Banner End -->
2734

2835
<!-- Home Poject Section Start -->
29-
<section class="pt-48">
36+
<section class="pt-12 sm:pt-40">
3037
<div class="text-center">
31-
<p class="text-4xl font-semibold mb-3 text-gray-600">
38+
<p
39+
class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600"
40+
>
3241
Projects Portfolio
3342
</p>
34-
<p class="text-lg text-gray-500">
43+
<p class="text-md sm:text-xl text-gray-500">
3544
Some of the projects I have successfully completed
3645
</p>
3746
</div>
38-
<div class="w-full sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
39-
<a
40-
href="#"
41-
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
47+
48+
<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
49+
<router-link
50+
to="/projects/single-project"
51+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
4252
>
4353
<div>
44-
<img src="../assets/images/web-project-2.jpg" alt="" />
54+
<img
55+
src="../assets/images/web-project-2.jpg"
56+
alt=""
57+
class="rounded-t-3xl border-none"
58+
/>
4559
</div>
4660
<div class="text-center px-4 py-4">
47-
<p>King Health Platform</p>
48-
<span>Wen Application</span>
61+
<p class="text-2xl text-gray-600 font-semibold mb-3">
62+
King Health Platform
63+
</p>
64+
<span class="text-lg text-gray-500"
65+
>Wen Application</span
66+
>
4967
</div>
50-
</a>
51-
<a
52-
href="#"
53-
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
68+
</router-link>
69+
<router-link
70+
to="/projects/single-project"
71+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
5472
>
5573
<div>
5674
<img
5775
src="../assets/images/mobile-project-2.jpg"
5876
alt=""
77+
class="rounded-t-3xl border-none"
5978
/>
6079
</div>
6180
<div class="text-center px-4 py-4">
62-
<p>Pheonix Digital Agenncy</p>
63-
<span>Mobile Application</span>
81+
<p class="text-2xl text-gray-600 font-semibold mb-3">
82+
Pheonix Digital Agenncy
83+
</p>
84+
<span class="text-lg text-gray-500"
85+
>Mobile Application</span
86+
>
6487
</div>
65-
</a>
66-
<a
67-
href="#"
68-
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
88+
</router-link>
89+
<router-link
90+
to="/projects/single-project"
91+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
6992
>
7093
<div>
71-
<img src="../assets/images/ui-project-1.jpg" alt="" />
94+
<img
95+
src="../assets/images/ui-project-1.jpg"
96+
alt=""
97+
class="rounded-t-3xl border-none"
98+
/>
7299
</div>
73100
<div class="text-center px-4 py-4">
74-
<p>Project Management UI</p>
75-
<span>UI / Frontend</span>
101+
<p class="text-2xl text-gray-600 font-semibold mb-3">
102+
Project Management UI
103+
</p>
104+
<span class="text-lg text-gray-500">UI / Frontend</span>
76105
</div>
77-
</a>
78-
<a
79-
href="#"
80-
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
106+
</router-link>
107+
<router-link
108+
to="/projects/single-project"
109+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
81110
>
82111
<div>
83-
<img src="../assets/images/ui-project-2.jpg" alt="" />
112+
<img
113+
src="../assets/images/ui-project-2.jpg"
114+
alt=""
115+
class="rounded-t-3xl border-none"
116+
/>
84117
</div>
85118
<div class="text-center px-4 py-4">
86-
<p>Cloud Storage Platform</p>
87-
<span>UI / Frontend</span>
119+
<p class="text-2xl text-gray-600 font-semibold mb-3">
120+
Cloud Storage Platform
121+
</p>
122+
<span class="text-lg text-gray-500">UI / Frontend</span>
88123
</div>
89-
</a>
90-
<a
91-
href="#"
92-
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
124+
</router-link>
125+
<router-link
126+
to="/projects/single-project"
127+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
93128
>
94129
<div>
95130
<img
96131
src="../assets/images/mobile-project-1.jpg"
97132
alt=""
133+
class="rounded-t-3xl border-none"
98134
/>
99135
</div>
100136
<div class="text-center px-4 py-4">
101-
<p>Kabul Social App</p>
102-
<span>Mobile Application</span>
137+
<p class="text-2xl text-gray-600 font-semibold mb-3">
138+
Kabul Social App
139+
</p>
140+
<span class="text-lg text-gray-500"
141+
>Mobile Application</span
142+
>
103143
</div>
104-
</a>
105-
<a
106-
href="#"
107-
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
144+
</router-link>
145+
<router-link
146+
to="/projects/single-project"
147+
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
108148
>
109149
<div>
110-
<img src="../assets/images/web-project-1.jpg" alt="" />
150+
<img
151+
src="../assets/images/web-project-1.jpg"
152+
alt=""
153+
class="rounded-t-3xl border-none"
154+
/>
111155
</div>
112156
<div class="text-center px-4 py-4">
113-
<p>Apple Design System</p>
114-
<span>Web Application</span>
157+
<p class="text-2xl text-gray-600 font-semibold mb-3">
158+
Apple Design System
159+
</p>
160+
<span class="text-lg text-gray-500"
161+
>Web Application</span
162+
>
115163
</div>
116-
</a>
164+
</router-link>
165+
</div>
166+
<div class="mt-10 sm:mt-20 flex justify-center">
167+
<button
168+
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"
169+
>
170+
<i data-feather="refresh-cw" class="w-5 mr-3"></i>
171+
<span>Load More</span>
172+
</button>
117173
</div>
118174
</section>
119175
<!-- Home Poject Section End -->
@@ -130,12 +186,16 @@ export default {
130186
props: {
131187
msg: String,
132188
},
189+
data: () => {
190+
return {};
191+
},
133192
mounted() {
134193
feather.replace();
135194
},
136195
updated() {
137196
feather.replace();
138197
},
198+
methods: {},
139199
};
140200
</script>
141201

0 commit comments

Comments
 (0)