feat: i18n for the home page

package.json

@@ -10,8 +10,9 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "vanilla-tilt": "^1.7.2",
-    "vue": "^2.6.10",
+    "vue": "^2.6.14",
     "vue-class-component": "^7.0.2",
+    "vue-i18n": "8.27.1",
     "vue-property-decorator": "^8.1.0"
   },
   "devDependencies": {
@@ -20,7 +21,7 @@
     "@vue/cli-service": "^3.7.0",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
-    "typescript": "^3.4.3",
+    "typescript": "^4.8.4",
     "vue-template-compiler": "^2.5.21"
   },
   "postcss": {

src/App.vue

@@ -12,6 +12,7 @@ import { tID } from '@/model/skills';
 import Home from './components/Home.vue';
 import Timeline from './components/Timeline.vue';
 import SkillPicker from './components/SkillPicker.vue';
+import { Locales } from './locales';
 
 
 @Component({
@@ -48,6 +49,13 @@ export default class App extends Vue {
 			return;
 		}
 		picker.select(tID.Vue, false);
+
+		// change app language
+		if( navigator.language.indexOf('fr') > -1 ){
+			this.$i18n.locale = Locales.FR;
+		} else {
+			this.$i18n.locale = Locales.EN;
+		}
 	}
 
 }

src/components/Home.vue

@@ -14,17 +14,17 @@
 			<h1>Adrien<br>Marquès</h1>
 			<br>
 			<br>
-			<h2>FREELANCE DEVELOPER</h2>
+			<h2>{{ $t('home.title') }}</h2>
 		</section>
 
 		<div class='separator'></div>
 
-		<section class='readme'>
+		<section class='readme' ref='test'>
 			<div class='header'>README.md</div>
-			<p ref='text1'>Hi, I am another freelance developer !</p>
+			<p ref='text1'>{{ $t('home.line1') }}</p>
-			<p ref='text2'>I made this website so you can <u>browse</u> some of my skills and projects.</p>
+			<p ref='text2'>{{ $t('home.line2-1') }} <u>{{ $t('home.line2-2') }}</u> {{$t('home.line2-3') }}</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 ref='text3'>{{ $t('home.line3') }}</p>
-			<p ref='text4'>For now, my technologies of choice are : <u>Go</u> and <u>IoT</u> (Arduino, Raspberry).</p>
+			<p ref='text4'>{{ $t('home.line4-1') }} <u>Go</u> {{ $t('home.line4-2') }} <u>IoT</u> {{ $t('home.line4-3') }}</p>
 		</section>
 
 		<div class='scroll-arrow' @click='scrollNext()'>
@@ -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
+		// wait for i18n to change text
-		setTimeout( () => t1.animate(1500), 1000 );
+		setTimeout(() => {
-		// wait 3s, anim 2s
+			t1.init(false);
-		setTimeout( () => t2.animate(2000), 3000 );
+			t2.init();
-		// wait 6s, anim 4s
+			t3.init();
-		setTimeout( () => t3.animate(4000), 6000 );
+			t4.init();
-		// wait 10s, anim 3s
+
-		setTimeout( () => t4.animate(3000), 10000 );
+			// 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 );
 	}
 }
 </script>
@@ -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;

src/components/Timeline.vue

@@ -78,6 +78,8 @@
 			<div :key="'joint-stop-'+proj.name" class='joint-stop' />
 		</template>
 
+		<div class='spacer' />
+
 	</div>
 </template>
 

src/locales/en.json

@@ -0,0 +1,13 @@
+{
+	"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": ""
+}

src/locales/fr.json

@@ -0,0 +1,13 @@
+{
+	"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": ""
+}

src/locales/index.ts

@@ -0,0 +1,20 @@
+export enum Locales {
+	EN = 'en-US',
+	FR = 'fr-FR',
+}
+
+export const LOCALES = [
+	{ value: Locales.EN, caption: 'English' },
+	{ value: Locales.FR, caption: 'Français' }
+]
+
+
+import en from './en.json';
+import fr from './fr.json';
+
+export const messages = {
+	[Locales.EN]: en,
+	[Locales.FR]: fr
+};
+
+export const defaultLocale = Locales.EN;

src/main.ts

@@ -1,8 +1,19 @@
 import Vue from 'vue';
 import App from './App.vue';
+import VueI18n from 'vue-i18n';
+import { messages, defaultLocale } from '@/locales';
 
 Vue.config.productionTip = false;
 
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+	messages,
+	locale: defaultLocale,
+	fallbackLocale: defaultLocale
+});
+
 new Vue({
+	i18n,
 	render: (h) => h(App),
 }).$mount('#app');

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

tsconfig.json

@@ -9,6 +9,7 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
     "types": [