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 @@
+
- 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(
() => {