Best Practices Applied

README.md

@@ -28,8 +28,12 @@ A simple portfolio starter theme built with Vue.js v3 and TailwindCSS v2. This i
 
 1. ##### Make sure you have Node JS installed. If you don't have it:
 
+-   [Download it from nodejs.org](https://nodejs.org)
+-   [Install it using NVM ](https://github.com/nvm-sh/nvm)
+-   If you're on Mac, install it with Homebrew:
+
 ```
-npm install -g npm
+brew install node
 ```
 
 2. ##### Clone the repo:

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="appTheme" class="pt-0.5">
 		<!-- App header -->
-		<Header></Header>
+		<AppHeader />
 
 		<!-- Render active component contents with transition -->
 		<transition name="fade" mode="out-in">
@@ -18,19 +18,19 @@
 		</back-to-top>
 
 		<!-- App footer -->
-		<Footer></Footer>
+		<AppFooter />
 	</div>
 </template>
 
 <script>
 import feather from 'feather-icons';
-import Header from './components/shared/Header';
-import Footer from './components/shared/Footer';
+import AppHeader from './components/AppHeader';
+import AppFooter from './components/AppFooter';
 
 export default {
 	components: {
-		Header,
-		Footer,
+		AppHeader,
+		AppFooter,
 	},
 	data: () => {
 		return {

src/components/AboutClientSingle.vue

@@ -0,0 +1,17 @@
+<template>
+	<div>
+		<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"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ['client'],
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/AboutClients.vue

@@ -0,0 +1,73 @@
+<template>
+	<div class="mt-10 sm:mt-20">
+		<p
+			class="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold"
+		>
+			{{ clientsHeading }}
+		</p>
+		<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
+			<AboutClientSingle
+				v-for="client in clients"
+				:key="client.id"
+				:client="client"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import AboutClientSingle from './AboutClientSingle.vue';
+
+export default {
+	components: {
+		AboutClientSingle,
+	},
+	data: () => {
+		return {
+			clientsHeading: 'Some of the brands I worked with',
+			clients: [
+				{
+					id: 1,
+					title: 'Amazon',
+					img: require('@/assets/images/brands/amazon_gray.png'),
+				},
+				{
+					id: 2,
+					title: 'Sony',
+					img: require('@/assets/images/brands/sony_gray.png'),
+				},
+				{
+					id: 3,
+					title: 'Adidas',
+					img: require('@/assets/images/brands/adidas_gray.png'),
+				},
+				{
+					id: 4,
+					title: 'FILA',
+					img: require('@/assets/images/brands/fila_gray.png'),
+				},
+				{
+					id: 5,
+					title: 'NB',
+					img: require('@/assets/images/brands/nb_gray.png'),
+				},
+				{
+					id: 6,
+					title: 'SAMSUNG',
+					img: require('@/assets/images/brands/samsung_gray.png'),
+				},
+				{
+					id: 7,
+					title: 'CANON',
+					img: require('@/assets/images/brands/canon_gray.png'),
+				},
+				{
+					id: 7,
+					title: 'PUMA',
+					img: require('@/assets/images/brands/puma_gray.png'),
+				},
+			],
+		};
+	},
+};
+</script>

src/components/about/AboutMe.vue → src/components/AboutMe.vue

@@ -3,7 +3,7 @@
 		<!-- About me portfolio image start -->
 		<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
 			<img
-				src="../../assets/images/profile.jpeg"
+				src="@/assets/images/profile.jpeg"
 				class="rounded-xl w-96"
 				alt=""
 			/>

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

@@ -11,13 +11,13 @@
 					<router-link to="/"
 						><img
 							v-if="theme === 'light'"
-							src="../../assets/images/logo-dark.svg"
+							src="@/assets/images/logo-dark.svg"
 							class="w-36"
 							alt="Dark Logo"
 						/>
 						<img
 							v-else
-							src="../../assets/images/logo-light.svg"
+							src="@/assets/images/logo-light.svg"
 							class="w-36"
 							alt="Light Logo"
 						/>
@@ -130,136 +130,25 @@
 		<!-- Header end -->
 
 		<!-- Hire me modal start -->
-		<transition name="fade">
-			<div v-show="modal" class="fixed inset-0 z-30">
-				<!-- background -->
-				<div
-					v-show="modal"
-					@click="showModal()"
-					class="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"
-				></div>
-				<!--          -->
-				<main
-					class="flex flex-col items-center justify-center h-full w-full"
-				>
-					<transition name="fade-up-down">
-						<div
-							v-show="modal"
-							class="modal-wrapper flex items-center z-30"
-						>
-							<div
-								class="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-xl relative"
-							>
-								<div
-									class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
-								>
-									<h5
-										class=" text-primary-dark dark:text-primary-light text-2xl"
-									>
-										What project are you looking for?
-									</h5>
-									<button
-										class="px-4 font-bold text-primary-dark dark:text-primary-light"
-										@click="showModal()"
-									>
-										X
-									</button>
-								</div>
-								<div
-									class="modal-body p-5 w-full h-full overflow-y-auto "
-								>
-									<form class="max-w-xl m-4 text-left">
-										<div class="">
-											<input
-												class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-												id="name"
-												name="name"
-												type="text"
-												required=""
-												placeholder="Name"
-												aria-label="Name"
-											/>
-										</div>
-										<div class="mt-6">
-											<input
-												class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-												id="email"
-												name="email"
-												type="text"
-												required=""
-												placeholder="Email"
-												aria-label="Email"
-											/>
-										</div>
-										<div class="mt-6">
-											<select
-												class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-												id="subject"
-												name="subject"
-												type="text"
-												required=""
-												aria-label="Project Category"
-											>
-												<option
-													v-for="category in categories"
-													:key="category.id"
-													:value="category.value"
-													>{{ category.name }}</option
-												>
-											</select>
-										</div>
-
-										<div class="mt-6">
-											<textarea
-												class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-												id="message"
-												name="message"
-												cols="14"
-												rows="6"
-												aria-label="Details"
-												placeholder="Project description"
-											></textarea>
-										</div>
-
-										<div class="mt-6">
-											<button
-												class="px-6 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-1 focus:ring-indigo-900"
-												type="submit"
-												aria-label="Submit Request"
-											>
-												Send Request
-											</button>
-										</div>
-									</form>
-								</div>
-								<div
-									class="modal-footer py-3 px-5 border0-t text-right"
-								>
-									<button
-										class="px-6 py-2 bg-indigo-400 hover:bg-indigo-500 rounded-lg font-bold text-primary-light focus:ring-1 focus:ring-indigo-900"
-										@click="showModal()"
-										aria-label="Close Modal"
-									>
-										Close
-									</button>
-								</div>
-							</div>
-						</div>
-					</transition>
-				</main>
-			</div>
-		</transition>
+		<HireMeModal
+			:showModal="showModal"
+			:modal="modal"
+			:categories="categories"
+			aria-modal="Hire Me Modal"
+		/>
 		<!-- Hire me modal end -->
 	</nav>
 </template>
 
 <script>
-import ThemeSwitcher from '../ThemeSwitcher';
+import ThemeSwitcher from './ThemeSwitcher';
+import HireMeModal from './HireMeModal.vue';
 import feather from 'feather-icons';
 
 export default {
 	components: {
 		ThemeSwitcher,
+		HireMeModal,
 	},
 	data() {
 		return {
@@ -329,43 +218,4 @@ export default {
 	@apply dark:text-indigo-400;
 	@apply font-medium;
 }
-
-.modal-body {
-	max-height: 500px;
-}
-.bg-gray-800-opacity {
-	background-color: #2d374850;
-}
-@media screen and (max-width: 768px) {
-	.modal-body {
-		max-height: 400px;
-	}
-}
-.fade-up-down-enter-active {
-	transition: all 0.3s ease;
-}
-.fade-up-down-leave-active {
-	transition: all 0.3s ease;
-}
-.fade-up-down-enter {
-	transform: translateY(10%);
-	opacity: 0;
-}
-.fade-up-down-leave-to {
-	transform: translateY(10%);
-	opacity: 0;
-}
-
-.fade-enter-active {
-	-webkit-transition: opacity 2s;
-	transition: opacity 0.3s;
-}
-.fade-leave-active {
-	transition: opacity 0.3s;
-}
-
-.fade-enter,
-.fade-leave-to {
-	opacity: 0;
-}
 </style>

src/components/ContactDetails.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="w-full sm:w-1/2">
+		<div class="text-left max-w-xl px-6">
+			<h2
+				class="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8"
+			>
+				Contact details
+			</h2>
+			<ul class="">
+				<li class="flex" v-for="contact in contacts" :key="contact.id">
+					<i
+						:data-feather="contact.icon"
+						class="w-5 text-gray-500 dark:text-gray-400 mr-4"
+					></i>
+					<a
+						href="#"
+						class="text-lg mb-4 text-ternary-dark dark:text-ternary-light"
+						:class="
+							contact.icon === 'mail' || contact.icon === 'phone'
+								? 'hover:underline cursor-pointer'
+								: ''
+						"
+						aria-label="Website and Phone"
+					>
+						{{ contact.name }}
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ['contacts'],
+};
+</script>
+
+<style lang="scss" scoped></style>