feat: translate interest and mastery levels

src/components/LevelDisplay.vue

@@ -60,8 +60,8 @@ export default class LevelDisplay extends Vue {
 		div {
 			display: block;
 			position: relative;
-				width:  1em;
-				height: 1em;
+				width:  1.2em;
+				height: 1.2em;
 
 			margin: 0 .2em;
 
@@ -69,13 +69,15 @@ export default class LevelDisplay extends Vue {
 			border: .2rem solid #141619;
 			background: #141619;
 
-			&.active {
-				background: #6252c6;
-			}
 		}
 
-		.l1 {
-			margin-left: 0;
-		}
+		.l1.active { background: darken(#6252c6, 8%); }
+		.l2.active { background: darken(#6252c6, 6%); }
+		.l3.active { background: darken(#6252c6, 4%); }
+		.l4.active { background: darken(#6252c6, 2%); }
+		.l5.active { background: darken(#6252c6, 0%); }
+
+		.l1 { margin-left: 0; }
+		.l5 { margin-right: 0; }
 	}
 </style>

src/components/SkillPicker.vue

@@ -23,9 +23,9 @@
 
 				<section class='details' v-if='details != null'>
 					<header>
-						<span class='interest'>interest <LevelDisplay :level='details.interest'/></span>
+						<span class='interest'>{{ $t('skills.interest') }}<LevelDisplay :level='details.interest'/></span>
 						<img :src='details.icon'/>
-						<span class='mastery'>mastery <LevelDisplay :level='details.mastery'/></span>
+						<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>

src/locales/en.json

@@ -20,6 +20,8 @@
 	"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",

src/locales/fr.json

@@ -20,6 +20,8 @@
 	"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",