diff --git a/src/components/Home.vue b/src/components/Home.vue index 13aad30..dda024c 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -21,10 +21,10 @@
README.md
-

Hi, I am another freelance developer !

-

I made this website so you can browse some of my skills and projects.

-

After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve..

-

For now, my technologies of choice are : Go and IoT (Arduino, Raspberry) projects.

+

Hi, I am another freelance developer !

+

I made this website so you can browse some of my skills and projects.

+

After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve.

+

For now, my technologies of choice are : Go and IoT (Arduino, Raspberry).

@@ -39,6 +39,7 @@ diff --git a/src/service/typewriter.ts b/src/service/typewriter.ts new file mode 100644 index 0000000..14206cf --- /dev/null +++ b/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); + } + + } + +}; + + +