Code comments

Author: realstoman

src/App.vue

@@ -1,14 +1,14 @@
 <template>
 	<div :class="appTheme">
-		<!-- Header Start -->
+		<!-- App header -->
 		<Header></Header>
 
-		<!-- Render Active Component Contents Start -->
+		<!-- Render active component contents with transition -->
 		<transition name="fade" mode="out-in">
 			<router-view :theme="appTheme" />
 		</transition>
 
-		<!-- Footer Start -->
+		<!-- App footer -->
 		<Footer></Footer>
 	</div>
 </template>

src/components/about/AboutCounter.vue

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

src/components/about/AboutMe.vue

@@ -1,12 +1,16 @@
 <template>
 	<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
+		<!-- About me portfolio image start -->
 		<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 -->
 		<div class="w-full sm:w-3/4 text-left">
 			<p
 				v-for="bio in bios"
@@ -16,6 +20,7 @@
 				{{ bio.bio }}
 			</p>
 		</div>
+		<!-- About me details end -->
 	</div>
 </template>
 

src/components/project/SingleProjectInfo.vue

@@ -1,7 +1,9 @@
 <template>
 	<!-- Project information start -->
 	<div class="block sm:flex gap-0 sm:gap-10 mt-14">
+		<!-- Single project left section details start -->
 		<div class="w-full sm:w-1/3 text-left">
+			<!-- Single project client details start -->
 			<div class="mb-7">
 				<p
 					class="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2"
@@ -27,6 +29,9 @@
 					</li>
 				</ul>
 			</div>
+			<!-- Single project client details end -->
+
+			<!-- Single project objectives start -->
 			<div class="mb-7">
 				<p
 					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
@@ -40,6 +45,9 @@
 					cumque vero voluptate, reiciendis amet non!
 				</p>
 			</div>
+			<!-- Single project objectives end -->
+
+			<!-- Single project technologies start -->
 			<div class="mb-7">
 				<p
 					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
@@ -50,6 +58,9 @@
 					{{ technlogies[0].techs.join(', ') }}
 				</p>
 			</div>
+			<!-- Single project technologies end -->
+
+			<!-- Single project social sharing start -->
 			<div>
 				<p
 					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
@@ -67,7 +78,11 @@
 					></a>
 				</div>
 			</div>
+			<!-- Single project social sharing end -->
 		</div>
+		<!-- Single project left section details end -->
+
+		<!-- Single project right section details start -->
 		<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"
@@ -82,6 +97,7 @@
 				{{ projectDetail.details }}
 			</p>
 		</div>
+		<!-- Single project right section details end -->
 	</div>
 	<!-- Project information end -->
 </template>

src/components/project/SingleProjectRelatedProjects.vue

@@ -6,6 +6,7 @@
 		>
 			Related Projects
 		</p>
+
 		<div class="grid grid-cols-1 sm:grid-cols-4 gap-10">
 			<div>
 				<img

src/main.js

@@ -13,6 +13,7 @@ createApp(App)
 
 const appTheme = localStorage.getItem('theme');
 
+// Check what is the active theme
 if (
 	appTheme === 'dark' &&
 	document.querySelector('body').classList.contains('app-theme')

src/views/Contact.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="container mx-auto sm:flex py-5 sm:py-10 mt-10 sm:mt-20">
+		<!-- Contact form start -->
 		<div class="w-full sm:w-1/2">
 			<div class="leading-loose">
 				<form
@@ -85,6 +86,9 @@
 				</form>
 			</div>
 		</div>
+		<!-- Contact form end -->
+
+		<!-- Contact details start -->
 		<div class="w-full sm:w-1/2">
 			<div class="text-left max-w-xl px-6">
 				<h2
@@ -111,6 +115,7 @@
 				</ul>
 			</div>
 		</div>
+		<!-- Contact details end -->
 	</div>
 </template>
 

src/views/SingleProject.vue

@@ -1,22 +1,18 @@
 <template>
 	<div class="container mx-auto mt-10 sm:mt-20">
-		<!-- Projects start -->
+		<!-- Project header -->
 		<SingleProjectHeader />
-		<!-- Projects end -->
 
-		<!-- Projects start -->
+		<!-- Project gallery -->
 		<SingleProjectGallery />
-		<!-- Projects end -->
 
-		<!-- Projects start -->
+		<!-- Project information -->
 		<SingleProjectInfo />
-		<!-- Projects end -->
 
 		<hr class="mt-10 sm:mt-20 text-ternary-dark dark:text-ternary-dark" />
 
-		<!-- Projects start -->
+		<!-- Project related projects -->
 		<SingleProjectRelatedProjects />
-		<!-- Projects end -->
 	</div>
 </template>