Update experiences text

css/app.css

@@ -270,6 +270,9 @@ a.anchor {
 }
 
 /*CARD*/
+.modal-body > img:first-of-type {
+    margin-bottom: 20px;
+}
 .img-fluid {
     max-width: 500px;
     width: 100%;

index.html

@@ -665,8 +665,7 @@ <h3 class="card-title">Snowleader</h3>
 						visant à améliorer les performances du site de vente en ligne Snowleader.</p>
 
 					<p class="card-text">Dans un premier temps, il m'a fallu analyser l'ensemble des pages pour
-						identifier les améliorations à mettre en place. Il a fallu notamment mettre en parallèle le gain
-						éventuel qu'une amélioration pouvait apporter par rapport à son temps de développement.</p>
+						identifier les améliorations à mettre en place.  J'ai ensuite estimé le gain éventuel qu'une amélioration pouvait apporter par rapport à son temps de développement.</p>
 
 					<figure class="figure">
 						<img src="./images/rea/snowleader/1.png" class="figure-img img-fluid rounded"
@@ -679,7 +678,7 @@ <h3 class="card-title">Snowleader</h3>
 					<p class="card-text">Pour cette analyse, j'ai utilisé la console de Google Chrome et <a
 							href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">PageSpeed
 							Insights</a>
-						pour étudier les performances coté client et je me suis servi de <a href="https://blackfire.io/"
+						pour étudier les performances coté client, et je me suis servi de <a href="https://blackfire.io/"
 							target="_blank">BlackFire</a> et<a href="https://newrelic.com/" target="_blank">NewRelic</a>
 						pour examiner les performances coté serveur.</p>
 
@@ -690,8 +689,7 @@ <h3 class="card-title">Snowleader</h3>
 						</figcaption>
 					</figure>
 
-					<p class="card-text">Une fois les axes d'amélioration connus, il a fallu chiffrer et proposer mon
-						devis au client en mettant en avant le gain de performance approximatif.</p>
+					<p class="card-text">Une fois les axes d'amélioration connus, le chantier a été chiffré et mon devis proposé au client en mettant en avant le gain de performance estimé.</p>
 
 						<figure class="figure">
 							<img src="./images/rea/snowleader/3.jpg" class="figure-img img-fluid rounded"
@@ -700,14 +698,10 @@ <h3 class="card-title">Snowleader</h3>
 							</figcaption>
 						</figure>
 
-					<p class="card-text">Une fois toutes les étapes précédentes éffectuées, j'ai pu m'atteler à la
-						réalisation des améliorations que j'avais déterminé auparavant: </p>
+						<p class="card-text">Dès que le devis a été accepté par le client, j'ai pu m'atteler à la réalisation des améliorations que j'avais auparavant déterminé.</p>
 
-					<ul>
-						<li>- Coté client : principalement du Javascript, de la minification ou réduction de taille des
-							images.</li>
-						<li>- Coté serveur: amélioration de fonctionnalités PHP, optimisation de requêtes MySQL.</li>
-					</ul>
+						<p class="card-text">Coté client, je me suis concentré à retravailler le Javascript pour améliorer les performances. J'ai supprimé les fonctionnalités et librairies inutilisées, ainsi que minifier le JS et le CSS. Et j'ai également réduire la taille des images.</p>
+						<p class="card-text">Coté serveur, j'ai redévelopper certaines fonctionnalités PHP et j'ai optimisé des requêtes MySQL.</p>
 				</div>
 				<div class="modal-footer">
 					Disponible : <a href="https://www.snowleader.com/" target="_blank"><i class="fas fa-link"></i></a>
@@ -927,11 +921,18 @@ <h3 class="card-title">Amédée Paris</h3>
 				</div>
 				<div class="modal-body">
 					<img class="img-fluid rounded" src="./images/rea/amedee.jpg" />
-					<p class="card-text">En tant que responsable technique, je me suis occupé de la reprise du site avec
-						un changement d'hébergeur et la mise en place de containers Docker.</p>
-					<p class="card-text">Une fois la prise en main du projet nous avons à la fois éffectué des
-						correctifs dans le cadre de la maintenance ainsi qu'une mise à jour visuelle de certaines pages
-						clés du site telles que la homepage, les pages produit et les pages catégorie.</p>
+					<p class="card-text">En tant que responsable technique, je me suis occupé de la reprise du site avec un changement d'hébergeur, ainsi que la mise en place de containers <a href="https://www.docker.com/" target="_blank">Docker</a>.</p>
+					<figure class="figure">
+						<img src="./images/rea/amedee/1.png" class="figure-img img-fluid rounded"
+							alt="Démarrage des containers Docker">
+						<figcaption class="figure-caption">Démarrage des containers <a href="https://www.docker.com/" target="_blank">Docker</a></figcaption>
+					</figure>
+					<p class="card-text">Ensuite, nous avons effectué des correctifs dans le cadre de la maintenance du site, mais aussi une mise à jour visuelle de certaines pages clés (homepage, pages produit, pages catégorie).</p>
+					<figure class="figure">
+						<img src="./images/rea/amedee/2.png" class="figure-img img-fluid rounded"
+							alt="Nouveau visuel de la page produit">
+						<figcaption class="figure-caption">Nouveau visuel de la page produit</figcaption>
+					</figure>
 				</div>
 				<div class="modal-footer">
 					Lien : <a href="https://www.amedeeparis.com/" target="_blank"><i class="fas fa-link"></i></a>
@@ -957,11 +958,15 @@ <h3 class="card-title">Lancaster</h3>
 				</div>
 				<div class="modal-body">
 					<img class="img-fluid rounded" src="./images/rea/lancaster.png" />
-					<p class="card-text">Ce projet avait pour but le développement et le déploiement d'une boutique en
-						ligne pour des produits de luxe. Au coeur d'une équipe de 5 personnes, j'ai apporté mon
-						expertise afin de répondre au mieux aux besoins du client.</p>
+					<p class="card-text">Ce projet consistait à développer et déployer une boutique en ligne de produits de luxe.
+						Au coeur d'une équipe de 5 personnes, j'ai apporté mon expertise afin de répondre au mieux aux besoins du client.</p>
 					<p class="card-text">Au cours de ce projet, j'ai notamment travaillé sur la partie indexation des
-						données avec Algolia et la mise en place des méthodes de paiement avec Adyen.</p>
+						données avec <a href="https://www.algolia.com/" target="_blank">Algolia</a> et la mise en place des méthodes de paiement avec <a href="https://www.adyen.com/" target="_blank">Adyen</a>.</p>
+						<figure class="figure">
+							<img src="./images/rea/lancaster/1.png" class="figure-img img-fluid rounded"
+								alt="La page catégorie Lancaster">
+							<figcaption class="figure-caption">La page catégorie Lancaster rendue par <a href="https://www.algolia.com/" target="_blank">Algolia</a></figcaption>
+						</figure>
 					<p class="card-text">Certains articles de Blog parlent du projet : </p>
 					<ul>
 						<li><a href="https://www.dnd.fr/2020/04/lancaster-refond-son-site-e-commerce-et-offre-une-meilleure-experience-a-ses-utilisateurs/"