Refactoring

src/App.vue

@@ -25,8 +25,8 @@
 
 <script>
 import feather from 'feather-icons';
-import AppHeader from './components/AppHeader';
-import AppFooter from './components/AppFooter';
+import AppHeader from './components/shared/AppHeader';
+import AppFooter from './components/shared/AppFooter';
 
 export default {
 	components: {

src/components/ProjectsFilter.vue → src/components/projects/ProjectsFilter.vue

@@ -40,6 +40,7 @@ export default {
 		select: {
 			type: String,
 			default: 'projects',
+			required: true,
 		},
 		selectOptions: {
 			type: Array,

src/components/ProjectsGrid.vue → src/components/projects/ProjectsGrid.vue

@@ -4,18 +4,14 @@
 		<!-- Projects grid title -->
 		<div class="text-center">
 			<p
-				class="text-2xl sm:text-5xl font-semibold mb-3 text-ternary-dark dark:text-ternary-light"
+				class="text-2xl sm:text-5xl font-semibold mb-2 text-ternary-dark dark:text-ternary-light"
 			>
 				{{ projectsHeading }}
 			</p>
-			<!-- Note: This description is commented, if you want to, you can uncomment this -->
-			<!-- <p class="text-md sm:text-xl text-gray-500 dark:text-ternary-light">
-				{{ projectsDescription }}
-			</p> -->
 		</div>
 
 		<!-- Filter and search projects -->
-		<div class="mt-10 sm:mt-16">
+		<div class="mt-10 sm:mt-10">
 			<h3
 				class="
 					text-center text-secondary-dark
@@ -102,54 +98,16 @@
 import feather from 'feather-icons';
 import ProjectsFilter from './ProjectsFilter.vue';
 import ProjectSingle from './ProjectSingle.vue';
+import projects from '../../data/projects';
 
 export default {
 	components: { ProjectSingle, ProjectsFilter },
 	data: () => {
 		return {
+			projects,
 			projectsHeading: 'Projects Portfolio',
-			projectsDescription:
-				'Some of the projects I have successfully completed',
 			selectedProject: '',
 			searchProject: '',
-			projects: [
-				{
-					id: 1,
-					title: 'Google Health Platform',
-					category: 'Web Application',
-					img: require('@/assets/images/web-project-2.jpg'),
-				},
-				{
-					id: 2,
-					title: 'Phoenix Digital Agency',
-					category: 'Mobile Application',
-					img: require('@/assets/images/mobile-project-2.jpg'),
-				},
-				{
-					id: 3,
-					title: 'Project Management UI',
-					category: 'UI/UX Design',
-					img: require('@/assets/images/ui-project-1.jpg'),
-				},
-				{
-					id: 4,
-					title: 'Cloud Storage Platform',
-					category: 'UI/UX Design',
-					img: require('@/assets/images/ui-project-2.jpg'),
-				},
-				{
-					id: 5,
-					title: 'React Social App',
-					category: 'Mobile Application',
-					img: require('@/assets/images/mobile-project-1.jpg'),
-				},
-				{
-					id: 6,
-					title: 'Apple Design System',
-					category: 'Web Application',
-					img: require('@/assets/images/web-project-1.jpg'),
-				},
-			],
 		};
 	},
 	computed: {
@@ -166,10 +124,11 @@ export default {
 	methods: {
 		// Filter projects by category
 		filterProjectsByCategory() {
-			return this.projects.filter((item) => {
+			return this.projects.map((item) => {
 				let category =
 					item.category.charAt(0).toUpperCase() +
 					item.category.slice(1);
+				console.log(category);
 				return category.includes(this.selectedProject);
 			});
 		},

src/components/AppHeader.vue → src/components/shared/AppHeader.vue

@@ -98,8 +98,8 @@
 </template>
 
 <script>
-import ThemeSwitcher from './ThemeSwitcher';
-import HireMeModal from './HireMeModal.vue';
+import ThemeSwitcher from '../ThemeSwitcher';
+import HireMeModal from '../HireMeModal.vue';
 import feather from 'feather-icons';
 import AppHeaderLinks from './AppHeaderLinks.vue';
 

src/data/projects.js

@@ -0,0 +1,40 @@
+const projects = [
+	{
+		id: 1,
+		title: 'Google Health Platform',
+		category: 'Web Application',
+		img: require('@/assets/images/web-project-2.jpg'),
+	},
+	{
+		id: 2,
+		title: 'Phoenix Digital Agency',
+		category: 'Mobile Application',
+		img: require('@/assets/images/mobile-project-2.jpg'),
+	},
+	{
+		id: 3,
+		title: 'Project Management UI',
+		category: 'UI/UX Design',
+		img: require('@/assets/images/ui-project-1.jpg'),
+	},
+	{
+		id: 4,
+		title: 'Cloud Storage Platform',
+		category: 'UI/UX Design',
+		img: require('@/assets/images/ui-project-2.jpg'),
+	},
+	{
+		id: 5,
+		title: 'React Social App',
+		category: 'Mobile Application',
+		img: require('@/assets/images/mobile-project-1.jpg'),
+	},
+	{
+		id: 6,
+		title: 'Apple Design System',
+		category: 'Web Application',
+		img: require('@/assets/images/web-project-1.jpg'),
+	},
+];
+
+export default projects;

src/views/About.vue

@@ -16,9 +16,9 @@
 </template>
 
 <script>
-import AboutMe from '@/components/AboutMe';
-import AboutCounter from '@/components/AboutCounter';
-import AboutClients from '@/components/AboutClients';
+import AboutMe from '@/components/about/AboutMe';
+import AboutCounter from '@/components/about/AboutCounter';
+import AboutClients from '@/components/about/AboutClients';
 import feather from 'feather-icons';
 
 export default {

src/views/Contact.vue

@@ -12,8 +12,8 @@
 
 <script>
 import feather from 'feather-icons';
-import ContactForm from '@/components/ContactForm.vue';
-import ContactDetails from '@/components/ContactDetails.vue';
+import ContactForm from '@/components/contact/ContactForm.vue';
+import ContactDetails from '@/components/contact/ContactDetails.vue';
 
 export default {
 	components: {

src/views/Home.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import AppBanner from '@/components/AppBanner';
-import ProjectsGrid from '../components/ProjectsGrid.vue';
+import AppBanner from '@/components/shared/AppBanner';
+import ProjectsGrid from '../components/projects/ProjectsGrid.vue';
 
 export default {
 	name: 'Home',

src/views/Projects.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import ProjectsGrid from '../components/ProjectsGrid.vue';
+import ProjectsGrid from '../components/projects/ProjectsGrid.vue';
 
 export default {
 	name: 'Projects',

src/views/SingleProject.vue

@@ -16,10 +16,10 @@
 
 <script>
 import feather from 'feather-icons';
-import ProjectHeader from '../components/ProjectHeader.vue';
-import ProjectGallery from '../components/ProjectGallery.vue';
-import ProjectInfo from '../components/ProjectInfo.vue';
-import ProjectRelatedProjects from '../components/ProjectRelatedProjects.vue';
+import ProjectHeader from '../components/projects/ProjectHeader.vue';
+import ProjectGallery from '../components/projects/ProjectGallery.vue';
+import ProjectInfo from '../components/projects/ProjectInfo.vue';
+import ProjectRelatedProjects from '../components/projects/ProjectRelatedProjects.vue';
 
 export default {
 	name: 'Projects',