From 0cebaf2e624bcebcd20d5c9b3705559d61dc625b Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 11 Oct 2022 13:08:52 +0200 Subject: [PATCH] feat: i18n for the home page --- src/components/Home.vue | 55 ++++++++++++++++++++++++--------------- src/locales/en.json | 12 ++++++++- src/locales/fr.json | 12 ++++++++- src/service/typewriter.ts | 6 ++--- 4 files changed, 58 insertions(+), 27 deletions(-) diff --git a/src/components/Home.vue b/src/components/Home.vue index 3841e97..4bc2b33 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -19,12 +19,12 @@
-
+
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).

+

{{ $t('home.line1') }}

+

{{ $t('home.line2-1') }} {{ $t('home.line2-2') }} {{$t('home.line2-3') }}

+

{{ $t('home.line3') }}

+

{{ $t('home.line4-1') }} Go {{ $t('home.line4-2') }} IoT {{ $t('home.line4-3') }}

@@ -66,6 +66,10 @@ export default class Home extends Vue { // skip animation if already done less than 10min ago if ( diff_sec < threshold ) { + (this.$refs.text2 as HTMLElement).style.display = 'block'; + (this.$refs.text3 as HTMLElement).style.display = 'block'; + (this.$refs.text4 as HTMLElement).style.display = 'block'; + (this.$refs.text1 as HTMLElement).style.display = 'block'; return; } @@ -74,24 +78,29 @@ export default class Home extends Vue { 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 ); + // wait for i18n to change text + setTimeout(() => { + 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 ); + + // local storage: store that we animated once + setTimeout( () => { + localStorage.setItem('typed', `${new Date().getTime()}`); + }, 13000 ); + }, 100) - // local storage: store that we animated once - setTimeout( () => { - localStorage.setItem('typed', `${new Date().getTime()}`); - }, 13000 ); } } @@ -189,6 +198,7 @@ export default class Home extends Vue { width: auto; max-width: 80rem; height: auto; + min-height: 6rem; margin: 0 5em; margin-left: calc( 5em - #{$logo-size}/2 ); @@ -216,6 +226,9 @@ export default class Home extends Vue { } p { + // typewriter animation changes it + display: none; + color: #fff; margin: 1em; line-height: 1.5em; diff --git a/src/locales/en.json b/src/locales/en.json index 2bfe564..66920e1 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1,3 +1,13 @@ { - "home.title": "FREELANCE DEVELOPER" + "home.title": "FREELANCE DEVELOPER", + "home.line1": "Hi, I am another freelance developer !", + "home.line2-1": "I made this website so you can", + "home.line2-2": "browse", + "home.line2-3": "some of my skills and projects.", + "home.line3": "After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve.", + "home.line4-1": "For now, my technologies of choice are : ", + "home.line4-2": "and", + "home.line4-3": "(Arduino, Raspberry).", + + "end": "" } \ No newline at end of file diff --git a/src/locales/fr.json b/src/locales/fr.json index bbf06c7..6be74bc 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -1,3 +1,13 @@ { - "home.title": "DÉVELOPPEUR FREELANCE" + "home.title": "DÉVELOPPEUR FREELANCE", + "home.line1": "Hello, je suis un développeur freelance de plus !", + "home.line2-1": "J'ai mis en place ce site afin de pouvoir", + "home.line2-2": "parcourir", + "home.line2-3": "certaines de mes compétences et projets.", + "home.line3": "Avec 50+ projets depuis que j'ai démarré le dev en 2010, je suis toujours très attentif à rendre les projets maintenables afin qu'ils durent et puissent évoluer.", + "home.line4-1": "Pour le moment, les technologies qui m'intéressent sont : le", + "home.line4-2": "et l'", + "home.line4-3": "(Arduino, Raspberry).", + + "end": "" } \ No newline at end of file diff --git a/src/service/typewriter.ts b/src/service/typewriter.ts index 2664a01..e1a0973 100644 --- a/src/service/typewriter.ts +++ b/src/service/typewriter.ts @@ -1,6 +1,5 @@ export class TypeWriter { private target: HTMLElement; - private display: string|null = null; private html: string|null = null; constructor(target: HTMLElement) { @@ -10,7 +9,6 @@ export class TypeWriter { /* 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'; @@ -18,7 +16,7 @@ export class TypeWriter { } public animate(msDuration: number) { - if ( this.html == null || this.display == null ) { + if ( this.html == null ) { console.warn('[typewriter] init must be called first ; doing it anyway'); this.init(); } @@ -26,7 +24,7 @@ export class TypeWriter { const size = this.html!.length; const msLetter = msDuration / size; - this.target.style.display = this.display!; + this.target.style.display = 'block'; for ( let i = 0, l = this.html!.length ; i < l ; i++ ) { setTimeout( () => {