Skip to content

Commit 0eaa082

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#4 from NangialaiStoman/home-layout2
Home Page Complete Layout
2 parents 8fd6dd0 + 0f6cc4e commit 0eaa082

File tree

11 files changed

+254
-95
lines changed

11 files changed

+254
-95
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# vue-tailwindcss-dark-mode
1+
# Clean Vue.js & TailwindCSS Portfolio Template
22

33
## Project setup
44
```

‎src/assets/css/app.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/***
2+
* Vuejs & TailwindCSS Portfolio Main Styling CSS File
3+
* Powered by: @NangialaiStoman
4+
*/

‎src/assets/images/mobile-project-1.jpg

221 KB
Loading

‎src/assets/images/mobile-project-2.jpg

257 KB
Loading

‎src/assets/images/ui-project-1.jpg

347 KB
Loading

‎src/assets/images/ui-project-2.jpg

178 KB
Loading

‎src/assets/images/web-project-1.jpg

282 KB
Loading

‎src/assets/images/web-project-2.jpg

420 KB
Loading

‎src/components/Home.vue

Lines changed: 132 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,142 @@
11
<template>
2-
<div class="container mx-auto px-4 py-10">
3-
<!-- Banner Start -->
4-
<div class="flex flex-col sm:flex-row justify-between">
5-
<div class="w-full sm:w-1/2 text-left">
6-
<h1>Hi Iam Stoman</h1>
7-
</div>
8-
<div class="w-full sm:w-1/2 text-right">
9-
<img src="@/assets/images/developer.svg" alt="Developer">
10-
</div>
11-
</div>
12-
<!-- Banner End -->
2+
<div class="container mx-auto px-4 py-10">
3+
<!-- Banner Start -->
4+
<section class="flex flex-col items-center sm:flex-row justify-between">
5+
<div class="w-full sm:w-1/3 text-left">
6+
<h1 class="text-5xl font-semibold text-gray-700 uppercase">
7+
Hi, Iam Stoman
8+
</h1>
9+
<p
10+
class="mt-4 text-4xl font-semibold leading-none text-gray-400"
11+
>
12+
A Full-Stack Developer & Design Enthusiast
13+
</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+
>
21+
</div>
22+
<div class="w-full sm:w-2/3 text-right">
23+
<img src="@/assets/images/developer.svg" alt="Developer" />
24+
</div>
25+
</section>
26+
<!-- Banner End -->
1327

14-
<!-- Banner Start -->
28+
<!-- Home Poject Section Start -->
29+
<section class="pt-48">
30+
<div class="text-center">
31+
<p class="text-4xl font-semibold mb-3 text-gray-600">
32+
Projects Portfolio
33+
</p>
34+
<p class="text-lg text-gray-500">
35+
Some of the projects I have successfully completed
36+
</p>
37+
</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"
42+
>
43+
<div>
44+
<img src="../assets/images/web-project-2.jpg" alt="" />
45+
</div>
46+
<div class="text-center px-4 py-4">
47+
<p>King Health Platform</p>
48+
<span>Wen Application</span>
49+
</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"
54+
>
55+
<div>
56+
<img
57+
src="../assets/images/mobile-project-2.jpg"
58+
alt=""
59+
/>
60+
</div>
61+
<div class="text-center px-4 py-4">
62+
<p>Pheonix Digital Agenncy</p>
63+
<span>Mobile Application</span>
64+
</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"
69+
>
70+
<div>
71+
<img src="../assets/images/ui-project-1.jpg" alt="" />
72+
</div>
73+
<div class="text-center px-4 py-4">
74+
<p>Project Management UI</p>
75+
<span>UI / Frontend</span>
76+
</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"
81+
>
82+
<div>
83+
<img src="../assets/images/ui-project-2.jpg" alt="" />
84+
</div>
85+
<div class="text-center px-4 py-4">
86+
<p>Cloud Storage Platform</p>
87+
<span>UI / Frontend</span>
88+
</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"
93+
>
94+
<div>
95+
<img
96+
src="../assets/images/mobile-project-1.jpg"
97+
alt=""
98+
/>
99+
</div>
100+
<div class="text-center px-4 py-4">
101+
<p>Kabul Social App</p>
102+
<span>Mobile Application</span>
103+
</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"
108+
>
109+
<div>
110+
<img src="../assets/images/web-project-1.jpg" alt="" />
111+
</div>
112+
<div class="text-center px-4 py-4">
113+
<p>Apple Design System</p>
114+
<span>Web Application</span>
115+
</div>
116+
</a>
117+
</div>
118+
</section>
119+
<!-- Home Poject Section End -->
15120

16-
</div>
121+
<!-- -->
122+
</div>
17123
</template>
18124

19125
<script>
20-
import feather from 'feather-icons'
126+
import feather from 'feather-icons';
21127
22128
export default {
23-
name: 'Home',
24-
props: {
25-
msg: String
26-
},
27-
mounted() {
28-
feather.replace();
29-
},
30-
updated() {
31-
feather.replace();
32-
}
33-
}
129+
name: 'Home',
130+
props: {
131+
msg: String,
132+
},
133+
mounted() {
134+
feather.replace();
135+
},
136+
updated() {
137+
feather.replace();
138+
},
139+
};
34140
</script>
35141

36-
<style scoped>
37-
38-
</style>
142+
<style scoped></style>

‎src/components/shared/Footer.vue

Lines changed: 48 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,54 @@
11
<template>
2-
<div class="container mx-auto bg-white px-4">
3-
<div class="md:flex items-center justify-between py-5">
4-
<div class="flex justify-between items-center">
5-
<div class="text-lg text-gray-500">
6-
&copy; Copyright 2021. <a href="https://stoman.me" target="__blank" class="text-gray-600 font-medium">Stoman</a>
7-
</div>
8-
</div>
9-
<div>
10-
<ul class="flex gap-4">
11-
<li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="twitter"></i></li>
12-
<li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="instagram"></i></li>
13-
<li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="github"></i></li>
14-
</ul>
15-
</div>
16-
</div>
17-
</div>
2+
<div class="container mx-auto bg-white px-4 pt-64 pb-12">
3+
<div class="flex flex-col justify-center items-center mb-32">
4+
<p class="text-5xl font-semibold text-gray-500 mb-5">Follow me</p>
5+
<ul class="flex gap-10">
6+
<li
7+
class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4"
8+
>
9+
<i data-feather="github" class="w-10 h-10"></i>
10+
</li>
11+
<li
12+
class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4"
13+
>
14+
<i data-feather="twitter" class="w-10 h-10"></i>
15+
</li>
16+
<li
17+
class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4"
18+
>
19+
<i data-feather="instagram" class="w-10 h-10"></i>
20+
</li>
21+
<li
22+
class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4"
23+
>
24+
<i data-feather="dribbble" class="w-10 h-10"></i>
25+
</li>
26+
</ul>
27+
</div>
28+
<div class="flex justify-center items-center text-center">
29+
<div class="text-lg text-gray-500">
30+
&copy; Copyright 2021.
31+
<a
32+
href="https://stoman.me"
33+
target="__blank"
34+
class="text-gray-600 font-medium"
35+
>Stoman</a
36+
>
37+
</div>
38+
</div>
39+
</div>
1840
</template>
1941

2042
<script>
21-
import feather from 'feather-icons'
22-
export default {
23-
mounted() {
24-
feather.replace();
25-
},
26-
updated() {
27-
feather.replace();
28-
}
29-
}
43+
import feather from 'feather-icons';
44+
export default {
45+
mounted() {
46+
feather.replace();
47+
},
48+
updated() {
49+
feather.replace();
50+
},
51+
};
3052
</script>
3153

32-
<style scoped>
33-
34-
</style>
54+
<style scoped></style>

0 commit comments

Comments
 (0)