correcting some texts and syntaxes

src/views/Technologies.vue

@@ -1,10 +1,14 @@
 <script setup>
-import { onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useBurgerStore } from '@/stores/burger'
 const burger = useBurgerStore();
 onMounted(() => {
   burger.check();
 })
+
+const showVueUnderList=ref(false)
+const showWordpressUnderList=ref(false)
+
 </script>
 <template>
   <div class="content">
@@ -13,25 +17,32 @@ onMounted(() => {
       </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>
+    <p class="first">Technologies are just like Legos. I mean, they consist of a variety of bricks you can put together to build amazing things. Here are certain languages I feel comfortable with:</p>
     <ul>
       <li>html</li>
-      <li>css</li>
+      <li>css / scss</li>
       <li>js</li>
-      <li>php (this old guy)</li>
+      <li>php</li>
     </ul>
     <p>And also some other stuff:</p>
     <ul>
-      <li>Vue.js</li>
-      <li>Worpress</li>
-      <li>Yarn</li>
-      <li>npm</li>
+      <li>Versioning with Git</li>
+      <li>npm / yarn</li>
+      <li @click="showVueUnderList = !showVueUnderList" v-bind:class="{ open : showVueUnderList }" class="under-listed">Vue.js</li>
+        <li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Vue2 / Vue3</li>
+        <li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Option api / Composition api</li>
+        <li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Nuxt</li>
+        <li v-bind:class="{ hide : !showVueUnderList }" class="under-li last">Vuetify <span class=red>💚</span></li>
+      <li  @click="showWordpressUnderList = !showWordpressUnderList" v-bind:class="{ open : showWordpressUnderList }" class="under-listed">Worpress</li>
+      <li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom plugins</li>
+      <li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom themes</li>
+      <li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Rest API backend</li>
+      <li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li last">User management</li>
       <li>Google API console</li>
-      <li>Figma</li>
-      <li>Linux systems</li>
+      <li>Linux systems...</li>
     </ul>
     
-    <p>As you may suppose I do not stop learning, and this list is not exhaustive.</p>
+    <p>... And ready to learn more.</p>
     
   </div>
 </template>
@@ -62,13 +73,57 @@ onMounted(() => {
   & ul{
     padding: 0.5em 1em 0 3em;
   }
-  & li::before{
+  li{
+    &::before{
     margin-left: 1em;
-	  content: "• ";
+    margin-right: 0.5em;
+	  content: "•";
 	  word-spacing: 0.5em;
 	  color: $green;    
   }
-}
+    &.under-listed{
+      font-weight: bold;
+      transition: 0.25s;
+      &::before{
+        display:inline-block;
+        content:"⏵";
+        font-size: 0.85em;
+        transform: rotate(0deg);
+        transition: 0.25s;
+      }
+      &.open{
+        &::before{
+          content:"⏵";
+          transform: rotate(90deg);
+        }
+      }
+      &:hover{
+        color: $red;
+        cursor: pointer;
+      }
+    }
+  &.under-li{
+    margin-left: 2em;
+   
+    &.last{
+      margin-bottom: 0.5em;
+    }
+    &::before{
+      margin-left: 1em;
+      margin-right: 1em;
+      font-size:small;
+      content: "■";
+      word-spacing: 0.5em;
+      color: $green;
+    }
+    &.hide{
+      display: none;
+   }
+  }
+}}
+span.red{
+  color:$red;
+}  
 
 @keyframes text{
 0%{