Merge 4db4ec1 into 2c4f052

assets/scss/components/_article-list.css → assets/scss/components/_article-list.scss

@@ -6,6 +6,10 @@
   list-style: none;
   display: flex;
   flex-wrap: wrap;
+
+  .miniature-inline {
+    margin: 0 20px 80px;
+  }
 }
 
 @media (max-width: $screen-lg) {

assets/scss/components/_banner-technology.scss

@@ -0,0 +1,47 @@
+.banner-technology {
+  margin: 0 0 100px;
+  padding: 0 110px;
+  display: flex;
+  align-items: center;
+}
+
+.banner-technology__title {
+  margin: 0 auto 0 0;
+  display: inline-block;
+}
+
+.banner-technology__image {
+  margin: 0 110px 0 70px;
+  min-width: 300px;
+  height: 150px;
+  position: relative;
+  background: $color-brand;
+
+  .logo {
+    margin: 0;
+    padding: 25px;
+    width: 150px;
+    position: absolute;
+    right: -110px;
+    bottom: -40px;
+    background: $color-secondary;
+  }
+}
+
+@media (max-width: $screen-md) {
+  .banner-technology {
+    margin: 0 0 50px;
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .banner-technology__title {
+    margin: 0 40px 40px;
+    max-width: 510px;
+  }
+
+  .banner-technology__image {
+    display: none;
+  }
+}

assets/scss/components/_link.scss

@@ -24,6 +24,7 @@
     right: 10px;
     font-family: 'icomoon';
     font-size: 13px;
+    line-height: 1;
     content: '\e913';
     opacity: 0;
     transition: right ease-in .15s, opacity ease-out .2s;

assets/scss/components/_miniature-inline.scss

@@ -14,7 +14,7 @@
 
 .miniature-inline__image {
   min-width: 500px;
-  height: 370px;
+  height: 350px;
   background-repeat: no-repeat !important;
   background-size: cover !important;
   background-position: center !important;

assets/scss/components/_technologies.scss

@@ -26,14 +26,17 @@
 
   img {
     margin: 0;
-    margin-right: 20px;
+    margin-right: 15px;
     width: 45px;
   }
 }
 
 .technologies--light {
   .technologies__item {
     color: $color-light;
+  }
+
+  a.technologies__item {
     transition: color ease-in .2s;
 
     &:hover,

assets/scss/pages/_page-project.scss

@@ -127,15 +127,12 @@
       width: 100%;
     }
 
-    .item {
-      margin: 0 5px 10px;
-      width: calc(33.33% - 10px);
-      min-width: unset;
-    }
-
+    .item,
     .item--medium,
     .item--large {
+      margin: 0 5px 10px;
       width: calc(50% - 10px);
+      min-width: unset;
     }
   }
 }

assets/scss/pages/_page-projects.scss

@@ -10,7 +10,7 @@
 
   .article-list {
     margin: 0 auto;
-    max-width: 1020px;
+    max-width: 1060px;
   }
 }
 

assets/scss/pages/_page-technology.scss

@@ -0,0 +1,27 @@
+.page-technology {
+  padding: 0 110px;
+
+  .article-list {
+    margin-top: 50px;
+
+    .miniature-inline {
+      max-width: 930px;
+    }
+  }
+
+  .bricks {
+    margin-top: 40px;
+  }
+}
+
+@media (max-width: $screen-md) {
+  .page-technology {
+    padding: 0;
+
+    .article-list {
+      .miniature-inline {
+        margin-left: 0;
+      }
+    }
+  }
+}

assets/scss/style.scss

@@ -43,6 +43,7 @@ html.no-js [data-aos] {
 @import "components/_banner-team";
 @import "components/_banner-services";
 @import "components/_banner-team";
+@import "components/_banner-technology";
 @import "components/_banner-values";
 @import "components/_breadcrumb";
 @import "components/_brick";
@@ -102,5 +103,6 @@ html.no-js [data-aos] {
 @import "pages/_page-projects";
 @import "pages/_page-project";
 @import "pages/_page-services";
+@import "pages/_page-technology";
 @import "pages/_page-values";
 @import "pages/_page-signature";

content/technologies/accessibilite.md

@@ -1,6 +1,9 @@
 ---
 name: "Accessibilité"
-title: "Responsive design, accessibilité : des interfaces web exigeantes"
+title:
+    - "Responsive design, accessibilité :"
+    - "des interfaces web exigeantes"
+articles: []
 ---
 
 La question du niveau d'exigence d'accessibilité doit être adressée dès le début de la conception graphique. Lors de la réalisation des interfaces, nous mettons l’accent sur le niveau d’exigence d’intégration, le respect des standards et des bonnes pratiques. Chez Elao, nous évaluons le niveau d’exigence d'accessibilité des projets selon les enjeux, le public visé et le budget. 

content/technologies/algolia.md

@@ -1,29 +1,28 @@
 ---
 name: "Algolia"
 logo: "build/images/technos/algolia.svg"
-title: "Algolia, un moteur de recherche interne pertinent et performant"
+title:
+    - "Algolia, un moteur de recherche interne"
+    - "pertinent et performant"
+articles: []
 ---
 
-Algolia est un atout de taille pour bénéficier d’un moteur de recherche rapide, pertinent et efficace. Grâce à ce service, le résultat de recherche est pertinent, ce qui améliore considérablement l’expérience client. Nos équipes peuvent intégrer ou vous aider à intégrer Algolia à votre application et ainsi améliorer l’expérience utilisateur de vos clients. 
+Algolia est un atout de taille pour bénéficier d’un moteur de recherche rapide, pertinent et efficace. Grâce à ce service, le résultat de recherche est pertinent, ce qui améliore considérablement l’expérience client. Nos équipes peuvent intégrer ou vous aider à intégrer Algolia à votre application et ainsi améliorer l’expérience utilisateur de vos clients.
 
-## Pourquoi utiliser Algolia dans vos projets ? 
+## Pourquoi utiliser Algolia dans vos projets ?
 
-Développer un outil de recherche peut être très coûteux. Profiter de l’expertise d’Algolia, reconnue pour son savoir-faire dans le search, peut être un gain de temps et une économie, bien que le service soit payant. 
-Vos données sont synchronisées sur les serveurs d’Algolia, qui s’engage sur un taux de réponse extrêmement rapide. 
-La rapidité des résultats et la pertinence de la recherche améliorent le taux de conversion. 
+Développer un outil de recherche peut être très coûteux. Profiter de l’expertise d’Algolia, reconnue pour son savoir-faire dans le search, peut être un gain de temps et une économie, bien que le service soit payant.
+Vos données sont synchronisées sur les serveurs d’Algolia, qui s’engage sur un taux de réponse extrêmement rapide.
+La rapidité des résultats et la pertinence de la recherche améliorent le taux de conversion.
 Algolia est compatible avec n’importe quel langage informatique et peut donc s’intégrer dans votre projet facilement.
 
 ## Algolia, une pousse française !
 
-Née en France et désormais domiciliée aux Etats-Unis, Algolia propose son service de moteur de recherche sur le web, en mode SAAS, depuis 2014. Son principe est le suivant : proposer d’indexer lui-même les données du propriétaire du site web et de gérer la recherche. Son point fort est la pertinence des résultats, qui est l’enjeu d’un moteur de recherche. Le logiciel est payant, mais il permet d’économiser le coût du développement sur-mesure de son propre moteur de recherche et de profiter de leur ingénierie de pointe. 
+Née en France et désormais domiciliée aux Etats-Unis, Algolia propose son service de moteur de recherche sur le web, en mode SAAS, depuis 2014. Son principe est le suivant : proposer d’indexer lui-même les données du propriétaire du site web et de gérer la recherche. Son point fort est la pertinence des résultats, qui est l’enjeu d’un moteur de recherche. Le logiciel est payant, mais il permet d’économiser le coût du développement sur-mesure de son propre moteur de recherche et de profiter de leur ingénierie de pointe.
 
-## Pourquoi notre équipe de développement a choisi d’utiliser Algolia dans ses projets ? 
+## Pourquoi notre équipe de développement a choisi d’utiliser Algolia dans ses projets ?
 
-L’interface administrateur est très claire et complète : côté développement, on peut inspecter les index et les queries effectuées, et également faire des tests de la configuration afin de vérifier la pertinence des résultats et faire des démonstrations rapidement. 
-S’il s’agit d’un besoin classique, la configuration est rapide à mettre en place. 
+L’interface administrateur est très claire et complète : côté développement, on peut inspecter les index et les queries effectuées, et également faire des tests de la configuration afin de vérifier la pertinence des résultats et faire des démonstrations rapidement.
+S’il s’agit d’un besoin classique, la configuration est rapide à mettre en place.
 La documentation technique est claire et bien complète.
 L’écosystème technique est bien pourvu, compatible avec tous les langages de programmation et pas seulement par exemple pour Symfony : SDK, composants, bundle, etc.
-
-## Projets créés avec Algolia
-
-## Articles de blog à propos d'Algolia

content/technologies/bootstrap.md

@@ -1,4 +1,7 @@
 ---
 name: "Bootstrap"
 logo: "build/images/technos/bootstrap.svg"
+title:
+    - bootstrap
+show: false
 ---

content/technologies/css.md

@@ -1,6 +1,7 @@
 ---
 name: CSS
 logo: build/images/technos/css3.svg
-title: CSS
+title: 
+    - CSS
 show: false
 ---

content/technologies/elasticsearch.md

@@ -1,7 +1,9 @@
 ---
 name: "ElasticSearch"
 logo: "build/images/technos/elasticsearch.svg"
-title: "ElasticSearch : un moteur de recherche simple et efficace pour votre application web"
+title:
+    - "ElasticSearch : un moteur de recherche simple et efficace"
+    - "pour votre application web"
 ---
 
 ElasticSearch est un logiciel open source assurant **une recherche rapide et pertinente dans vos bases de données**. Chez Elao, nous l'utilisons en grande majorité pour des recherches de géolocalisations, par exemple pour trouver une offre d'emploi près de son domicile ou dans un rayon d'un certain nombre de kilomètre, ou bien pour de la recherche plus classique de texte.
@@ -28,10 +30,9 @@ Nous pouvons intervenir à la fois pour mettre en réfléchir à une solution et
 
 ## Les projets pour lesquels nous avons installé et paramétré ElasticSearch
 
-Pour ce site d'offres d'emploi, ElasticSearch a été un allié de taille pour faire bénéficier aux utilisateurs de la recherche géographique.
+- **My Job Company** : pour ce site d'offres d'emploi, ElasticSearch a été un allié de taille pour faire bénéficier aux utilisateurs de la recherche géographique.
 
--> lien vers MJC
 
 ##Les articles de blog à propos d'ElasticSearch
 
-Améliorer la pertinence de vos résultats ElasticSearch grâce au score. https://blog.elao.com/fr/dev/ameliorez-pertinence-resultat-elastic-search-score/
+- [Améliorer la pertinence de vos résultats ElasticSearch grâce au score.](https://blog.elao.com/fr/dev/ameliorez-pertinence-resultat-elastic-search-score/)

content/technologies/graphql.md

@@ -1,4 +1,7 @@
 ---
 name: "GraphQL"
 logo: "build/images/technos/graphql.svg"
+show: false
+title: 
+    - GraphQL
 ---

content/technologies/html.md

@@ -1,6 +1,7 @@
 ---
 name: HTML
 logo: build/images/technos/html5.svg
-title: HTML
+title: 
+    - HTML
 show: false
 ---

content/technologies/javascript.md

@@ -1,4 +1,7 @@
 ---
 name: "Javascript"
 logo: "build/images/technos/javascript.svg"
+show: false
+title: 
+ - javascript
 ---

content/technologies/nodejs.md

@@ -1,4 +1,7 @@
 ---
 name: "Node.js"
 logo: "build/images/technos/node.svg"
+show: false
+title: 
+    - NodeJS
 ---

content/technologies/payment.md

@@ -1,6 +1,8 @@
 ---
 name: "Paiement"
-title: "Intégration d'une solution de paiement en ligne"
+title: 
+ - "Intégration d'une solution de paiement en ligne" 
+ - "pour votre application"
 title-seo: "Paiement en ligne pour votre application web ou mobile avec Elao 💴"
 meta-description: "Les transactions bancaires peuvent être nécessaires pour votre projet web ou mobile. Nous pouvons vous accompagner dans l'intégration d'une solution de paiement en ligne comme Stripe, PayPal, MangoPay ..."
 ---

content/technologies/react-native.md

@@ -1,4 +1,7 @@
 ---
 name: "React Native"
 logo: "build/images/technos/react.svg"
+title: 
+    - React Native
+articles: []
 ---

content/technologies/react.md

@@ -1,7 +1,10 @@
 ---
 name: "React"
 logo: "build/images/technos/react.svg"
-title: "Des interfaces web interactives, fluides et dynamiques avec React"
+title: 
+    - "Des interfaces web interactives,"
+    - "fluides et dynamiques avec React"
+articles: []
 ---
 
 Des interfaces simples et rapides à utiliser : c’est l’expérience que l’on souhaite tous sur le web ! Aujourd’hui, de nombreux frameworks JavaScript, dont React, permettent d’obtenir ces résultats, autant pour des applications mobiles que pour des fonctionnalités sur des pages web. Après avoir testé de nombreux frameworks comme BackboneJS, Ember ou encore Angular, l’équipe a adopté React pour la réalisation de la plupart des projets nécessitant une application mobile ou des interfaces web dynamiques. 

content/technologies/signature-securisee.md

@@ -1,6 +1,9 @@
 ---
 name: "Signature électronique"
-title: "Souscription et signature électronique dans votre application web"
+title: 
+    - "Souscription et signature électronique"
+    - "pour votre application web"
+articles: []
 ---
 La signature électronique est un excellent moyen de gagner du temps dans un processus de vente en ligne, car il évite de nombreux allers-retours et d'éventuelles pertes de documents. De plus, ce système est parfaitement sécurisé et confidentiel : c'est une valeur ajoutée pour l'utilisateur mais également pour les collaborateurs. Chez Elao, nous accompagnons nos clients dans l'intégration de solutions de signatures électroniques 
 

content/technologies/svg.md

@@ -1,6 +1,7 @@
 ---
 name: SVG
 logo: build/images/technos/svg.svg
-title: SVG
+title: 
+    - SVG
 show: false
 ---