<template>
  <div class="card-container flex flex-col justify-center items-center dark:bg-slate-900">
    <section class="flex items-center p-8 max-w-screen-lg flex-col md:flex-row">
      <div class="flex flex-col items-center">
        <img src="/profil.jpg" class="max-w-96 p-2 rounded-full">
        <div class="flex">
          <img src="/tools/javascript.svg" title="javascript"
            class="bg-white w-16 h-16 p-2 m-2  flex -mt-10 rounded-full -top-6 relative">
          <img src="/tools/vue.svg" title="vue" class="bg-white w-16 h-16 p-2 m-2  flex -mt-10 rounded-full">
          <img src="/tools/react.svg" title="pinia"
            class="bg-white w-16 h-16 p-2 m-2  flex -mt-10 rounded-full relative">
          <img src="/tools/tailwind.svg" title="tailwind"
            class="bg-white w-16 h-16 p-2 m-2  flex -mt-10 rounded-full -top-6 relative">
        </div>
      </div>
      <div class="ml-12 text-center">
        <h1 class="mt-5 text-slate-800 font-extrabold text-5xl leading-relaxed text-left dark:text-slate-50">
          Valère BRON
        </h1>
        <h2 class="text-yellow-700 dark:text-esyellow text-2xl leading-relaxed mb-8 font-mono text-left">
          Développeur Front-end
        </h2>
        <p class="text-slate-800 dark:text-slate-100 text-lg font-mono text-left">
          Développeur JavaScript Front-end avec une expertise en React & en Vue, je vous propose mes services
          pour la réalisation de vos projets web.<br><br> Fort de 12 ans d'expérience sur divers projets, je maîtrise la
          création
          d’applications interactives et performantes, en respectant les meilleures pratiques de développement.
        </p>
        <a href="https://www.malt.fr/profile/valerebron"
          class="text-black font-bold bg-esyellow p-6 ring-1 rounded-lg inline-block mt-12 hover:text-xl transition-all">
          <img src="/malt.svg" class="inline pr-3">
          Discutons de votre projet
        </a>
      </div>
    </section>
    <section class="w-screen flex flex-col items-center">
      <p class="text-lg leading-relaxed font-mono p-8 max-w-screen-lg dark:text-white">
        Les clients avec qui j'ai travaillé :
      </p>
      <div class="flex overflow-x-scroll w-screen">
        <project @click="openProject(project)" v-if="folio && folio.projects" v-for="project in folio.projects"
          :project="project">
        </project>
      </div>
    </section>
    <clientDialog :project="currentProject" :open="isDialogOpen" @closeDialog="closeProject()"></clientDialog>
    <footer class="flex mt-8 [&>a>img]:h-9 [&>a>img]:w-9 [&>a>img]:p-1 dark:bg-slate-50 [&>a]:p-4 rounded-t-xl">
      <a href="https://linkedin.com/in/valere-bron">
        <img src="/linkedin.svg">
      </a>
      <a href="https://www.malt.fr/profile/valerebron">
        <img src="/malt.svg">
      </a>
      <a href="https://github.com/valerebron">
        <img src="/github.svg">
      </a>
    </footer>
  </div>
</template>

<script setup lang="ts">
const folio = ref(null)
onMounted(async () => {
  const res = await fetch('/folio.json')
  folio.value = await res.json()
})
useHead({
  title: 'valère BRON - Developpeur web',
  meta: [
    { name: 'description', content: 'Découvrez mon profil de développeur web et explorez mes compétences et expériences dans le domaine du développement web.' },
    { name: 'keywords', content: 'développeur web, Valère BRON, Lyon, France, HTML, CSS, JavaScript, Typescript, Tailwind, React, Vue' }
  ]
})
const isDialogOpen = ref(false)
const currentProject = ref({})


const openProject = function (project: project) {
  currentProject.value = project
  isDialogOpen.value = true
}
const closeProject = function () {
  isDialogOpen.value = false
}
</script>

<style>
body {
  overflow-x: hidden;
}
</style>