Merge pull request realstoman#21 from NangialaiStoman/ui-and-features

UI updates and best practices

Author: realstoman

README.md

@@ -1,6 +1,6 @@
 # Vuejs & TailwindCSS Portfolio - With Dark Mode
 
-A simple portfolio starter theme built with Vue.js v3 and TailwindCSS v2. This is a simple portfolio theme and its geared towards beginners. For sure there's room for improvements and if there's anything missing or to be corrected or you have a better idea for it, please fork this repo and make a PR.
+A simple portfolio starter theme built with Vue.js v3 and TailwindCSS v2. This is a simple portfolio theme and its geared towards beginners. If there's anything missing or to be corrected or you have a better idea for it, please fork this repo and make a PR.
 
 ![Vuejs-TailwindCSS-Portfolio](https://user-images.githubusercontent.com/16396664/140909796-815239e4-a986-46ad-bbd0-4b166127bbb8.JPG)
 
@@ -31,7 +31,7 @@ A simple portfolio starter theme built with Vue.js v3 and TailwindCSS v2. This i
 
 -   [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:
+-   If you're on Mac, Homebrew is a good option too:
 
 ```
 brew install node

src/App.vue

@@ -8,13 +8,14 @@
 			<router-view :theme="appTheme" />
 		</transition>
 
+		<!-- Scroll to top -->
 		<back-to-top
 			visibleoffset="500"
-			right="40px"
-			bottom="40px"
+			right="30px"
+			bottom="20px"
 			class="shadow-lg"
 		>
-			<i data-feather="arrow-up"></i>
+			<i data-feather="chevron-up"></i>
 		</back-to-top>
 
 		<!-- App footer -->
@@ -55,7 +56,11 @@ export default {
 }
 
 .vue-back-to-top {
-	@apply p-2 sm:p-4 bg-indigo-500 hover:bg-indigo-600 text-white;
+	@apply p-2 bg-indigo-500 hover:bg-indigo-600 text-white transition
+        duration-500
+        ease-in-out
+        transform
+        hover:-translate-y-1 hover:scale-110;
 	border-radius: 50%;
 	font-size: 22px;
 	line-height: 22px;

src/components/AboutClientSingle.vue

@@ -1,9 +1,10 @@
 <template>
+	<!-- Client single image -->
 	<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 dark:bg-secondary-light"
+			class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-lg mb-8 cursor-pointer dark:bg-secondary-light"
 		/>
 	</div>
 </template>

src/components/AboutClients.vue

@@ -1,4 +1,5 @@
 <template>
+	<!-- About page clients section -->
 	<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"

src/components/AboutCounter.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
-		<!-- About me counters start -->
+		<!-- About me counters -->
 		<div
 			class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
 		>
-			<!-- About me single counter start -->
+			<!-- About me single counter -->
 			<div class="mb-20 sm:mb-0">
 				<counter
 					ref="counter"
@@ -21,9 +21,8 @@
 					>Years of experience</span
 				>
 			</div>
-			<!-- About me single counter end -->
 
-			<!-- About me single counter start -->
+			<!-- About me single counter -->
 			<div class="mb-20 sm:mb-0">
 				<counter
 					ref="counter"
@@ -40,9 +39,8 @@
 					>Stars on GitHub</span
 				>
 			</div>
-			<!-- About me single counter end -->
 
-			<!-- About me single counter start -->
+			<!-- About me single counter -->
 			<div class="mb-20 sm:mb-0">
 				<counter
 					ref="counter"
@@ -59,9 +57,8 @@
 					>Positive feedback</span
 				>
 			</div>
-			<!-- About me single counter end -->
 
-			<!-- About me single counter start -->
+			<!-- About me single counter -->
 			<div class="mb-20 sm:mb-0">
 				<counter
 					ref="counter"
@@ -77,9 +74,7 @@
 					>Projects completed</span
 				>
 			</div>
-			<!-- About me single counter end -->
 		</div>
-		<!-- About me counters end -->
 	</div>
 </template>
 

src/components/AboutMe.vue

@@ -1,16 +1,16 @@
 <template>
+	<!-- About me bio section -->
 	<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
-		<!-- About me portfolio image start -->
+		<!-- About me portfolio image -->
 		<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
 			<img
 				src="@/assets/images/profile.jpeg"
 				class="rounded-xl w-96"
 				alt=""
 			/>
 		</div>
-		<!-- About me portfolio image end -->
 
-		<!-- About me details start -->
+		<!-- About me details -->
 		<div class="w-full sm:w-3/4 text-left">
 			<p
 				v-for="bio in bios"
@@ -20,7 +20,6 @@
 				{{ bio.bio }}
 			</p>
 		</div>
-		<!-- About me details end -->
 	</div>
 </template>
 

src/components/AppBanner.vue

@@ -1,8 +1,9 @@
 <template>
-	<!-- Banner start -->
+	<!-- App Banner -->
 	<section
 		class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-10"
 	>
+		<!-- Banner left contents -->
 		<div class="w-full sm:w-1/3 text-left">
 			<h1
 				class="text-3xl sm:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
@@ -29,6 +30,8 @@
 				>
 			</div>
 		</div>
+
+		<!-- Banner right illustration -->
 		<div class="w-full sm:w-2/3 text-right float-right">
 			<img
 				v-if="theme === 'light'"
@@ -42,7 +45,6 @@
 			/>
 		</div>
 	</section>
-	<!-- Banner end -->
 </template>
 
 <script>

src/components/AppFooter.vue

@@ -1,9 +1,10 @@
 <template>
+	<!-- App footer -->
 	<div class="container mx-auto ">
 		<div
 			class="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
 		>
-			<!-- Footer social links start -->
+			<!-- Footer social links -->
 			<div
 				class="flex flex-col justify-center items-center mb-12 sm:mb-28"
 			>
@@ -27,9 +28,8 @@
 					</a>
 				</ul>
 			</div>
-			<!-- Footer social links end -->
 
-			<!-- Footer copyright start -->
+			<!-- Footer copyright -->
 			<div class="flex justify-center items-center text-center">
 				<div class="text-lg text-ternary-dark dark:text-ternary-light ">
 					&copy; {{ copyrightDate }}.
@@ -49,7 +49,6 @@
 					>
 				</div>
 			</div>
-			<!-- Footer copyright end -->
 		</div>
 	</div>
 </template>

src/components/AppHeader.vue

@@ -4,9 +4,9 @@
 		<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 hamburger menu start -->
+			<!-- Header menu links and small screen hamburger menu -->
 			<div class="flex justify-between items-center px-4 sm:px-0">
-				<!-- Header logos start -->
+				<!-- Header logos -->
 				<div>
 					<router-link to="/"
 						><img
@@ -23,17 +23,15 @@
 						/>
 					</router-link>
 				</div>
-				<!-- Header logos end -->
 
-				<!-- Theme switcher small screen start -->
+				<!-- Theme switcher small screen -->
 				<theme-switcher
 					:theme="theme"
 					@themeChanged="updateTheme"
 					class="block sm:hidden bg-ternary-light dark:bg-ternary-dark hover:bg-hover-light dark:hover:bg-hover-dark hover:shadow-sm px-2.5 py-2 rounded-lg"
 				/>
-				<!-- Theme switcher small screen end -->
 
-				<!-- Small screen hamburger menu start -->
+				<!-- Small screen hamburger menu -->
 				<div class="sm:hidden">
 					<button
 						@click="isOpen = !isOpen"
@@ -60,52 +58,16 @@
 						</svg>
 					</button>
 				</div>
-				<!-- Small screen hamburger menu end -->
 			</div>
-			<!-- Header menu links and small screen hamburger menu end -->
 
-			<!-- Header links start -->
-			<div
-				:class="isOpen ? 'block' : 'hidden'"
-				class="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none"
-			>
-				<router-link
-					to="/projects"
-					class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2"
-					aria-label="Projects"
-					>Projects</router-link
-				>
-				<router-link
-					to="/about"
-					class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
-					aria-label="About Me"
-					>About Me</router-link
-				>
-				<router-link
-					to="/contact"
-					class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
-					aria-label="Contact"
-					>Contact</router-link
-				>
-				<div
-					class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark"
-				>
-					<button
-						class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2"
-						@click="showModal()"
-						aria-label="Hire Me Button"
-					>
-						Hire Me
-					</button>
-				</div>
-			</div>
-			<!-- Header links end -->
+			<!-- Header links -->
+			<AppHeaderLinks :showModal="showModal" :isOpen="isOpen" />
 
-			<!-- Header right section buttons start -->
+			<!-- Header right section buttons -->
 			<div
 				class="hidden sm:flex justify-between items-center flex-col md:flex-row"
 			>
-				<!-- Hire me button start -->
+				<!-- Hire me button -->
 				<div>
 					<button
 						class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-5 py-2.5"
@@ -115,40 +77,37 @@
 						Hire Me
 					</button>
 				</div>
-				<!-- Hire me button end -->
 
-				<!-- Theme switcher large screen start -->
+				<!-- Theme switcher large screen -->
 				<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 large screen end -->
 			</div>
-			<!-- Header right section buttons end -->
 		</div>
-		<!-- Header end -->
 
-		<!-- Hire me modal start -->
+		<!-- Hire me modal -->
 		<HireMeModal
 			:showModal="showModal"
 			:modal="modal"
 			:categories="categories"
 			aria-modal="Hire Me Modal"
 		/>
-		<!-- Hire me modal end -->
 	</nav>
 </template>
 
 <script>
 import ThemeSwitcher from './ThemeSwitcher';
 import HireMeModal from './HireMeModal.vue';
 import feather from 'feather-icons';
+import AppHeaderLinks from './AppHeaderLinks.vue';
 
 export default {
 	components: {
 		ThemeSwitcher,
 		HireMeModal,
+		AppHeaderLinks,
 	},
 	data() {
 		return {

src/components/AppHeaderLinks.vue

@@ -0,0 +1,45 @@
+<template>
+	<!-- Header links -->
+	<div
+		:class="isOpen ? 'block' : 'hidden'"
+		class="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none"
+	>
+		<router-link
+			to="/projects"
+			class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2"
+			aria-label="Projects"
+			>Projects</router-link
+		>
+		<router-link
+			to="/about"
+			class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+			aria-label="About Me"
+			>About Me</router-link
+		>
+		<router-link
+			to="/contact"
+			class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+			aria-label="Contact"
+			>Contact</router-link
+		>
+		<div
+			class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+		>
+			<button
+				class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2"
+				@click="showModal()"
+				aria-label="Hire Me Button"
+			>
+				Hire Me
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ['showModal', 'isOpen'],
+};
+</script>
+
+<style lang="scss" scoped></style>