diff --git a/src/components/Home.vue b/src/components/Home.vue index 6c9e9cb..d97f327 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -20,7 +20,8 @@

{{ $t('home.line1') }}

{{ $t('home.line2-1') }} {{ $t('home.line2-2') }} {{$t('home.line2-3') }}

{{ $t('home.line3') }}

-

{{ $t('home.line4-1') }} Go {{ $t('home.line4-2') }} IoT {{ $t('home.line4-3') }}

+

{{ $t('home.line4') }}

+

{{ $t('home.line5-1') }} Go {{ $t('home.line5-2') }} IoT {{ $t('home.line5-3') }}

@@ -64,10 +65,11 @@ export default class Home extends Vue { // skip animation if already done less than 10min ago if ( diff_sec < threshold ) { + (this.$refs.text1 as HTMLElement).style.display = 'block'; (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'; + (this.$refs.text5 as HTMLElement).style.display = 'block'; return; } @@ -75,6 +77,7 @@ export default class Home extends Vue { const t2 = new TypeWriter( this.$refs.text2 as HTMLElement ); const t3 = new TypeWriter( this.$refs.text3 as HTMLElement ); const t4 = new TypeWriter( this.$refs.text4 as HTMLElement ); + const t5 = new TypeWriter( this.$refs.text5 as HTMLElement ); // wait for i18n to change text @@ -83,6 +86,7 @@ export default class Home extends Vue { t2.init(); t3.init(); t4.init(); + t5.init(); // wait 1s, anim 1.5s setTimeout( () => t1.animate(1500), 1000 ); @@ -92,11 +96,13 @@ export default class Home extends Vue { setTimeout( () => t3.animate(4000), 6000 ); // wait 10s, anim 3s setTimeout( () => t4.animate(3000), 10000 ); + // wait 13s, anim 3s + setTimeout( () => t5.animate(3000), 13000 ); // local storage: store that we animated once setTimeout( () => { localStorage.setItem('typed', `${new Date().getTime()}`); - }, 13000 ); + }, 16000 ); }, 100); } diff --git a/src/model/projects.ts b/src/model/projects.ts index 86dbafb..85412f8 100644 --- a/src/model/projects.ts +++ b/src/model/projects.ts @@ -83,7 +83,7 @@ export const Projects: Project[] = [ stopped_at: null, // still active info: { [Locales.EN]: 'Started as a personal go library to ease REST API development. The main goal is to greatly enhance maintainability by providing a single configuration file that describes every endpoint of the API. Everything that can be automated is while staying idiomatic to go. Aicra automates routing, parameter validation and extraction, permission management, response output formatting.

I then used it for a professional project in the medical field after corporate evaluation and audit. At the end of the project, results in production are promising : development and testing speed and ease, overall performances, configuration readability for other team members provides a real benefit, they can know the whole api at any time.', - [Locales.FR]: 'Démarré en tant que projet personnel afin de simplifier mes développements d\'API REST. L\'objectif principal et d\'améliorer significativement la maintenabilité avec l\'utilisation d\'un fichier de configuration unique qui décrit/définit tous les endpoints de l\'API. Tout ce qui peut être automatisé l\'est tout en restant idiomatique à Go. Aicra automatise le routage, la validation et extraction des paramètres, les classes de permissions, le formattage des réponses, etc.

J\'ai ensuite pu utiliser cette librairie lors d\'un projet industriel dans le domaine médical après audit et evaluation par l\'entreprise. Après avoir terminé ce projet, les résultats sont plutôt encourageants : rapidité de développement et de test, performances, lisibilité du fichier de configuration pour les autres membres de l\'équipe, (permet de connaître toute l\'API à tout moment du développement) etc.', + [Locales.FR]: 'Démarré en tant que projet personnel afin de simplifier mes développements d\'API REST. L\'objectif principal et d\'améliorer significativement la maintenabilité avec l\'utilisation d\'un fichier de configuration unique qui décrit/définit tous les endpoints de l\'API. Tout ce qui peut être automatisé l\'est, tout en restant idiomatique à Go. Aicra automatise le routage, la validation et l\'extraction des paramètres, les classes de permissions, le formattage des réponses, etc.

Ce projet a été utilisé pour un projet industriel dans le domaine médical après audit et évaluation de l\'entreprise. Au terme du projet, les résultats sont plutôt encourageants :', }, source: [{ name: 'github.com/xdrm-io/aicra', link: 'https://github.com/xdrm-io/aicra', commits: 535 }], doc: { name: 'pkg.go.dev/github.com/xdrm-io/aicra', link: 'https://pkg.go.dev/github.com/xdrm-io/aicra' }, @@ -97,8 +97,8 @@ export const Projects: Project[] = [ started_at: new Date(2018, 3, 24), stopped_at: new Date(2021, 5, 21), info: { - [Locales.EN]: 'Research project to learn more about websockets. I developed a websocket client and server using the RFC as only guidance.

I did some optimizations to provide a performant solution based on the idiomatic way of dealing with asynchronous resources (channels). By the way I used gorilla/websocket later and I don\'t understand why everything in the API is synchronous ?!

"I know websockets"', - [Locales.FR]: 'Projet de recherche pour mieux comprendre les websockets. J\'ai développé un client et un serveur websocket avec la RFC comme seul guide.

J\'ai aussi fait une passe optimisation pour avoir une solution performante basée sur la manière idiomatique (Go) de gérer la concurrence (channels). D\'ailleurs j\'ai utilisé gorilla/websocket plus tard, et je ne comprends pas pourquoi toute l\'api est synchrone ?!

"I know websockets"', + [Locales.EN]: 'Research project to learn more about websockets. I developed a websocket client and server using the RFC as only guidance.

I did some optimizations to provide a performant solution based on the idiomatic way of dealing with asynchronous resources (channels).', + [Locales.FR]: 'Projet de recherche pour mieux comprendre les websockets. J\'ai développé un client et un serveur websocket avec la RFC comme seul guide.

J\'ai aussi fait une passe optimisation pour avoir une solution performante en gestion de concurrence qui soit idiomatique à Go (channels, select).', }, 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' }, @@ -113,7 +113,7 @@ export const Projects: Project[] = [ stopped_at: new Date(2018, 10, 5), info: { [Locales.EN]: 'I conducted the LogAuth project back in 2017 for a French branch of an international carrier and logistics company. The project aims to provide a solution to track their warehouse\'s users and vehicles.

I developed:

The SMMP is a website developped with a PHP backend and vanilla frontend (no lib). It manages groups of users and groups of machines. Some groups of users can be authorized to do some actions on some groups of machines. A page allows to browse the access history in real-time.

Also the website allowed for new features on-the-fly by using a generic database model that can define what feature read or write what GPIO pin on the RaspBerry Pi. Machine state management was also defined by the generic database model.', - [Locales.FR]: 'J\'ai réalisé le projet LogAuth en 2017 pour la branche française d\'une entreprise internationale de transport et logistique. Le projet vise à fournir une solution afin de suivre et gérer les accès des utilisateurs aux machines d\'un entrepot.

J\'ai développé:

La plateforme SMMP est un site web développé avec un backend PHP et un frontend vanilla (pas de librairie). Elle permet la gestion de groupes d\'utilisateurs et de groupes de machines. Des actions peuvent être configurées pour des groupes d\'utilisateurs sur des groupes de machines. Une page permet de parcourir l\'historique des accès en temps réel.

De plus, le site permet l\'ajout de nouvelle fonctionnalités en l\'état grâce à un modèle de base de données générique qui permet directement de définir des entrées/sorties du Raspberry Pi. La machine à état est aussi définie dans le modèle générique en base.', + [Locales.FR]: 'J\'ai réalisé le projet LogAuth en 2017 pour la branche française d\'une entreprise internationale de transport et logistique. Le projet vise à fournir une solution de suivi et gestion des accès utilisateurs aux machines d\'un entrepôt.

Le projet consiste en:

La plateforme SMMP est un site web développé avec un backend PHP et un frontend vanilla (pas de librairie). Elle permet la gestion de groupes d\'utilisateurs et de groupes de machines. Des actions peuvent être configurées pour des groupes d\'utilisateurs sur des groupes de machines. Une page permet de parcourir l\'historique des accès en temps réel.

Le point fort du projet est qu\'il permet l\'ajout de nouvelles fonctionnalités en l\'état, grâce à un modèle de base de données générique, qui permet directement de définir des entrées/sorties du Raspberry Pi. La machine à état est aussi définie dans le modèle générique en base.', }, source: [{ name: 'git.xdrm.io/logauth/smmp', link: 'https://git.xdrm.io/logauth/smmp', commits: 567 }], doc: null, @@ -128,7 +128,7 @@ export const Projects: Project[] = [ stopped_at: new Date(2018, 10, 5), info: { [Locales.EN]: 'I conducted the LogAuth project back in 2017 for a French branch of an international carrier and logistics company. The project aims to provide a solution to track their warehouse\'s users and vehicles.

I developed:

The SATS consists of a hardware and its associated firmware. The firmware is a set of programs launched through a complex systemd state machine to go through the stages : boot, network connection, update check, update, init IO, the daemon (main loop).

It grants or denies access when an RFID card is detected, the access list is regularly fetched from the SMMP api. It is able to update and fetch new features from the network. It stores every access (or attempt), manages and tracks the machine state over time.

I made a few PCBs for the SATS in order to interface the Arduino properly, and with a Raspberry in the last properly.

I also had to design my own authentication system to provide a robust and attack-proof communication between SATS and the SMMP. It avoids key theft, request forgery and allows for resynchronization after an attack or a theft. Source: Draft protocol', - [Locales.FR]: 'J\'ai réalisé le projet LogAuth en 2017 pour la branche française d\'une entreprise internationale de transport et logistique. Le projet vise à fournir une solution afin de suivre et gérer les accès des utilisateurs aux machines d\'un entrepot.

J\'ai développé:

Le systyème SATS consiste en un shield (carte éléctronique) ajoutée au Raspberry Pi ainsi qu\'un firmware. Le firmware est composé de plusieurs programmes lancés à travers une machine à état complexe dans systemd afin d\'accéder aux différentes phases : boot, connexion réseau, vérification de mise à jour, mise à jour, init E/S, le démon (boucle principale).

Il autorise ou non les accès quand une carte RFID est détectée, la liste des accès est mise à jour périodiquement depuis l\'api SMMP. Il est capable de se mettre à jour et de charger de nouvelles fonctionnalités depuis le réseau. Il enregistre tous les accès (ou tentatives), gère et monitore l\'état de la machine en temps réel.

J\'ai du réaliser plusieurs PCBs afin que le SATS s\'interface correctement avec l\'Arduino, puis dans les dernières versions avec un Raspberry.

J\'ai pu lors de ce projet concevoir mon propre système d\'authentication afin de protéger les communications entre les SATS et le SMMP. Il évite notamment le vol de clé, le détournement de requêtes, et permet une resynchronisation sécurisée après une attaque ou un vol. Source: Définition du protocole', + [Locales.FR]: 'J\'ai réalisé le projet LogAuth en 2017 pour la branche française d\'une entreprise internationale de transport et logistique. Le projet vise à fournir une solution de suivi et gestion des accès utilisateurs aux machines d\'un entrepôt.

Le projet consiste en:

Le systyème SATS consiste en un shield (carte éléctronique) qui se branche au Raspberry Pi ainsi qu\'un firmware. Le firmware est composé de plusieurs programmes lancés à travers une machine à état complexe basée sur systemd. Elle cadence l\'accè aux différentes phases : boot, connexion réseau, vérification de mise à jour, mise à jour, initialisation entrées/sorties, le démon (boucle principale).

Il autorise ou non les accès quand une carte RFID est détectée, la liste des accès est mise à jour périodiquement depuis l\'api SMMP. Il est capable de se mettre à jour et de charger de nouvelles fonctionnalités depuis le réseau. Il enregistre tous les accès (ou tentatives), gère et monitore l\'état de la machine en temps réel.

J\'ai réalisé plusieurs PCBs afin que le SATS s\'interface correctement avec l\'Arduino, puis dans les dernières versions avec un Raspberry Pi.

J\'ai pu lors de ce projet concevoir mon système d\'authentication personnalisé, qui protège les communications entre les SATS et le SMMP. Il évite notamment le vol de clé, le détournement de requêtes, et permet une resynchronisation sécurisée après une attaque ou un vol. Source: Définition du protocole', }, source: [ { name: 'git.xdrm.io/logauth/sats', link: 'https://git.xdrm.io/logauth/sats', commits: 214 }, @@ -148,7 +148,7 @@ export const Projects: Project[] = [ stopped_at: new Date(2015, 9, 20), info: { [Locales.EN]: 'Tutored project for my DUT degree (BTEC Higher National Dimploma equivalent). The subject was to provide a web-based solution to manage the whole IT department : teachers, students, exams, marks, schedule, course unit and subunits, etc.

The project was to be made with a team of 4, I quickly took the project lead, and finally did it all by myself, my colleagues lacked motivation and/or experience. It is my first experience with needs analysis by the chief of the IT department ; learning to put my opinion aside when it conflicts with the client\'s needs to keep moving on.

The project is mainly developped in PHP with a 2-level web API, I did not know REST at the time. It was a first "professional" experience fully featuring web technologies : ui/ux, html/css, js, php, sql, client needs analysis, deadlines, etc. My experience through my personal web projects allowed me not to do like my coworkers who provided a quite minimal but sufficient software. I am actually proud of the final product, it was one of the first projects I brought to completion. The "client" was satisfied too, but the workload made me stay up all night a few times ; 3 months to do everything from scratch. It also helped me test my limits.', - [Locales.FR]: 'Projet tutoré de fin de cycle dans le cadre de l\'IUT informatique. Le sujet était de proposer une solution web pour la gestion du département informatique (système d\'information complet) : enseignants, élèves, examens, notes, emplois du temps, gestion des UE, modules, etc.

Le projet s\'est fait avec une équipe de 4, j\'ai vite pris le lead du projet et finalement développé seul par manque de d\'investissement ou d\'expérience de mes collègues. C\'est ma première expérience avec l\'analyse des besoins donnés par le chef du département dans ce cas; apprendre à mettre son avis de côté quand c\'est incompatible avec la vision du client afin d\'avancer.

Le projet est principalement fait en PHP avec une ébauche d\'API web à 2 niveaux (je ne connaissait pas encore REST). Ce fut une première expérience "professionnelle" web complète : ui/ux, html/css, js, php, sql, analyse besoin client, délais, etc. Mon expérience via mes projets web perso m\'ont permis de ne pas faire comme la plupart de mes collègues qui ont proposés une solution plus que minimale et suffisante. Je suis assez fier du résultat, ce fut un de mes premiers projets menés à terme, le "client" était satisfait aussi, mais la charge de travail m\'a fait faire pas mal de nuits blanches ; 3 mois pour tout faire from scratch. Ce projet m\'a donc aussi permis de tester mes limites.', + [Locales.FR]: 'Projet tutoré de fin de cycle dans le cadre de l\'IUT informatique. Le sujet était de proposer une solution web pour la gestion du département informatique (système d\'information complet) : enseignants, élèves, examens, notes, emplois du temps, gestion des UE, modules, etc.

C\'est ma première expérience d\'analyse des besoins clients, le chef du département dans ce cas. J\'ai appris à adopter la vision du client afin de fournir un résultat au plus proche de ses attentes.

Le projet est principalement fait en PHP avec une ébauche d\'API web à 2 niveaux (ne connaissant pas encore REST). Ce fut une expérience professionnelle web complète : ui/ux, html/css, js, php, sql, analyse besoin client, délais, etc. La qualité du projet repose sur les compétences acquises lors de mes projets web perso. Le client a apprécié mon investissement et ma disponibilité.', }, source: [{ name: 'git.xdrm.io/dut/sid', link: 'https://git.xdrm.io/dut/sid', commits: 401 }], doc: null, @@ -163,7 +163,7 @@ export const Projects: Project[] = [ stopped_at: new Date(2018, 5, 13), info: { [Locales.EN]: 'Tutored project for my Master\'s degree in IT. The subject was to provide a web solution to manage the IT department : teachers, classes, classrooms, marks, course unit and subunits, etc.

The project was made with 2 colleagues, I quickly took the project lead and finally developed almost everything myself. The idea was to replace a set of excel files used by chiefs of the IT department to manage resources and generate schedules for everyone. There has been a few conflicts with "the clients" as they were never available and we had a deadline for this work. At the end, they told us that they would use our work.

The project features a PHP backend and a Vue frontend. We used docker-compose with continuous integration & deployment mechanisms. I spent 300 hours on it in a bit more than 3 months, I guess I was motivated.', - [Locales.FR]: 'Projet tutoré de fin de cycle dans le cadre du Master Informatique. Le sujet était de proposer une solution web pour la gestion du département informatique (système d\'information complet) : enseignants, classes, salles, notes, emplois du temps, gestion des UE, modules, etc.

Le projet s\'est fait avec une équipe de 3, j\'ai vite pris le lead du projet et finalement développé quasiment seul le projet. L\'idée était de remplacer un ensemble de fichiers excel utilisés par les chefs de département "le client" afin de gérer les ressources et générer les plannings. Il y a eu quelques accrochages avec les clients car ils n\'étais jamais disponibles et nous avions un délai pour ces travaux. En fin de projet, ils nous ont finalement dit qu\'ils utiliseraient le projet à l\'avenir.

Le projet a un backend PHP, et un front en Vue. Nous avons utilisé docker-compose avec un système d\'intégration et de déploiement continu. J\'ai compté 300 heures passées dessus en un peu plus de 3 mois, j\'étais motivé.', + [Locales.FR]: 'Projet tutoré de fin de cycle dans le cadre du Master Informatique. Le sujet était de proposer une solution web pour la gestion du département informatique (système d\'information complet) : enseignants, classes, salles, notes, emplois du temps, gestion des UE, modules, etc.

L\'idée était de remplacer un ensemble de fichiers excel utilisés par les chefs de département pour gérer les ressources et générer les plannings. L\'indisponibilité du client a parfois été un frein à l\'avancement.

Le projet a un backend PHP, et un frontend en Vue. Nous avons utilisé docker-compose avec un système d\'intégration et de déploiement continu. 300 heures de travail ont été investies en un peu plus de 3 mois. Au terme de la collaboration, le projet a été adopté.', }, source: [ { name: 'git.xdrm.io/mti/ptut-virtenv', link: 'https://git.xdrm.io/mti/ptut-virtenv', commits: 103 }, diff --git a/src/model/skills.ts b/src/model/skills.ts index dedf9fb..4afabc9 100644 --- a/src/model/skills.ts +++ b/src/model/skills.ts @@ -175,8 +175,8 @@ export const Skills: tSkills = { icon: 'skills/vue.svg', tags: [tTag.Web, tTag.UI], 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.', + [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.', + [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).', }, }, [tID.Angular]: {