diff --git a/src/components/Home.vue b/src/components/Home.vue index e1737e3..6c9e9cb 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -37,7 +37,7 @@ import { Component, Vue } from 'vue-property-decorator'; import { go } from '@/service/scroller'; import { TypeWriter } from '@/service/typewriter'; import LangPicker from './LangPicker.vue'; -LangPicker +LangPicker; @Component({ components: { LangPicker }, @@ -97,7 +97,7 @@ export default class Home extends Vue { setTimeout( () => { localStorage.setItem('typed', `${new Date().getTime()}`); }, 13000 ); - }, 100) + }, 100); } } diff --git a/src/components/LangPicker.vue b/src/components/LangPicker.vue index b6bd0f7..0c6f0d0 100644 --- a/src/components/LangPicker.vue +++ b/src/components/LangPicker.vue @@ -21,21 +21,21 @@ export default class LangPicker extends Vue { return this.$i18n.locale; } set current(l: string) { - localStorage.setItem("lang", l); + localStorage.setItem('lang', l); this.$i18n.locale = l; } private mounted() { - const ls = localStorage.getItem("lang") as Locales|null; + const ls = localStorage.getItem('lang') as Locales|null; // already selected a language, stay with it - if( ls != null && this.locales.indexOf(ls) >= 0 ){ + 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 ){ + if ( navigator.language.indexOf('fr') > -1 ) { this.current = Locales.FR; } else { this.current = Locales.EN; diff --git a/src/components/SkillPicker.vue b/src/components/SkillPicker.vue index 267ed34..6d3bf78 100644 --- a/src/components/SkillPicker.vue +++ b/src/components/SkillPicker.vue @@ -87,11 +87,6 @@ export default class SkillPicker extends Vue { // details section when a skill is selected private details: Details|null = null; - // returns the label for a tag - protected tagLabel(t: tTag): string { - return tagLabel(t); - } - // selects or deselects a skill. If the skill is not in the current // folder, it navigates to the DEFAULT_TAG folder beforehand. Scrolls to // the selected skill when selected. @@ -115,6 +110,11 @@ export default class SkillPicker extends Vue { this.$emit('pick', id); } + // returns the label for a tag + protected tagLabel(t: tTag): string { + return tagLabel(t); + } + protected onPick(id: tID, picked: boolean) { this.select(id, !picked); } diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index a954ccb..47ad67b 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -108,7 +108,7 @@ function getTimeDiff(start: Date, stop: Date): TimeDiff { } if ( diff < minute ) { - return {diff: diff, one: 'time.second', plural: 'time.seconds'}; + return {diff, one: 'time.second', plural: 'time.seconds'}; } if ( diff < hour ) { return {diff: diff / minute, one: 'time.minute', plural: 'time.minutes'}; @@ -142,13 +142,13 @@ export default class Timeline extends Vue { return; } this.projects = projects.bySkill(skill).sort( (a, b) => { - if( b.stopped_at == null && a.stopped_at == null ){ - return b.started_at.getTime() - a.started_at.getTime() + if ( b.stopped_at == null && a.stopped_at == null ) { + return b.started_at.getTime() - a.started_at.getTime(); } - if( a.stopped_at != null && b.stopped_at == null ){ + if ( a.stopped_at != null && b.stopped_at == null ) { return 1; } - if( b.stopped_at != null && a.stopped_at == null ){ + if ( b.stopped_at != null && a.stopped_at == null ) { return -1; } return b.started_at.getTime() - a.started_at.getTime(); @@ -159,21 +159,17 @@ export default class Timeline extends Vue { return date.toLocaleDateString(this.$i18n.locale, { month: 'short', year: 'numeric' }); } - private mounted() { - document.body.addEventListener('scroll', this.onScroll, { passive: true }); - } - protected elapsed(date: Date): string { const fmt = 'time.diff-format'; const td = getTimeDiff(date, new Date()); const diff = Math.floor(td.diff); - if( diff == 0 ){ + if ( diff == 0 ) { return this.$t(fmt, { elapsed: this.$t(td.one) }).toString(); } - if( diff > 1 ){ // plural + if ( diff > 1 ) { // plural return this.$t(fmt, { elapsed: this.$t(td.plural, { n: diff }) }).toString(); } // singular @@ -185,17 +181,25 @@ export default class Timeline extends Vue { const td = getTimeDiff(start, stop); const diff = Math.floor(td.diff); - if( diff == 0 ){ + if ( diff == 0 ) { return this.$t(fmt, { duration: this.$t(td.one) }).toString(); } - if( diff > 1 ){ // plural + if ( diff > 1 ) { // plural return this.$t(fmt, { duration: this.$t(td.plural, { n: diff }) }).toString(); } // singular return this.$t(fmt, { duration: this.$t(td.one, { n: diff }) }).toString(); } + protected scrollBack() { + scroller.go('skill-picker', 0); + } + + private mounted() { + document.body.addEventListener('scroll', this.onScroll, { passive: true }); + } + private onScroll(e: Event) { const target = e.target as HTMLElement; const header = this.$refs.header as HTMLElement; @@ -216,10 +220,6 @@ export default class Timeline extends Vue { header.classList.remove('fixed'); } } - - protected scrollBack() { - scroller.go("skill-picker", 0); - } } diff --git a/src/locales/index.ts b/src/locales/index.ts index 7d3afaf..b84a9d6 100644 --- a/src/locales/index.ts +++ b/src/locales/index.ts @@ -5,8 +5,8 @@ export enum Locales { export const LOCALES = [ { value: Locales.EN, caption: 'English' }, - { value: Locales.FR, caption: 'Français' } -] + { value: Locales.FR, caption: 'Français' }, +]; import en from './en.json'; @@ -14,7 +14,7 @@ import fr from './fr.json'; export const messages = { [Locales.EN]: en, - [Locales.FR]: fr + [Locales.FR]: fr, }; -export const defaultLocale = Locales.EN; \ No newline at end of file +export const defaultLocale = Locales.EN; diff --git a/src/main.ts b/src/main.ts index 9d6bf07..90c405a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,7 +10,7 @@ Vue.use(VueI18n); const i18n = new VueI18n({ messages, locale: defaultLocale, - fallbackLocale: defaultLocale + fallbackLocale: defaultLocale, }); new Vue({ diff --git a/src/model/projects.ts b/src/model/projects.ts index fdfc07e..86dbafb 100644 --- a/src/model/projects.ts +++ b/src/model/projects.ts @@ -102,7 +102,7 @@ export const Projects: Project[] = [ }, source: [{ name: 'git.xdrm.io/go/ws', link: 'https://git.xdrm.io/go/ws', commits: 114 }], doc: { name: 'pkg.go.dev/git.xdrm.io/go/ws', link: 'https://pkg.go.dev/git.xdrm.io/go/ws' }, - commits: 0 + commits: 0, }, { @@ -117,7 +117,7 @@ export const Projects: Project[] = [ }, source: [{ name: 'git.xdrm.io/logauth/smmp', link: 'https://git.xdrm.io/logauth/smmp', commits: 567 }], doc: null, - commits: 0 + commits: 0, }, { @@ -137,7 +137,7 @@ export const Projects: Project[] = [ { name: 'git.xdrm.io/logauth/schastsp', link: 'https://git.xdrm.io/logauth/schastsp', commits: 92 }, ], doc: null, - commits: 0 + commits: 0, }, { @@ -152,7 +152,7 @@ export const Projects: Project[] = [ }, source: [{ name: 'git.xdrm.io/dut/sid', link: 'https://git.xdrm.io/dut/sid', commits: 401 }], doc: null, - commits: 0 + commits: 0, }, { @@ -170,6 +170,6 @@ export const Projects: Project[] = [ { name: 'git.xdrm.io/mti/ptut-vhost', link: 'https://git.xdrm.io/mti/ptut-vhost', commits: 397 }, ], doc: null, - commits: 0 + commits: 0, }, ]; diff --git a/src/model/skills.ts b/src/model/skills.ts index cd51a7b..dedf9fb 100644 --- a/src/model/skills.ts +++ b/src/model/skills.ts @@ -1,4 +1,4 @@ -import { Locales } from "@/locales"; +import { Locales } from '@/locales'; export enum tID { MariaDB, @@ -61,11 +61,11 @@ export enum tTag { Organization, Language, Human, - Other + Other, } export function tagLabel(t: tTag): string { - switch(t){ + switch (t) { case tTag.All: return 'tag.all'; case tTag.Web: return 'tag.web'; case tTag.Storage: return 'tag.storage'; @@ -82,7 +82,7 @@ export function tagLabel(t: tTag): string { } export function skillLabel(s: tID): string { - switch(s){ + switch (s) { case tID.MariaDB: return 'skill.mariadb'; case tID.Postgres: return 'skill.postgres'; case tID.Mongo: return 'skill.mongo'; @@ -149,7 +149,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'MySQL (now MariaDB) is the most known database management system to introduce SQL. I started using mysql then MariaDB as my first introduction to SQL, mostly when I started learning web with PHP. I now prefer using postgreSQL instead as it tends to be more robust and performant overall.', [Locales.FR]: 'MySQL (maintenant MariaDB) est le système de base de données le plus répendu pour une introduction au SQL. J\'ai commencé à utiliser MySQL puis MariaDB en introduction à SQL, principalement quand j\'ai commencé à apprendre le développement web avec PHP. J\'utilise maintenant plutôt PostgreSQL car je le trouve plus robuste et performant.', - } + }, }, [tID.Postgres]: { link: 'https://postgresql.org', @@ -158,7 +158,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'A DBMS like MariaDB but with performance and consistency in mind. My main choice of dbms when using sql orfor relational databases. Had some experience with it mainly with go services with docker.', [Locales.FR]: 'Un DBMS comme MariaDB mais avec la performance et robustesse en plus. Mon choix de prédilection quand il s\'agit de DBMS sql ou de base relationnelle. Je l\'ai pas mal utilisé principalement pour des services go avec docker et docker-compose.', - } + }, }, [tID.Mongo]: { link: 'https://mongodb.com', @@ -167,7 +167,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'I learned it during my Master\'s degree. I used advanced Mongo with schema validation and complex filter requests. I find this technology really interesting over SQL, but I find classical relational databases are easier to comprehend and I am more used to it.', [Locales.FR]: 'J\'ai appris et utilisé Mongo pendant mon Master, je n\'ai pas eu de réelle occasion de l\'utiliser depuis. J\'ai pu utiliser la version "robuste" de Mongo : validation de schéma and requêtes avec filtres complexes.

Je trouve cette technologie une intéressante alternative au SQL "classique", mais les bases relationnelles sont à mon avis plus facile à apréhender, puis j\'y suis habitué.', - } + }, }, [tID.Vue]: { @@ -177,7 +177,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'Web front-end framework that displays components directly from your data, with an extremely low cost. I started learning Vue (.js) back in 2016, and never stopped practicing since then for personal and professional projects. I view it as a better alternative than angular which provides you with a strict framework that can lack flexibility among teams and projects.

Vue makes it your responsability to properly structure your project which I like to take care of myself, as it tends to provide a better workflow adjusted for every project.

It is my top choice when considering a web framework for rendering pages.', [Locales.FR]: 'Framework pour front-end web qui affiche des composants graphiques directement depuis les données à un coup relativement bas. J\'ai découvert Vue en 2016, et n\'ai jamais arrêté de l\'utiliser depuis tant pour mes projets perso que professionnels. Je vois Vue comme une meilleure alternative qu\'Angular qui, lui, fournit un cadre de travail strict qui manque de flexibilité aux équipes et projets.

Vue vous rend la responsabilité de structurer correctement vos projets, ce que j\'apprécie faire moi-même, je trouve que ça pousse à un meilleur workflow (ajusté à chaque projet).

C\'est moi choix de prédilection en tant que framework web pour faire du rendu.', - } + }, }, [tID.Angular]: { link: 'https://angular.io', @@ -195,15 +195,15 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'Package bundler for the web, that aims to require no configuration. I used it often back in my Master\'s Degree period along with PHP backends. It allows to get away from webpack which I find overly complicated and a major point of failure for most frontends.

I haven\'t used it in a while but would highly consider it as it has no real prerequisite.', [Locales.FR]: 'Bundler (c.f. webpack) pour le web, qui vise à ne demander aucune configuration. Beaucoup utilisé pendant le Master, souvent pour des projets web avec un backend PHP. Permet de s\'affranchir de webpack, ce que je trouve plutôt bénéfique car trop complexe et souvent un point-of-failure majeur.

Je ne l\'ai pas utilisé depuis un moment mais je le garde en tête comme alternative sans prérequis pour les projets web.', - } + }, }, [tID.Cordova]: { link: 'https://cordova.apache.org/', icon: 'skills/cordova.svg', tags: [tTag.System, tTag.Web, tTag.Mobile], info: { - [Locales.EN]:'Library that transforms a single page application into a mobile or desktop application with no further programming. I\'ve used it often to transform SPA into android, iOS or desktop apps at low cost. I haven\'t needed this kind of software for a while, it might now be favorable to use Capacitor or other "alternatives".', - [Locales.FR]:'Programme permettant de transformer des sites web SPA (Single Page Application) en applications mobiles ou bureau sans avoir à toucher le code. Je l\'ai beaucoup utilisé pour transformer mes applis SPA en applications Android, iOS ou de bureau a moindre coût. Je n\'en ai pas eu besoin depuis un moment, il serait sûrement judicieux de m\'intéresser aux nouvelles alternatives plus à jour telles que Capacitor.', + [Locales.EN]: 'Library that transforms a single page application into a mobile or desktop application with no further programming. I\'ve used it often to transform SPA into android, iOS or desktop apps at low cost. I haven\'t needed this kind of software for a while, it might now be favorable to use Capacitor or other "alternatives".', + [Locales.FR]: 'Programme permettant de transformer des sites web SPA (Single Page Application) en applications mobiles ou bureau sans avoir à toucher le code. Je l\'ai beaucoup utilisé pour transformer mes applis SPA en applications Android, iOS ou de bureau a moindre coût. Je n\'en ai pas eu besoin depuis un moment, il serait sûrement judicieux de m\'intéresser aux nouvelles alternatives plus à jour telles que Capacitor.', }, }, [tID.Webpack]: { @@ -213,7 +213,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'The most known/used package bundler for the web ... I used it a lot because it is often required. But I hate that it is so complex that most users use it without understanding what is really does. I avoid it whenever possible, the issue can be transposed to node_modules and the whole node ecosystem.', [Locales.FR]: 'Le bundler pour du web le plus connu/utilisé ... J\'ai été forcé de beaucoup l\'utiliser mais jamais par choix ! C\'est un outil très puissant, mais je n\'aime pas que ce soit aussi complexe et que la plupart des utilisateurs (moi inclus) l\'utilisent sans vraiment comprendre ce que ça fait réellement. Je l\'évite dès que possible, cette problématique peut être transposée à node_modules et l\'écosystème node en général.', - } + }, }, [tID.WebGL]: { @@ -223,7 +223,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'OpenGL API for the web ! I used it during my graduation years, the potential is great but I need to find a time to explore what\'s new.', [Locales.FR]: 'API OpenGL pour le web ! Utilisé à plusieurs reprises pendant mes études, il y a un gros potentiel mais il me faudrait trouver le temps d\'explorer les nouveautés et utilisation.', - } + }, }, [tID.AudioAPI]: { link: 'https://webaudio.github.io/web-audio-api/', @@ -232,7 +232,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'Audio API for the web ! I used it mainly to build a discord clone (audio and video full-duplex streaming) as a school project. I also tried the Fourier transform to build nice graphics (c.f. Soundcloud) but have not succeeded at the time.', [Locales.FR]: 'API Audio pour le web ! Je l\'ai principalement utilisée pour un projet clone de Discord (audio et video en streaming full-duplex) pendant mes études. J\'ai aussi beaucoup joué avec pour essayer d\'implémenter la transformée de Fourier afin de produire un visuel de lecture audio (c.f. Soundcloud) mais je n\'ai pas réussi à l\'époque.', - } + }, }, [tID.Websocket]: { link: 'https://tools.ietf.org/html/rfc6455', @@ -241,7 +241,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'Communication protocol for the web that is full-duplex (both sides can send and receive simultaneously). I use them whenever possible to avoid the classical expensive polling.

I also created my own websocket client & server implementation in Go following nothing but the RFC for learning purposes.

I\'ve used, designed and implemented websocket communications among personal and professional projects.', [Locales.FR]: 'Protocole de communication pour le web full-duplex (les 2 côtés peuvent envoyer et recevoir en même temps). Je les utilise dès que possible plutôt que faire du polling coûteux pour rien.

J\'ai aussi créé ma propre implémentation de client et serveur en Go en suivant juste la RFC afin d\'avoir une meilleure appréhension du fonctionnement et des limites.

J\'ai eu plusieurs l\'occasion de concevoir et implémenter des systèmes de communications basés sur les websocket que ce soit pour des projets perso ou pro.', - } + }, }, [tID.Docker]: { @@ -251,7 +251,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'Container system and ecosystem. I am using it for a while now. Most of my go projects use it as it costs no memory for your executable (multi-stage build from scratch) and allows for isolation and a better control over the running environment.

I am learning docker a bit more every time I use it. It is often coupled with docker-compose in my projects.', [Locales.FR]: 'Système et écosystème de containerisation. J\'utilise docker assez régulièrement depuis des années. La plupart de mes projets en go en tirent parti car cela permet de construire des containers "multi-plateforme" sans que ça pèse plus lourd que l\'exécutable (multi-stage build from scratch). Docker aussi permet à mes devs en go de l\'isolation et un meilleur contrôle de l\'environnement.

J\'étends mes connaissances à chaque nouveau projet, je l\'utilise aussi beaucoup via docker-compose.', - } + }, }, [tID.Bash]: { link: 'https://www.gnu.org/software/bash/', @@ -260,7 +260,7 @@ export const Skills: tSkills = { info: { [Locales.EN]: 'GNU sh-compatible shell, featured in GNU/Linux distros. Felt in love with GNU/linux and its ecosystem a while back (was 14yo back then) and I\'ve never stopped. I\'m often the linux/bash guy of the team.

I use it extensively to automate anything a human can do as it avoids a lot of mistakes in most workflows.', [Locales.FR]: 'Shell compatible sh fourni dans les OS GNU/Linux. Je suis tombé amoureux de GNU/Linux et son écosystème depuis un moment (à 14 ans) et je n\'ai pas déchanté depuis. Je suis souvent le "linux/bash guy" de l\'équipe.

J\'utilise le bash de manière déraisonnable pour automatiser tout ce que les humains peuvent faire, mais sans les erreurs, dans la plupart de mes workflows.', - } + }, }, [tID.Linux]: { link: 'https://www.linux.org', @@ -557,7 +557,7 @@ export const Skills: tSkills = { [tID.TeamLead]: { link: 'https://en.wikipedia.org/wiki/Team_leader', icon: null, - tags: [tTag.Organization, tTag.Human,], + tags: [tTag.Organization, tTag.Human], info: { [Locales.EN]: '', [Locales.FR]: '', diff --git a/src/service/skills.ts b/src/service/skills.ts index ac712f2..c0b6c79 100644 --- a/src/service/skills.ts +++ b/src/service/skills.ts @@ -20,8 +20,8 @@ export function available(): tID[] { availCache.sort( (a: tID, b: tID) => { const aname = skillLabel(a); const bname = skillLabel(b); - if( aname < bname ){ return -1; } - if( aname > bname ){ return 1; } + if ( aname < bname ) { return -1; } + if ( aname > bname ) { return 1; } return 0; }); return availCache;