Add about counter

Author: realstoman

src/components/about/AboutCounter.vue

@@ -4,42 +4,67 @@
 			class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
 		>
 			<div class="mb-20 sm:mb-0">
-				<p
+				<counter
+					ref="counter"
+					:startAmount="0"
+					:endAmount="12"
+					:duration="1"
+					:autoinit="true"
+					@finished="alert(`Counting finished!`)"
 					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
-				>
-					12
-				</p>
-				<span class="text-md text-ternary-dark dark:text-ternary-light"
+				/>
+				<span
+					class="block text-md text-ternary-dark dark:text-ternary-light"
 					>Years of experience</span
 				>
 			</div>
+
 			<div class="mb-20 sm:mb-0">
-				<p
+				<counter
+					ref="counter"
+					:startAmount="0"
+					:endAmount="20"
+					:duration="1"
+					suffix="k+"
+					:autoinit="true"
+					@finished="alert(`Counting finished!`)"
 					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
-				>
-					20k+
-				</p>
-				<span class="text-md text-ternary-dark dark:text-ternary-light"
+				/>
+				<span
+					class="block text-md text-ternary-dark dark:text-ternary-light"
 					>Stars on GitHub</span
 				>
 			</div>
+
 			<div class="mb-20 sm:mb-0">
-				<p
+				<counter
+					ref="counter"
+					:startAmount="0"
+					:endAmount="92"
+					:duration="1"
+					suffix="%"
+					:autoinit="true"
+					@finished="alert(`Counting finished!`)"
 					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
-				>
-					92%
-				</p>
-				<span class="text-md text-ternary-dark dark:text-ternary-light"
+				/>
+				<span
+					class="block text-md text-ternary-dark dark:text-ternary-light"
 					>Positive feedback</span
 				>
 			</div>
-			<div>
-				<p
+
+			<div class="mb-20 sm:mb-0">
+				<counter
+					ref="counter"
+					:startAmount="0"
+					:endAmount="77"
+					:duration="1"
+					:autoinit="true"
+					@finished="alert(`Counting finished!`)"
 					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
-				>
-					77
-				</p>
-				<span class="text-md text-ternary-dark dark:text-ternary-light"
+				/>
+				<span
+					class="block text-md text-ternary-dark dark:text-ternary-light"
 					>Projects completed</span
 				>
 			</div>
@@ -48,7 +73,11 @@
 </template>
 
 <script>
+import counter from 'vue3-autocounter';
 export default {
+	components: {
+		counter,
+	},
 	setup() {},
 };
 </script>