first commit

app/pages/index.vue

@@ -0,0 +1,91 @@
+<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>