feat: typewriter animation for the homepage readme

src/components/Home.vue

@@ -21,10 +21,10 @@
 
 		<section class='readme'>
 			<div class='header'>README.md</div>
-			<p>Hi, I am another freelance developer !</p>
+			<p ref='text1'>Hi, I am another freelance developer !</p>
-			<p>I made this website so you can <u>browse</u> some of my skills and projects.</p>
+			<p ref='text2'>I made this website so you can <u>browse</u> some of my skills and projects.</p>
-			<p>After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve..</p>
+			<p ref='text3'>After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve.</p>
-			<p>For now, my technologies of choice are : <u>Go</u> and <u>IoT</u> (Arduino, Raspberry) projects.</p>
+			<p ref='text4'>For now, my technologies of choice are : <u>Go</u> and <u>IoT</u> (Arduino, Raspberry).</p>
 		</section>
 
 		<div class='scroll-arrow' @click='scrollNext()'>
@@ -39,6 +39,7 @@
 <script lang="ts">
 	import { Component, Vue } from 'vue-property-decorator';
 	import { go } from '@/service/scroller';
+	import { TypeWriter } from '@/service/typewriter';
 
 	@Component({
 		components: {},
@@ -47,6 +48,27 @@
 		protected scrollNext() {
 			go('skill-picker', 0);
 		}
+
+		protected mounted() {
+			const t1 = new TypeWriter( this.$refs['text1'] as HTMLElement )
+			const t2 = new TypeWriter( this.$refs['text2'] as HTMLElement )
+			const t3 = new TypeWriter( this.$refs['text3'] as HTMLElement )
+			const t4 = new TypeWriter( this.$refs['text4'] as HTMLElement )
+
+			t1.init(false);
+			t2.init();
+			t3.init();
+			t4.init();
+
+			// wait 1s, anim 1.5s
+			setTimeout( () => t1.animate(1500), 1000 );
+			// wait 3s, anim 2s
+			setTimeout( () => t2.animate(2000), 3000 );
+			// wait 6s, anim 4s
+			setTimeout( () => t3.animate(4000), 6000 );
+			// wait 10s, anim 3s
+			setTimeout( () => t4.animate(3000), 10000 );
+		}
 	}
 
 </script>

src/service/typewriter.ts

@@ -0,0 +1,45 @@
+export class TypeWriter {
+	private target:  HTMLElement;
+	private display: string|null;
+	private html:    string|null;
+
+	constructor(target: HTMLElement){
+		this.target = target;
+	}
+
+	/* initialize with copying and clearing the original text */
+	public init(hide: boolean = true) {
+		this.html    = this.target.innerHTML;
+		this.display = this.target.style.display;
+		this.target.innerHTML = '';
+		if( hide ){
+			this.target.style.display = 'none';
+		}
+	}
+
+	public animate(duration_ms: number) {
+		if( this.html == null || this.display == null ){
+			console.warn("[typewriter] init must be called first ; doing it anyway");
+			this.init();
+		}
+
+		const size      = this.html!.length;
+		const letter_ms = duration_ms / size;
+
+		this.target.style.display = this.display!;
+		for( let i = 0, l = this.html!.length ; i < l ; i++ ){
+			setTimeout(
+				() => {
+					((i: number) => {
+						this.target.innerHTML = this.html!.substring(0, i+1);
+					})(i);
+				},
+			i*letter_ms);
+		}
+
+	}
+
+};
+
+
+