<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>Profile</h3> 
    </div>
  
    <p>As you guessed, my name is Raffi. I am a full-stack web developer. I'm comfortable with both back-end and front-end programming (with a slight preference for front-end). While I can code many things in vanilla (pure) HTML, CSS, and JavaScript, I commonly use frameworks for both front-end and back-end development. For example, the portfolio you are currently viewing was coded with Vue.js. It provides all the necessary tools to easily build, organize, and maintain applications. It utilizes a store and a router, as well as some services to communicate with the backend. Yes, this portfolio also includes a small backend specifically for handling form submissions. It is actually a WordPress plugin I developed to send the form via email.
    </p>
    <h4>Security</h4>  
    <p>I always rigorously test my code and push it to its limits because I am highly concerned about security. Therefore, the contact form on this portfolio incorporates various security measures both on the front-end and back-end. For example, if you try to manipulate the sending button through the console, you will see what happens... And if you manage to find the backend address and attempt to send a contact form request there, you will see what happens...
    </p>
    <h4>My Journey...</h4>  
    <p>I have always been fascinated by coding and programming. I started when I was young, around 9 years old. I picked up a book from my father and read about the basics of programming languages. That's how I began. Then came Turbo Pascal, and it continued from there. While working in maintenance, I continued programming, but this time focusing on electronic devices, stepper motors, programmable logic controllers (PLCs), and various other components. Logic has always been my stronghold. In 2022, I had the opportunity to participate in a five-month training course to enhance my knowledge of web programming. During this period, I delved deeper into HTML, CSS, JavaScript, PHP, WordPress, Vue.js, SQL, database management, object-oriented programming, project management, and much more!
    </p>
    <p>I am accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me beyond my comfort zone and demand quick thinking. As a native French speaker, I am also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy exploring new horizons and seizing opportunities for learning and personal growth. With my experience and language skills, I am prepared to embrace fresh challenges and contribute to inspiring projects.
    </p>
  </div>
</template>
<style lang="scss" scoped>
@import '../style/colors.scss';


.content{  
  & .title{
    & > .logo{
      background-image: url('../assets/questionSolo.png');
      background-size: 80%;
    }
  }
  & h4{
    color: $title-normal;
    font-family: 'acme', Arial, Helvetica, sans-serif;
    font-size:1.5em;
    margin-left: 2em;
    margin-top: 1.25em;
  }
  & > 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>