Skip to content

Commit 47795fe

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#2 from NangialaiStoman/ui-design
UI design and layout
2 parents 109f5bb + e7ac3df commit 47795fe

File tree

14 files changed

+336
-83
lines changed

14 files changed

+336
-83
lines changed

‎package-lock.json

Lines changed: 61 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,19 @@
1111
"@tailwindcss/postcss7-compat": "^2.0.2",
1212
"autoprefixer": "^9",
1313
"core-js": "^3.6.5",
14+
"feather-icons": "^4.28.0",
1415
"postcss": "^7",
1516
"postcss-flexbugs-fixes": "^5.0.2",
1617
"postcss-import": "^14.0.2",
1718
"postcss-preset-env": "^6.7.0",
1819
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
19-
"vue": "^3.0.0"
20+
"vue": "^3.0.0",
21+
"vue-router": "^4.0.0-0"
2022
},
2123
"devDependencies": {
2224
"@vue/cli-plugin-babel": "~4.5.0",
2325
"@vue/cli-plugin-eslint": "~4.5.0",
26+
"@vue/cli-plugin-router": "~4.5.0",
2427
"@vue/cli-service": "~4.5.0",
2528
"@vue/compiler-sfc": "^3.0.0",
2629
"babel-eslint": "^10.1.0",

‎src/App.vue

Lines changed: 70 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,79 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
3-
<HelloWorld msg="Welcome to Your Vue.js App"/>
2+
<!-- Header Start -->
3+
<nav id="nav" class="container mx-auto bg-white">
4+
<div class="md:flex items-center justify-between px-4 py-5">
5+
<div class="flex justify-between items-center">
6+
<div class="text-2xl font-bold text-gray-800 md:text-3xl">
7+
<router-link to="/">Logo</router-link>
8+
</div>
9+
<div class="md:hidden">
10+
<button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
11+
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
12+
<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"/>
13+
<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"/>
14+
</svg>
15+
</button>
16+
</div>
17+
</div>
18+
<div class="flex justify-between items-center flex-col md:flex-row">
19+
<router-link to="/projects" class="text-lg font-medium text-gray-400 uppercase md:mx-6 mb-2 sm:py-2">Projects</router-link>
20+
<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>
21+
<div class="sm:-mt-3 sm:ml-10 bg-gray-50 p-2 rounded-lg shadow-sm cursor-pointer">
22+
<a href="#"><i data-feather="moon" class="text-gray-600 hover:text-gray-400"></i></a>
23+
</div>
24+
</div>
25+
26+
</div>
27+
</nav>
28+
<!-- Header End -->
29+
30+
<!-- Render Active Component Contents Start -->
31+
<router-view/>
32+
<!-- Render Active Component Contents End -->
33+
34+
<!-- Footer Start -->
35+
<div class="container mx-auto bg-white px-4">
36+
<div class="md:flex items-center justify-between py-5">
37+
<div class="flex justify-between items-center">
38+
<div class="text-lg text-gray-500">
39+
&copy; Copyright 2021. <a href="https://stoman.me" target="__blank" class="text-gray-600 font-medium">Stoman</a>
40+
</div>
41+
</div>
42+
<div>
43+
<ul class="flex gap-4">
44+
<li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="twitter"></i></li>
45+
<li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="instagram"></i></li>
46+
<li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="github"></i></li>
47+
</ul>
48+
</div>
49+
</div>
50+
</div>
51+
<!-- Footer End -->
52+
453
</template>
554

655
<script>
7-
import HelloWorld from './components/HelloWorld.vue'
8-
9-
export default {
10-
name: 'App',
11-
components: {
12-
HelloWorld
56+
import feather from 'feather-icons'
57+
export default {
58+
mounted() {
59+
feather.replace();
60+
},
61+
updated() {
62+
feather.replace();
63+
}
1364
}
14-
}
1565
</script>
1666

1767
<style>
18-
#app {
19-
font-family: Avenir, Helvetica, Arial, sans-serif;
20-
-webkit-font-smoothing: antialiased;
21-
-moz-osx-font-smoothing: grayscale;
22-
text-align: center;
23-
color: #2c3e50;
24-
margin-top: 60px;
25-
}
68+
#app {
69+
font-family: Avenir, Helvetica, Arial, sans-serif;
70+
-webkit-font-smoothing: antialiased;
71+
-moz-osx-font-smoothing: grayscale;
72+
text-align: center;
73+
color: #2c3e50;
74+
}
75+
76+
#nav a.router-link-exact-active {
77+
@apply text-gray-700;
78+
}
2679
</style>

‎src/assets/tailwind.css renamed to ‎src/assets/css/tailwind.css

File renamed without changes.

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

‎src/components/About.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="container mx-auto px-4">
3+
<p>About Page</p>
4+
<i data-feather="home"></i>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import feather from 'feather-icons'
10+
11+
export default {
12+
name: 'About',
13+
props: {
14+
msg: String
15+
},
16+
mounted() {
17+
feather.replace();
18+
},
19+
updated() {
20+
feather.replace();
21+
}
22+
}
23+
</script>
24+
25+
<style scoped>
26+
27+
</style>

‎src/components/HelloWorld.vue

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

‎src/components/Home.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="container mx-auto px-4">
3+
<p>Home Page</p>
4+
<i data-feather="home"></i>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import feather from 'feather-icons'
10+
11+
export default {
12+
name: 'Home',
13+
props: {
14+
msg: String
15+
},
16+
mounted() {
17+
feather.replace();
18+
},
19+
updated() {
20+
feather.replace();
21+
}
22+
}
23+
</script>
24+
25+
<style scoped>
26+
27+
</style>

‎src/components/Projects.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="container mx-auto px-4">
3+
<p>Projects Page</p>
4+
<i data-feather="home"></i>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import feather from 'feather-icons'
10+
11+
export default {
12+
name: 'Projects',
13+
props: {
14+
msg: String
15+
},
16+
mounted() {
17+
feather.replace();
18+
},
19+
updated() {
20+
feather.replace();
21+
}
22+
}
23+
</script>
24+
25+
<style scoped>
26+
27+
</style>

‎src/index.css

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

0 commit comments

Comments
 (0)