Code comments update

realstoman · realstoman · commit d4b78f040535 · 2021-12-02T16:40:07.000+04:30
diff --git a/src/App.vue b/src/App.vue
@@ -8,6 +8,7 @@
 			<router-view :theme="appTheme" />
 		</transition>
 
+		<!-- Scroll to top -->
 		<back-to-top
 			visibleoffset="500"
 			right="40px"
diff --git a/src/components/AboutClientSingle.vue b/src/components/AboutClientSingle.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- Client single image -->
 	<div>
 		<img
 			:src="client.img"
diff --git a/src/components/AboutClients.vue b/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"
diff --git a/src/components/AboutCounter.vue b/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>
 
diff --git a/src/components/AboutMe.vue b/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>
 
diff --git a/src/components/AppBanner.vue b/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>
diff --git a/src/components/AppFooter.vue b/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>
diff --git a/src/components/AppHeader.vue b/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,19 +58,16 @@
 						</svg>
 					</button>
 				</div>
-				<!-- Small screen hamburger menu end -->
 			</div>
-			<!-- Header menu links and small screen hamburger menu end -->
 
-			<!-- Header links start -->
+			<!-- Header links -->
 			<AppHeaderLinks :showModal="showModal" :isOpen="isOpen" />
-			<!-- Header links end -->
 
-			<!-- 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"
@@ -82,28 +77,23 @@
 						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>
 
diff --git a/src/components/AppHeaderLinks.vue b/src/components/AppHeaderLinks.vue
@@ -1,4 +1,5 @@
 <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"
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- Contact details -->
 	<div class="w-full sm:w-1/2">
 		<div class="text-left max-w-xl px-6">
 			<h2
diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- Contact form -->
 	<div class="w-full sm:w-1/2">
 		<div class="leading-loose">
 			<form
diff --git a/src/components/HireMeModal.vue b/src/components/HireMeModal.vue
@@ -1,13 +1,14 @@
 <template>
+	<!-- Hire me modal -->
 	<transition name="fade">
 		<div v-show="modal" class="fixed inset-0 z-30">
-			<!-- background -->
+			<!-- Modal body background as backdrop -->
 			<div
 				v-show="modal"
 				@click="showModal()"
 				class="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"
 			></div>
-			<!--          -->
+			<!-- Modal content -->
 			<main
 				class="flex flex-col items-center justify-center h-full w-full"
 			>
diff --git a/src/components/ProjectGallery.vue b/src/components/ProjectGallery.vue
@@ -1,5 +1,5 @@
 <template>
-	<!-- Project gallery start -->
+	<!-- Project gallery -->
 	<div class="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
 		<div
 			class="mb-10 sm:mb-0"
@@ -13,7 +13,6 @@
 			/>
 		</div>
 	</div>
-	<!-- Project gallery end -->
 </template>
 
 <script>
diff --git a/src/components/ProjectHeader.vue b/src/components/ProjectHeader.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<!-- Project heading and meta info start -->
+		<!-- Project heading and meta info -->
 		<p
 			class="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7"
 		>
@@ -28,7 +28,6 @@
 				>
 			</div>
 		</div>
-		<!-- Project heading and meta info end -->
 	</div>
 </template>
 
diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
@@ -1,9 +1,9 @@
 <template>
-	<!-- Project information start -->
+	<!-- Project information -->
 	<div class="block sm:flex gap-0 sm:gap-10 mt-14">
-		<!-- Single project left section details start -->
+		<!-- Single project left section details -->
 		<div class="w-full sm:w-1/3 text-left">
-			<!-- Single project client details start -->
+			<!-- Single project client details -->
 			<div class="mb-7">
 				<p
 					class="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2"
@@ -30,9 +30,8 @@
 					</li>
 				</ul>
 			</div>
-			<!-- Single project client details end -->
 
-			<!-- Single project objectives start -->
+			<!-- Single project objectives -->
 			<div class="mb-7">
 				<p
 					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
@@ -43,9 +42,8 @@
 					{{ projectInfo.objectivesDetails }}
 				</p>
 			</div>
-			<!-- Single project objectives end -->
 
-			<!-- Single project technologies start -->
+			<!-- Single project technologies -->
 			<div class="mb-7">
 				<p
 					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
@@ -56,9 +54,8 @@
 					{{ projectInfo.technologies[0].techs.join(', ') }}
 				</p>
 			</div>
-			<!-- Single project technologies end -->
 
-			<!-- Single project social sharing start -->
+			<!-- Single project social sharing -->
 			<div>
 				<p
 					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
@@ -80,11 +77,9 @@
 					></a>
 				</div>
 			</div>
-			<!-- Single project social sharing end -->
 		</div>
-		<!-- Single project left section details end -->
 
-		<!-- Single project right section details start -->
+		<!-- Single project right section details -->
 		<div class="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
 			<p
 				class="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7"
@@ -99,9 +94,7 @@
 				{{ projectDetail.details }}
 			</p>
 		</div>
-		<!-- Single project right section details end -->
 	</div>
-	<!-- Project information end -->
 </template>
 
 <script>
diff --git a/src/components/ProjectRelatedProjects.vue b/src/components/ProjectRelatedProjects.vue
@@ -1,5 +1,5 @@
 <template>
-	<!-- Related projects start -->
+	<!-- Related projects -->
 	<div
 		class="mt-10 pt-10 sm:pt-14 sm:mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
 	>
@@ -19,7 +19,6 @@
 			</div>
 		</div>
 	</div>
-	<!-- Related projects end -->
 </template>
 
 <script>
diff --git a/src/components/ProjectSingle.vue b/src/components/ProjectSingle.vue
diff --git a/src/components/ProjectsFilter.vue b/src/components/ProjectsFilter.vue
diff --git a/src/components/ProjectsGrid.vue b/src/components/ProjectsGrid.vue
diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
diff --git a/src/views/About.vue b/src/views/About.vue
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
diff --git a/src/views/Home.vue b/src/views/Home.vue
diff --git a/src/views/Projects.vue b/src/views/Projects.vue

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<template>`
	`2`	`+ <!-- Client single image -->`
`2`	`3`	`<div>`
`3`	`4`	`<img`
`4`	`5`	`:src="client.img"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<template>`
	`2`	`+ <!-- About page clients section -->`
`2`	`3`	`<div class="mt-10 sm:mt-20">`
`3`	`4`	`<p`
`4`	`5`	`class="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<template>`
	`2`	`+ <!-- Header links -->`
`2`	`3`	`<div`
`3`	`4`	`:class="isOpen ? 'block' : 'hidden'"`
`4`	`5`	`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"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<template>`
	`2`	`+ <!-- Contact details -->`
`2`	`3`	`<div class="w-full sm:w-1/2">`
`3`	`4`	`<div class="text-left max-w-xl px-6">`
`4`	`5`	`<h2`