L'Art du bois

Le but était de faire une refonte sur le site de l'Art du bois, une entreprise d'agencement et de menuiserie. Le site actuel était très vieux et n'était pas du tout responsive. Il fallait donc le refaire en gardant les éléments importants du site actuel.

1. Développement

Pour ce projet, je suis partie de la maquette fournie par le graphiste de mon entreprise. J'ai donc commencé par découper la maquette pour avoir les différents éléments du site. J'ai ensuite commencé à coder le site en utilisant la librairie Bootstrap pour le responsive design et les composants.

Code utilisant Bootstrap

    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6 align-self-center">
          <div class="adn_content" id="nav">
            <h2 class="text-uppercase">Notre adn : nos collaborateurs au centre de tout</h2>
          </div>
        </div>
        
        <div class="col-12 col-lg-6">
          <div id="adn_btn">
            
            <p>
              Depuis 1996, l'Art du Bois, situé à Lavau dans l'Aube, au cœur de la zone Artisanale du
              Moutot,
              excelle
              dans l'art de la menuiserie. Notre entreprise se distingue par un savoir-faire unique,
              incarné
              par
              chacun de nos collaborateurs qui apportent leur personnalité et leurs compétences pour
              servir
              tant les
              particuliers que les professionnels. Notre expertise couvre des prestations traditionnelles
              comme la
              rénovation du Vieux Troyes, ainsi que des services contemporains tels que menuiseries
              extérieures en
              bois, PVC, aluminium, bardage, terrasses, agencements de bureaux et magasins, aménagements
              intérieurs et
              isolation.
            </p>
            
            <button class="button">Découvrir l'entreprise</button>
          </div>
        </div>
        <div class="col-12">
          <div id="photo1"></div>
        </div>
      </div>
    </div>

Le site m'a permis de réviser des librairies que j'utilisais au quotidien dans mon travail tel que Swiper.js pour les sliders ou Lotie pour les animations.

En plus des libraries j'ai du réaliser de moi-meme un caroussel pour les différentes créations de l'entreprise.

Code du caroussel

	let carousellArray = [{
		titile: "Magasin 1",
		image: "https://placehold.co/600x400?text=Magasin1"
	}, {titile: "Magasin 2", image: "https://placehold.co/600x400?text=Magasin2"}, {
		titile: "Magasin 3",
		image: "../image/realisation.png"
	}];

	let realisation = document.getElementById('realisation');
	let arrow_left = document.querySelector('.arrow-left');
	let arrow_right = document.querySelector('.arrow-right');
	let magasin = document.getElementById('magasin');
	let current = 0;

	let parameter = "linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),url("

	arrow_left.addEventListener('click', function () {
		console.log('left');

		if (current === -1) {
			current = carousellArray.length - 1;
		}

		realisation.style.backgroundImage = parameter + carousellArray[current].image + ")";
		magasin.innerHTML = carousellArray[current].titile;
		current--;

	});

	arrow_right.addEventListener('click', function () {
		console.log('right');

		if (current === carousellArray.length) {
			current = 0;
		}

		realisation.style.backgroundImage = parameter + carousellArray[current].image + ")";
		magasin.innerHTML = carousellArray[current].titile;
		current++;
	});

J'ai également utilisé pour la première fois la librarie d'animation GSAP pour faire réaliser des animations sur le site tel qu'une animation d'entrée sur la page d'accueil.

2. Résultat

Le résultat final est un site web moderne et responsive. J'ai réussi à garder les éléments importants du site actuel tout en modernisant le design et en le rendant responsive.