91 lines
3.7 KiB
Vue
91 lines
3.7 KiB
Vue
<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> |