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>

‎src/components/shared/Header.vue

Lines changed: 69 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,76 @@
11
<template>
2-
<nav id="nav" class="container mx-auto bg-white">
3-
<div class="md:flex items-center justify-between px-4 py-5">
4-
<div class="flex justify-between items-center">
5-
<div class="text-2xl font-bold text-gray-800 md:text-3xl">
6-
<router-link to="/">Logo</router-link>
7-
</div>
8-
<div class="md:hidden">
9-
<button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
10-
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
11-
<path class="hidden" d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"/>
12-
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
13-
</svg>
14-
</button>
15-
</div>
16-
</div>
17-
<div class="flex justify-between items-center flex-col md:flex-row">
18-
<router-link to="/projects" class="text-lg font-medium text-gray-400 uppercase md:mx-6 mb-2 sm:py-2">Projects</router-link>
19-
<router-link to="/about" class="text-lg font-medium text-gray-400 uppercase md:mx-2 mb-2 sm:py-2">About Me</router-link>
20-
<div class="sm:-mt-3 sm:ml-10 bg-gray-50 p-2 rounded-lg shadow-sm cursor-pointer">
21-
<a href="#"><i data-feather="moon" class="text-gray-600 hover:text-gray-400"></i></a>
22-
</div>
23-
</div>
24-
25-
</div>
26-
</nav>
2+
<nav id="nav" class="container mx-auto bg-white">
3+
<div class="md:flex items-center justify-between px-4 py-5">
4+
<div class="flex justify-between items-center">
5+
<div class="text-2xl font-bold text-gray-800 md:text-3xl">
6+
<router-link to="/">Logo</router-link>
7+
</div>
8+
<div class="md:hidden">
9+
<button
10+
type="button"
11+
class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none"
12+
>
13+
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
14+
<path
15+
class="hidden"
16+
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
17+
/>
18+
<path
19+
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
20+
/>
21+
</svg>
22+
</button>
23+
</div>
24+
<div class="sm:ml-4 mt-3">
25+
<router-link
26+
to="/projects"
27+
class="text-lg font-medium text-gray-400 uppercase md:mx-6 mb-2 sm:py-2"
28+
>Projects</router-link
29+
>
30+
<router-link
31+
to="/about"
32+
class="text-lg font-medium text-gray-400 uppercase md:mx-2 mb-2 sm:py-2"
33+
>About Me</router-link
34+
>
35+
</div>
36+
</div>
37+
<div class="flex justify-between items-center flex-col md:flex-row">
38+
<div>
39+
<button
40+
class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5 uppercase"
41+
>
42+
Hire Me
43+
</button>
44+
</div>
45+
<div
46+
class=" sm:ml-7 bg-gray-50 p-2 rounded-lg shadow-sm cursor-pointer"
47+
>
48+
<a href="#"
49+
><i
50+
data-feather="moon"
51+
class="text-gray-500 hover:text-gray-400"
52+
></i
53+
></a>
54+
</div>
55+
</div>
56+
</div>
57+
</nav>
2758
</template>
2859

2960
<script>
30-
import feather from 'feather-icons'
31-
export default {
32-
mounted() {
33-
feather.replace();
34-
},
35-
updated() {
36-
feather.replace();
37-
}
38-
}
61+
import feather from 'feather-icons';
62+
export default {
63+
mounted() {
64+
feather.replace();
65+
},
66+
updated() {
67+
feather.replace();
68+
},
69+
};
3970
</script>
4071

4172
<style scoped>
42-
#nav a.router-link-exact-active {
43-
@apply text-gray-700;
44-
}
45-
</style>
73+
#nav a.router-link-exact-active {
74+
@apply text-gray-700;
75+
}
76+
</style>

0 commit comments

Comments
 (0)