Footer dynamic date, design changes and code comments

Author: realstoman

src/components/shared/Footer.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="container mx-auto pt-20 sm:pt-40 pb-8">
+	<div
+		class="container mx-auto pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-secondary-dark"
+	>
+		<!-- Footer social links start -->
 		<div class="flex flex-col justify-center items-center mb-12 sm:mb-28">
 			<p
 				class="text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5"
@@ -40,23 +43,33 @@
 				</a>
 			</ul>
 		</div>
+		<!-- Footer social links end -->
+
+		<!-- Footer copyright start -->
 		<div class="flex justify-center items-center text-center">
 			<div class="text-lg text-ternary-dark dark:text-ternary-light">
-				&copy; Copyright 2021.
+				&copy; Copyright {{ copyrightDate }}. Vue.js & TailwindCSS
+				Portfolio.
 				<a
-					href="http://stoman.me"
+					href="https://stoman.me"
 					target="__blank"
-					class="text-secondary-dark dark:text-secondary-light font-medium"
+					class="text-secondary-dark dark:text-secondary-light font-medium uppercase"
 					>Stoman</a
 				>
 			</div>
 		</div>
+		<!-- Footer copyright end -->
 	</div>
 </template>
 
 <script>
 import feather from 'feather-icons';
 export default {
+	data() {
+		return {
+			copyrightDate: new Date().getFullYear(),
+		};
+	},
 	mounted() {
 		feather.replace();
 	},