first commit

app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

app/components/clientDialog.vue

@@ -0,0 +1,59 @@
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog class="relative z-10" @close="$emit('closeDialog')">
+      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
+        leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+        <div class="fixed inset-0 bg-white dark:bg-black bg-opacity-90 transition-opacity" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <TransitionChild as="template" enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+            <DialogPanel
+              class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                <div class="flex-col">
+                  <div v-if="props.project.image"
+                    class="bg-slate-200 p-8 mx-auto flex h-64 w-64 flex-shrink-0 items-center justify-center rounded-full">
+                    <img :src="'/projects/' + props.project.image" class="rounded-full">
+                  </div>
+                  <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
+                      {{ project.company }}
+                    </DialogTitle>
+                    <div class="mt-2 text-xl [&>p]:mb-4">
+                      <p class="text-sm" v-for="desc in props.project.description">{{ desc }}</p>
+                      Role:
+                      <p class="text-sm text-yellow-600">{{ props.project.role }}</p>
+                      Outils:<br>
+                      <p class="text-sm text-yellow-600 inline-block pr-4" v-for="tool in props.project.tools">{{ tool
+                      }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <a v-if="props.project.url" :href="props.project.url" target="_blank"
+                  class="inline-flex w-full justify-center rounded-md bg-esyellow text-black px-3 py-2 text-sm font-semibold shadow-sm hover:bg-yellow-400 sm:ml-3 sm:w-auto ring-1">
+                  voir le site</a>
+                <button type="button"
+                  class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                  @click="$emit('closeDialog')" ref="cancelButtonRef">retour</button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+const props = defineProps(['project', 'open'])
+</script>

app/components/project.vue

@@ -0,0 +1,24 @@
+<template>
+  <button
+    class=" bg-orange-200 m-4 p-4 rounded-full flex flex-shrink-0 items-center justify-center w-60 hover:text-xl hover:bg-orange-400 transition-all">
+    <img v-if="project.image && project.image !== ''" class="h-16 rounded-full" :src="'/projects/' + project.image"
+      :alt="project.company">
+    <p class="grow text-center text-w font-bold text-md" v-if="!project.hideTitle">
+      {{ project.company }}
+    </p>
+  </button>
+</template>
+
+<script setup lang="ts">
+interface project {
+  image: string,
+  hideTitle?: boolean,
+  url: string,
+  year: string,
+  company: string,
+  role: string,
+  description: string[],
+  tools: string[]
+}
+const props = defineProps(['project'])
+</script>

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>