CV/Mission Vanilla.JS freelance

Exemple d'expériences d'Anis,
freelance VANILLA.JS résidant dans le Val-d'Oise (95)

• LAYERCAKE
  Jan 2024 - Jan 2024

  Intég web / Dév Front-End : SASS, Tailwind CSS | Storybook |React/Next.js | TypeScript
  
  Contexte
  Le projet consiste à créer un site de vente en ligne de gâteaux layer cake, accompagné d'une section de présentation de
  l'activité et d'un blog pour partager des recettes. Les technologies utilisées pour le développement de cette plateforme
  incluent MongoDB pour la base de données, Next.js et React pour le front-end, ainsi que Tailwind CSS pour le design et la
  mise en page.
  
  Actions
  Conception et développement d'une plateforme e-commerce pour la vente de gâteaux layer cake, intégrant une
  section de présentation et un blog pour le partage de recettes.
  Création d'une interface utilisateur interactive et performante en utilisant Next.js et React, intégrant des
  fonctionnalités avancées de navigation et de rendu.
  Gestion simpliée et optimisée des données avec Prisma, un ORM de nouvelle génération, pour interagir efcacement
  avec la base de données MongoDB, y compris la gestion des migrations et la génération de schémas.
  Mise en œuvre d’un système d’authentication sécurisé et exible en utilisant Lucia, un projet open source, pour
  intégrer une authentication robuste avec JavaScript et TypeScript.
  Application de styles modernes et responsives à l’aide de Tailwind CSS et la documentation des composants via
  Storybook, assurant ainsi une expérience utilisateur attrayante, cohérente et adaptée à tous les appareils.
  Optimisation des performances et du référencement naturel (SEO) grâce à l’utilisation des fonctionnalités avancées de
  Next.js, telles que le server-side rendering (SSR) et le static site generation (SSG).
  Développement d’une architecture évolutive et sécurisée pour la gestion des produits, recettes, et articles de blog,
  avec des API connectées à MongoDB et sécurisées via Lucia.
  Déploiement et intégration continue avec Vercel, permettant des mises à jour rapides, un suivi des modications en
  temps réel et un hébergement optimisé pour Next.js.

  Environnement technique Tailwind, storybook, React/Next.js, MongoDB, Prisma, Lucia, Vercel

• Intég web / Dév Front-End : JS, VOLT, SASS, A11Y RGAA

  LE MONDE
  Jan 2024 - Jan 2024

  Contexte
  Durant cette expérience, j'ai principalement travaillé sur deux projets majeurs : les pages Euro 2024 et les pages
  législatives.
  
  Actions
  
  Euro 2024 : Mon travail consistait à créer et à mettre en place les différentes pages dédiées à cet événement, telles que
  la page du calendrier des matchs et la page des résultats.
  Vous pouvez consulter un exemple ici : ********-2024/calendrier/
  Euro 2024 : J'ai mis en place un afchage spécial sur la page "résultats" pour les phases nales, sous la forme d'un arbre
  dynamique, an de faciliter la lecture des résultats. Vous pouvez consulter un exemple ici :
  ********-2024/resultats/
  
  Euro 2024 : J'ai mis en place divers widgets pour afcher les classements des équipes dans chaque groupe et les
  matchs du jour avec les résultats en temps réel. Ces widgets sont intégrés dans les pages d'articles et les pages live.
  
  Législative 2024 : J'ai travaillé sur différentes pages de la rubrique législative, telles que la page home legi, ainsi que les
  pages de résultats pour les communes, les départements et les régions. Vous pouvez consulter un exemple ici :
  ********-elections/
  
  Législative 2024 : J'ai ajouté différents widgets nécessaires au traitement et à l'afchage des résultats des élections, tels
  que :
  - Un widget pour afcher les résultats du premier et du deuxième tour par parti.
  - Un widget pour représenter l'hémicycle rempli selon les résultats du deuxième tour.
  - Un widget pour afcher la fourchette des sièges attribués à chaque parti après le deuxième tour.
  RGAA : Une partie de mes tâches consiste également à améliorer l’accessibilité RGAA du site. Suite à un audit réalisé par
  un prestataire spécialisé dans l'accessibilité, nous avons reçu une liste des points à améliorer sur ********. Nous avons
  ensuite concentré nos efforts sur ces points pour améliorer l'accessibilité du site.
  Tracking : J'ai également travaillé sur des sujets de tracking en utilisant deux outils principaux : Amplitude et Google
  Analytics (ou un autre outil, si applicable).
  Méthodologie Agile : J'ai travaillé selon une méthodologie Agile avec des sprints de 2 semaines, incluant le sprint
  planning, la rétrospective et les daily stand-ups
  Environnement technique
  J'ai travaillé dans un environnement utilisant PHP avec le framework Phalcon, ainsi que Volt pour les templates, et j'ai
  développé des fonctionnalités côté client en Vanilla JS. J'ai également utilisé SASS pour la gestion des styles

• Intég web / Dév Front-End : JS, stimulus, TWIG, SASS, A11Y RGAA LE FIGARO

  Jan 2021 - aujourd'hui

  Contexte
  J'ai travaillé sur plusieurs projets :
  
  Page abonnement : ********
  Page Promo : ********-promo-swg-premium-mensuel
  Pages de connexion : ******** / ********
  Refonte Espace BO : Déjà en Prod - Accessible en interne pour la SRC, service marketing, Pos et aux DEVs.
  Refonte page prise d’Abonnement (checkout) : Accessible en Preprod pour recette avant la mise en Prod.
  Refonte espace perso : Accessible en Preprod pour recette avant la mise en prod.
  
  Actions
  
  Garantir la mise à jour régulière de la page abonnement Le Figaro constitue l'une de mes responsabilités majeures.
  Cela englobe l'intégration des nouvelles maquettes, la mise en place des tarifs actualisés, ainsi que l'ajout de tout
  nouveau contenu périodiquement. Mon engagement constant dans cette tâche contribue à maintenir la pertinence et
  la précision de la page, assurant ainsi une expérience utilisateur optimale et alignée sur les évolutions constantes de
  l'offre.
  J'ai été chargé du développement complet de la page checkout (from-scratch) et une partie de l'espace personnel,
  auparavant gérés par un prestataire externe (GLI). Notre mission consistait à migrer ces fonctionnalités vers un projet
  PHP/Symfony, en commençant par la conguration de la partie front-end avec Webpack et Yarn et en utilisant Stimulus
  JS comme mini-framework JS qui est préconisé pour les projets en PHP/Symfony. Le process commence par la
  récupération des maquette sur Figma ensuite la partie intégration web (twig/SASS) et nalement la dynamisation JS.
  Tout ce travaille est réalisé avec une communication uide entre PO, Dev Front, Dev Back & Designer.
  Travailler en étroite collaboration avec l'équipe design qui commence par la réception et la prise en charge de leurs
  maquettes et composants conçus sur Figma. En tant que membre de l'équipe, je contribue activement en fournissant
  des retours directs sur sur l'outil lui même (Figma), participant ainsi au processus itératif de perfectionnement du
  design. Par la suite, je m'engage dans la phase d'intégration en utilisant des technologies telles que Twig/SASS, assurant
  ainsi une transition uide et efcace de la conception à l'implémentation.
  La mise en place des pages promotions pour promouvoir les baisses de tarif des abonnements premium chaque mois.
  La refonte de l’espace BO en se basant sur un style guide.
  Refonte des pages connexion (login, register, forgot password).
  Améliorer l’accessibilité des nouveaux pages développées : code sémantique, texte alternative, rôle, navigation clavier.
  Améliorer la performance des pages développées (optimisation images (PNG, SVG), lazy loading, miniction chier…).
  Assurer la montée de version des modules node chaque période.
  Faire du code review des autres dev Front.
  Méthodologie Agile (daily, sprint 2 semaines, retro, Grooming, sprint palnning..)

  Environnement technique PHP Symfony / Twig / SASS / Vanilla JS (ES6) / Stimilus JS / React JS / yarn / Webpack / Docker / JIRA / Conluence / Figma

• Intég web / Dév Front-End : JS, TWIG, SASS, A11Y RGAA

  OUI SNCF
  Jan 2021 - Jan 2022

  Contexte
  Refonte intégrale du site : gare et connexion (********)
  
  Actions
  
  Développement des différents composants en se basant sur des maquettes élaborées sur Figma
  La collaboration avec l’équipe design pour optimiser les maquettes pour la mise en place des éléments Atomic Design
  Développement d’un nouvel outil d’afchage des heures d’arrivée e et de départ des trains en JS (ES6)
  Optimisation de l’intégration sur les différents navigateurs
  Optimisation de la partie accessibilité du site (norme RGAA)
  La mise en place d'un générateur des newsletters (MJML)
  Méthodologie Agile

  Environnement technique PHP Symfony / Twig / SASS / JS ES6 / yarn / webpack / JIRA / Figma

• Intég web / Dév Front-End : JS, TWIG, SASS

  COMPTOIRS DIGITAL NATIVE
  Jan 2020 - Jan 2020

  Contexte
  Refonte intégrale du site : ********/
  
  Actions
  Suivre la réalisation de la nouvelle charte graphique pour la refonte de site. (Sketch)
  L'intégration de la charte graphique dans le projet PHP/Symfony, en utilisant Twig et SASS comme techno.
  Mise en place de la partie js d'interface (comme l'ajout des animations pour les différents blocs, optimisation du scroll et
  validation des formulaires)
  Mise en place d'un moteur de recherche sur tout le site en utilisant Algolia et Js/jQuery
  Mise en place des facettes pour afner la recherche.
  Optimisation de la partie responsive mobile
  Assurer le bon fonctionnement du site dans la différents navigateur (IE11 compris)
  Une partie de mon intégration était de préparer un design système avec des composants réutilisables par le
  développeur Back. (********-system)
  Optimisation de code pour améliorer le temps de téléchargement des pages.
  Participer au daily, sprint planing (méthodologie Agile)

  Environnement technique Twig / SASS / Vanilla JS (ES6) / PHP Symfony / Algolia ...