Merge pull request realstoman#10 from NangialaiStoman/ifix-home-illustration

Add developer illustration and more ui changes

Author: realstoman

README.md

@@ -28,6 +28,8 @@ A simple portfolio starter theme built on the top of Vue.js V3 and TailwindCSS V
 
 -   The dark mode is highly inspired by [Gridsome Portfolio Starter by Andre Madarang](https://github.com/drehimself/gridsome-portfolio-starter). Since that project is based on Gridsome, I wanted to create a Vue.js and TailwindCSS portfolio with dark mode
 -   Coming Soon [I'll be doing a screencast](https://www.youtube.com/c/StomanStudio). Soon I'll be uploading a video to my YouTube channel where I'll be going through the process of creating this portoflio
--   Illustrations from [unDraw](https://undraw.co)
+-   Illustrations from [unDraw](https://undraw.co) and [Freepik](https://freepik.com)
 -   Images from [Unsplash](https://unsplash.com)
+-   I'll be constantly updating this repo as I'll be adding more sections to it
+-   Feel free to use it as your own portfolio
 -   Contributions are welcome

src/assets/images/Screen Shot 2021-07-18 at 11.15.24 AM.png

@@ -1,7 +1,7 @@
 <template>
 	<!-- Banner start -->
 	<section
-		class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-20"
+		class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-2"
 	>
 		<div class="w-full sm:w-1/3 text-left">
 			<h1
@@ -28,7 +28,16 @@
 			</div>
 		</div>
 		<div class="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
-			<img src="@/assets/images/dev.svg" alt="Developer" />
+			<img
+				v-if="theme === 'light'"
+				src="@/assets/images/developer.svg"
+				alt="Developer"
+			/>
+			<img
+				else
+				src="@/assets/images/developer-dark.svg"
+				alt="Developer"
+			/>
 		</div>
 	</section>
 	<!-- Banner end -->
@@ -39,11 +48,10 @@ import feather from 'feather-icons';
 
 export default {
 	name: 'Home',
-	props: {
-		msg: String,
-	},
 	data: () => {
-		return {};
+		return {
+			theme: localStorage.getItem('theme'),
+		};
 	},
 	mounted() {
 		feather.replace();

src/assets/images/Screen Shot 2021-07-18 at 11.17.07 AM.png

@@ -169,9 +169,6 @@ import feather from 'feather-icons';
 
 export default {
 	name: 'Projects',
-	props: {
-		msg: String,
-	},
 	mounted() {
 		feather.replace();
 	},

src/assets/images/developer-dark.svg

@@ -31,9 +31,6 @@ export default {
 		AboutCounter,
 		Clients,
 	},
-	props: {
-		msg: String,
-	},
 	data: () => {
 		return {};
 	},

src/assets/images/developer.svg

@@ -21,9 +21,6 @@ export default {
 		Banner,
 		ProjectsGrid,
 	},
-	props: {
-		msg: String,
-	},
 	data: () => {
 		return {};
 	},

src/components/home/Banner.vue

@@ -15,9 +15,6 @@ export default {
 	components: {
 		ProjectsGrid,
 	},
-	props: {
-		msg: String,
-	},
 	data: () => {
 		return {};
 	},

src/components/project/ProjectsGrid.vue

@@ -35,9 +35,6 @@ export default {
 		SingleProjectInfo,
 		SingleProjectRelatedProjects,
 	},
-	props: {
-		msg: String,
-	},
 	data: () => {
 		return {};
 	},

src/views/About.vue

@@ -1,10 +1,13 @@
 const colors = require('tailwindcss/colors');
 
 module.exports = {
-	// purge: [
-	// 	'./storage/framework/views/*.php',
-	// 	'./resources/views/**/*.blade.php',
-	// ],
+	purge: [
+		'./src/**/*.vue',
+		'./src/**/*.js',
+		'./src/**/*.jsx',
+		'./src/**/*.html',
+		'./src/**/*.md',
+	],
 	darkMode: 'class',
 	theme: {
 		extend: {