Amulis

L'histoire de sa construction

Amulis est un cabinet de conseil spécialisé en écoconception et analyse de cycle de vie, basé dans le Grand Est. La mission portait sur l'intégration front-end du site WordPress existant : refonte des templates, mise en cohérence visuelle de l'ensemble des pages, et développement de composants interactifs sur mesure. L'intervention la plus technique a été le développement d'un carousel entièrement from scratch en JavaScript vanilla — sans librairie tierce. Gestion du touch sur mobile, navigation par points, transitions CSS fluides et accessibilité clavier : chaque détail a été traité sans dépendre d'un plugin tiers, pour garder un site léger et performant. Le projet a été mené dans le cadre de la collaboration avec le collectif Solidevs. Travailler sur un site client réel avec des contraintes de contenu existant et de cohérence éditoriale m'a permis de consolider mes réflexes d'intégration professionnelle — respect de la charte, adaptation au CMS, et livraison propre sans dette technique.

Technologies utilisées

• Git
• JavaScript
• HTML
• CSS
• Docker
• Wordpress

J'en ai bavé mais j'y suis arrivé 🚀

// Carousel vanilla JS — navigation tactile et clavier
class Carousel {
  constructor(el) {
    this.track   = el.querySelector('.carousel__track');
    this.slides  = [...this.track.children];
    this.current = 0;
    this.startX  = 0;

    el.querySelector('.carousel__prev').addEventListener('click', () => this.prev());
    el.querySelector('.carousel__next').addEventListener('click', () => this.next());
    this.track.addEventListener('touchstart', e => this.startX = e.touches[0].clientX);
    this.track.addEventListener('touchend',   e => {
      const diff = this.startX - e.changedTouches[0].clientX;
      if (Math.abs(diff) > 50) diff > 0 ? this.next() : this.prev();
    });
  }

  goTo(index) {
    this.current = (index + this.slides.length) % this.slides.length;
    this.track.style.transform = `translateX(-${this.current * 100}%)`;
  }

  next() { this.goTo(this.current + 1); }
  prev() { this.goTo(this.current - 1); }
}