project nearly finished. TODO Next : Project page and refine some text

src/views/Technologies.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check();
+})
+</script>
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="logo">
+      </div>
+      <h3><span>technos</span></h3> 
+    </div>
+    <p class="first">Technologies are just like legos. I mean, it's a variety of bricks you can put together to build an all. Here are certains languages I feel confortable with:</p>
+    <ul>
+      <li>html</li>
+      <li>css</li>
+      <li>js</li>
+      <li>php (this old guy)</li>
+    </ul>
+    <p>And also some other stuff:</p>
+    <ul>
+      <li>Vue.js</li>
+      <li>Worpress</li>
+      <li>Yarn</li>
+      <li>npm</li>
+      <li>Google API console</li>
+      <li>Figma</li>
+      <li>Linux systems</li>
+    </ul>
+    
+    <p>As you may suppose I do not stop learning, and this list is not exhaustive.</p>
+    
+  </div>
+</template>
+<style lang="scss" scoped>
+@import '../style/shared.scss';
+
+.content{
+  & > .title {
+    & .logo{
+      background-image: url('../assets/legos_vrac_solo2.png');
+      background-size: 120%;
+    }
+  }
+  
+  & > p, & li{
+    //color : $white;
+    //opacity : 0;
+    line-height: 1.25em;
+   // animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
+    z-index: 2;
+  }
+  & > p{
+    padding: 1em 1em 0 1em;
+    &.first{
+      padding-top: 2em;
+    }
+  }
+  & ul{
+    padding: 0.5em 1em 0 3em;
+  }
+  & li::before{
+    margin-left: 1em;
+	  content: "• ";
+	  word-spacing: 0.5em;
+	  color: $green;    
+  }
+}
+
+@keyframes text{
+0%{
+  opacity : 0;
+}
+33%{
+  opacity : 0;
+}
+100%{
+  opacity:1;
+}
+}
+
+@keyframes image_show{
+0%{
+  opacity: 0;
+  left: 0;
+}
+33%{
+  opacity: 0;
+  left: 0;    
+}
+}
+
+</style>