<script setup>
import { onMounted } from 'vue';
import { useBurgerStore } from '@/stores/burger'
const burger = useBurgerStore();
onMounted(() => {
  burger.check()
    //console.log("Mounted")
})

</script>

<template>
  <div class="content">
    <div class="title">
      <div class="logo"></div>
      <h3>Talking about code</h3> 
    </div>
  <p>As you guessed, my name is Raffi. I have been working in the beautiful world of maintenance for 20 years, where I have learned a lot about logic. Throughout my life, both for professional purposes and for fun, I have learned several programming languages. Here are some of them: Video Designer, Twido Soft, Zelio Soft, PL7. When I was younger, I also dabbled in Turbo Pascal, Qbasic, and more recently, during the confinement, I explored a bit of C.</p>

<p>In 2022, I took a five-month training course to further my knowledge of web programming. During this time, I learned HTML, CSS, JavaScript, WordPress, Vue.js, PHP, SQL, database management, and much more! After completing the training, I continued to work independently to delve deeper into WordPress API-REST and gain a better understanding of what can be achieved with Vue.js. Now, I feel prepared to move forward!</p>
<p>I'm accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me out of my comfort zone and require quick thinking. As a native French speaker, I'm also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy discovering new things and seizing opportunities to learn and grow. With my experience and language skills, I'm ready to take on new challenges and contribute to motivating projects.</p>
  </div>
</template>
<style lang="scss" scoped>
@import '../style/colors.scss';


.content{  
  & .title{
    & > .logo{
      background-image: url('../assets/questionSolo.png');
      background-size: 80%;
    }
  }
  & > p{
  
    color : $main-normal;
    opacity: 1;
    padding:1em 1.25em 0em 1em;
    line-height: 1.5em;
    animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
}

@keyframes text{
  0%{
    opacity : 0;
  }
  33%{
    opacity : 0;
  }
  100%{
    opacity:1;
  }
}

@keyframes image_show{
  0%{
    opacity: 0;
    left: 0;
  }
  33%{
    opacity: 0;
    left: 0;    
  }
}
@media (width < 600px){
  .content{
    width: 95%;
  }
}
</style>