feat: create the skill picker guide

src/components/SkillPicker.vue

@@ -36,6 +36,10 @@
 					<p v-html='details.text[$i18n.locale]'></p>
 				</section>
 
+				<section class='guide' v-else>
+					<p v-html='$t("skills.guide")'></p>
+				</section>
+
 			</div>
 
 			<input type='button' v-show='this.sel != null' :value="$t('skills.browse')" @click='browse()'/>
@@ -83,10 +87,10 @@ export default class SkillPicker extends Vue {
 	// available categories (tags)
 	private tags: tTag[] = [DEFAULT_TAG, ...skills.tags()];
 	// currently selected tag
-	private tag: tTag = tTag.Web;
+	private tag: tTag = DEFAULT_TAG;
 
 	// details section when a skill is selected
-	private details: Details|null = null;
+	protected details: Details|null = null;
 
 	// selects or deselects a skill. If the skill is not in the current
 	// folder, it navigates to the DEFAULT_TAG folder beforehand. Scrolls to
@@ -132,11 +136,11 @@ export default class SkillPicker extends Vue {
 		go(`search-header`, 0);
 	}
 
-	private mounted() {
+	protected mounted() {
 		this.filterByTag();
 	}
 
-	private scroll(proj_name: string) {
+	protected scroll(proj_name: string) {
 		const head = document.querySelector(`#search-header`) as HTMLElement;
 		if ( head == null ) {
 			return;
@@ -350,6 +354,40 @@ export default class SkillPicker extends Vue {
 
 	}
 
+
+	.guide {
+		flex: auto;
+
+		display: flex;
+			height: 100%;
+
+		margin: auto;
+
+		flex-flow: column nowrap;
+		align-items: center;
+		justify-content: center;
+
+		p {
+			flex: auto 0 1;
+
+			display: block;
+			position: relative;
+			margin: 0 3em;
+			margin-top: 2em;
+			margin-bottom: 4rem;
+
+			font-size: 1.8em;
+			font-weight: 500;
+			text-align: justify;
+			color: #667;
+			padding: 1em;
+
+			overflow: hidden;
+
+			user-select: none;
+		}
+	}
+
 	input {
 		display: block;
 		position: absolute;

src/locales/en.json

@@ -19,6 +19,7 @@
 	"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.",
 
 	"tag.all": "All",
 	"tag.web": "Web",

src/locales/fr.json

@@ -19,6 +19,7 @@
 	"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.",
 
 	"tag.all": "Tout",
 	"tag.web": "Web",