Merge pull request realstoman#15 from NangialaiStoman/download-file-and-ui-updates

Web Accessibility, Download Resume and UI Updates

Author: realstoman

package-lock.json

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

src/assets/files/Stoman-Resume.pdf renamed to public/files/Stoman-Resume.pdf

@@ -14,6 +14,7 @@
 					:autoinit="true"
 					@finished="alert(`Counting finished!`)"
 					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+					aria-label="About Status Counter"
 				/>
 				<span
 					class="block text-md text-ternary-dark dark:text-ternary-light"

src/components/ThemeSwitcher.vue

@@ -16,8 +16,10 @@
 			</p>
 			<div class="flex justify-center sm:block">
 				<a
-					href="#"
-					class="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 hover:bg-indigo-500 text-gray-500 hover:text-white"
+					download="Stoman-Resume.pdf"
+					href="/files/Stoman-Resume.pdf"
+					class="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
+					aria-label="Download Resume"
 				>
 					<i
 						data-feather="arrow-down-circle"

src/components/about/AboutCounter.vue

@@ -21,6 +21,7 @@
 				:key="project.id"
 				to="/projects/single-project"
 				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
+				aria-label="Single Project"
 			>
 				<div>
 					<img
@@ -46,12 +47,12 @@
 
 		<!-- Load more projects button start -->
 		<div class="mt-10 sm:mt-20 flex justify-center">
-			<button
-				class="flex items-center px-6 py-3 rounded-xl shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 text-white text-lg sm:text-xl font-medium"
+			<router-link
+				to="/projects"
+				class="flex items-center px-6 py-3 rounded-xl shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 text-white text-lg sm:text-xl font-medium"
+				aria-label="More Projects"
+				>More Projects</router-link
 			>
-				<i data-feather="refresh-cw" class="w-5 mr-3"></i>
-				<span>Load More</span>
-			</button>
 		</div>
 		<!-- Load more projects button end -->
 	</section>

src/components/home/Banner.vue

@@ -11,21 +11,22 @@
 					About Client
 				</p>
 				<ul class="leading-loose">
-					<li class="text-ternary-dark dark:text-ternary-light">
-						<span>Name: </span>
-						Kabul Company Ltd
-					</li>
-					<li class="text-ternary-dark dark:text-ternary-light">
-						<span>Services: </span>
-						UI Design & Frontend Development
-					</li>
-					<li class="text-ternary-dark dark:text-ternary-light">
-						<span>Website: </span>
-						<a href="#">https://kabul.com</a>
-					</li>
-					<li class="text-ternary-dark dark:text-ternary-light">
-						<span>Phone: </span>
-						+93 7888 888 88
+					<li
+						v-for="info in companyInfos"
+						:key="info"
+						class="text-ternary-dark dark:text-ternary-light"
+					>
+						<span>{{ info.title }}: </span>
+						<a
+							href="#"
+							:class="
+								info.title == 'Website' || info.title == 'Phone'
+									? 'hover:underline cursor-pointer'
+									: ''
+							"
+							aria-label="Project Webiste and Phone"
+							>{{ info.details }}</a
+						>
 					</li>
 				</ul>
 			</div>
@@ -73,6 +74,7 @@
 						:key="social.id"
 						:href="social.url"
 						target="__blank"
+						aria-label="Share Project"
 						class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
 						><i :data-feather="social.icon" class="w-5 h-5"></i
 					></a>
@@ -108,6 +110,28 @@ import feather from 'feather-icons';
 export default {
 	data() {
 		return {
+			companyInfos: [
+				{
+					id: 1,
+					title: 'Name',
+					details: 'Company Ltd',
+				},
+				{
+					id: 2,
+					title: 'Services',
+					details: 'UI Design & Frontend Development',
+				},
+				{
+					id: 3,
+					title: 'Website',
+					details: 'https://company.com',
+				},
+				{
+					id: 4,
+					title: 'Phone',
+					details: '555 8888 888',
+				},
+			],
 			technlogies: [
 				{
 					title: 'Tools & Technologies',

src/components/project/ProjectsGrid.vue

@@ -37,7 +37,7 @@
 					<a
 						href="https://stoman.me"
 						target="__blank"
-						class="text-secondary-dark dark:text-secondary-light font-medium uppercase"
+						class="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline"
 						>Stoman</a
 					>
 				</div>

src/components/project/SingleProjectInfo.vue

@@ -13,13 +13,13 @@
 							v-if="theme === 'light'"
 							src="../../assets/images/logo-dark.svg"
 							class="w-36"
-							alt=""
+							alt="Dark Logo"
 						/>
 						<img
 							v-else
 							src="../../assets/images/logo-light.svg"
 							class="w-36"
-							alt=""
+							alt="Light Logo"
 						/>
 					</router-link>
 				</div>
@@ -39,6 +39,7 @@
 						@click="isOpen = !isOpen"
 						type="buttom"
 						class="focus:outline-none"
+						aria-label="Humberger Menu"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -71,16 +72,19 @@
 				<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
@@ -89,6 +93,7 @@
 					<button
 						class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-4 py-2 mt-2"
 						@click="showModal()"
+						aria-label="Hire Me Button"
 					>
 						Hire Me
 					</button>
@@ -105,6 +110,7 @@
 					<button
 						class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
 						@click="showModal()"
+						aria-label="Hire Me Button"
 					>
 						Hire Me
 					</button>
@@ -192,7 +198,7 @@
 												name="subject"
 												type="text"
 												required=""
-												aria-label="Subject"
+												aria-label="Project Category"
 											>
 												<option
 													v-for="category in categories"
@@ -210,14 +216,16 @@
 												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"
+												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>
@@ -228,8 +236,9 @@
 									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"
+										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>

src/components/shared/Footer.vue

@@ -72,13 +72,15 @@
 							name="message"
 							cols="14"
 							rows="6"
+							aria-label="Message"
 						></textarea>
 					</div>
 
 					<div class="mt-6">
 						<button
-							class="px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 rounded-lg"
+							class="px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-lg"
 							type="submit"
+							aria-label="Send Message"
 						>
 							Send Message
 						</button>
@@ -106,11 +108,19 @@
 							:data-feather="contact.icon"
 							class="w-5 text-gray-500 dark:text-gray-400 mr-4"
 						></i>
-						<p
+						<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 }}
-						</p>
+						</a>
 					</li>
 				</ul>
 			</div>
@@ -128,17 +138,17 @@ export default {
 			contacts: [
 				{
 					id: 1,
-					name: 'Wazir Akbar Khan, Kabul, Afghanistan',
+					name: 'Your Address, Your City, Your Country',
 					icon: 'map-pin',
 				},
 				{
 					id: 2,
-					name: 'email@example.com',
+					name: 'email@domain.com',
 					icon: 'mail',
 				},
 				{
 					id: 3,
-					name: '+93 7888 888 88',
+					name: '555 8888 888',
 					icon: 'phone',
 				},
 			],