diff --git a/public/index.html b/public/index.html
index 69e35d2..ae140e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,10 +9,12 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preload" href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro&display=swap" as="style">
-    <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro&display=swap" media="all">
+    <link rel="preload" href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro|Fira%20Code&display=swap" as="style">
+    <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro|Fira%20Code&display=swap" media="all">
 
     <title>xdrm()</title>
+    <meta name="description" content="Portfolio d'Adrien Marquès, développeur freelance spécialisé en Go et IoT">
+    <meta name="keywords" content="développeur freelance, Go, IoT, web development">
   </head>
   <body>
     <noscript>
diff --git a/public/styles.css b/public/styles.css
index 8ff2a85..7ddf759 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -15,6 +15,10 @@ html, body{
 	overflow: hidden;
 }
 
+button {
+	border: none;
+}
+
 body {
 	display: block;
 	position: absolute;
diff --git a/src/App.vue b/src/App.vue
index 299326e..5d5e129 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@ import Home from './components/Home.vue';
 import Timeline from './components/Timeline.vue';
 import SkillPicker from './components/SkillPicker.vue';
 import Footer from './components/Footer.vue';
-import { Locales } from './locales';
 
 
 @Component({
@@ -26,8 +25,6 @@ import { Locales } from './locales';
 	},
 })
 export default class App extends Vue {
-	private selected: tID|null = null;
-
 	// skill picker selection -> filters the timeline
 	protected onPick(id: tID|null) {
 		const timeline = this.$refs.timeline as Timeline;
@@ -69,7 +66,7 @@ export default class App extends Vue {
 
 
 		font-size: 1rem;
-		font-family: 'Source Sans Pro';
+		font-family: 'Source Sans Pro', sans-serif;
 		flex-flow: column nowrap;
 
 		overflow: hidden;
@@ -86,7 +83,7 @@ export default class App extends Vue {
 
 		transition: color .2s ease-in-out;
 
-		&:after {
+		&::after {
 			content: '';
 
 			display: block;
@@ -105,8 +102,8 @@ export default class App extends Vue {
 		&:hover{
 			color: #fff;
 
-			&:after {
-				width: 90%;
+			&::after {
+				width: 104%;
 			}
 		}
 	}
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 539208e..a277d85 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,26 +1,24 @@
 <template>
-	<div id='footer'>
+	<footer id='footer'>
+		<div class='wave' aria-hidden="true"></div>
+		<div class='wave w2' aria-hidden="true"></div>
 
-		<div class='wave'></div>
-		<div class='wave w2'></div>
-
-		<footer>
+		<div class="footer-content">
 			<div class='copyright'>
-				2022 © xdrm-brackets
-				<span>Adrien Marquès</span>
+				<p>&copy; {{ currentYear }} xdrm-brackets</p>
+				<p>Adrien Marquès</p>
 			</div>
 
-			<img class='logo' src='../assets/home/logo.svg'/>
+			<img class='logo' src='../assets/home/logo.svg' alt='Logo Adrien Marquès' width="64" height="64"/>
 
-			<div class='contact'>
-				<span>xdrm.io</span>
-				<span>(+33) 06 69 05 19 10</span>
-				<span>xdrm.dev@gmail.com</span>
-				<span>Montauban, 82000</span>
-			</div>
-		</footer>
-
-	</div>
+			<address class='contact'>
+				<p>xdrm.io</p>
+				<p><a href="tel:+33669051910">(+33) 06 69 05 19 10</a></p>
+				<p><a href="mailto:xdrm.dev@gmail.com">xdrm.dev@gmail.com</a></p>
+				<p>Montauban, 82000</p>
+			</address>
+		</div>
+	</footer>
 </template>
 
 <script lang="ts">
@@ -30,7 +28,9 @@ import { Component, Vue } from 'vue-property-decorator';
 	components: {},
 })
 export default class Footer extends Vue {
-
+	get currentYear() {
+		return new Date().getFullYear();
+	}
 }
 </script>
 
@@ -48,39 +48,57 @@ export default class Footer extends Vue {
 		background: lighten(#202228, 15%);
 	}
 
-	footer {
+	a {
+		color: inherit;
+		text-decoration: none;
+
+		&:hover, &:focus {
+			text-decoration: underline;
+		}
+		&::after {
+			display: none;
+		}
+	}
+
+	.footer-content {
 		display: flex;
 		position: relative;
-			margin-top: $wave-height;
-			min-height: 20vh;
-
-			color: #bcc6ce;
-
+		margin-top: $wave-height;
+		min-height: 20vh;
+		color: #bcc6ce;
 		flex-flow: row wrap;
 		justify-content: space-around;
 		align-items: center;
-
 		font-family: 'Fira Code';
+	}
 
-		.copyright, .contact {
-			font-size: 1.3em;
-			text-align: center;
+	.copyright, .contact {
+		font-size: 1.3em;
+		text-align: center;
 
-			span {
-				display: block;
-			}
+		p {
+			margin: 0.5em 0;
 		}
+	}
 
-		.copyright {
-			user-select: none;
-		}
+	.contact a {
+		color: inherit;
+		text-decoration: none;
 
-		img {
-			width: $logo-size;
-			height: $logo-size;
+		&:hover, &:focus {
+			text-decoration: underline;
 		}
 	}
 
+	.copyright {
+		user-select: none;
+	}
+
+	img {
+		width: $logo-size;
+		height: $logo-size;
+	}
+
 	@keyframes wave-x {
 		from{ background-position-x: 1px;   }
 		to{   background-position-x: 100vw; }
@@ -109,5 +127,4 @@ export default class Footer extends Vue {
 		z-index: 200;
 	}
 
-
 </style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 095095a..0c5041a 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,36 +1,34 @@
 <template>
-	<div id='home'>
+	<main id='home'>
+		<LangPicker/>
 
+		<img class='logo' src='../assets/home/logo.svg' alt="Logo Adrien Marquès" width="128" height="128"/>
 
-		<LangPicker />
-
-		<img class='logo' src='../assets/home/logo.svg'/>
-
-		<section class='name'>
+		<header class='name'>
 			<h1>Adrien<br>Marquès</h1>
-			<br>
-			<br>
-			<h2>{{ $t('home.title') }}</h2>
-		</section>
+			<p class="job-title">{{ $t('home.title') }}</p>
+		</header>
 
-		<div class='separator'></div>
+		<div class='separator' aria-hidden="true"></div>
 
 		<section class='readme' ref='test'>
-			<div class='header'>README.md</div>
-			<p ref='text1'>{{ $t('home.line1') }}</p>
-			<p ref='text2'>{{ $t('home.line2-1') }} <u>{{ $t('home.line2-2') }}</u> {{$t('home.line2-3') }}</p>
-			<p ref='text3'>{{ $t('home.line3') }}</p>
-			<p ref='text4'>{{ $t('home.line4') }}</p>
-			<p ref='text5'>{{ $t('home.line5-1') }} <u>Go</u> {{ $t('home.line5-2') }} <u>IoT</u> {{ $t('home.line5-3') }}</p>
+			<h2 class='header'>README.md</h2>
+			<div class="readme-content">
+				<p ref='text1'>{{ $t('home.line1') }}</p>
+				<p ref='text2'>{{ $t('home.line2-1') }} <span class="highlight">{{ $t('home.line2-2') }}</span> {{$t('home.line2-3') }}</p>
+				<p ref='text3'>{{ $t('home.line3') }}</p>
+				<p ref='text4'>{{ $t('home.line4') }}</p>
+				<p ref='text5'>{{ $t('home.line5-1') }} <span class="highlight">Go</span> {{ $t('home.line5-2') }} <span class="highlight">IoT</span> {{ $t('home.line5-3') }}</p>
+			</div>
 		</section>
 
-		<div class='scroll-arrow' @click='scrollNext()'>
-			<img src='@/assets/scroll_arrow.svg' />
-		</div>
+		<button class='scroll-arrow' @click='scrollNext()' aria-label="Défiler vers la section suivante">
+			<img src='@/assets/scroll_arrow.svg' alt="" aria-hidden="true" width="40" height="40"/>
+		</button>
 
-		<div class='wave'></div>
-		<div class='wave w2'></div>
-	</div>
+		<div class='wave' aria-hidden="true"></div>
+		<div class='wave w2' aria-hidden="true"></div>
+	</main>
 </template>
 
 <script lang="ts">
@@ -38,7 +36,6 @@ import { Component, Vue } from 'vue-property-decorator';
 import { go } from '@/service/scroller';
 import { TypeWriter } from '@/service/typewriter';
 import LangPicker from './LangPicker.vue';
-LangPicker;
 
 @Component({
 	components: { LangPicker },
@@ -120,6 +117,7 @@ export default class Home extends Vue {
 	$scroll-btn-size: 5rem;
 
 	$wave-height: 6.3rem;
+	$primary-color: #6553d0;
 
 	#home {
 		display: grid;
@@ -176,7 +174,7 @@ export default class Home extends Vue {
 		text-align: right;
 
 		h1 { font-size: 7em; font-weight: 800; line-height: 1em; }
-		h2 { font-size: 2.5em; font-weight: 400; white-space: nowrap; }
+		p { font-size: 2.5em; font-weight: 400; white-space: nowrap; }
 	}
 
 	.separator {
@@ -228,51 +226,53 @@ export default class Home extends Vue {
 			border-bottom: .15rem solid #323841;
 		}
 
-		p {
-			// typewriter animation changes it
-			display: none;
+		h2 {
+			font-size: 1em;
+			// ... autres styles existants ...
+		}
 
-			color: #fff;
-			margin: 1em;
-			line-height: 1.5em;
+		.readme-content {
+			p {
+				// typewriter animation changes it
+				display: none;
 
-			// offset to the right and inverse indent the first line for the
-			// ::before (> arrow) to always be on the left
-			margin-left: calc( 1em + 1.2em );
-			text-indent: -1.2em;
+				color: #fff;
+				margin: 1em;
+				line-height: 1.5em;
 
-			u {
-				display: inline;
-				position: relative;
+				// offset to the right and inverse indent the first line for the
+				// ::before (> arrow) to always be on the left
+				margin-left: calc( 1em + 1.2em );
+				text-indent: -1.2em;
 
-				text-decoration: none;
+				.highlight {
+					display: inline;
+					position: relative;
+					text-decoration: none;
 
-				&:after {
-					content: '';
-
-					display: inline-block;
-					position: absolute;
+					&::after {
+						content: '';
+						display: inline-block;
+						position: absolute;
 						top: 60%;
 						left: -.2em;
 						width: calc( 100% + 2*.2em );
 						height: 30%;
+						background: darken($primary-color, 10%);
+						z-index: -1;
+					}
 
-					background: #6553d0;
-
-					z-index: -1;
+					z-index: 1;
 				}
 
-				z-index: 10;
-			}
+				&::before {
+					content: '> ';
 
-			&:before {
-				content: '> ';
-
-				color: #6553d0;
-				font-weight: 700;
+					color: $primary-color;
+					font-weight: 700;
+				}
 			}
 		}
-
 	}
 
 
diff --git a/src/components/LangPicker.vue b/src/components/LangPicker.vue
index 0c6f0d0..7bc29f1 100644
--- a/src/components/LangPicker.vue
+++ b/src/components/LangPicker.vue
@@ -1,11 +1,13 @@
 <template>
-	<div class='lang-picker'>
-		<div @click='current = locales[0]' :data-active='current == locales[0]'>
-			<img src='../assets/lang/en-US.svg'/>
-		</div>
-		<div @click='current = locales[1]' :data-active='current == locales[1]'>
-			<img src='../assets/lang/fr-FR.svg'/>
-		</div>
+	<div class='lang-picker' role="region" aria-label="fr-FR: Sélection de la langue, en-US: Language selection">
+		<button @click='setLanguage(locales[0])' :aria-pressed='current === locales[0]'>
+			<img src='../assets/lang/en-US.svg' alt="English"/>
+			<span class="visually-hidden">English</span>
+		</button>
+		<button @click='setLanguage(locales[1])' :aria-pressed='current === locales[1]'>
+			<img src='../assets/lang/fr-FR.svg' alt="Français"/>
+			<span class="visually-hidden">Français</span>
+		</button>
 	</div>
 </template>
 
@@ -20,28 +22,42 @@ export default class LangPicker extends Vue {
 	get current(): string {
 		return this.$i18n.locale;
 	}
-	set current(l: string) {
-		localStorage.setItem('lang', l);
-		this.$i18n.locale = l;
+
+	private setLanguage(lang: string) {
+		if (this.current !== lang) {
+			localStorage.setItem('lang', lang);
+			this.$i18n.locale = lang;
+			this.$nextTick(() => {
+				this.announceLanguageChange(lang);
+			});
+		}
+	}
+
+	private announceLanguageChange(lang: string) {
+		const announcement = document.createElement('div');
+		announcement.setAttribute('aria-live', 'polite');
+		if (lang === Locales.EN) {
+			announcement.textContent = `Language changed to ${lang === Locales.EN ? 'English' : 'French'}`;
+		} else {
+			announcement.textContent = `La langue a été changée en ${lang === Locales.EN ? 'anglais' : 'français'}`;
+		}
+		document.body.appendChild(announcement);
+		setTimeout(() => {
+			document.body.removeChild(announcement);
+		}, 1000);
 	}
 
 	private mounted() {
 		const ls = localStorage.getItem('lang') as Locales|null;
 
-		// already selected a language, stay with it
-		if ( ls != null && this.locales.indexOf(ls) >= 0 ) {
-			this.current = ls;
-			return;
-		}
-
-		// otherwise, go with the navigator's default
-		if ( navigator.language.indexOf('fr') > -1 ) {
-			this.current = Locales.FR;
+		if (ls != null && this.locales.indexOf(ls) >= 0) {
+			this.setLanguage(ls);
+		} else if (navigator.language.indexOf('fr') > -1) {
+			this.setLanguage(Locales.FR);
 		} else {
-			this.current = Locales.EN;
+			this.setLanguage(Locales.EN);
 		}
 	}
-
 }
 </script>
 
@@ -54,13 +70,14 @@ export default class LangPicker extends Vue {
 
 		flex-flow: row nowrap;
 
-		div {
+		button {
 			flex: 2em;
 
 			display: block;
 			padding: .25em;
 
 			cursor: pointer;
+			background: none;
 
 			transform-style: preserve-3d;
 			transition: filter .1s ease-in-out;
@@ -74,6 +91,10 @@ export default class LangPicker extends Vue {
 			&:not([data-active=true]):hover {
 				filter: grayscale(40%);
 			}
+
+			&:focus {
+				filter: grayscale(0);
+			}
 		}
 
 		img {
@@ -81,4 +102,16 @@ export default class LangPicker extends Vue {
 		}
 	}
 
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
 </style>
diff --git a/src/components/LevelDisplay.vue b/src/components/LevelDisplay.vue
index 8138b0d..409d614 100644
--- a/src/components/LevelDisplay.vue
+++ b/src/components/LevelDisplay.vue
@@ -1,10 +1,10 @@
 <template>
-	<div class='level' >
-		<div ref='l1' class='l1'/>
-		<div ref='l2' class='l2'/>
-		<div ref='l3' class='l3'/>
-		<div ref='l4' class='l4'/>
-		<div ref='l5' class='l5'/>
+	<div class='level' :aria-label="$t('skills.level-display', { level: level })">
+		<div ref='l1' class='l1' :aria-hidden="true"/>
+		<div ref='l2' class='l2' :aria-hidden="true"/>
+		<div ref='l3' class='l3' :aria-hidden="true"/>
+		<div ref='l4' class='l4' :aria-hidden="true"/>
+		<div ref='l5' class='l5' :aria-hidden="true"/>
 	</div>
 </template>
 
diff --git a/src/components/SkillCard.vue b/src/components/SkillCard.vue
index 05ec0b3..6f0db4e 100644
--- a/src/components/SkillCard.vue
+++ b/src/components/SkillCard.vue
@@ -1,6 +1,17 @@
 <template>
-	<div class='skill-card' ref='root' :data-active='active ? "1" : "0"' @click='onClick()' :title='name()'>
-		<img class='icon' :src='icon()' />
+	<div
+		class='skill-card'
+		ref='root'
+		:data-active='active ? "1" : "0"'
+		@click='onClick()'
+		:title='name()'
+		role="button"
+		:aria-pressed='active'
+		:tabindex="0"
+		@keydown.enter='onClick()'
+		@keydown.space='onClick()'
+	>
+		<img class='icon' :src='icon()' :alt="$t('skills.icon-alt', { skill: name() })"/>
 		<span class='name'>
 			<span v-html='name()'></span>
 		</span>
diff --git a/src/components/SkillPicker.vue b/src/components/SkillPicker.vue
index 152de2a..77906b1 100644
--- a/src/components/SkillPicker.vue
+++ b/src/components/SkillPicker.vue
@@ -1,58 +1,56 @@
 <template>
-	<div id='skill-picker'>
+	<section id='skill-picker' aria-labelledby="skill-picker-title">
+		<h2 id="skill-picker-title" class="visually-hidden">{{ $t('skills.title') }}</h2>
 
 		<div class='wrapper'>
 			<div class='container'>
-
-				<section class='categories'>
+				<nav class='categories' aria-label="Catégories de compétences">
 					<SkillCard v-for='(t) of tags'
 						:key='t'
 						:active='t == tag'
 						:folder='$t(tagLabel(t))'
 						@pick='onTag(t, $event)'/>
-				</section>
+				</nav>
 
-				<section class='skills'>
+				<div class='skills' role="list" aria-label="Liste des compétences">
 					<SkillCard v-for='(id) of ids'
 						:key='id'
 						v-show='filtered.indexOf(id) >= 0'
 						:id='id'
 						:active='id == sel'
-						@pick='onPick(id, $event)'/>
-				</section>
+						@pick='onPick(id, $event)'
+						role="listitem"/>
+				</div>
 
-				<section class='details' v-if='details != null'>
+				<section class='details' v-if='details != null' aria-live="polite">
 					<header>
 						<span class='interest'>{{ $t('skills.interest') }}<LevelDisplay :level='details.interest'/></span>
-						<img :src='details.icon'/>
+						<img :src='details.icon' :alt="$t('skills.icon-alt', { skill: details.title })"/>
 						<span class='mastery'>{{ $t('skills.mastery') }}<LevelDisplay :level='details.mastery'/></span>
 					</header>
-					<h1 v-html='details.title'></h1>
-					<h2>{{ $t('skills.featured-before') }} <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? $t('skills.featured-after-n') : $t('skills.featured-after-1') }}</h2>
-					<h3>
-						<template v-for='(proj) of details.projects'>
-							<a :key='"pick-" + proj.name' :href='"#" + sanitize(proj.name)' @click='$event.preventDefault(); scroll(sanitize(proj.name));'>
+					<h3>{{ details.title }}</h3>
+					<h3>{{ $t('skills.featured-before') }} <b class="primary-color">{{ details.projects.length }}</b> {{ details.projects.length > 1 ? $t('skills.featured-after-n') : $t('skills.featured-after-1') }}</h3>
+					<p class="project-links">
+						<template v-for='(proj, index) of details.projects'>
+							<a :key='"pick-" + proj.name' :href='"#" + sanitize(proj.name)' @click.prevent='scroll(sanitize(proj.name))'>
 								{{ proj.name }}
-							</a>
-							<span :key='proj.name'>, </span>
+							</a><span v-if="index < details.projects.length - 1" :key='"separator-" + index'>, </span>
 						</template>
-					</h3>
+					</p>
 					<p v-html='details.text[$i18n.locale]'></p>
 				</section>
 
-				<section class='guide' v-else>
+				<section class='guide' v-else aria-live="polite">
 					<p v-html='$t("skills.guide")'></p>
 				</section>
-
 			</div>
 
-			<input type='button' v-show='this.sel != null' :value="$t('skills.browse')" @click='browse()'/>
-			<input type='button' v-show='this.sel == null' :value="$t('skills.browse-all')" @click='browse()'/>
+			<button v-if='this.sel != null' @click='browse()'>{{ $t('skills.browse') }}</button>
+			<button v-else @click='browse()'>{{ $t('skills.browse-all') }}</button>
 		</div>
 
-		<div class='spacer'></div>
-
-	</div>
+		<div class='spacer' aria-hidden="true"></div>
+	</section>
 </template>
 
 <script lang="ts">
@@ -210,6 +208,8 @@ export default class SkillPicker extends Vue {
 	$bottom-spacer: 15vh;
 	$bottom-margin: 10vh;
 
+	$primary-color: #745cfc;
+
 	#skill-picker {
 		display: block;
 		position: relative;
@@ -377,9 +377,11 @@ export default class SkillPicker extends Vue {
 			margin-top: 2em;
 			margin-bottom: 4rem;
 
-			font-size: 1.7em;
+			font-size: 1.5em;
 			font-weight: 500;
 			text-align: justify;
+			line-height: 1.5;
+
 			color: #c1c1c1;
 			padding: 1em;
 
@@ -391,6 +393,21 @@ export default class SkillPicker extends Vue {
 			overflow-y: auto;
 		}
 
+		.project-links {
+			display: inline;
+			font-size: 1.3em;
+			color: #616c7c;
+
+			background: none;
+			border: none;
+			padding: 1em;
+			margin: 0 2em;
+		}
+
+		.primary-color {
+			color: $primary-color;
+		}
+
 	}
 
 
@@ -427,7 +444,7 @@ export default class SkillPicker extends Vue {
 		}
 	}
 
-	input {
+	input, button {
 		display: block;
 		position: absolute;
 			top: calc( 100% - #{$page-margin} );
@@ -482,4 +499,16 @@ export default class SkillPicker extends Vue {
 		}
 	}
 
+	.visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
deleted file mode 100644
index 771f444..0000000
--- a/src/locales/en.json
+++ /dev/null
@@ -1,117 +0,0 @@
-{
-	"home.title": "FREELANCE DEVELOPER",
-	"home.line1": "Hi, I am another freelance developer !",
-	"home.line2-1": "I've created this website so you can",
-	"home.line2-2": "browse",
-	"home.line2-3": "my skills and projects.",
-	"home.line3": "I started dev back in 2010. I now have worked on more than 50 projects.",
-	"home.line4": "I work hard to provide my clients with maintainable projects so that they can evolve at low cost (economic and ecological).",
-	"home.line5-1": "My top technologies at the moment are",
-	"home.line5-2": "and",
-	"home.line5-3": "(Arduino, Raspberry).",
-
-	"timeline.title":     "Timeline of projects featuring",
-	"timeline.title-all": "Timeline of all projects",
-	"timeline.back":      "Change skill",
-
-	"skills.featured-before":  "Featured in",
-	"skills.featured-after-1": "project",
-	"skills.featured-after-n": "projects",
-	"skills.browse":           "Browse projects",
-	"skills.browse-all":       "Browse all projects",
-	"skills.guide":            "You can select a skill to browse related projects. You can browse all projects by not selecting or deselecting the active skill.",
-	"skills.interest":         "interest level",
-	"skills.mastery":          "mastery level",
-
-	"tag.all": "All",
-	"tag.web": "Web",
-	"tag.storage": "Storage",
-	"tag.ui": "UI/UX",
-	"tag.system": "System",
-	"tag.mobile": "Mobile",
-	"tag.network": "Network",
-	"tag.iot": "IoT",
-	"tag.organization": "Organization",
-	"tag.language": "Language",
-	"tag.human": "Human",
-	"tag.other": "Other",
-
-	"skill.mariadb":         "MariaDB",
-	"skill.postgres":        "PostgreSQL",
-	"skill.mongo":           "MongoDB",
-	"skill.vue":             "Vue <i>(.js)</i>",
-	"skill.angular":         "Angular <i>(7+)</i>",
-	"skill.parcel":          "Parcel",
-	"skill.cordova":         "Apache Cordova",
-	"skill.webpack":         "Webpack",
-	"skill.webgl":           "WebGL",
-	"skill.audioapi":        "Audio API",
-	"skill.websocket":       "Websocket",
-	"skill.docker":          "Docker",
-	"skill.bash":            "bash",
-	"skill.linux":           "GNU/Linux",
-	"skill.systemd":         "systemd",
-	"skill.git":             "Git",
-	"skill.rpm":             "RPM packaging",
-	"skill.raspberry":       "Raspberry",
-	"skill.arduino":         "Arduino",
-	"skill.php":             "PHP",
-	"skill.html":            "HTML5",
-	"skill.css":             "CSS3",
-	"skill.js":              "Javascript",
-	"skill.ajax":            "AJAX",
-	"skill.ts":              "Typescript",
-	"skill.c":               "C (lang)",
-	"skill.cpp":             "C++",
-	"skill.python":          "Python",
-	"skill.go":              "Go (lang)",
-	"skill.qt":              "Qt",
-	"skill.opensource":      "Open-source",
-	"skill.electronics":     "Electronics",
-	"skill.web":             "Web",
-	"skill.rest":            "REST",
-	"skill.crypto":          "Security/crypto",
-	"skill.imageprocessing": "Image processing",
-	"skill.ai":              "Artificial Intelligence",
-	"skill.deeplearning":    "Deep Learning",
-	"skill.neuralnetwork":   "Neural Networks",
-	"skill.opti":            "Program optimization",
-	"skill.sockets":         "Sockets",
-	"skill.concurrency":     "Concurrency",
-	"skill.uiux":            "UI/UX",
-	"skill.inkscape":        "Inkscape",
-	"skill.rnd":             "R&D",
-	"skill.teamlead":        "Team Lead",
-	"skill.needsanalysis":   "Needs analysis",
-	"skill.grpc":            "gRPC",
-	"skill.microservices":   "Micro services",
-	"skill.kubernetes":      "Kubernetes",
-	"skill.scrum":           "SCRUM",
-	"skill.lora":            "LoRa",
-	"skill.architecture":    "Architecture",
-	"skill.chirpstack":      "ChirpStack",
-	"skill.refactor":        "Refactoring",
-	"skill.timescale":       "Timescale",
-	"skill.atlassian":       "Atlassian",
-
-	"time.dur-format":  "took {duration}",
-	"time.cur-format":  "since {duration}",
-	"time.diff-format": "{elapsed} ago",
-
-	"time.some":   "sometime",
-	"time.second": "{n} second", "time.seconds": "{n} seconds",
-	"time.minute": "{n} minute", "time.minutes": "{n} minutes",
-	"time.hour":   "{n} hour",   "time.hours":   "{n} hours",
-	"time.day":    "{n} day",    "time.days":    "{n} days",
-	"time.month":  "{n} month",  "time.months":  "{n} months",
-	"time.year":   "{n} year",   "time.years":   "{n} years",
-
-	"project.created": "Created",
-	"project.sources": "Hosted at",
-	"project.doc": "Documentation at",
-	"project.end": "Project stopped in",
-	"project.still": "Project still active",
-	"project.username": "Adrien Marquès",
-
-	"end": ""
-}
\ No newline at end of file
diff --git a/src/locales/en.ts b/src/locales/en.ts
new file mode 100644
index 0000000..cba46f8
--- /dev/null
+++ b/src/locales/en.ts
@@ -0,0 +1,117 @@
+export default {
+	'home.title': 'FREELANCE DEVELOPER',
+	'home.line1': 'Hi, I am another freelance developer !',
+	'home.line2-1': 'I\'ve created this website so you can',
+	'home.line2-2': 'browse',
+	'home.line2-3': 'my skills and projects.',
+	'home.line3': 'I started dev back in 2010. I now have worked on more than 50 projects.',
+	'home.line4': 'I work hard to provide my clients with maintainable projects so that they can evolve at low cost (economic and ecological).',
+	'home.line5-1': 'My top technologies at the moment are',
+	'home.line5-2': 'and',
+	'home.line5-3': '(Arduino, Raspberry).',
+
+	'timeline.title':     'Timeline of projects featuring',
+	'timeline.title-all': 'Timeline of all projects',
+	'timeline.back':      'Change skill',
+
+	'skills.featured-before':  'Featured in',
+	'skills.featured-after-1': 'project',
+	'skills.featured-after-n': 'projects',
+	'skills.browse':           'Browse projects',
+	'skills.browse-all':       'Browse all projects',
+	'skills.guide':            'You can select a skill to browse related projects. You can browse all projects by not selecting or deselecting the active skill.',
+	'skills.interest':         'interest level',
+	'skills.mastery':          'mastery level',
+
+	'tag.all': 'All',
+	'tag.web': 'Web',
+	'tag.storage': 'Storage',
+	'tag.ui': 'UI/UX',
+	'tag.system': 'System',
+	'tag.mobile': 'Mobile',
+	'tag.network': 'Network',
+	'tag.iot': 'IoT',
+	'tag.organization': 'Organization',
+	'tag.language': 'Language',
+	'tag.human': 'Human',
+	'tag.other': 'Other',
+
+	'skill.mariadb':         'MariaDB',
+	'skill.postgres':        'PostgreSQL',
+	'skill.mongo':           'MongoDB',
+	'skill.vue':             'Vue <i>(.js)</i>',
+	'skill.angular':         'Angular <i>(7+)</i>',
+	'skill.parcel':          'Parcel',
+	'skill.cordova':         'Apache Cordova',
+	'skill.webpack':         'Webpack',
+	'skill.webgl':           'WebGL',
+	'skill.audioapi':        'Audio API',
+	'skill.websocket':       'Websocket',
+	'skill.docker':          'Docker',
+	'skill.bash':            'bash',
+	'skill.linux':           'GNU/Linux',
+	'skill.systemd':         'systemd',
+	'skill.git':             'Git',
+	'skill.rpm':             'RPM packaging',
+	'skill.raspberry':       'Raspberry',
+	'skill.arduino':         'Arduino',
+	'skill.php':             'PHP',
+	'skill.html':            'HTML5',
+	'skill.css':             'CSS3',
+	'skill.js':              'Javascript',
+	'skill.ajax':            'AJAX',
+	'skill.ts':              'Typescript',
+	'skill.c':               'C (lang)',
+	'skill.cpp':             'C++',
+	'skill.python':          'Python',
+	'skill.go':              'Go (lang)',
+	'skill.qt':              'Qt',
+	'skill.opensource':      'Open-source',
+	'skill.electronics':     'Electronics',
+	'skill.web':             'Web',
+	'skill.rest':            'REST',
+	'skill.crypto':          'Security/crypto',
+	'skill.imageprocessing': 'Image processing',
+	'skill.ai':              'Artificial Intelligence',
+	'skill.deeplearning':    'Deep Learning',
+	'skill.neuralnetwork':   'Neural Networks',
+	'skill.opti':            'Program optimization',
+	'skill.sockets':         'Sockets',
+	'skill.concurrency':     'Concurrency',
+	'skill.uiux':            'UI/UX',
+	'skill.inkscape':        'Inkscape',
+	'skill.rnd':             'R&D',
+	'skill.teamlead':        'Team Lead',
+	'skill.needsanalysis':   'Needs analysis',
+	'skill.grpc':            'gRPC',
+	'skill.microservices':   'Micro services',
+	'skill.kubernetes':      'Kubernetes',
+	'skill.scrum':           'SCRUM',
+	'skill.lora':            'LoRa',
+	'skill.architecture':    'Architecture',
+	'skill.chirpstack':      'ChirpStack',
+	'skill.refactor':        'Refactoring',
+	'skill.timescale':       'Timescale',
+	'skill.atlassian':       'Atlassian',
+
+	'time.dur-format':  'took {duration}',
+	'time.cur-format':  'since {duration}',
+	'time.diff-format': '{elapsed} ago',
+
+	'time.some':   'sometime',
+	'time.second': '{n} second', 'time.seconds': '{n} seconds',
+	'time.minute': '{n} minute', 'time.minutes': '{n} minutes',
+	'time.hour':   '{n} hour',   'time.hours':   '{n} hours',
+	'time.day':    '{n} day',    'time.days':    '{n} days',
+	'time.month':  '{n} month',  'time.months':  '{n} months',
+	'time.year':   '{n} year',   'time.years':   '{n} years',
+
+	'project.created': 'Created',
+	'project.sources': 'Hosted at',
+	'project.doc': 'Documentation at',
+	'project.end': 'Project stopped in',
+	'project.still': 'Project still active',
+	'project.username': 'Adrien Marquès',
+
+	'end': ''
+}
\ No newline at end of file
diff --git a/src/locales/fr.json b/src/locales/fr.json
deleted file mode 100644
index 7ecb9ec..0000000
--- a/src/locales/fr.json
+++ /dev/null
@@ -1,118 +0,0 @@
-{
-	"home.title": "DÉVELOPPEUR FREELANCE",
-	"home.line1": "Hello, je suis développeur freelance !",
-	"home.line2-1": "J'ai développé ce site afin de vous permettre de",
-	"home.line2-2": "parcourir",
-	"home.line2-3": "mes compétences et projets.",
-	"home.line3": "J'ai démarré le dev en 2010. Aujourd'hui je compte plus de 50 projets à mon actif.",
-	"home.line4": "Je suis très attaché à fournir à mes clients des projets maintenables afin qu'ils puissent évoluer à moindre coût (économique et écologique).",
-	"home.line5-1": "Les technologies qui m'intéressent actuellement sont le",
-	"home.line5-2": "et l'",
-	"home.line5-3": "(Arduino, Raspberry).",
-
-	"timeline.title":     "Chronologie des projets avec",
-	"timeline.title-all": "Chronologie de tous les projets",
-	"timeline.back":      "Changer de compétence",
-
-	"skills.featured-before":  "Apparaît dans",
-	"skills.featured-after-1": "projet",
-	"skills.featured-after-n": "projets",
-	"skills.browse":           "Parcourir les projets",
-	"skills.browse-all":       "Parcourir tous les projets",
-	"skills.guide":            "Vous pouvez sélectionner une compétence afin de parcourir les projets liés. Vous pouvez aussi parcourir tous les projets en ne sélectionnant pas de compétence.",
-	"skills.interest":         "intérêt",
-	"skills.mastery":          "maîtrise",
-
-	"tag.all": "Tout",
-	"tag.web": "Web",
-	"tag.storage": "Stockage",
-	"tag.ui": "UI/UX",
-	"tag.system": "Système",
-	"tag.mobile": "Mobile",
-	"tag.network": "Réseau",
-	"tag.iot": "IoT",
-	"tag.organization": "Organisation",
-	"tag.language": "Langage",
-	"tag.human": "Humain",
-	"tag.other": "Autre",
-
-	"skill.mariadb":         "MariaDB",
-	"skill.postgres":        "PostgreSQL",
-	"skill.mongo":           "MongoDB",
-	"skill.vue":             "Vue <i>(.js)</i>",
-	"skill.angular":         "Angular <i>(7+)</i>",
-	"skill.parcel":          "Parcel",
-	"skill.cordova":         "Apache Cordova",
-	"skill.webpack":         "Webpack",
-	"skill.webgl":           "WebGL",
-	"skill.audioapi":        "Audio API",
-	"skill.websocket":       "Websocket",
-	"skill.docker":          "Docker",
-	"skill.bash":            "bash",
-	"skill.linux":           "GNU/Linux",
-	"skill.systemd":         "systemd",
-	"skill.git":             "Git",
-	"skill.rpm":             "RPM packaging",
-	"skill.raspberry":       "Raspberry",
-	"skill.arduino":         "Arduino",
-	"skill.php":             "PHP",
-	"skill.html":            "HTML5",
-	"skill.css":             "CSS3",
-	"skill.js":              "Javascript",
-	"skill.ajax":            "AJAX",
-	"skill.ts":              "Typescript",
-	"skill.c":               "C (lang)",
-	"skill.cpp":             "C++",
-	"skill.python":          "Python",
-	"skill.go":              "Go (lang)",
-	"skill.qt":              "Qt",
-	"skill.opensource":      "Open-source",
-	"skill.electronics":     "Electronique",
-	"skill.web":             "Web",
-	"skill.rest":            "REST",
-	"skill.crypto":          "Securité/crypto",
-	"skill.imageprocessing": "Traitement d'image",
-	"skill.ai":              "Intelligence Artificielle",
-	"skill.deeplearning":    "Deep Learning",
-	"skill.neuralnetwork":   "Réseaux de neuronnes",
-	"skill.opti":            "Optimization",
-	"skill.sockets":         "Sockets",
-	"skill.concurrency":     "Programmation Concurrente",
-	"skill.uiux":            "UI/UX",
-	"skill.inkscape":        "Inkscape",
-	"skill.rnd":             "R&D",
-	"skill.teamlead":        "Chef d'équipe",
-	"skill.needsanalysis":   "Analyse besoin client",
-	"skill.grpc":            "gRPC",
-	"skill.microservices":   "Micro services",
-	"skill.kubernetes":      "Kubernetes",
-	"skill.scrum":           "SCRUM",
-	"skill.lora":            "LoRa",
-	"skill.architecture":    "Architecture",
-	"skill.chirpstack":      "ChirpStack",
-	"skill.refactor":        "Refactor",
-	"skill.timescale":       "Timescale",
-	"skill.atlassian":       "Atlassian",
-
-
-	"time.dur-format":  "a duré {duration}",
-	"time.cur-format":  "depuis {duration}",
-	"time.diff-format": "il y a {elapsed}",
-
-	"time.some":   "un moment",
-	"time.second": "{n} seconde", "time.seconds": "{n} secondes",
-	"time.minute": "{n} minute",  "time.minutes": "{n} minutes",
-	"time.hour":   "{n} heure",   "time.hours":   "{n} heures",
-	"time.day":    "{n} jour",    "time.days":    "{n} jours",
-	"time.month":  "{n} mois",    "time.months":  "{n} mois",
-	"time.year":   "{n} an",      "time.years":   "{n} ans",
-
-	"project.created": "Création de",
-	"project.sources": "Sources:",
-	"project.doc": "Documentation:",
-	"project.end": "Projet terminé en",
-	"project.still": "Projet toujours actif",
-	"project.username": "Adrien Marquès",
-
-	"end": ""
-}
\ No newline at end of file
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
new file mode 100644
index 0000000..883e6bd
--- /dev/null
+++ b/src/locales/fr.ts
@@ -0,0 +1,118 @@
+export default {
+	'home.title': 'DÉVELOPPEUR FREELANCE',
+	'home.line1': 'Hello, je suis développeur freelance !',
+	'home.line2-1': 'J\'ai développé ce site afin de vous permettre de',
+	'home.line2-2': 'parcourir',
+	'home.line2-3': 'mes compétences et projets.',
+	'home.line3': 'J\'ai démarré le dev en 2010. Aujourd\'hui je compte plus de 50 projets à mon actif.',
+	'home.line4': 'Je suis très attaché à fournir à mes clients des projets maintenables afin qu\'ils puissent évoluer à moindre coût (économique et écologique).',
+	'home.line5-1': 'Les technologies qui m\'intéressent actuellement sont le',
+	'home.line5-2': 'et l\'',
+	'home.line5-3': '(Arduino, Raspberry).',
+
+	'timeline.title':     'Chronologie des projets avec',
+	'timeline.title-all': 'Chronologie de tous les projets',
+	'timeline.back':      'Changer de compétence',
+
+	'skills.featured-before':  'Apparaît dans',
+	'skills.featured-after-1': 'projet',
+	'skills.featured-after-n': 'projets',
+	'skills.browse':           'Parcourir les projets',
+	'skills.browse-all':       'Parcourir tous les projets',
+	'skills.guide':            'Vous pouvez sélectionner une compétence afin de parcourir les projets liés. Vous pouvez aussi parcourir tous les projets en ne sélectionnant pas de compétence.',
+	'skills.interest':         'intérêt',
+	'skills.mastery':          'maîtrise',
+
+	'tag.all': 'Tout',
+	'tag.web': 'Web',
+	'tag.storage': 'Stockage',
+	'tag.ui': 'UI/UX',
+	'tag.system': 'Système',
+	'tag.mobile': 'Mobile',
+	'tag.network': 'Réseau',
+	'tag.iot': 'IoT',
+	'tag.organization': 'Organisation',
+	'tag.language': 'Langage',
+	'tag.human': 'Humain',
+	'tag.other': 'Autre',
+
+	'skill.mariadb':         'MariaDB',
+	'skill.postgres':        'PostgreSQL',
+	'skill.mongo':           'MongoDB',
+	'skill.vue':             'Vue <i>(.js)</i>',
+	'skill.angular':         'Angular <i>(7+)</i>',
+	'skill.parcel':          'Parcel',
+	'skill.cordova':         'Apache Cordova',
+	'skill.webpack':         'Webpack',
+	'skill.webgl':           'WebGL',
+	'skill.audioapi':        'Audio API',
+	'skill.websocket':       'Websocket',
+	'skill.docker':          'Docker',
+	'skill.bash':            'bash',
+	'skill.linux':           'GNU/Linux',
+	'skill.systemd':         'systemd',
+	'skill.git':             'Git',
+	'skill.rpm':             'RPM packaging',
+	'skill.raspberry':       'Raspberry',
+	'skill.arduino':         'Arduino',
+	'skill.php':             'PHP',
+	'skill.html':            'HTML5',
+	'skill.css':             'CSS3',
+	'skill.js':              'Javascript',
+	'skill.ajax':            'AJAX',
+	'skill.ts':              'Typescript',
+	'skill.c':               'C (lang)',
+	'skill.cpp':             'C++',
+	'skill.python':          'Python',
+	'skill.go':              'Go (lang)',
+	'skill.qt':              'Qt',
+	'skill.opensource':      'Open-source',
+	'skill.electronics':     'Electronique',
+	'skill.web':             'Web',
+	'skill.rest':            'REST',
+	'skill.crypto':          'Securité/crypto',
+	'skill.imageprocessing': 'Traitement d\'image',
+	'skill.ai':              'Intelligence Artificielle',
+	'skill.deeplearning':    'Deep Learning',
+	'skill.neuralnetwork':   'Réseaux de neuronnes',
+	'skill.opti':            'Optimization',
+	'skill.sockets':         'Sockets',
+	'skill.concurrency':     'Programmation Concurrente',
+	'skill.uiux':            'UI/UX',
+	'skill.inkscape':        'Inkscape',
+	'skill.rnd':             'R&D',
+	'skill.teamlead':        'Chef d\'équipe',
+	'skill.needsanalysis':   'Analyse besoin client',
+	'skill.grpc':            'gRPC',
+	'skill.microservices':   'Micro services',
+	'skill.kubernetes':      'Kubernetes',
+	'skill.scrum':           'SCRUM',
+	'skill.lora':            'LoRa',
+	'skill.architecture':    'Architecture',
+	'skill.chirpstack':      'ChirpStack',
+	'skill.refactor':        'Refactor',
+	'skill.timescale':       'Timescale',
+	'skill.atlassian':       'Atlassian',
+
+
+	'time.dur-format':  'a duré {duration}',
+	'time.cur-format':  'depuis {duration}',
+	'time.diff-format': 'il y a {elapsed}',
+
+	'time.some':   'un moment',
+	'time.second': '{n} seconde', 'time.seconds': '{n} secondes',
+	'time.minute': '{n} minute',  'time.minutes': '{n} minutes',
+	'time.hour':   '{n} heure',   'time.hours':   '{n} heures',
+	'time.day':    '{n} jour',    'time.days':    '{n} jours',
+	'time.month':  '{n} mois',    'time.months':  '{n} mois',
+	'time.year':   '{n} an',      'time.years':   '{n} ans',
+
+	'project.created': 'Création de',
+	'project.sources': 'Sources:',
+	'project.doc': 'Documentation:',
+	'project.end': 'Projet terminé en',
+	'project.still': 'Projet toujours actif',
+	'project.username': 'Adrien Marquès',
+
+	'end': ''
+}
\ No newline at end of file
diff --git a/src/locales/index.ts b/src/locales/index.ts
index b84a9d6..8eaffcb 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -9,8 +9,8 @@ export const LOCALES = [
 ];
 
 
-import en from './en.json';
-import fr from './fr.json';
+import en from './en';
+import fr from './fr';
 
 export const messages = {
 	[Locales.EN]: en,
