<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/realstoman/vuejs-tailwindcss-portfolio/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 0;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From 7a7c823b0bba48001048f933d53cab284705e99f Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Sat, 10 Jul 2021 22:16:00 +0430
Subject: [PATCH 01/11] Home script changes

---
 src/components/Home.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 70dc1295..f90c5148 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -35,6 +35,7 @@
 					Some of the projects I have successfully completed
 				</p>
 			</div>
+
 			<div class="w-full sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
 				<a href="#" @ -130,12 +131,16 @ export default { props { msg String } + data (=""> {
+		return {};
+	},
 	mounted() {
 		feather.replace();
 	},
 	updated() {
 		feather.replace();
 	},
+	methods: {},
 };
 </script>
 

From 0c1c12ae307a75e384ffe2649799cbf8b3ea2ed9 Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Sat, 10 Jul 2021 22:21:24 +0430
Subject: [PATCH 02/11] Projects section design changes

---
 src/components/Home.vue | 70 +++++++++++++++++++++++++++++++----------
 1 file changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index f90c5148..6922e7cd 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -42,11 +42,19 @@
 					class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
 				>
 					<div>
-						<img src="../assets/images/web-project-2.jpg,_ANDesc=img," alt="" />
+						<img + src="../assets/images/web-project-2.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
 					</div>
 					<div class="text-center px-4 py-4">
-						<p>King Health Platform</p>
-						<span>Wen Application</span>
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							King Health Platform
+						</p>
+						<span class="text-lg text-gray-500" +>Wen Application</span +>
 					</div>
 				</a>
 				<a @ -57,11 +65,16 @><img src="../assets/images/mobile-project-2.jpg,_ANDesc=img," alt="" + class="rounded-t-3xl border-none" />
 					</div>
 					<div class="text-center px-4 py-4">
-						<p>Pheonix Digital Agenncy</p>
-						<span>Mobile Application</span>
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Pheonix Digital Agenncy
+						</p>
+						<span class="text-lg text-gray-500" +>Mobile Application</span +>
 					</div>
 				</a>
 				<a @ -69,11 +82,17 @ class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0">
 					<div>
-						<img src="../assets/images/ui-project-1.jpg,_ANDesc=img," alt="" />
+						<img + src="../assets/images/ui-project-1.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
 					</div>
 					<div class="text-center px-4 py-4">
-						<p>Project Management UI</p>
-						<span>UI / Frontend</span>
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Project Management UI
+						</p>
+						<span class="text-lg text-gray-500">UI / Frontend</span>
 					</div>
 				</a>
 				<a @ -81,11 +100,17 @ class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0">
 					<div>
-						<img src="../assets/images/ui-project-2.jpg,_ANDesc=img," alt="" />
+						<img + src="../assets/images/ui-project-2.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
 					</div>
 					<div class="text-center px-4 py-4">
-						<p>Cloud Storage Platform</p>
-						<span>UI / Frontend</span>
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Cloud Storage Platform
+						</p>
+						<span class="text-lg text-gray-500">UI / Frontend</span>
 					</div>
 				</a>
 				<a @ -96,11 +121,16 @><img src="../assets/images/mobile-project-1.jpg,_ANDesc=img," alt="" + class="rounded-t-3xl border-none" />
 					</div>
 					<div class="text-center px-4 py-4">
-						<p>Kabul Social App</p>
-						<span>Mobile Application</span>
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Kabul Social App
+						</p>
+						<span class="text-lg text-gray-500" +>Mobile Application</span +>
 					</div>
 				</a>
 				<a @ -108,11 +138,19 @ class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0">
 					<div>
-						<img src="../assets/images/web-project-1.jpg,_ANDesc=img," alt="" />
+						<img + src="../assets/images/web-project-1.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
 					</div>
 					<div class="text-center px-4 py-4">
-						<p>Apple Design System</p>
-						<span>Web Application</span>
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Apple Design System
+						</p>
+						<span class="text-lg text-gray-500" +>Web Application</span +>
 					</div>
 				</a>
 			</div>

From 2ce74ba5440fe98161c99fddedcc768d4b7ea196 Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Sat, 10 Jul 2021 22:32:21 +0430
Subject: [PATCH 03/11] Title section responsive design

---
 src/components/Home.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 6922e7cd..bf01e88a 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -3,21 +3,28 @@
 		<!-- 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-5xl font-semibold text-gray-700 uppercase">
+				<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-4xl font-semibold leading-none text-gray-400" + 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>
-				<a - href="#" - 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" ->
-					<i data-feather="arrow-down-circle" class="ml-4 mr-3"></i>
-					<span>Download CV</span></a ->
+				<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-500 py-2.5 sm:py-3 shadow-sm 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,_ANDesc=img," alt="Developer" />

From b136c6bb2c989bb053a94a5935d6495981d6be90 Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Sat, 10 Jul 2021 22:38:47 +0430
Subject: [PATCH 04/11] Footer design changes

---
 src/components/Home.vue          | 22 ++++++++++++----------
 src/components/shared/Footer.vue | 16 ++++++++--------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index bf01e88a..553f8070 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -33,20 +33,22 @@
 		<!-- Banner End -->
 
 		<!-- Home Poject Section Start -->
-		<section class="pt-48">
+		<section class="pt-12 sm:pt-40">
 			<div class="text-center">
-				<p class="text-4xl font-semibold mb-3 text-gray-600">
+				<p + class="text-2xl sm:text-4xl font-semibold mb-3 text-gray-600" +>
 					Projects Portfolio
 				</p>
-				<p class="text-lg text-gray-500">
+				<p class="text-md sm:text-lg text-gray-500">
 					Some of the projects I have successfully completed
 				</p>
 			</div>
 
-			<div class="w-full sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
+			<div class="sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
 				<a href="#" - class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0">
 					<div>
 						<img @ -66,7 +68,7 @></a>
 				<a href="#" - class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0">
 					<div>
 						<img @ -86,7 +88,7 @></a>
 				<a href="#" - class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0">
 					<div>
 						<img @ -104,7 +106,7 @></a>
 				<a href="#" - class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0">
 					<div>
 						<img @ -122,7 +124,7 @></a>
 				<a href="#" - class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0">
 					<div>
 						<img @ -142,7 +144,7 @></a>
 				<a href="#" - class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0">
 					<div>
 						<img diff --git a/src/components/shared/Footer.vue b/src/components/shared/Footer.vue index 61d247cc..0dcd1c4a 100644 - a/src/components/shared/Footer.vue + b/src/components/shared/Footer.vue @ -1,27 +1,27 @><template>
-	<div class="container mx-auto bg-white px-4 pt-64 pb-12">
-		<div class="flex flex-col justify-center items-center mb-32">
-			<p class="text-5xl font-semibold text-gray-500 mb-5">Follow me</p>
-			<ul class="flex gap-10">
+	<div class="container mx-auto bg-white px-4 pt-40 pb-8">
+		<div class="flex flex-col justify-center items-center mb-28">
+			<p class="text-4xl font-semibold text-gray-500 mb-5">Follow me</p>
+			<ul class="flex gap-8">
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="github" class="w-10 h-10"></i>
+					<i data-feather="github" class="w-8 h-8"></i>
 				</li>
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="twitter" class="w-10 h-10"></i>
+					<i data-feather="twitter" class="w-8 h-8"></i>
 				</li>
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="instagram" class="w-10 h-10"></i>
+					<i data-feather="instagram" class="w-8 h-8"></i>
 				</li>
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="dribbble" class="w-10 h-10"></i>
+					<i data-feather="dribbble" class="w-8 h-8"></i>
 				</li>
 			</ul>
 		</div>

From 3ecdf974877e9b8b211085dd02b2906e89fbfb0e Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Sat, 10 Jul 2021 22:40:41 +0430
Subject: [PATCH 05/11] Footer responsive design

---
 src/components/shared/Footer.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/shared/Footer.vue b/src/components/shared/Footer.vue
index 0dcd1c4a..bd786282 100644
--- a/src/components/shared/Footer.vue
+++ b/src/components/shared/Footer.vue
@@ -1,27 +1,35 @@
 <template>
-	<div class="container mx-auto bg-white px-4 pt-40 pb-8">
-		<div class="flex flex-col justify-center items-center mb-28">
-			<p class="text-4xl font-semibold text-gray-500 mb-5">Follow me</p>
-			<ul class="flex gap-8">
+	<div class="container mx-auto bg-white px-4 pt-20 sm:pt-40 pb-8">
+		<div class="flex flex-col justify-center items-center mb-12 sm:mb-28">
+			<p class="text-3xl sm:text-4xl font-semibold text-gray-500 mb-5">
+				Follow me
+			</p>
+			<ul class="flex gap-4 sm:gap-8">
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="github" class="w-8 h-8"></i>
+					<i data-feather="github" class="w-6 sm:w-8 h-6 sm:h-8"></i>
 				</li>
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="twitter" class="w-8 h-8"></i>
+					<i data-feather="twitter" class="w-6 sm:w-8 h-6 sm:h-8"></i>
 				</li>
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="instagram" class="w-8 h-8"></i>
+					<i + data-feather="instagram" + class="w-6 sm:w-8 h-6 sm:h-8" +></i>
 				</li>
 				<li class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4">
-					<i data-feather="dribbble" class="w-8 h-8"></i>
+					<i + data-feather="dribbble" + class="w-6 sm:w-8 h-6 sm:h-8" +></i>
 				</li>
 			</ul>
 		</div>

From f75a2e5079204914f2a715cd03fba84220927571 Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Sat, 10 Jul 2021 22:59:51 +0430
Subject: [PATCH 06/11] Responsive design changes

---
 src/components/Home.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 553f8070..3085adcd 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -48,7 +48,7 @@
 			<div class="sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
 				<a href="#" - class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
 						<img @ -68,7 +68,7 @></a>
 				<a href="#" - class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
 						<img @ -88,7 +88,7 @></a>
 				<a href="#" - class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
 						<img @ -106,7 +106,7 @></a>
 				<a href="#" - class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
 						<img @ -124,7 +124,7 @></a>
 				<a href="#" - class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
 						<img @ -144,7 +144,7 @></a>
 				<a href="#" - class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
 						<img From 93cef988c9a4f17bcc0346fa9e37111e9082f583 Mon Sep 17 00:00:00 2001 From nstoman><nangialaistoman7@gmail.com>
Date: Sun, 11 Jul 2021 17:04:15 +0430
Subject: [PATCH 07/11] Home load more button and title

---
 src/components/Home.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 3085adcd..856f1b2e 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -36,16 +36,16 @@
 		<section class="pt-12 sm:pt-40">
 			<div class="text-center">
 				<p - class="text-2xl sm:text-4xl font-semibold mb-3 text-gray-600" + class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600">
 					Projects Portfolio
 				</p>
-				<p class="text-md sm:text-lg text-gray-500">
+				<p class="text-md sm:text-xl text-gray-500">
 					Some of the projects I have successfully completed
 				</p>
 			</div>
 
-			<div class="sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
+			<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
 				<a href="#" class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0" @ -163,6 +163,14 @></div>
 				</a>
 			</div>
+			<div class="mt-20 flex justify-center">
+				<button + class="flex items-center px-6 py-3 rounded-xl shadow-sm bg-indigo-500 hover:bg-indigo-600 text-white text-xl font-medium" +>
+					<i data-feather="refresh-cw" class="w-5 mr-3"></i>
+					<span>Load More</span>
+				</button>
+			</div>
 		</section>
 		<!-- Home Poject Section End -->
 

From 70f2e3530fb3f4a48ca1dec84a369111bd7d7606 Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Mon, 12 Jul 2021 08:37:24 +0430
Subject: [PATCH 08/11] Home and foooter changes

---
 src/components/Home.vue          | 6 +++---
 src/components/shared/Footer.vue | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 856f1b2e..74e51c41 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -16,7 +16,7 @@
 				<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-500 py-2.5 sm:py-3 shadow-sm rounded-xl bg-indigo-50 hover:bg-indigo-500 hover:text-white" + 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" @ -163,9 +163,9 @></div>
 				</a>
 			</div>
-			<div class="mt-20 flex justify-center">
+			<div class="mt-10 sm:mt-20 flex justify-center">
 				<button - class="flex items-center px-6 py-3 rounded-xl shadow-sm bg-indigo-500 hover:bg-indigo-600 text-white text-xl font-medium" + 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">
 					<i data-feather="refresh-cw" class="w-5 mr-3"></i>
 					<span>Load More</span>
diff --git a/src/components/shared/Footer.vue b/src/components/shared/Footer.vue
index bd786282..1c6f97ad 100644
--- a/src/components/shared/Footer.vue
+++ b/src/components/shared/Footer.vue
@@ -6,17 +6,17 @@
 			</p>
 			<ul class="flex gap-4 sm:gap-8">
 				<li - class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4" + class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4">
 					<i data-feather="github" class="w-6 sm:w-8 h-6 sm:h-8"></i>
 				</li>
 				<li - class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4" + class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4">
 					<i data-feather="twitter" class="w-6 sm:w-8 h-6 sm:h-8"></i>
 				</li>
 				<li - class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4" + class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4">
 					<i data-feather="instagram" @ -24,7 +24,7 @></i>
 				</li>
 				<li - class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4" + class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4">
 					<i data-feather="dribbble" From f5eff3f8ec5d5755f534d2cd86f8add1d8d8d910 Mon Sep 17 00:00:00 2001 From nstoman><nangialaistoman7@gmail.com>
Date: Wed, 14 Jul 2021 17:20:01 +0430
Subject: [PATCH 09/11] Create single project component

---
 src/components/SingleProject.vue | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/SingleProject.vue

diff --git a/src/components/SingleProject.vue b/src/components/SingleProject.vue
new file mode 100644
index 00000000..e69de29b

From 421d25b51a222a95298c64ca46f3d4bd352591f2 Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Wed, 14 Jul 2021 17:24:11 +0430
Subject: [PATCH 10/11] Single project route and vue strcuture

---
 src/components/About.vue         |  35 +++----
 src/components/Projects.vue      |  35 +++----
 src/components/SingleProject.vue |  24 +++++
 src/router/index.js              | 164 ++++++++++++++++++-------------
 4 files changed, 153 insertions(+), 105 deletions(-)

diff --git a/src/components/About.vue b/src/components/About.vue
index c9337d14..d0b45933 100644
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -1,27 +1,24 @@
 <template>
-    <div class="container mx-auto px-4">
-        <p>About Page</p>
-        <i data-feather="home"></i>
-    </div>
+	<div class="container mx-auto px-4">
+		<p>About Page</p>
+	</div>
 </template>
 
 <script>

-import feather from 'feather-icons'
+import feather from 'feather-icons';
 
 export default {
-    name: 'About',
-    props: {
-        msg: String
-    },
-    mounted() {
-        feather.replace();
-    },
-    updated() {
-        feather.replace();
-    }
-}
+	name: 'About',
+	props: {
+		msg: String,
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+};
 </script>
 
-<style scoped>

-
-</style>
+<style scoped>
</style>
diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index 682b63fe..bc6015af 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -1,27 +1,24 @@
 <template>
-    <div class="container mx-auto px-4">
-        <p>Projects Page</p>
-        <i data-feather="home"></i>
-    </div>
+	<div class="container mx-auto px-4">
+		<p>Projects Page</p>
+	</div>
 </template>
 
 <script>

-import feather from 'feather-icons'
+import feather from 'feather-icons';
 
 export default {
-    name: 'Projects',
-    props: {
-        msg: String
-    },
-    mounted() {
-        feather.replace();
-    },
-    updated() {
-        feather.replace();
-    }
-}
+	name: 'Projects',
+	props: {
+		msg: String,
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+};
 </script>
 
-<style scoped>

-
-</style>
+<style scoped>
</style>
diff --git a/src/components/SingleProject.vue b/src/components/SingleProject.vue
index e69de29b..668a77a7 100644
--- a/src/components/SingleProject.vue
+++ b/src/components/SingleProject.vue
@@ -0,0 +1,24 @@
+<template>
+	<div class="container mx-auto px-4">
+		<p>Single Project</p>
+	</div>
+</template>
+
+<script>

+import feather from 'feather-icons';
+
+export default {
+	name: 'Single Project',
+	props: {
+		msg: String,
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+};
+</script>
+
+<style scoped>
</style>
diff --git a/src/router/index.js b/src/router/index.js
index 0a087321..b779d11b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,45 +1,63 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../components/Home.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from '../components/Home.vue';
 
 const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    meta: {
-      title: 'Home'
-    }
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../components/About.vue'),
-    meta: {
-      title: 'About'
-    }
-  },
-  {
-    path: '/projects',
-    name: 'Projects',
-    // route level code-splitting
-    // this generates a separate chunk (projects.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "projects" */ '../components/Projects.vue'),
-    meta: {
-      title: 'Projects'
-    }
-  }
-]
+	{
+		path: '/',
+		name: 'Home',
+		component: Home,
+		meta: {
+			title: 'Home',
+		},
+	},
+	{
+		path: '/about',
+		name: 'About',
+		// route level code-splitting
+		// this generates a separate chunk (about.[hash].js) for this route
+		// which is lazy-loaded when the route is visited.
+		component: () =>
+			import(/* webpackChunkName: "about" */ '../components/About.vue'),
+		meta: {
+			title: 'About',
+		},
+	},
+	{
+		path: '/projects',
+		name: 'Projects',
+		// route level code-splitting
+		// this generates a separate chunk (projects.[hash].js) for this route
+		// which is lazy-loaded when the route is visited.
+		component: () =>
+			import(
+				/* webpackChunkName: "projects" */ '../components/Projects.vue'
+			),
+		meta: {
+			title: 'Projects',
+		},
+	},
+	{
+		path: '/projects/single-project',
+		name: 'Single Project',
+		// route level code-splitting
+		// this generates a separate chunk (projects.[hash].js) for this route
+		// which is lazy-loaded when the route is visited.
+		component: () =>
+			import(
+				/* webpackChunkName: "projects" */ '../components/SingleProject.vue'
+			),
+		meta: {
+			title: 'Single Project',
+		},
+	},
+];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes
-})
+	history: createWebHistory(process.env.BASE_URL),
+	routes,
+});
 
-export default router
+export default router;
 
 /**
  * Below code will display the component/active page title
@@ -48,44 +66,56 @@ export default router
 
 // This callback runs before every route change, including on page load.
 router.beforeEach((to, from, next) => {
-  // This goes through the matched routes from last to first, finding the closest route with a title.
-  // e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
-  // `/nested`'s will be chosen.
-  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+	// This goes through the matched routes from last to first, finding the closest route with a title.
+	// e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
+	// `/nested`'s will be chosen.
+	const nearestWithTitle = to.matched
+		.slice()
+		.reverse()
+		.find((r) => r.meta && r.meta.title);
 
-  // Find the nearest route element with meta tags.
-  const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+	// Find the nearest route element with meta tags.
+	const nearestWithMeta = to.matched
+		.slice()
+		.reverse()
+		.find((r) => r.meta && r.meta.metaTags);
 
-  const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+	const previousNearestWithMeta = from.matched
+		.slice()
+		.reverse()
+		.find((r) => r.meta && r.meta.metaTags);
 
-  // If a route with a title was found, set the document (page) title to that value.
-  if(nearestWithTitle) {
-    document.title = nearestWithTitle.meta.title;
-  } else if(previousNearestWithMeta) {
-    document.title = previousNearestWithMeta.meta.title;
-  }
+	// If a route with a title was found, set the document (page) title to that value.
+	if (nearestWithTitle) {
+		document.title = nearestWithTitle.meta.title;
+	} else if (previousNearestWithMeta) {
+		document.title = previousNearestWithMeta.meta.title;
+	}
 
-  // Remove any stale meta tags from the document using the key attribute we set below.
-  Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
+	// Remove any stale meta tags from the document using the key attribute we set below.
+	Array.from(
+		document.querySelectorAll('[data-vue-router-controlled]')
+	).map((el) => el.parentNode.removeChild(el));
 
-  // Skip rendering meta tags if there are none.
-  if(!nearestWithMeta) return next();
+	// Skip rendering meta tags if there are none.
+	if (!nearestWithMeta) return next();
 
-  // Turn the meta tag definitions into actual elements in the head.
-  nearestWithMeta.meta.metaTags.map(tagDef => {
-    const tag = document.createElement('meta');
+	// Turn the meta tag definitions into actual elements in the head.
+	nearestWithMeta.meta.metaTags
+		.map((tagDef) => {
+			const tag = document.createElement('meta');
 
-    Object.keys(tagDef).forEach(key => {
-      tag.setAttribute(key, tagDef[key]);
-    });
+			Object.keys(tagDef).forEach((key) => {
+				tag.setAttribute(key, tagDef[key]);
+			});
 
-    // We use this to track which meta tags we create so we don't interfere with other ones.
-    tag.setAttribute('data-vue-router-controlled', '');
+			// We use this to track which meta tags we create so we don't interfere with other ones.
+			tag.setAttribute('data-vue-router-controlled', '');
 
-    return tag;
-  })
-  // Add the meta tags to the document head.
-  .forEach(tag => document.head.appendChild(tag));
+			return tag;
+		})
+		// Add the meta tags to the document head.
+		.forEach((tag) => document.head.appendChild(tag));
 
-  next();
+	next();
 });

From d63d999c9670aab6c8a1b1b346df77cab5110154 Mon Sep 17 00:00:00 2001
From: nstoman <nangialaistoman7@gmail.com>
Date: Wed, 14 Jul 2021 17:28:54 +0430
Subject: [PATCH 11/11] Projects page cards

---
 src/components/Home.vue     |  36 ++++-----
 src/components/Projects.vue | 142 +++++++++++++++++++++++++++++++++++-
 2 files changed, 159 insertions(+), 19 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 74e51c41..a08ea0d3 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -46,8 +46,8 @@
 			</div>
 
 			<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
-				<a - href="#" +><router-link + to="/projects/single-project" class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
@@ -65,9 +65,9 @@
 							>Wen Application</span>
 					</div>
-				</a>
-				<a - href="#" +></router-link>
+				<router-link + to="/projects/single-project" class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
@@ -85,9 +85,9 @@
 							>Mobile Application</span>
 					</div>
-				</a>
-				<a - href="#" +></router-link>
+				<router-link + to="/projects/single-project" class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
@@ -103,9 +103,9 @@
 						</p>
 						<span class="text-lg text-gray-500">UI / Frontend</span>
 					</div>
-				</a>
-				<a - href="#" +></router-link>
+				<router-link + to="/projects/single-project" class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
@@ -121,9 +121,9 @@
 						</p>
 						<span class="text-lg text-gray-500">UI / Frontend</span>
 					</div>
-				</a>
-				<a - href="#" +></router-link>
+				<router-link + to="/projects/single-project" class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
@@ -141,9 +141,9 @@
 							>Mobile Application</span>
 					</div>
-				</a>
-				<a - href="#" +></router-link>
+				<router-link + to="/projects/single-project" class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0">
 					<div>
@@ -161,7 +161,7 @@
 							>Web Application</span>
 					</div>
-				</a>
+				</router-link>
 			</div>
 			<div class="mt-10 sm:mt-20 flex justify-center">
 				<button diff --git a/src/components/Projects.vue b/src/components/Projects.vue index bc6015af..2ff97b3b 100644 - a/src/components/Projects.vue + b/src/components/Projects.vue @ -1,6 +1,146 @><template>
 	<div class="container mx-auto px-4">
-		<p>Projects Page</p>
+		<!-- Home Poject Section Start -->
+		<section class="pt-12 sm:pt-20">
+			<div class="text-center">
+				<p + class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600" +>
+					Projects Portfolio
+				</p>
+				<p class="text-md sm:text-xl text-gray-500">
+					Some of the projects I have successfully completed
+				</p>
+			</div>
+
+			<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
+				<router-link + to="/projects/single-project" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0" +>
+					<div>
+						<img + src="../assets/images/web-project-2.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
+					</div>
+					<div class="text-center px-4 py-4">
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							King Health Platform
+						</p>
+						<span class="text-lg text-gray-500" +>Wen Application</span +>
+					</div>
+				</router-link>
+				<router-link + to="/projects/single-project" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0" +>
+					<div>
+						<img + src="../assets/images/mobile-project-2.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
+					</div>
+					<div class="text-center px-4 py-4">
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Pheonix Digital Agenncy
+						</p>
+						<span class="text-lg text-gray-500" +>Mobile Application</span +>
+					</div>
+				</router-link>
+				<router-link + to="/projects/single-project" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0" +>
+					<div>
+						<img + src="../assets/images/ui-project-1.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
+					</div>
+					<div class="text-center px-4 py-4">
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Project Management UI
+						</p>
+						<span class="text-lg text-gray-500">UI / Frontend</span>
+					</div>
+				</router-link>
+				<router-link + to="/projects/single-project" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0" +>
+					<div>
+						<img + src="../assets/images/ui-project-2.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
+					</div>
+					<div class="text-center px-4 py-4">
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Cloud Storage Platform
+						</p>
+						<span class="text-lg text-gray-500">UI / Frontend</span>
+					</div>
+				</router-link>
+				<router-link + to="/projects/single-project" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0" +>
+					<div>
+						<img + src="../assets/images/mobile-project-1.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
+					</div>
+					<div class="text-center px-4 py-4">
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Kabul Social App
+						</p>
+						<span class="text-lg text-gray-500" +>Mobile Application</span +>
+					</div>
+				</router-link>
+				<router-link + to="/projects/single-project" + class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0" +>
+					<div>
+						<img + src="../assets/images/web-project-1.jpg,_ANDesc=img," + alt="" + class="rounded-t-3xl border-none" + />
+					</div>
+					<div class="text-center px-4 py-4">
+						<p class="text-2xl text-gray-600 font-semibold mb-3">
+							Apple Design System
+						</p>
+						<span class="text-lg text-gray-500" +>Web Application</span +>
+					</div>
+				</router-link>
+			</div>
+			<div class="mt-10 sm:mt-20 flex justify-center">
+				<button + 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" +>
+					<i data-feather="refresh-cw" class="w-5 mr-3"></i>
+					<span>Load More</span>
+				</button>
+			</div>
+		</section>
+		<!-- Home Poject Section End -->
 	</div>
 </template>
 
