Projects grid and design touches

src/assets/css/app.css

@@ -1,8 +1,16 @@
 /*== 
- * Vuejs & TailwindCSS Portfolio Main Styling CSS File
+ * Vuejs & TailwindCSS Portfolio Main CSS File
  * Powered by: @NangialaiStoman
 */
 
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
+
+/* Custom Styles Below */
+
 body {
 	font-family: 'Poppins', sans-serif !important;
 }
@@ -14,3 +22,5 @@ h4 {
 	font-family: 'Poppins', sans-serif !important;
 	font-weight: 500 !important;
 }
+
+/* Theme Colors */

src/components/AboutClientSingle.vue

@@ -3,7 +3,7 @@
 		<img
 			:src="client.img"
 			:alt="client.title"
-			class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
+			class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer dark:bg-secondary-light"
 		/>
 	</div>
 </template>

src/components/AppHeader.vue

@@ -4,7 +4,7 @@
 		<div
 			class="z-10 max-w-screen-lg xl:max-w-screen-xl block sm:flex sm:justify-between sm:items-center my-6"
 		>
-			<!-- Header menu links and small screen humberger menu start -->
+			<!-- Header menu links and small screen hamburger menu start -->
 			<div class="flex justify-between items-center px-4 sm:px-0">
 				<!-- Header logos start -->
 				<div>
@@ -33,13 +33,13 @@
 				/>
 				<!-- Theme switcher small screen end -->
 
-				<!-- Small screen humberger menu start -->
+				<!-- Small screen hamburger menu start -->
 				<div class="sm:hidden">
 					<button
 						@click="isOpen = !isOpen"
-						type="buttom"
+						type="button"
 						class="focus:outline-none"
-						aria-label="Humberger Menu"
+						aria-label="Hamburger Menu"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -60,9 +60,9 @@
 						</svg>
 					</button>
 				</div>
-				<!-- Small screen humberger menu end -->
+				<!-- Small screen hamburger menu end -->
 			</div>
-			<!-- Header menu links and small screen humberger menu end -->
+			<!-- Header menu links and small screen hamburger menu end -->
 
 			<!-- Header links start -->
 			<div
@@ -117,15 +117,15 @@
 				</div>
 				<!-- Hire me button end -->
 
-				<!-- Theme switcher largr screen start -->
+				<!-- Theme switcher large screen start -->
 				<theme-switcher
 					:theme="theme"
 					@themeChanged="updateTheme"
 					class="ml-8 bg-primary-light dark:bg-ternary-dark px-3 py-2 shadow-sm rounded-xl cursor-pointer"
 				/>
-				<!-- Theme switcher largr screen end -->
+				<!-- Theme switcher large screen end -->
 			</div>
-			<!-- Header right section buttons stendart -->
+			<!-- Header right section buttons end -->
 		</div>
 		<!-- Header end -->
 
@@ -164,7 +164,7 @@ export default {
 				{
 					id: 2,
 					value: 'mobile',
-					name: 'Mobile Applicaiton',
+					name: 'Mobile Application',
 				},
 				{
 					id: 3,

src/components/ProjectsFilter.vue

@@ -5,20 +5,20 @@
 			:name="select"
 			:id="select"
 			class="
-        px-4
-        sm:px-6
-        py-2
-        border-1 border-gray-200
-        dark:border-secondary-dark
-        rounded-lg
-        text-sm
-        sm:text-md
-        dark:font-medium
-        bg-secondary-light
-        dark:bg-ternary-dark
-        text-primary-dark
-        dark:text-ternary-light
-    "
+				px-4
+				sm:px-6
+				py-2
+				border-1 border-gray-200
+				dark:border-secondary-dark
+				rounded-lg
+				text-sm
+				sm:text-md
+				dark:font-medium
+				bg-secondary-light
+				dark:bg-ternary-dark
+				text-primary-dark
+				dark:text-ternary-light
+			"
 		>
 			<option value class="text-sm sm:text-md">All Projects</option>
 			<option
@@ -46,7 +46,7 @@ export default {
 				'Web Application',
 				'Mobile Application',
 				'UI/UX Design',
-				'Branding',
+				'Branding & Animations',
 			],
 		},
 	},

src/components/ProjectsGrid.vue

@@ -59,20 +59,20 @@
 					<input
 						v-model="searchProject"
 						class="
-              pl-3
-              pr-1
-              sm:px-4
-              py-2
-              border-1 border-gray-200
-              dark:border-secondary-dark
-              rounded-lg
-              text-sm
-              sm:text-md
-              bg-secondary-light
-              dark:bg-ternary-dark
-              text-primary-dark
-              dark:text-ternary-light
-            "
+						pl-3
+						pr-1
+						sm:px-4
+						py-2
+						border-1 border-gray-200
+						dark:border-secondary-dark
+						rounded-lg
+						text-sm
+						sm:text-md
+						bg-secondary-light
+						dark:bg-ternary-dark
+						text-primary-dark
+						dark:text-ternary-light
+						"
 						id="name"
 						name="name"
 						type="search"
@@ -122,7 +122,7 @@ export default {
 				},
 				{
 					id: 2,
-					title: 'Pheonix Digital Agenncy',
+					title: 'Phoenix Digital Agency',
 					category: 'Mobile Application',
 					img: require('@/assets/images/mobile-project-2.jpg'),
 				},
@@ -151,10 +151,10 @@ export default {
 					img: require('@/assets/images/web-project-1.jpg'),
 				},
 			],
-			// publicPath: process.env.BASE_URL,
 		};
 	},
 	computed: {
+		// Get the filtered projects
 		filteredProjects() {
 			if (this.selectedProject) {
 				return this.filterProjectsByCategory();
@@ -165,6 +165,7 @@ export default {
 		},
 	},
 	methods: {
+		// Filter projects by category
 		filterProjectsByCategory() {
 			return this.projects.filter((item) => {
 				let category =
@@ -173,6 +174,7 @@ export default {
 				return category.includes(this.selectedProject);
 			});
 		},
+		// Filter projects by title search
 		filterProjectsBySearch() {
 			let project = new RegExp(this.searchProject, 'i');
 			return this.projects.filter((el) => el.title.match(project));

src/components/ThemeSwitcher.vue

@@ -1,5 +1,5 @@
 <template>
-	<a href="#" @click="toggleTheme" aria-label="Theme Switcher">
+	<a href="#" @click.prevent="toggleTheme" aria-label="Theme Switcher">
 		<i
 			v-if="theme === 'light'"
 			data-feather="moon"

src/main.js

@@ -1,7 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
-import './assets/css/tailwind.css';
 import './assets/css/app.css';
 import BackToTop from 'vue-backtotop';