References #18 | Update Actiwine exp

src/assets/styles/common.scss

@@ -32,18 +32,31 @@ html {
       color: var(--primary-color);
     }
 
-    p {
+    strong {
+      transition: all $t-duration $t-timing-function;
+      color: var(--secondary-color);
+    }
 
-      strong {
+    em {
+      transition: all $t-duration $t-timing-function;
+      color: var(--light-secondary-color);
+    }
+
+    .color-hover {
+      .inline-icon {
+        max-height: 0.7rem;
+        position: relative;
+        bottom: -1px;
         transition: all $t-duration $t-timing-function;
-        color: var(--secondary-color);
+        filter: grayscale(1);
       }
 
-      em {
-        transition: all $t-duration $t-timing-function;
-        color: var(--light-secondary-color);
+      &:hover .inline-icon {
+        filter: grayscale(0);
       }
+    }
 
+    p, h1 {
       a {
         cursor: pointer;
         box-shadow: inset 0 -1px var(--secondary-color);

src/components/board/CardComponent.vue

@@ -99,6 +99,8 @@ export default {
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
+        box-shadow: inset 0 0 100px rgba(0,0,0,0.6);
+        filter: blur(0.5px);
       }
     }
 

src/components/board/SectionSelectorComponent.vue

@@ -6,14 +6,24 @@
     >
       <title-component :title-tag="sectionContent.title.tag">
         <template slot="role">
-          {{ sectionContent.title.main }}
+          <a v-if="!sectionContent.title.precision && sectionContent.title.link" :href="sectionContent.title.link" target="_blank">
+            {{ sectionContent.title.main }}
+          </a>
+          <span v-else>
+            {{ sectionContent.title.main }}
+          </span>
         </template>
         <template
           v-if="sectionContent.title.precision"
           slot="structure"
         >
           <br>
-          {{ sectionContent.title.precision }}
+          <a v-if="sectionContent.title.link" :href="sectionContent.title.link" target="_blank">
+            {{ sectionContent.title.precision }}
+          </a>
+          <span v-else>
+            {{ sectionContent.title.precision }}
+          </span>
         </template>
       </title-component>
     </template>
@@ -66,6 +76,8 @@ import BladeCardComponent from '../specific_content/cards/hobbies/BladeCard.vue'
 import CastleCardComponent from '../specific_content/cards/hobbies/CastleCard.vue'
 import SportCardComponent from '../specific_content/cards/hobbies/SportCard.vue'
 import ProfileBoard1Component from '../specific_content/boards/ProfileBoard1.vue'
+import ActiwineBoardEnvironmentComponent from '../specific_content/boards/experiences/ActiwineBoardEnvironment.vue'
+import ActiwineBoardRealisationsComponent from '../specific_content/boards/experiences/ActiwineBoardRealisations.vue'
 
 export default {
   components: {
@@ -98,7 +110,9 @@ export default {
     'blade-card-component': BladeCardComponent,
     'castle-card-component': CastleCardComponent,
     'sport-card-component': SportCardComponent,
-    'profile-board-1-component': ProfileBoard1Component
+    'profile-board-1-component': ProfileBoard1Component,
+    'actiwine-board-environment-component': ActiwineBoardEnvironmentComponent,
+    'actiwine-board-realisations-component': ActiwineBoardRealisationsComponent
   },
 
   props: {

src/components/micro_slots/TitleComponent.vue

@@ -17,6 +17,6 @@ export default {
 
 <style lang="scss">
   .structure {
-    opacity: 0.6;
+    opacity: 0.7;
   }
 </style>

src/components/specific_content/boards/experiences/ActiwineBoardEnvironment.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <p>
+      <strong>Back-end</strong> :<br>
+      <span class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/django-icon.png"
+          alt="icon"
+        >
+        django
+      </span>
+      •
+      <span class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/python-icon.png"
+          alt="icon"
+        >
+        python
+      </span><br>
+      Avec quelques principes du
+      <em>Domain Driven Design</em>.<br>
+      Communication avec le front par les views
+      <span class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/django-icon.png"
+          alt="icon"
+        >
+        django
+      </span> et des <em>API</em> Django REST framework.
+    </p>
+
+    <p>
+      <strong>Front-end</strong> :<br>
+      <span class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/vuejs-icon.png"
+          alt="icon"
+        >
+        Vue.js
+      </span>
+      •
+      <span class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/js-icon.png"
+          alt="icon"
+        >
+        JS
+      </span>
+      •
+      <span class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/sass-icon.png"
+          alt="icon"
+        >
+        SCSS
+      </span>
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/specific_content/boards/experiences/ActiwineBoardRealisations.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <ul>
+      <li>
+        utilisation d'<strong>Algolia</strong> comme moteur de recherche et modèle de lecture, recherche efficace, réponses rapides et bonne synergie avec le front.
+      </li>
+      <li>
+        inscription en ligne des acheteurs avec appels AJAX d'API et validations de données en python pur.
+      </li>
+      <li>
+        règles tarifaires modulables par <em>configuration</em> / <em>interprétation</em>, maitrise et souplesse du modèle économique.
+      </li>
+      <li>
+        marque blanche pour gestion interne des commandes et stocks des négociants avec déclinaisons fonctionnelles et maitrise du visuel.
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul {
+    padding-left: 13px;
+
+    li {
+      margin-bottom: 5px;
+    }
+  }
+</style>

src/components/specific_content/cards/ProfileCard.vue

@@ -132,20 +132,5 @@ export default {
   .center-content {
     display: flex;
     justify-content: center;
-
-    .color-hover {
-
-      .inline-icon {
-        max-height: 0.8rem;
-        position: relative;
-        bottom: -2px;
-        transition: all $t-duration $t-timing-function;
-        filter: grayscale(1);
-      }
-
-      &:hover .inline-icon {
-        filter: grayscale(0);
-      }
-    }
   }
 </style>

src/components/specific_content/cards/experiences/ActiwineCard.vue

@@ -1,25 +1,19 @@
 <template>
   <div>
     <p>
-      Lorem ipsum dolor sit,
       <strong>
-        amet
+        Actiwine
       </strong>
-      consectetur adipisicing elit. Quis eum non ipsum
-      <em>
-        laboriosam
-      </em>
-      sapiente dolorem culpa fuga ducimus, dolor labore ipsam hic error totam laudantium animi, ad, veritatis maxime assumenda.
+      est une place de marché BtoB pour le vin et se place en intermédiaire entre les
+      <em>viticulteurs</em> ou les
+      <em>négociants</em> et la
+      <em>grande distribution</em>, les
+      <em>CHR</em>...
+    </p>
+    <p>
+      Avec cette proposition, la
+      <strong>startup</strong>
+      a la volonté de réduire les intermédiaires, d'assurer des faibles coûts, une meilleure rémunération et de secouer les traditions.
     </p>
   </div>
 </template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/core/data.js

@@ -62,7 +62,8 @@ export const PAGES_DATA = [
               title: {
                 tag: 'h1',
                 main: 'Developpeur Vue.js | django',
-                precision: 'Actiwine'
+                precision: 'Actiwine',
+                link: 'https://www.actiwine.com/'
               },
               component: 'actiwine-card-component'
             },
@@ -71,24 +72,24 @@ export const PAGES_DATA = [
             showDuration: true,
             start: '2016-10',
             end: 'today',
-            bgPath: '',
+            bgPath: 'static/backgrounds/actiwine_bg.gif',
             iconPath: 'static/thumbnails/aw_pic.jpg'
           }
         ],
         boardSections: [
           {
             title: {
               tag: 'h2',
-              main: 'Titre'
+              main: 'Environnement technique'
             },
-            component: ''
+            component: 'actiwine-board-environment-component'
           },
           {
             title: {
               tag: 'h2',
-              main: 'Titre'
+              main: 'Quelques réalisations'
             },
-            component: ''
+            component: 'actiwine-board-realisations-component'
           }
         ]
       },