Create views

src/components/home/Banner.vue

@@ -0,0 +1,56 @@
+<template>
+	<!-- Banner Start -->
+	<section class="flex flex-col items-center sm:flex-row justify-between">
+		<div class="w-full sm:w-1/3 text-left">
+			<h1
+				class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-gray-700 uppercase"
+			>
+				Hi, Iam Stoman
+			</h1>
+			<p
+				class="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
+			>
+				A Full-Stack Developer & Design Enthusiast
+			</p>
+			<div class="flex justify-center sm:block">
+				<a
+					href="#"
+					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"
+				>
+					<i
+						data-feather="arrow-down-circle"
+						class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"
+					></i>
+					<span class="text-sm sm:text-lg">Download CV</span></a
+				>
+			</div>
+		</div>
+		<div class="w-full sm:w-2/3 text-right">
+			<img src="@/assets/images/developer.svg" alt="Developer" />
+		</div>
+	</section>
+	<!-- Banner End -->
+</template>
+
+<script>
+import feather from 'feather-icons';
+
+export default {
+	name: 'Home',
+	props: {
+		msg: String,
+	},
+	data: () => {
+		return {};
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/shared/Header.vue

@@ -29,25 +29,25 @@
 				<div class="sm:ml-4 mt-3">
 					<router-link
 						to="/projects"
-						class="text-lg font-medium text-gray-400 uppercase  md:mx-6 mb-2 sm:py-2"
+						class="text-lg font-medium text-gray-500 md:mx-6 mb-2 sm:py-2"
 						>Projects</router-link
 					>
 					<router-link
 						to="/about"
-						class="text-lg font-medium text-gray-400 uppercase  md:mx-2 mb-2 sm:py-2"
+						class="text-lg font-medium text-gray-500 md:mx-2 mb-2 sm:py-2"
 						>About Me</router-link
 					>
 					<router-link
 						to="/contact"
-						class="text-lg font-medium text-gray-400 uppercase  md:mx-2 mb-2 sm:py-2"
+						class="text-lg font-medium text-gray-500 md:mx-2 mb-2 sm:py-2"
 						>Contact</router-link
 					>
 				</div>
 			</div>
 			<div class="flex justify-between items-center flex-col md:flex-row">
 				<div>
 					<button
-						class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5 uppercase"
+						class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
 					>
 						Hire Me
 					</button>
@@ -81,6 +81,6 @@ export default {
 
 <style scoped>
 #nav a.router-link-exact-active {
-	@apply text-gray-700;
+	@apply text-gray-900;
 }
 </style>

src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../components/Home.vue';
+import Home from '../views/Home.vue';
 
 const routes = [
 	{

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Contact.vue

@@ -0,0 +1 @@
+

src/views/Home.vue

@@ -1,18 +1,32 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+	<!-- Banner Start -->
+	<Banner />
+	<!-- Banner End -->
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import Banner from '@/components/home/Banner';
+import feather from 'feather-icons';
 
 export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
+	name: 'Home',
+	components: {
+		Banner,
+	},
+	props: {
+		msg: String,
+	},
+	data: () => {
+		return {};
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+	methods: {},
+};
 </script>
+
+<style scoped></style>