valere/valere.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update cvs

Browse Source
This commit is contained in:
valere
2025-11-30 09:36:09 +01:00
parent d2cd2affd4
commit f72038a76e
61 changed files with 1003 additions and 4569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

595
app/components/huggingFace.vue Normal file
View File

@@ -0,0 +1,595 @@
<template>
<div class="w-1/2 flex flex-wrap items-center gap-7 p-32">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.4 16.83c-.4-1.74-2.9-1.73-3.28.02a5.58 5.58 0 0 1-4.43 4.4c-1.82.31-1.82 2.92 0 3.24a5.55 5.55 0 0 1 4.43 4.4c.36 1.68 2.9 1.7 3.27.01a5.6 5.6 0 0 1 4.46-4.4c1.75-.31 1.75-2.95 0-3.26a5.68 5.68 0 0 1-4.46-4.4Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.83 5.84a4 4 0 0 1 4-4h14.2a4 4 0 0 1 4 4v7.9a3.66 3.66 0 0 0-4.86 2.68 3.68 3.68 0 0 1-2.22 2.7A12.76 12.76 0 0 0 3.83 13.5v5.66c0 1.1.9 2 2 2h7.9a3.82 3.82 0 0 0-.4 2h-7.5a4 4 0 0 1-4-4V5.84Zm18.88 2.44a2.82 2.82 0 1 1-5.64 0 2.82 2.82 0 0 1 5.64 0Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Image Generation
</div>
<label id="category-1" class="select-none"><input class="form-input peer sr-only hidden" type="radio" value="1">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.83 5.84a4 4 0 0 1 4-4h14.2a4 4 0 0 1 4 4v7.9a3.66 3.66 0 0 0-4.86 2.68 3.58 3.58 0 0 1-2.83 2.86 3.57 3.57 0 0 0-3 3.88h-7.5a4 4 0 0 1-4-4V5.84Zm8.43 10.66v-8c0-.45.52-.73.9-.5l5.97 3.65a1 1 0 0 1 0 1.7l-5.98 3.64a.59.59 0 0 1-.89-.5Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.4 16.83c-.4-1.74-2.9-1.73-3.28.02a5.58 5.58 0 0 1-4.43 4.4c-1.82.31-1.82 2.92 0 3.24a5.55 5.55 0 0 1 4.43 4.4c.36 1.68 2.9 1.7 3.27.01a5.6 5.6 0 0 1 4.46-4.4c1.75-.31 1.75-2.95 0-3.26a5.68 5.68 0 0 1-4.46-4.4Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Video Generation
</div>
</label><label id="category-2" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="2">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="m13.5 24.48-.57.01a11.55 11.55 0 1 1 11.46-10.15 3.67 3.67 0 0 0-5.22 2.52 3.58 3.58 0 0 1-2.83 2.86c-2.5.44-3.44 2.84-2.84 4.76ZM7.14 7.84a1 1 0 0 1 1-1h9.57a1 1 0 0 1 1 1V9.3a1 1 0 1 1-2 0v-.47h-2.78v8.2h.98a1 1 0 0 1 0 2H10.9a1 1 0 1 1 0-2h1.03v-8.2H9.14v.47a1 1 0 0 1-2 0V7.84Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.47 17.27c-.4-1.74-2.9-1.73-3.27.02a5.58 5.58 0 0 1-4.44 4.4c-1.82.32-1.82 2.93 0 3.24a5.55 5.55 0 0 1 4.43 4.4c.36 1.69 2.9 1.7 3.28.01a5.6 5.6 0 0 1 4.45-4.4c1.75-.3 1.76-2.95 0-3.25a5.68 5.68 0 0 1-4.45-4.42Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Text Generation
</div>
</label><label id="category-3" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="3">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M8.47 20.68v5.11a4 4 0 0 0 4 4h13.22a4 4 0 0 0 4-4V12.56a4 4 0 0 0-4-4h-4.34v5.76h6.37v2h-3.3a15 15 0 0 1-3.38 5.58c1.28 1 2.93 1.9 5.08 2.5l.97.27c-.36.77-.48 1.2-.54 1.93l-.96-.27c-2.54-.71-4.5-1.8-5.99-3.02-1.73 1.53-3.77 2.72-5.75 3.04l-.99.16c0-.85-.1-1.3-.32-1.97l.99-.16c1.45-.24 3.1-1.15 4.61-2.45-.38-.41-.72-.84-1.03-1.25H8.47Z"
fill="currentColor" fill-opacity=".5"></path>
<path d="m19.27 20.19.3.35a13.84 13.84 0 0 0 2.74-4.22h-.95v.36a4 4 0 0 1-2.1 3.5Z" fill="currentColor"
fill-opacity=".5"></path>
<path d="m11.56 8.17 1.36 4.04h-2.81l1.35-4.04h.1Z" fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.77 5.84a4 4 0 0 1 4-4h11.59a4 4 0 0 1 4 4v10.84a4 4 0 0 1-4 4H5.77a4 4 0 0 1-4-4V5.84Zm7.01 10.42.87-2.57h3.7l.88 2.57h2.33l-3.7-10h-2.57l-3.73 10h2.22Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Language Translation
</div>
</label><label id="category-4" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="4">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="m13.52 15.5 8-8a11.32 11.32 0 1 0 0 16.01l-8-8.01Zm-.16-4.94a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M25.49 7.89a1 1 0 0 1 1.41 0 11 11 0 0 1 0 15.55 1 1 0 1 1-1.42-1.41 9 9 0 0 0 0-12.73 1 1 0 0 1 0-1.41Zm-3.78 3.78a1 1 0 0 1 1.41-.02 5.67 5.67 0 0 1 .04 8.06 1 1 0 1 1-1.41-1.42 3.67 3.67 0 0 0-.03-5.2 1 1 0 0 1-.01-1.42Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Speech Synthesis
</div>
</label><label id="category-5" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="5">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="m22.32 27.79 5.32-3.08v-6.25l-5.82-3.38a1 1 0 0 1-.5-.87V7.68c0-.18-.1-.35-.25-.44l-4.81-2.8a.51.51 0 0 0-.52 0l-.5-.87.5.86-4.8 2.81a.51.51 0 0 0-.26.44v6.51a1 1 0 0 1-.5.87L4.62 18.3a.51.51 0 0 0-.25.45v5.65c0 .18.1.35.26.45l4.8 2.78c.16.09.36.09.52 0l.5.86-.5-.86 5.56-3.22a1 1 0 0 1 1 0l5.82 3.37Zm.75 1.87a1.5 1.5 0 0 1-1.5 0L16 26.44l-5.06 2.93c-.78.45-1.74.45-2.52 0l.5-.86-.5.86-4.8-2.78a2.51 2.51 0 0 1-1.26-2.18v-5.65c0-.9.47-1.72 1.24-2.17l5.08-2.97V7.68c0-.89.47-1.71 1.24-2.16l4.81-2.82a2.51 2.51 0 0 1 2.54 0l4.8 2.82a2.51 2.51 0 0 1 1.25 2.16v5.96l5.57 3.24c.47.27.75.76.75 1.3V25a1.5 1.5 0 0 1-.75 1.3l-5.82 3.36Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 22.59a1 1 0 0 1-1-1v-3.14l-2.66-1.54a1 1 0 0 1 1-1.73L16 16.7l2.66-1.53a1 1 0 1 1 1 1.73L17 18.45v3.14a1 1 0 0 1-1 1Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="m22.32 27.79 5.32-3.08v-6.25l-5.82-3.38a1 1 0 0 1-.5-.87V7.68c0-.18-.1-.35-.25-.44l-4.81-2.8a.51.51 0 0 0-.52 0l-4.8 2.8a.51.51 0 0 0-.26.44v6.51a1 1 0 0 1-.5.87L4.62 18.3a.51.51 0 0 0-.25.45v5.65c0 .18.1.35.26.45l4.8 2.78c.16.09.36.09.52 0l5.56-3.22a1 1 0 0 1 1 0l5.82 3.37ZM15 21.59a1 1 0 1 0 2 0v-3.14l2.66-1.54a1 1 0 0 0-1-1.73L16 16.7l-2.66-1.53a1 1 0 1 0-1 1.73L15 18.45v3.14Z"
fill="currentColor" fill-opacity=".1"></path>
</svg> 3D Modeling
</div>
</label><label id="category-6" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="6">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M14.83 12.09a2.74 2.74 0 0 0-2.74 2.74v6.78a2.74 2.74 0 0 0 2.74 2.75h6.78a2.74 2.74 0 0 0 2.75-2.75v-6.78a2.74 2.74 0 0 0-2.75-2.74h-6.78Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M10.6 7.64h6.6a2.72 2.72 0 0 1 2.71 2.71v1.74h-5.08a2.74 2.74 0 0 0-2.74 2.74v5.08h-1.74a2.72 2.72 0 0 1-2.7-2.7V10.6a2.96 2.96 0 0 1 2.95-2.96Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h4.12a1 1 0 0 0 0-2H2.62a1 1 0 0 0-1 1v5.13a1 1 0 1 0 2 0V3.6Zm19.64-1a1 1 0 0 1 1-1h5.12a1 1 0 0 1 1 1v5.13a1 1 0 1 1-2 0V3.61h-4.12a1 1 0 0 1-1-1ZM2.62 23.28a1 1 0 0 1 1 1v4.12h4.12a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-5.12a1 1 0 0 1 1-1Zm26.76 0a1 1 0 0 1 1 1v5.12a1 1 0 0 1-1 1h-5.12a1 1 0 0 1 0-2h4.12v-4.12a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Object Detection
</div>
</label><label id="category-7" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="7">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.05 9.65a1 1 0 0 1 1-1h11.9a1 1 0 0 1 1 1v1.83a1 1 0 0 1-2 0v-.83H17v10.7h1.47a1 1 0 1 1 0 2h-5a1 1 0 0 1 0-2H15v-10.7h-3.95v.83a1 1 0 0 1-2 0V9.65Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h4.12a1 1 0 0 0 0-2H2.62a1 1 0 0 0-1 1v5.13a1 1 0 1 0 2 0V3.6Zm19.64-1a1 1 0 0 1 1-1h5.12a1 1 0 0 1 1 1v5.13a1 1 0 1 1-2 0V3.61h-4.12a1 1 0 0 1-1-1ZM2.62 23.28a1 1 0 0 1 1 1v4.12h4.12a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-5.12a1 1 0 0 1 1-1Zm26.76 0a1 1 0 0 1 1 1v5.12a1 1 0 0 1-1 1h-5.12a1 1 0 0 1 0-2h4.12v-4.12a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Text Analysis
</div>
</label><label id="category-8" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="8">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.83 1.84a4 4 0 0 0-4 4v13.32a4 4 0 0 0 4 4h8.83v-.3c0-.64.24-1.24.66-1.7H5.83a2 2 0 0 1-2-2V13.5a12.84 12.84 0 0 1 13.28 5.88l3.74-3.7a5.85 5.85 0 0 1 3.17-1.64v-8.2a4 4 0 0 0-4-4H5.83Zm12.06 9.27a2.82 2.82 0 1 0 0-5.65 2.82 2.82 0 0 0 0 5.65Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M23.32 15.8a4.35 4.35 0 0 1 4.74 7.09l-5.4 5.45a1 1 0 0 1-.72.3h-4.78a1 1 0 0 1-1-1v-4.79a1 1 0 0 1 .3-.7l5.45-5.41c.4-.4.88-.73 1.4-.94Zm1.66 1.67a2.35 2.35 0 0 0-1.66.68l-5.16 5.12v3.37h3.37l5.11-5.16a2.35 2.35 0 0 0-1.66-4.01Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Image Editing
</div>
</label><label id="category-9" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="9">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.4 16.83c-.4-1.74-2.9-1.73-3.28.02a5.58 5.58 0 0 1-4.43 4.4c-1.82.31-1.82 2.92 0 3.24a5.55 5.55 0 0 1 4.43 4.4c.36 1.68 2.9 1.7 3.27.01a5.6 5.6 0 0 1 4.46-4.4c1.75-.31 1.75-2.95 0-3.26a5.68 5.68 0 0 1-4.46-4.4Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.06 7.94a1 1 0 0 1 1.42 0l3.44 3.44a1 1 0 0 1 0 1.42l-3.44 3.44a1 1 0 0 1-1.42-1.42L9.8 12.1 7.06 9.36a1 1 0 0 1 0-1.42Zm5.73 7.59a1 1 0 0 1 1-1h4.3a1 1 0 1 1 0 2h-4.3a1 1 0 0 1-1-1Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M5.83 3.84h14.2a2 2 0 0 1 2 2v7.73c.66-.1 1.36-.02 2 .23V5.84a4 4 0 0 0-4-4H5.82a4 4 0 0 0-4 4v13.32a4 4 0 0 0 4 4h7.35c-.06-.69.07-1.39.39-2H5.83a2 2 0 0 1-2-2V5.84c0-1.1.9-2 2-2Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Code Generation
</div>
</label><label id="category-10" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="10">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M20.23 17.68a1.27 1.27 0 1 1-2.54 0 1.27 1.27 0 0 1 2.54 0ZM14.32 17.68a1.27 1.27 0 1 1-2.54 0 1.27 1.27 0 0 1 2.54 0Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M24.17 22.24h-2.59a7.87 7.87 0 0 0 2-7.8A9.93 9.93 0 0 1 13.3 10.5a9.93 9.93 0 0 1-5.15 5.3 7.9 7.9 0 0 0 5.11 8.26 3.52 3.52 0 0 0 .27 2.18 9.9 9.9 0 1 1 10.64-4Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M3.98 16.05a11.98 11.98 0 0 1 23.96.14v5.55a2 2 0 0 1-2 2h-5.88a2 2 0 0 0-1.74-1H16.7a2 2 0 0 0 0 4h1.62a2 2 0 0 0 1.74-1h5.88a4 4 0 0 0 4-4v-2.72a1.5 1.5 0 0 0 1.04-1.43v-2.66c0-.76-.57-1.4-1.31-1.49a13.98 13.98 0 0 0-27.42 0 1.5 1.5 0 0 0-1.27 1.5v2.65a1.5 1.5 0 1 0 3 0v-1.54Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Question Answering
</div>
</label><label id="category-11" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="11">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M11.6 12.38c-.25-.25-.6-.4-.95-.4H9.32a1.34 1.34 0 0 0-1.34 1.35v9.35a1.34 1.34 0 0 0 1.34 1.34h1.33A1.34 1.34 0 0 0 12 22.68v-9.35c0-.36-.14-.7-.4-.95ZM17.61 8.37c-.25-.25-.59-.4-.94-.4h-1.34A1.34 1.34 0 0 0 14 9.33v13.36a1.34 1.34 0 0 0 1.34 1.34h1.34A1.34 1.34 0 0 0 18 22.68V9.32c0-.36-.15-.7-.4-.95ZM23.63 16.4c-.25-.26-.6-.4-.95-.4h-1.33A1.34 1.34 0 0 0 20 17.34v5.34a1.34 1.34 0 0 0 1.34 1.34h1.33a1.34 1.34 0 0 0 1.34-1.34v-5.34c0-.36-.14-.7-.39-.95Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.65 2.36a5.29 5.29 0 0 0-5.29 5.29v16.7a5.29 5.29 0 0 0 5.29 5.29h16.7a5.29 5.29 0 0 0 5.29-5.29V7.65a5.29 5.29 0 0 0-5.29-5.29H7.65Zm9.96 6.01c-.25-.25-.59-.4-.94-.4h-1.34A1.34 1.34 0 0 0 14 9.33v13.36a1.34 1.34 0 0 0 1.34 1.34h1.34A1.34 1.34 0 0 0 18 22.68V9.32c0-.36-.15-.7-.4-.95Zm-6.01 4.01c-.25-.25-.6-.4-.95-.4H9.32a1.34 1.34 0 0 0-1.34 1.35v9.35a1.34 1.34 0 0 0 1.34 1.34h1.33A1.34 1.34 0 0 0 12 22.68v-9.35c0-.36-.14-.7-.4-.95ZM22.68 16a1.34 1.34 0 0 1 1.34 1.34v5.34a1.34 1.34 0 0 1-1.34 1.34h-1.33A1.34 1.34 0 0 1 20 22.68v-5.34A1.34 1.34 0 0 1 21.35 16h1.33Z"
fill="currentColor" fill-opacity=".15"></path>
</svg> Data Visualization
</div>
</label><label id="category-12" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="12">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M9.95 3.85a5 5 0 0 0-5 5v6a5 5 0 0 0 7.08 4.55 10.93 10.93 0 0 1-.91-3.33 2.92 2.92 0 0 1 2.93-3.21c.32 0 .62.04.9.13V8.85a5 5 0 0 0-5-5Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M13.03 21.14a7 7 0 0 1-10-5.3c-.09-.53-.53-.99-1.08-.99s-1 .45-.95 1a9 9 0 0 0 7.95 7.95v4.34a1 1 0 1 0 2 0V23.8a8.94 8.94 0 0 0 3.4-1.1c-.49-.47-.93-1-1.32-1.56Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M21.05 23.8a9 9 0 0 1-7.94-7.95c-.06-.55.39-1 .94-1 .55 0 1 .46 1.07 1a7 7 0 0 0 13.86 0c.08-.54.52-1 1.07-1s1 .45.95 1a9 9 0 0 1-7.95 7.95v4.35a1 1 0 1 1-2 0V23.8Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M25.05 14.86v-6a3 3 0 0 0-6 0v6a3 3 0 0 0 6 0Zm-3-11a5 5 0 0 0-5 5v6a5 5 0 1 0 10 0v-6a5 5 0 0 0-5-5Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Voice Cloning
</div>
</label><label id="category-13" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="13">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M2.62 13.04v2.82L16.55 1.93h-2.83l-11.1 11.1ZM2.62 18.66v2.83l1.27-1.27a12.6 12.6 0 0 1 8.75-8.75l9.54-9.54h-2.83L2.62 18.66ZM3.43 23.47l-.8.82v.4c0 .7.17 1.36.49 1.93l.56-.56a12.63 12.63 0 0 1-.25-2.59ZM18.48 11.26a12.63 12.63 0 0 0-2.59-.25l9.09-9.08h.4c.7 0 1.36.18 1.93.5l-8.83 8.83ZM22.52 12.84c-.6-.37-1.22-.68-1.88-.94l8.11-8.12c.4.62.63 1.36.63 2.15v.05l-6.86 6.86ZM25.56 15.42c-.43-.5-.9-.98-1.41-1.4l5.23-5.24v2.83l-3.82 3.81ZM27.68 18.93c-.26-.66-.58-1.29-.94-1.88l2.64-2.65v2.83l-1.7 1.7ZM28.57 23.67a13.9 13.9 0 0 0-.25-2.58l1.06-1.06v2.83l-.81.81ZM27.82 27.86c.11-.31.21-.62.3-.94l1.1-1.1a4 4 0 0 1-1.4 2.04ZM10.93 1.93l-8.3 8.3V7.42L8.1 1.93h2.83ZM2.99 4.26c.4-.87 1.1-1.57 1.96-1.96L2.99 4.26Z"
fill="currentColor" fill-opacity=".5"></path>
<path
d="M20.51 24.67a1.35 1.35 0 1 1-2.7 0 1.35 1.35 0 0 1 2.7 0ZM14.2 24.67a1.35 1.35 0 1 1-2.7 0 1.35 1.35 0 0 1 2.7 0Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M24.57 23.58c0 1.56-.42 3.02-1.15 4.28h2.24a10.53 10.53 0 0 0 .46-7.32 10.57 10.57 0 1 0-19.79 7.32h2.25a8.53 8.53 0 0 1-1.1-5.12A10.6 10.6 0 0 0 13.11 17a10.55 10.55 0 0 0 11.1 4.18c.23.76.35 1.56.35 2.39Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Background Removal
</div>
</label><label id="category-14" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="14">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M22.07 2.61a1 1 0 0 1 1-1h6.3a1 1 0 0 1 1 1v6.3a1 1 0 1 1-2 0V5.04l-6.1 6.11a1 1 0 0 1-1.42-1.41l6.12-6.12h-3.9a1 1 0 0 1-1-1Z"
fill="currentColor" fill-opacity=".5"></path>
<path
d="M23 28.39a1 1 0 1 0 0 2h6.38a1 1 0 0 0 1-1V16a1 1 0 0 0-2 0v12.39h-5.39ZM16 1.61a1 1 0 1 1 0 2H3.61v5.95a1 1 0 0 1-2 0V2.6a1 1 0 0 1 1-1H16Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.62 16.28c0-1.5 1.2-2.7 2.7-2.7h12.1c1.5 0 2.7 1.2 2.7 2.7v11.41c0 1.5-1.2 2.7-2.7 2.7H4.32a2.7 2.7 0 0 1-2.7-2.7V16.28Zm15.5 8.02c-1.5.47-2.9 1.22-4.1 2.18a10.06 10.06 0 0 0-9.4-3.78v5c0 .38.31.7.7.7h12.1a.7.7 0 0 0 .7-.7v-3.4Zm-.61-5.64a2.23 2.23 0 1 1-4.46 0 2.23 2.23 0 0 1 4.46 0Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Image Upscaling
</div>
</label><label id="category-15" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="15">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.84 1.84a4 4 0 0 0-4 4v13.32a4 4 0 0 0 4 4h14.04V19.4a3 3 0 0 1-2.08 1.25l.22.5H5.84a2 2 0 0 1-2-2V13.5a12.84 12.84 0 0 1 10.59 2.76V16a3 3 0 0 1 3-3h6.6V5.84a4 4 0 0 0-4-4H5.82Zm12.05 9.27a2.82 2.82 0 1 0 0-5.65 2.82 2.82 0 0 0 0 5.65Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16.43 16a1 1 0 0 1 1-1h10.9a1 1 0 0 1 1 1v1.68a1 1 0 1 1-2 0V17h-3.45v9.64h1.26a1 1 0 1 1 0 2h-4.57a1 1 0 1 1 0-2h1.3V17h-3.44v.68a1 1 0 1 1-2 0V16Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> OCR
</div>
</label><label id="category-16" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="16">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M22.07 7.93H9.93a2 2 0 0 0-2 2v12.14c0 1.1.9 2 2 2h12.14a2 2 0 0 0 2-2V9.93a2 2 0 0 0-2-2Zm-12.14-2a4 4 0 0 0-4 4v12.14a4 4 0 0 0 4 4h12.14a4 4 0 0 0 4-4V9.93a4 4 0 0 0-4-4H9.93Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.8 12.02a1 1 0 0 1 1-1h8.4a1 1 0 1 1 0 2h-8.4a1 1 0 0 1-1-1ZM10.8 16a1 1 0 0 1 1-1h8.4a1 1 0 1 1 0 2h-8.4a1 1 0 0 1-1-1ZM10.8 19.98a1 1 0 0 1 1-1H16a1 1 0 1 1 0 2h-4.2a1 1 0 0 1-1-1Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h4.12a1 1 0 0 0 0-2H2.62a1 1 0 0 0-1 1v5.13a1 1 0 1 0 2 0V3.6Zm19.64-1a1 1 0 0 1 1-1h5.12a1 1 0 0 1 1 1v5.13a1 1 0 1 1-2 0V3.61h-4.12a1 1 0 0 1-1-1ZM2.62 23.28a1 1 0 0 1 1 1v4.12h4.12a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-5.12a1 1 0 0 1 1-1Zm26.76 0a1 1 0 0 1 1 1v5.12a1 1 0 0 1-1 1h-5.12a1 1 0 0 1 0-2h4.12v-4.12a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Document Analysis
</div>
</label><label id="category-17" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="17">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M20.95 18.18c-.6-.25-.85-1-.5-1.53a4.15 4.15 0 0 1 3.53-1.86c1.75 0 2.95.8 3.56 1.8.53.86.83 2.46.03 3.65-.9 1.32-1.75 1.73-2.22 2.58-.1.2-.18.36-.22.7-.07.54-.52.97-1.07.97a1.1 1.1 0 0 1-1.1-1.21c.04-.38.13-.78.34-1.15.58-1.04 1.68-1.65 2.32-2.56.68-.97.3-2.76-1.62-2.76-.88 0-1.44.45-1.8 1-.25.42-.8.56-1.25.37Zm4.53 9.29a1.5 1.5 0 0 1-2.98 0c0-.82.67-1.5 1.49-1.5s1.49.68 1.49 1.5Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.83 1.84a4 4 0 0 0-4 4v13.32a4 4 0 0 0 4 4h14.2a4 4 0 0 0 .94-.12 5.02 5.02 0 0 1 1.33-2.93c-.7.23-1.47.18-2.11-.08h-.01l-.02-.01a3.05 3.05 0 0 1-1.37-4.48 6.15 6.15 0 0 1 5.2-2.75h.03V5.84a4 4 0 0 0-4-4H5.83Zm.39 11.44c5.32 0 9.88 3.25 11.8 7.88H5.83a2 2 0 0 1-2-2V13.5c.78-.14 1.57-.22 2.39-.22Zm11.67-2.17a2.82 2.82 0 1 0 0-5.65 2.82 2.82 0 0 0 0 5.65Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Visual QA
</div>
</label><label id="category-18" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="18">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.4 21.75a3 3 0 0 1 3-3H27a3 3 0 0 1 3 3v5.04a3 3 0 0 1-3 3H14.4a3 3 0 0 1-3-3v-5.04Zm6.78 1.48a1.03 1.03 0 1 0 .52 1.93.75.75 0 0 1 .76 1.3 2.53 2.53 0 0 1-3.81-2.2 2.53 2.53 0 0 1 3.81-2.18.75.75 0 0 1-.76 1.3 1.03 1.03 0 0 0-.52-.15Zm4.9 1.04a1.03 1.03 0 0 1 1.55-.9.75.75 0 1 0 .76-1.29 2.53 2.53 0 0 0-3.81 2.19 2.53 2.53 0 0 0 3.81 2.19.75.75 0 0 0-.76-1.3 1.03 1.03 0 0 1-1.56-.9Z"
fill="currentColor" fill-opacity=".15"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.08 5.84a4 4 0 0 1 4-4h14.19a4 4 0 0 1 4 4v10.9h-9.05A12.73 12.73 0 0 0 4.08 13.5v5.66c0 1.1.9 2 2 2h3.36c-.02.2-.04.39-.04.59v1.4H6.08a4 4 0 0 1-4-4V5.85Zm18.88 2.44a2.82 2.82 0 1 1-5.65 0 2.82 2.82 0 0 1 5.65 0ZM18.18 23.23a1.03 1.03 0 1 0 .53 1.93.75.75 0 0 1 .75 1.3 2.53 2.53 0 0 1-3.81-2.2 2.53 2.53 0 0 1 3.81-2.18.75.75 0 1 1-.75 1.3 1.03 1.03 0 0 0-.53-.15ZM24.11 23.23a1.03 1.03 0 1 0 .52 1.93.75.75 0 0 1 .76 1.3 2.53 2.53 0 0 1-3.81-2.2 2.53 2.53 0 0 1 3.81-2.18.75.75 0 0 1-.76 1.3 1.03 1.03 0 0 0-.52-.15Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Image Captioning
</div>
</label><label id="category-19" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="19">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.9 3.81a5.32 5.32 0 0 1 3.67-1.45h16.86c1.36 0 2.68.52 3.67 1.45a4.93 4.93 0 0 1 1.54 3.57V20.6c0 1.35-.56 2.63-1.54 3.57a5.32 5.32 0 0 1-3.67 1.45h-6.76l-6.79 3.89a1 1 0 0 1-1.5-.87v-3.02h-1.8a5.32 5.32 0 0 1-3.68-1.45 4.93 4.93 0 0 1-1.54-3.57V7.38c0-1.35.56-2.63 1.54-3.57Zm17.14 6.34a1.27 1.27 0 1 1-2.54 0 1.27 1.27 0 0 1 2.54 0Zm-10.81 3a1 1 0 0 1 1.41.02 6.1 6.1 0 0 0 8.72 0 1 1 0 0 1 1.43 1.4 8.1 8.1 0 0 1-11.58 0 1 1 0 0 1 .02-1.42Zm2-1.73a1.27 1.27 0 1 0 0-2.54 1.27 1.27 0 0 0 0 2.54Z"
fill="currentColor" fill-opacity=".15"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.23 13.15a1 1 0 0 1 1.41.02 6.1 6.1 0 0 0 8.72 0 1 1 0 0 1 1.43 1.4 8.1 8.1 0 0 1-11.58 0 1 1 0 0 1 .02-1.42Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M21.04 10.15a1.27 1.27 0 1 1-2.54 0 1.27 1.27 0 0 1 2.54 0ZM13.5 10.15a1.27 1.27 0 1 1-2.54 0 1.27 1.27 0 0 1 2.54 0Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Chatbots
</div>
</label><label id="category-20" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="20">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path d="M12.67 14.32a1.03 1.03 0 1 1-2.05 0 1.03 1.03 0 0 1 2.05 0Z" fill="currentColor" fill-opacity=".8">
</path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.5 5.82a1 1 0 1 0-2 0v1.06a9 9 0 0 0 0 17.88v1.05a1 1 0 1 0 2 0V5.82Zm-2 11.99V8.89a7 7 0 0 0 0 13.85v-2.9a7.53 7.53 0 0 1-3.48-1.43 1 1 0 1 1 1.2-1.6c.67.5 1.45.84 2.28 1Z"
fill="currentColor" fill-opacity=".8"></path>
<path d="M24.5 15.82a7 7 0 0 0-7-7v-2a9 9 0 0 1 0 17.99v-2a7 7 0 0 0 7-7Z" fill="currentColor"
fill-opacity=".8"></path>
<path
d="M18.97 15.2A1.38 1.38 0 0 0 20 12.9l-2.41.91c0 .77.62 1.38 1.38 1.38ZM17.59 19.25c.97 0 2.04.03 2.86.69a1 1 0 0 0 1.25-1.56c-1.4-1.13-3.14-1.13-4.05-1.13h-.06v2Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h4.12a1 1 0 0 0 0-2H2.62a1 1 0 0 0-1 1v5.13a1 1 0 1 0 2 0V3.6Zm19.64-1a1 1 0 0 1 1-1h5.12a1 1 0 0 1 1 1v5.13a1 1 0 1 1-2 0V3.61h-4.12a1 1 0 0 1-1-1ZM2.62 23.28a1 1 0 0 1 1 1v4.12h4.12a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-5.12a1 1 0 0 1 1-1Zm26.76 0a1 1 0 0 1 1 1v5.12a1 1 0 0 1-1 1h-5.12a1 1 0 0 1 0-2h4.12v-4.12a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Sentiment Analysis
</div>
</label><label id="category-21" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="21">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path opacity=".5" fill-rule="evenodd" clip-rule="evenodd"
d="M7.65 4.36a3.29 3.29 0 0 0-3.29 3.29v16.7a3.29 3.29 0 0 0 3.29 3.29h16.7a3.29 3.29 0 0 0 3.29-3.29V16a1 1 0 1 1 2 0v8.35a5.29 5.29 0 0 1-5.29 5.29H7.65a5.29 5.29 0 0 1-5.29-5.29V7.65a5.29 5.29 0 0 1 5.29-5.29H16a1 1 0 1 1 0 2H7.65Z"
fill="currentColor" fill-opacity=".5"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M27.54 11.77a1 1 0 0 1-1 1h-6.31a1 1 0 0 1-1-1v-6.3a1 1 0 1 1 2 0v3.89l6.12-6.12a1 1 0 1 1 1.41 1.41l-6.12 6.12h3.9a1 1 0 0 1 1 1ZM7.67 15.64a1 1 0 0 1 1-1h8.42a1 1 0 1 1 0 2H8.67a1 1 0 0 1-1-1ZM7.67 19.62a1 1 0 0 1 1-1h8.42a1 1 0 1 1 0 2H8.67a1 1 0 0 1-1-1ZM7.67 23.6a1 1 0 0 1 1-1h4.21a1 1 0 1 1 0 2h-4.2a1 1 0 0 1-1-1Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Text Summarization
</div>
</label><label id="category-22" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="22">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M24.16 13.86V4.19a2.22 2.22 0 0 0-2.59-2.22l-9.86 1.82a3.43 3.43 0 0 0-2.82 3.4v7.96a4.63 4.63 0 1 0 1.98 3.79V9.52l11.3-2.07v6.1c.67-.07 1.37.03 2 .31Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M15.27 19.55a4.63 4.63 0 0 1 6.42-5.92 3.55 3.55 0 0 0-2.68 2.79 3.58 3.58 0 0 1-2.83 2.86c-.33.06-.63.15-.9.27Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.24 16.83c-.4-1.74-2.89-1.73-3.27.02a5.58 5.58 0 0 1-4.44 4.4c-1.81.31-1.81 2.92 0 3.24a5.55 5.55 0 0 1 4.44 4.4c.36 1.68 2.9 1.7 3.27.01a5.6 5.6 0 0 1 4.46-4.4c1.75-.31 1.75-2.95 0-3.26a5.68 5.68 0 0 1-4.46-4.4Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Music Generation
</div>
</label><label id="category-23" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="23">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17 6.89a1 1 0 1 0-2 0v2.3c-.35.46-.7.6-.95.6-.29 0-.7-.19-1.1-.83a1 1 0 0 0-1.7 1.06c.6.97 1.57 1.77 2.8 1.77.34 0 .65-.06.95-.16v1.31a3.7 3.7 0 0 1-4.81-.26 1 1 0 0 0-1.4 1.44A5.68 5.68 0 0 0 15 15.24V18c-.8-.05-1.55-.16-2.25-.32-1.67-.39-3.6.8-3.6 2.75 0 .85.36 1.48.87 1.93a5.68 5.68 0 0 0 1.82 1.02c.38.17.7.3 1 .47.33.2.5.39.58.57a2.83 2.83 0 0 0 5.16 0c.08-.17.25-.36.6-.56a8.86 8.86 0 0 1 1.29-.62 5.89 5.89 0 0 0 1.5-.9c.51-.44.89-1.07.89-1.9 0-1.96-1.94-3.15-3.61-2.76-.7.16-1.45.27-2.25.32v-2.76a5.72 5.72 0 0 0 6.2-1.12 1 1 0 0 0-1.38-1.44 3.7 3.7 0 0 1-4.82.26v-1.31c.3.1.61.16.95.16 1.24 0 2.2-.8 2.8-1.77a1 1 0 1 0-1.7-1.06c-.4.64-.81.83-1.1.83-.25 0-.6-.14-.95-.6v-2.3Zm2.7 12.74c.61-.15 1.16.33 1.16.8 0 .53-.66.78-1.16.97l-.29.12c-.39.17-.86.38-1.27.62-.52.31-1.07.76-1.38 1.46-.29.63-1.23.64-1.51 0a3.31 3.31 0 0 0-1.4-1.46 10.89 10.89 0 0 0-1.54-.73c-.5-.19-1.17-.43-1.17-.98 0-.47.55-.94 1.16-.8 1.14.26 2.39.4 3.7.4s2.57-.14 3.7-.4Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M20.86 20.43c0-.47-.55-.95-1.16-.8-1.13.26-2.39.4-3.7.4s-2.56-.14-3.7-.4c-.61-.14-1.16.33-1.16.8 0 .55.66.8 1.17.98l.27.11c.39.17.86.37 1.28.62.51.3 1.07.76 1.39 1.46.28.64 1.22.63 1.5 0 .32-.7.87-1.15 1.39-1.46.41-.24.88-.45 1.27-.63l.29-.1c.5-.2 1.16-.45 1.16-.98Z"
fill="currentColor" fill-opacity=".15"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.65 2.36a5.29 5.29 0 0 0-5.29 5.29v16.7a5.29 5.29 0 0 0 5.29 5.29h16.7a5.29 5.29 0 0 0 5.29-5.29V7.65a5.29 5.29 0 0 0-5.29-5.29H7.65ZM16 5.9a1 1 0 0 1 1 1v2.3c.35.46.7.6.95.6.3 0 .7-.19 1.1-.83a1 1 0 0 1 1.7 1.06c-.6.97-1.56 1.77-2.8 1.77-.34 0-.65-.06-.95-.16v1.31a3.7 3.7 0 0 0 4.82-.26 1 1 0 0 1 1.38 1.44 5.68 5.68 0 0 1-6.2 1.12V18c.8-.05 1.55-.16 2.25-.32 1.67-.39 3.6.8 3.6 2.75 0 .84-.37 1.47-.87 1.91a5.89 5.89 0 0 1-1.8 1.03c-.4.17-.72.31-1 .49-.35.2-.52.39-.6.56a2.83 2.83 0 0 1-5.16 0c-.08-.18-.25-.36-.59-.57-.29-.17-.6-.3-1-.47l-.29-.13a5.68 5.68 0 0 1-1.52-.89 2.5 2.5 0 0 1-.88-1.93c0-1.95 1.94-3.14 3.61-2.75.7.16 1.45.27 2.25.32v-2.76a5.72 5.72 0 0 1-6.2-1.12 1 1 0 0 1 1.39-1.44 3.7 3.7 0 0 0 4.82.26v-1.31c-.3.1-.62.16-.96.16-1.23 0-2.2-.8-2.8-1.77a1 1 0 1 1 1.7-1.06c.4.64.81.83 1.1.83.25 0 .6-.14.95-.6v-2.3a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".15"></path>
</svg> Medical Imaging
</div>
</label><label id="category-24" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="24">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 26.57a10.57 10.57 0 1 0 0-21.14 10.57 10.57 0 0 0 0 21.14Zm.98-17.12a1 1 0 1 0-2 0v.7c-.5.12-1 .32-1.42.64a3.05 3.05 0 0 0-1.24 2.52c0 1.16.56 1.95 1.3 2.46.63.42 1.4.68 2.03.9l.14.04c.73.24 1.26.44 1.63.72.3.23.48.5.48 1.03 0 .63-.23.95-.49 1.13-.3.22-.78.34-1.36.3-1-.08-1.8-.6-2.04-1.1a1 1 0 1 0-1.81.85 4.15 4.15 0 0 0 2.78 2.08v.83a1 1 0 1 0 2 0v-.7a3.24 3.24 0 0 0 2.92-3.38c0-1.2-.51-2.05-1.26-2.62a7.51 7.51 0 0 0-2.21-1.04h-.02a6.98 6.98 0 0 1-1.65-.69c-.3-.2-.44-.4-.44-.8 0-.47.18-.74.43-.93.29-.21.72-.34 1.22-.34.78 0 1.33.31 1.5.58a1 1 0 0 0 1.7-1.06 3.38 3.38 0 0 0-2.2-1.41v-.71Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h4.12a1 1 0 1 0 0-2H2.62a1 1 0 0 0-1 1v5.13a1 1 0 0 0 2 0V3.6Zm19.64-1a1 1 0 0 1 1-1h5.12a1 1 0 0 1 1 1v5.13a1 1 0 1 1-2 0V3.61h-4.12a1 1 0 0 1-1-1ZM2.62 23.28a1 1 0 0 1 1 1v4.12h4.12a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-5.12a1 1 0 0 1 1-1Zm26.76 0a1 1 0 0 1 1 1v5.12a1 1 0 0 1-1 1h-5.12a1 1 0 0 1 0-2h4.12v-4.12a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Financial Analysis
</div>
</label><label id="category-25" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="25">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.45 15.28a4.78 4.78 0 0 0 9.02 2.67l.76-1.5h4.47l.76 1.5c.18.37.4.7.67 1a3.7 3.7 0 0 0 1.88-2.53c.7-3.22 4.65-3.75 6.42-1.6l-.87-8.26a5.18 5.18 0 0 0-5.15-4.63H7.55c-2.65 0-4.86 2-5.15 4.62l-.95 8.73Zm17-3.96a2.19 2.19 0 1 0 0-4.38 2.19 2.19 0 0 0 0 4.38ZM9.73 6.67a1.35 1.35 0 1 0-2.7 0v1.1H5.91a1.35 1.35 0 0 0 0 2.71h1.1v1.11a1.35 1.35 0 1 0 2.71 0v-1.1h1.1a1.35 1.35 0 1 0 0-2.71h-1.1V6.67Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.24 16.83c-.4-1.74-2.89-1.73-3.27.02a5.58 5.58 0 0 1-4.44 4.4c-1.81.31-1.81 2.92 0 3.24a5.55 5.55 0 0 1 4.43 4.4c.37 1.68 2.9 1.7 3.28.01a5.6 5.6 0 0 1 4.46-4.4c1.75-.31 1.75-2.95 0-3.26a5.68 5.68 0 0 1-4.46-4.4Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Game AI
</div>
</label><label id="category-26" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="26">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<g opacity=".5" fill="currentColor" fill-opacity=".5">
<path
d="M12.8 15.18c0-1.1.9-2 2-2h2.47a2 2 0 0 1 2 2v13.37a2 2 0 0 1-2 2H14.8a2 2 0 0 1-2-2V15.18ZM22.18 22.67c0-1.1.9-2 2-2h2.46a2 2 0 0 1 2 2v5.88a2 2 0 0 1-2 2h-2.46a2 2 0 0 1-2-2v-5.88ZM3.36 19.92c0-1.1.9-2 2-2h2.46a2 2 0 0 1 2 2v8.63a2 2 0 0 1-2 2H5.36a2 2 0 0 1-2-2v-8.63Z">
</path>
</g>
<path
d="m16.48 2.23 1.13 2.28 2.5.35c.43.08.62.62.3.95L18.6 7.55l.43 2.48a.55.55 0 0 1-.8.58L16 9.45l-2.23 1.18a.56.56 0 0 1-.8-.58l.43-2.48L11.6 5.8a.55.55 0 0 1 .3-.95l2.49-.35 1.12-2.28c.2-.4.79-.4.97 0Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Model Benchmarking
</div>
</label><label id="category-27" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="27">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.85 8.22a2.9 2.9 0 0 1 4.79 1.06h2.99a1 1 0 1 1 0 2h-3a2.9 2.9 0 0 1-5.45 0h-6.8a1 1 0 1 1 0-2h6.8c.14-.4.37-.75.67-1.06Zm2.06 1.15a.9.9 0 1 0 0 1.82.9.9 0 0 0 0-1.82Zm-7.78 4.57A2.9 2.9 0 0 1 14.92 15h8.7a1 1 0 1 1 0 2h-8.7a2.9 2.9 0 0 1-5.46 0H8.37a1 1 0 1 1 0-2h1.09c.14-.4.37-.75.67-1.06Zm2.06 1.15a.9.9 0 1 0 0 1.82.9.9 0 0 0 0-1.82Zm6.52 4.57a2.9 2.9 0 0 1 4.79 1.06h.13a1 1 0 0 1 0 2h-.13a2.9 2.9 0 0 1-5.46 0H8.37a1 1 0 1 1 0-2h9.67c.14-.4.37-.75.67-1.05Zm2.06 1.15a.9.9 0 1 0 0 1.82.9.9 0 0 0 0-1.82Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M17.27 9.64a.9.9 0 1 1 1.28 1.28.9.9 0 0 1-1.28-1.28ZM11.54 15.36a.9.9 0 1 1 1.29 1.28.9.9 0 0 1-1.29-1.28ZM20.13 21.08a.9.9 0 1 1 1.28 1.28.9.9 0 0 1-1.28-1.28Z"
fill="currentColor" fill-opacity=".15"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.36 7.65a5.29 5.29 0 0 1 5.29-5.29h16.7a5.29 5.29 0 0 1 5.29 5.29v16.7a5.29 5.29 0 0 1-5.29 5.29H7.65a5.29 5.29 0 0 1-5.29-5.29V7.65Zm15.55-.28a2.9 2.9 0 0 0-2.73 1.9h-6.8a1 1 0 1 0 0 2h6.8a2.9 2.9 0 0 0 5.46 0h2.99a1 1 0 1 0 0-2h-3a2.9 2.9 0 0 0-2.72-1.9Zm-5.72 5.72A2.9 2.9 0 0 0 9.46 15H8.37a1 1 0 1 0 0 2h1.09a2.9 2.9 0 0 0 5.46 0h8.7a1 1 0 1 0 0-2h-8.7a2.9 2.9 0 0 0-2.73-1.9Zm8.58 5.72a2.9 2.9 0 0 0-2.73 1.91H8.37a1 1 0 0 0 0 2h9.67a2.9 2.9 0 0 0 5.46 0h.13a1 1 0 1 0 0-2h-.13a2.9 2.9 0 0 0-2.73-1.9Z"
fill="currentColor" fill-opacity=".15"></path>
</svg> Fine Tuning Tools
</div>
</label><label id="category-28" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="28">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M16 3c-3.42 0-6.56.61-8.9 1.65a9.05 9.05 0 0 0-2.88 1.92A4.02 4.02 0 0 0 3 9.33v13.34c0 1.06.49 2 1.22 2.76.72.76 1.73 1.4 2.89 1.92A22.53 22.53 0 0 0 16 29a1 1 0 1 0 0-2c-3.2 0-6.06-.58-8.08-1.48a7.1 7.1 0 0 1-2.25-1.47c-.49-.5-.67-.97-.67-1.38v-3.2c.6.46 1.32.87 2.1 1.22a22.53 22.53 0 0 0 8.9 1.64 1 1 0 1 0 0-2c-3.2 0-6.06-.58-8.08-1.47a7.1 7.1 0 0 1-2.25-1.47C5.18 16.88 5 16.4 5 16v-3.2c.6.46 1.32.87 2.1 1.22a22.53 22.53 0 0 0 8.9 1.65c3.42 0 6.56-.62 8.9-1.65.78-.35 1.5-.76 2.1-1.22V16a1 1 0 1 0 2 0V9.33c0-1.06-.49-2-1.22-2.76a9.05 9.05 0 0 0-2.89-1.92A22.53 22.53 0 0 0 16 3Z"
fill="currentColor" fill-opacity=".8"></path>
<path d="M24 20v4m0 0v4m0-4h4m-4 0h-4" stroke="currentColor" stroke-opacity=".5" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Dataset Creation
</div>
</label><label id="category-29" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="29">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M20.1 13.7a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM9.92 16.02l3.34-.12-3.07 5.88a3.5 3.5 0 0 0 6.2 3.24l2.72-5.2 1.45 2.92a1 1 0 0 0 1.5.35l3.16-2.39a1 1 0 0 0-1.2-1.6l-2.2 1.67-1.87-3.78a3.5 3.5 0 0 0-3.86-3.14 1 1 0 0 0-.29-.03l-6.64.22a1 1 0 0 0-.91.68l-1.45 4.3a1 1 0 0 0 1.9.63l1.22-3.63Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h4.12a1 1 0 0 0 0-2H2.62a1 1 0 0 0-1 1v5.13a1 1 0 1 0 2 0V3.6Zm19.64-1a1 1 0 0 1 1-1h5.12a1 1 0 0 1 1 1v5.13a1 1 0 1 1-2 0V3.61h-4.12a1 1 0 0 1-1-1ZM2.62 23.28a1 1 0 0 1 1 1v4.12h4.12a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-5.12a1 1 0 0 1 1-1Zm26.76 0a1 1 0 0 1 1 1v5.12a1 1 0 0 1-1 1h-5.12a1 1 0 0 1 0-2h4.12v-4.12a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Pose Estimation
</div>
</label><label id="category-30" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="30">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 5.43a10.57 10.57 0 1 0 0 21.14 10.57 10.57 0 0 0 0-21.14Zm-8.53 9.74a8.57 8.57 0 1 0 16.76-1.57 10.57 10.57 0 0 1-11.1-4.16 10.57 10.57 0 0 1-5.66 5.73Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M20.51 17.1a1.35 1.35 0 1 1-2.7 0 1.35 1.35 0 0 1 2.7 0ZM14.2 17.1a1.35 1.35 0 1 1-2.7 0 1.35 1.35 0 0 1 2.7 0Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h4.12a1 1 0 0 0 0-2H2.62a1 1 0 0 0-1 1v5.13a1 1 0 1 0 2 0V3.6Zm19.64-1a1 1 0 0 1 1-1h5.12a1 1 0 0 1 1 1v5.13a1 1 0 1 1-2 0V3.61h-4.12a1 1 0 0 1-1-1ZM2.62 23.28a1 1 0 0 1 1 1v4.12h4.12a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-5.12a1 1 0 0 1 1-1Zm26.76 0a1 1 0 0 1 1 1v5.12a1 1 0 0 1-1 1h-5.12a1 1 0 0 1 0-2h4.12v-4.12a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Face Recognition
</div>
</label><label id="category-31" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="31">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.62 3.6h1.56a1 1 0 0 0 0-2H2.62a1 1 0 0 0-1 1v2.57a1 1 0 1 0 2 0V3.6Zm8.82-1a1 1 0 0 1 1-1H16a1 1 0 0 1 1 1v2.57a1 1 0 1 1-2 0V3.61h-1.56a1 1 0 0 1-1-1Zm-9.82 9.84a1 1 0 0 1 1 1V15h1.56a1 1 0 1 1 0 2H2.62a1 1 0 0 1-1-1v-2.56a1 1 0 0 1 1-1Zm13.38 0a1 1 0 0 1 1 1V16a1 1 0 0 1-1 1h-2.56a1 1 0 1 1 0-2H15v-1.56a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".8"></path>
<circle cx="9.45" cy="9.11" r="2.62" fill="currentColor" fill-opacity=".8"></circle>
<circle cx="24.32" cy="9.11" r="2.62" fill="currentColor" fill-opacity=".5"></circle>
<circle cx="24.32" cy="24.36" r="2.62" fill="currentColor" fill-opacity=".5"></circle>
<circle cx="8.53" cy="23.99" r="2.62" fill="currentColor" fill-opacity=".5"></circle>
</svg> Anomaly Detection
</div>
</label><label id="category-32" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="32">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="m5.68 9.45 3.95-6.32a1.7 1.7 0 0 1 1.46-.8 1.73 1.73 0 0 1 1.79 1.7v4.53h5.74a1.79 1.79 0 0 1 1.71 2.05l-.32 2.1a1 1 0 0 0-.16.17l-3.7 4.98h-3.22a1.79 1.79 0 0 0-1.78 1.8v.53H8.2c-.48 0-.96-.1-1.4-.33l-1.11-.55-.02-9.86ZM3.2 9.1a1 1 0 0 1 1 1v8.93a1 1 0 1 1-2 0V10.1a1 1 0 0 1 1-1Z"
fill="currentColor" fill-opacity=".8"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="m19.83 12.91-3.67 4.95h-3.23c-.98 0-1.78.8-1.78 1.79V27c0 .98.8 1.78 1.78 1.79l3.23.04.03.02c.92.57 1.44.9 3.04.88h7.31a2.81 2.81 0 0 0 2.77-2.42l.43-2.37c.3-1.58.59-3.16.82-4.75a2.84 2.84 0 0 0-2.68-3.22c-.98-.03-1.96 0-2.94 0v-2.58a2.73 2.73 0 0 0-2.07-2.6 2.76 2.76 0 0 0-3.04 1.12Zm1.68 1.1c.15-.25.47-.39.85-.28.37.1.58.35.58.67v3.57a1 1 0 0 0 1 1h3.89c.45.02.82.47.76.91l-1.26 7.1v.05c-.05.39-.4.7-.79.7h-7.32c-.5 0-.93-.2-1.54-.51l-.02-7.06v-.97l1.7-2.29 2.1-2.83.05-.07Zm-5.85 5.85v.33l.02 6.63-2.53-.03v-6.93h2.51Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Recommendation Systems
</div>
</label><label id="category-33" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="33">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path
d="M16 8c-.73 0-1.36-.26-1.88-.78a2.57 2.57 0 0 1-.79-1.89c0-.73.26-1.36.79-1.88A2.58 2.58 0 0 1 16 2.67c.73 0 1.36.26 1.88.78.53.53.79 1.15.79 1.88a2.6 2.6 0 0 1-.79 1.89c-.52.52-1.14.78-1.88.78Z"
fill="currentColor" fill-opacity=".8"></path>
<path
d="M12 12v16a1.33 1.33 0 0 0 2.67 0v-6.67h2.66V28A1.33 1.33 0 0 0 20 28V12a53.4 53.4 0 0 0 6.69-1c.73-.18 1.16-.92.98-1.64a1.42 1.42 0 0 0-1.7-1.03c-1.32.3-2.72.53-4.17.69a54.36 54.36 0 0 1-11.6 0 37.59 37.59 0 0 1-4.18-.69 1.42 1.42 0 0 0-1.7 1.03c-.17.72.26 1.46 1 1.63A53.39 53.39 0 0 0 12 12Z"
fill="currentColor" fill-opacity=".5"></path>
</svg> Character Animation
</div>
</label><label id="category-34" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="34">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 1.67a9 9 0 1 0 7.97 13.18 7 7 0 1 1-6.47 12.34 9 9 0 0 1-1.5 1.4 9 9 0 1 0 8.7-15.6A9 9 0 0 0 16 1.66Zm-4.95 4.05a7 7 0 1 1 9.9 9.9 7 7 0 0 1-9.9-9.9Z"
fill="currentColor" fill-opacity=".5"></path>
<path d="M17.5 27.19a9 9 0 1 1-10.2-14.2A9 9 0 0 0 19.36 19a9 9 0 0 1-1.86 8.18Z" fill="currentColor"
fill-opacity=".8"></path>
</svg> Style Transfer
</div>
</label><label id="category-35" class="select-none"><input class="form-input peer sr-only hidden" type="radio"
value="35">
<div
class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500 dark:hover:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.4 21.75a3 3 0 0 1 3-3H27a3 3 0 0 1 3 3v5.04a3 3 0 0 1-3 3H14.4a3 3 0 0 1-3-3v-5.04Zm6.78 1.48a1.03 1.03 0 1 0 .52 1.93.75.75 0 0 1 .76 1.3 2.53 2.53 0 0 1-3.81-2.2 2.53 2.53 0 0 1 3.81-2.18.75.75 0 0 1-.76 1.3 1.03 1.03 0 0 0-.52-.15Zm4.9 1.04a1.03 1.03 0 0 1 1.55-.9.75.75 0 1 0 .76-1.29 2.53 2.53 0 0 0-3.81 2.19 2.53 2.53 0 0 0 3.81 2.19.75.75 0 0 0-.76-1.3 1.03 1.03 0 0 1-1.56-.9Z"
fill="currentColor" fill-opacity=".15"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.08 5.84a4 4 0 0 1 4-4h14.19a4 4 0 0 1 4 4v10.9h-9.05A12.73 12.73 0 0 0 4.08 13.5v5.66c0 1.1.9 2 2 2h3.36c-.02.2-.04.39-.04.59v1.4H6.08a4 4 0 0 1-4-4V5.85Zm18.88 2.44a2.82 2.82 0 1 1-5.65 0 2.82 2.82 0 0 1 5.65 0ZM18.18 23.23a1.03 1.03 0 1 0 .53 1.93.75.75 0 0 1 .75 1.3 2.53 2.53 0 0 1-3.81-2.2 2.53 2.53 0 0 1 3.81-2.18.75.75 0 1 1-.75 1.3 1.03 1.03 0 0 0-.53-.15ZM24.11 23.23a1.03 1.03 0 1 0 .52 1.93.75.75 0 0 1 .76 1.3 2.53 2.53 0 0 1-3.81-2.2 2.53 2.53 0 0 1 3.81-2.18.75.75 0 0 1-.76 1.3 1.03 1.03 0 0 0-.52-.15Z"
fill="currentColor" fill-opacity=".8"></path>
</svg> Image
</div>
</label>
</div>
</template>

36
app/pages/dev.vue
View File

@@ -1,36 +0,0 @@
<template>
<div class="bg-slate-100 w-screen h-screen">
<div id="logo-container">
...
</div>
</div>
</template>
<script setup>
import { gsap } from 'gsap'
import { onMounted } from 'vue'
onMounted(() => {
const tl = gsap.timeline({ defaults: { ease: "power2.out " } });
// B2 -> x: 95, y: 75
tl.to("#B2", { x: 95, y: 75 });
// B3 -> x: 115, y: 55
tl.to("#B3", { x: 115, y: 55 });
});
</script>
<style>
#logo-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: top left;
z-index: 1000;
}
#logo-vb .bar {
opacity: 0;
transform: translateY(20px);
}
</style>

90
app/pages/index.vue
View File

@@ -1,91 +1,3 @@
<template> <template>
<div class="card-container flex flex-col justify-center items-center dark:bg-slate-900"> <div>Home</div>
<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> </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>

11
home/applications/android-wifi/android-wifi.sh
View File

@@ -1,15 +1,10 @@
#!/bin/sh #!/bin/sh
# Try to connect via scrcpy first
if ! scrcpy; then if ! scrcpy; then
# If scrcpy fails, try the alternative method
echo "If scrcpy fails, try the alternative method"
adb tcpip 5555 >/dev/null 2>&1 || true adb tcpip 5555 >/dev/null 2>&1 || true
MAC="0c:52:03:1e:89:9a"
for i in $(seq 1 254); do ping -c1 -W1 192.168.1.$i >/dev/null 2>&1 & done; wait ip=$(ip neighbor | grep -i "0e:52:03:1e:89:9a" | awk '{print $1}')
line=$(ip neigh | grep -i "$MAC" | head -n1 || true)
ip=$(printf "%s" "$line" | awk '{print $1}')
echo "${ip}:5555"
adb connect "${ip}:5555" adb connect "${ip}:5555"
scrcpy scrcpy
fi fi

18
home/bashrc/.bashrc
View File

@@ -1,20 +1,20 @@
# .linux-env # .linux-env
VIDEO_DIR_LOCAL="/home/valere/Downloads" VIDEO_PATH_LOCAL="/home/valere/Downloads"
IMAGE_DIR_LOCAL="/home/valere/Downloads" IMAGE_PATH_LOCAL="/home/valere/Downloads"
MUSIC_DIR_LOCAL="/home/valere/evilspins/web/mnt/media/files/music" MUSIC_PATH_LOCAL="/home/valere/evilspins/web/mnt/media/files/music"
VIDEO_PATH="/home/root/media/video/autre" VIDEO_PATH="/home/root/media/video/autre"
IMAGE_PATH="/home/root/media/image/screenshit" IMAGE_PATH="/home/root/media/image/screenshit"
MUSIC_DIR="/home/root/media/files/music" MUSIC_PATH="/home/root/media/files/music"
dlvideo() { dlvideo() {
cd "$VIDEO_DIR" || return cd "$VIDEO_PATH" || return
pip install -U yt-dlp pip install -U yt-dlp
yt-dlp -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4" --merge-output-format mp4 "$@" yt-dlp -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4" --merge-output-format mp4 "$@"
} }
dlimage() { dlimage() {
wget -P "$IMAGE_DIR" "$1" wget -P "$IMAGE_PATH" "$1"
} }
dlcover() { dlcover() {
@@ -27,7 +27,7 @@ dlcover() {
elif echo "$query_or_file" | grep -q '%(ext)'; then elif echo "$query_or_file" | grep -q '%(ext)'; then
file="$query_or_file" file="$query_or_file"
else else
file=$(find "$MUSIC_DIR" -type f \ file=$(find "$MUSIC_PATH" -type f \
\( -iname "*${query_or_file}*.mp3" -o -iname "*${query_or_file}*.m4a" -o -iname "*${query_or_file}*.flac" -o -iname "*${query_or_file}*.wav" -o -iname "*${query_or_file}*.ogg" \) \ \( -iname "*${query_or_file}*.mp3" -o -iname "*${query_or_file}*.m4a" -o -iname "*${query_or_file}*.flac" -o -iname "*${query_or_file}*.wav" -o -iname "*${query_or_file}*.ogg" \) \
| head -n 1) | head -n 1)
fi fi
@@ -100,7 +100,7 @@ searchinside() {
grep -rwl "$1" ./ grep -rwl "$1" ./
} }
alias evilsync='rsync -avz --delete -e ssh $MUSIC_DIR_LOCAL root@erudi.fr:$MUSIC_DIR' alias evilsync='rsync -avz --delete -e ssh $MUSIC_PATH_LOCAL root@erudi.fr:$MUSIC_PATH'
alias evildiff='rsync -avzn --delete -e ssh $MUSIC_DIR_LOCAL root@erudi.fr:$MUSIC_DIR' alias evildiff='rsync -avzn --delete -e ssh $MUSIC_PATH_LOCAL root@erudi.fr:$MUSIC_PATH'
# end .linux-env # end .linux-env

BIN
lettre-free.pdf Normal file
View File

Binary file not shown.

BIN
public/cv/UTIgroup.pdf Normal file
View File

Binary file not shown.

118
public/cv/cv-anikop-ldlc.md
View File

@@ -1,118 +0,0 @@
# Valère BRON
Développeur Front-End & Node.js
Lyon / Marseille — Disponible immédiatement
Email : contact@valere.dev
Téléphone : +33 6 81 84 77 37
GitHub : https://github.com/valerebron
---
## Profil
Développeur front-end expérimenté (Vue.js) avec une solide maîtrise de l’intégration UI et une expérience en développement backend Node.js/NestJS.
Habitué aux environnements agiles, à la conception d’interfaces performantes et au développement d’API REST.
Autonome, rigoureux et attaché à la qualité du code.
---
## Compétences techniques
### Frontend
- Vue.js 2/3, Nuxt.js
- JavaScript ES6+, TypeScript
- HTML5, CSS3, Tailwind
- Intégration pixel-perfect
- Accessibilité et optimisation des performances
### Backend
- Node.js • NestJS (TypeORM, Swagger/OpenAPI)
- Développement d’API REST
- Authentification JWT
- Tests Jest
### Bases de données
- MySQL / MariaDB
- PostgreSQL (projets personnels)
### Outils & environnement
- Git, GitLab, GitLab CI/CD
- Docker / docker-compose
- Nginx / Apache
- Linux (Zorin OS, Debian, Ubuntu)
---
## Expériences
### Développeur Front-End / Fullstack — Freelance
_2021 — 2025 • Lyon / Marseille_
- Développement front en Vue.js
- Création et maintenance d’interfaces complexes (UI/UX, responsive, composants dynamiques)
- Passage de Vuex à Pinia
- Développement d’API backend avec NestJS
- Intégration de Docker dans les workflows
- Revues de code et documentation
### Intégrateur Web Senior — Potager City / Grand Frais (mission)
_2020 — 2021_
- Intégration d’interfaces Vue.js pour le tunnel e-commerce
- Contribution aux améliorations UX
- Ajustements via manipulations DOM JS
### Développeur UI — Missions ESN diverses
_2015 — 2020_
- Intégration front, design system et maquettes interactives
- Optimisation performance et accessibilité
- Travail avec équipes produit en Agile
---
## Projets personnels
### docker-web
Outil CLI en Bash pour orchestrer des applications web Docker.
- Gestion automatisée de stacks web
- Déploiement simple via commandes unifiées
### PushToRecord (Android – Kotlin)
Application d’enregistrement audio déclenchée via une touche physique.
### Annotation d’images haute résolution
Interface basée sur OpenSeadragon pour images artistiques/scientifiques HD.
---
## Formation
Autodidacte avancé — 12 ans d’expérience professionnelle.
Spécialisations continues en : Vue.js, Nuxt, Node, NestJS, Docker, GitLab CI.
---
## Soft skills
- Autonomie, rigueur
- Communication claire
- Sens du design et de l’expérience utilisateur
- Curiosité technique
---
## Disponibilité
Immédiate — mobilité Lyon / Marseille.

72
public/cv/cv-comymedia.md
View File

@@ -1,72 +0,0 @@
# Valère BRON
**Webdesigner / Développeur Front | Vue.js, Nuxt, WordPress, UI/UX**
Développeur front depuis plus de 12 ans, je combine expertise technique et sens du design pour créer des interfaces web performantes, accessibles et attractives. Passionné par l’expérience utilisateur, je transforme les concepts graphiques en sites web fonctionnels et optimisés.
📞 06 81 84 77 37
📧 contact@valere.dev
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
🎨 Portfolio : [valere.dev/portfolio](https://valere.dev/portfolio)
---
## 💡 Compétences
- **Front-end & CMS :** Vue.js, Nuxt, React.js, HTML, CSS, JavaScript, WordPress, PrestaShop, WooCommerce, Divi, Elementor
- **Graphisme & UI :** Photoshop, Illustrator, InDesign, XD, Tailwind, SCSS
- **SEO & marketing digital :** Optimisation SEO, Google Ads, newsletters, intégration de chartes graphiques
- **Méthodes & outils :** Git, GitLab, Jira, Agile/Scrum, tests E2E, CI/CD
- **Soft skills :** Autonomie, créativité, sens du détail, communication et travail en équipe
---
## 🏢 Expériences
### 2025 – Groupama | Développeur Vue.js
- Développement d’applications Vue 3, optimisation UX et accessibilité
- Collaboration étroite avec les équipes métier et design
- Participation à la conception et aux tests fonctionnels
### 2024 – Fitarena | Développeur Vue.js / UI
- Création d’un agenda interactif Vue 3 & Pinia
- Développement de composants UI sur-mesure et intégration front
### 2021–2023 – Potager City | Développeur Front
- Développement et maintenance d’une application Vue 2 avec focus accessibilité
- Mise en place de tests E2E et optimisation SEO
- Développement d’éléments graphiques pour campagnes emailing
### 2020–2021 – MassiveMusic | Développeur Fullstack & Designer UI
- Création d’un réseau social de streaming musical
- Intégration de composants Vue avec Atomic Design
- Design et prototypage d’interfaces utilisateur
### 2019 – Euronews | Intégrateur Front
- Intégration SCSS normalisée (ITCSS) pour la V3 du site
### 2018 – Tyredating | Développeur Front
- Création de composants Vue et intégration responsive
- Réalisation de maquettes et d’éléments graphiques
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🚀 Projets personnels
- Développement de paquets npm et extensions Web
- Projets WordPress et PrestaShop pour clients et expérimentations personnelles
- Création de kits UI/UX pour applications web internes et prototypes interactifs

79
public/cv/cv-jalis.md
View File

@@ -1,79 +0,0 @@
# Valère BRON — Développeur Front-End & UX/UI
Marseille / Freelance • Vue.js / React.js • Interfaces web accessibles et performantes
📞 06 81 84 77 37
📧 contact@valere.dev
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## Profil
Développeur front-end expérimenté avec 12 ans d’expérience, spécialisé dans la création d’interfaces web modernes, accessibles et performantes.
Passionné par l’expérience utilisateur, j’ai conçu des applications interactives et responsives, en intégrant des principes UX/UI et en travaillant étroitement avec les équipes design et produit.
Je souhaite évoluer vers le design d’interfaces et l’optimisation des parcours utilisateurs au sein d’une agence innovante.
---
## Compétences
**UX/UI & Design :** Wireframes, prototypes interactifs, parcours utilisateurs multi-devices, accessibilité (WCAG), tests A/B, design system
**Front-End :** Vue.js, React.js, TypeScript, JavaScript ES6+, HTML5, CSS3, Tailwind, SCSS, Storybook
**Outils & logiciels :** Figma, Adobe Suite (Photoshop, Illustrator, XD), Git, npm, Docker
**Méthodologie :** Agile (Scrum / Kanban), collaboration produit et design, veille technologique
---
## Expériences professionnelles
### Développeur Front-End — Freelance
**ESN & clients grands comptes — Lyon & Marseille • 2013–2025**
- Développement d’interfaces interactives et responsives en Vue.js et React.js
- Intégration et maintenance de design systems pour simplifier le workflow design → dev
- Création de composants réutilisables et tests d’accessibilité
- Collaboration avec équipes UX/UI pour optimiser parcours utilisateurs et performances
- Mise en place de prototypes et validation de concepts avant production
**Projets notables :**
- Web TV synchronisée et plateforme interactive pour événement culturel
- Applications SaaS et e-commerce avec intégration marketing et analytics
- Systèmes front back orchestrés via Docker et CI/CD pour livraison rapide
---
## Projets personnels / démonstrateurs techniques
- Kit front-end interactif avec Vue/React pour prototypage rapide
- Microservices Docker pour apps web expérimentales
- Web TV auto-hébergée et traitement d’images/vidéo en front et back
---
## Formation
- Licence Ingénierie de l’Internet (2011)
- Formation continue autodidacte en UX/UI, Figma, Adobe Suite
- Veille constante sur design web, accessibilité et bonnes pratiques front-end
---
## Langues
- Français : natif
- Anglais : professionnel (documentation technique, échanges dev/design)
---
## Contact
**Valère BRON**
Disponible freelance / CDD
Malt • LinkedIn • valere.dev

97
public/cv/cv-manpower.md
View File

@@ -1,97 +0,0 @@
# Valère BRON
**Technicien Support Applicatif Niveau 2 | Windows, Linux, SQL & SaaS**
Autonome, rigoureux et curieux, je dispose d’une expérience technique polyvalente combinant développement, administration de systèmes et support applicatif.
Je souhaite mettre mes compétences au service d’un rôle de **support niveau 2**, assurant la résolution d’incidents complexes et l’accompagnement des utilisateurs.
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences principales
### Support Applicatif & Technique
- Analyse, diagnostic et résolution d’incidents applicatifs complexes (niveau 2)
- Lecture et croisement de logs applicatifs, scripts et fichiers de configuration
- Installation, configuration et maintenance de logiciels métiers
- Interface avec utilisateurs finaux et équipes métiers pour assurer la continuité opérationnelle
- Documentation des procédures et suivi des tickets via outils de ticketing
### Environnements & Réseaux
- Systèmes : Windows, Linux (Ubuntu, Debian, Zorin OS), macOS
- Réseau : protocole TCP/IP, VPN, configurations LAN/Wi-Fi
- SaaS & architecture web : compréhension des flux, APIs REST et bases de données SQL
- Serveurs personnels et professionnels : Docker, Gitea, Jellyfin
### Développement & Automatisation
- Scripting Bash / Node.js pour diagnostic et automatisation
- Lecture et compréhension de code existant pour analyse d’incidents
- Connaissances en Vue.js, Nuxt, TypeScript, NestJS pour support applicatif et debugging
### Relation & Support utilisateur
- Communication claire avec utilisateurs métiers et équipes IT
- Pédagogie, sens du service et accompagnement technique
- Rigueur et autonomie en environnement exigeant
---
## 🧰 Expériences professionnelles
### 2025 – **Groupama** | Développeur Vue.js
Support technique interne, participation à la résolution d’incidents applicatifs et coordination avec l’équipe métier.
> 🔹 Diagnostic des anomalies, tests et validation des correctifs
### 2024 – **Fitarena** | Développeur Vue.js
Maintenance applicative, suivi des bugs et assistance aux utilisateurs lors des évolutions du front-end.
> 🔹 Lecture des logs, vérification des flux API et tests fonctionnels
### 2021–2023 – **Potager City** | Développeur Vue.js
Développement et optimisation d’applications web.
> 🔹 Mise en place de tests E2E, support applicatif interne, documentation technique
### 2018–2020 – **Projets personnels & freelances**
Gestion et maintenance de serveurs personnels et professionnels : NAS, mini-serveurs Linux, Raspberry Pi.
> 🔹 Analyse des logs, correction de dysfonctionnements et administration système
---
## 🖥️ Projets techniques personnels
- **docker-web** : outil Bash pour orchestrer Docker et microservices
- **Serveurs Linux & NAS** : configuration, sécurité, supervision, flux applicatifs
- **Veille technique** : suivi des innovations hardware, software et cybersécurité
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🤝 Profil humain
- Rigueur, autonomie et réactivité
- Sens du service et pédagogie pour les utilisateurs métiers
- Capacité à travailler en environnement exigeant et en évolution rapide
---
**Souhait :** Rejoindre **Manpower / client secteur IT Marseille** pour assurer le support applicatif de niveau 2, contribuer à la résolution d’incidents complexes et accompagner les utilisateurs dans leurs outils métiers.

77
public/cv/cv-node-angular.md
View File

@@ -1,77 +0,0 @@
# Valère BRON
**Développeur Front-End & Fullstack | Vue.js, Angular, Node.js, TypeScript**
Développeur web expérimenté, spécialisé dans la création d’interfaces performantes et engageantes, avec un intérêt marqué pour l’expérience utilisateur, les performances logicielles et la qualité des composants. Je combine expertise front-end et back-end pour contribuer à des plateformes digitales complexes.
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences
- **Front-end :** Angular 15, Vue 2/3, Nuxt, React.js, Tailwind, SCSS, Storybook, optimisation des performances, UI/UX
- **Back-end :** Node.js, NestJS, Express, GraphQL, Prisma, REST API, Websockets, MongoDB, PostgreSQL
- **DevOps & CI/CD :** Docker, Docker Compose, Git, GitHub Actions, GitLab CI, KeyCloak, Cloud AWS
- **Tests & qualité :** Jest, tests unitaires et d’intégration, automatisation E2E
- **Méthodologies :** Scrum Agile, architecture modulaire, industrialisation des composants
---
## 🏢 Expériences
### 2025 – Groupama | Développeur Vue.js / Front-End
- Développement et maintenance front-end (Vue 3) et intégration avec API REST
- Optimisation des performances et respect des bonnes pratiques d’accessibilité
- Mob & pair programming, participation aux orientations produit et backlog
- Tests fonctionnels et unitaires pour sécuriser les déploiements
### 2024 – Fitarena | Développeur Vue.js & UI
- Création de composants UI réutilisables et performants
- Refactorisation du code existant et optimisation front-end
- Collaboration étroite pour améliorer l’expérience utilisateur
### 2021–2023 – Potager City | Développeur Front-End
- Optimisation front-end et SEO, mise en place de tests E2E
- Coordination avec les équipes produit pour des interfaces intuitives
- Gestion de la qualité et des performances logicielles
### 2020–2021 – MassiveMusic | Développeur Fullstack
- Architecture front-end avec Atomic Design et SCSS normalisé
- Développement back-end Node.js et Prisma, CI/CD via Docker Compose
- Gestion des données et API sécurisées
### 2020–2021 – Analytics | Développeur Node.js
- API GraphQL & TypeScript, suivi CI/CD et modélisation Prisma
### 2020 – Studiolab | Développeur React.js
- Création de composants React & Ant Design pour projets web interactifs
### 2019 – Euronews | Développeur Vue.js
- Intégration SCSS normalisée (ITCSS) pour la refonte du site
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🚀 Projets personnels & Compétences Visuelles
- Création de micro-animations front et effets visuels interactifs (SVG, CSS keyframes, transitions)
- Surcouche Docker Compose et microservices pour projets fullstack ([docker-web.valere.dev](https://docker-web.valere.dev))
- Développement de kits front-end Nuxt et Vue orientés UI/UX ([sidebase.io](https://sidebase.io))
- Expérimentation et optimisation d’interfaces utilisateurs pour des applications web et SaaS

94
public/cv/cv-otoremote.md
View File

@@ -1,94 +0,0 @@
---
title: "Valère BRON — Développeur Front-End / TypeScript orienté Full-Stack"
author: "Valère BRON"
geometry: margin=2cm
fontsize: 11pt
---
# Valère BRON
**Développeur Front-End / TypeScript orienté Full-Stack**
Marseille • Freelance • Vue.js / TypeScript / NestJS • Intérêt pour la santé numérique
📞 06 81 84 77 37
📧 contact@valere.dev
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## Profil
Développeur front-end depuis 12 ans, spécialisé dans la construction d’interfaces web modernes, accessibles et performantes.
Je me positionne aujourd’hui comme **Front-End avancé** avec montée en compétences sur **NestJS, PostgreSQL et GraphQL**.
Attiré par les applications à impact (santé, culture, sciences) et les environnements agiles où l’on collabore directement avec les équipes produit et techniques.
---
## Compétences
**Front-End :** Vue.js / Nuxt 3, TypeScript, HTML5, CSS3, Tailwind, Accessibilité (WCAG), State management (Pinia, VueUse), Tests (Vitest, Vue Test Utils)
**Full-Stack (en progression) :** NestJS, Node.js, PostgreSQL, Prisma, REST / GraphQL, Auth, services, architecture modulaire
**DevOps & outils :** Docker / docker-web, GitLab (Git Flow), CI/CD, Gitea, Linux
**Méthodologie & UX :** Collaboration produit / UX, culture data, documentation technique, environnement Agile
---
## Expériences professionnelles
### Développeur Front-End — Freelance
**ESN & clients grands comptes — Lyon & Marseille • 2013–2025**
- Intégration d’interfaces complexes et responsives
- Composants UI sur-mesure en Vue.js / TypeScript
- Optimisation performance front et audit accessibilité
- Mise en place d’outils internes (design systems, librairies front)
- Contribution ponctuelle à des API en Node/NestJS
- Industrialisation via Docker, CI/CD, automatisations
---
## Projets personnels / démonstrateurs techniques
- **PushToRecord (Android – Kotlin)** : App en arrière-plan pour enregistrement audio → flux asynchrone, permissions, architecture modulaire
- **Web TV auto-hébergée** : Player synchronisé, génération dynamique de flux HLS → intégration front + backend, orchestration Docker
- **Outil de superposition vidéo** : Extraction de frames, fusion, rendu via interface web → API simples, traitement d’image, micro-services Docker
- **docker-web** : CLI d’orchestration Docker pour apps web → gestion images, automatisation, scripts Bash
---
## Formation
- Autodidacte avancé • 12 ans d'expérience front, montée full-stack
- Veille continue sur NestJS, PostgreSQL, GraphQL, perf front, UX
- Ateliers OpenClassrooms / Udemy : NestJS & Prisma (2024-2025)
---
## Valeur ajoutée pour OTOREMOTE
- Forte expérience interface/utilisation
- Culture UX/UI et accessibilité
- Capacité front immédiate
- Montée en compétence NestJS déjà entamée
- Travail propre, documenté, orienté qualité
- Appétence forte pour projets à impact humain
---
## Langues
- Français : natif
- Anglais : technique courant (documentation, échanges dev)
---
## Contact
**Valère BRON**
Marseille / Lyon — disponible en freelance et CDD
Malt • LinkedIn • valere.dev

96
public/cv/cv-proman.md
View File

@@ -1,96 +0,0 @@
# Valère BRON
**Technicien Informatique Polyvalent | Systèmes, Réseaux & Applicatifs**
Autonome, rigoureux et curieux, j’ai passé plus de 10 ans dans le développement web avant d’élargir mes compétences à l’administration, au support et à la maintenance.
Aujourd’hui, je souhaite mettre à profit mon expérience technique dans un rôle de **technicien polyvalent**, au croisement du matériel, des systèmes et des applications métiers.
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences principales
### Gestion du parc informatique
- Installation, configuration et maintenance de postes Windows, macOS et Linux
- Gestion des comptes utilisateurs (Active Directory, Office 365)
- Sauvegarde, restauration et mise à jour du parc logiciel et matériel
- Maintenance matérielle (diagnostic, remplacement, optimisation)
- Mise en place et suivi de procédures de sécurité et de sauvegarde
### Gestion des applicatifs métiers
- Analyse des besoins utilisateurs et rédaction de cahiers de tests
- Participation aux phases de recette et validation des évolutions
- Suivi de la conformité fonctionnelle des mises à jour
- Interface avec prestataires et DSI pour le support applicatif
- Notions de SQL, APIs REST et intégration ERP
### Réseau & Sécurité
- Configuration de réseaux locaux et VPN
- Surveillance des performances, sécurisation des accès
- Déploiement de solutions Docker, Gitea, Jellyfin sur serveurs Linux
- Veille permanente sur les systèmes et la cybersécurité
### Développement & Automatisation
- Scripting Bash / Node.js pour tâches automatisées
- Connaissances en développement (Vue.js, Nuxt, TypeScript, NestJS)
- Outils CI/CD : Docker, GitLab, Drone
---
## 🧰 Expériences professionnelles
### 2025 – **Groupama** | Développeur Vue.js
Collaboration étroite avec l’équipe métier pour la mise en place d’une nouvelle architecture applicative en micro-frontends.
> 🔹 Coordination technique et support utilisateur lors des phases de recette
### 2024 – **Fitarena** | Développeur Vue.js
Développement d’un agenda interactif et optimisation de la communication entre front et back.
> 🔹 Participation aux tests, à la validation fonctionnelle et à la maintenance des environnements
### 2021–2023 – **Potager City** | Développeur Vue.js
Développement et maintien d’une application Vue 2 performante et accessible.
> 🔹 Automatisation de tests E2E, gestion des déploiements et support technique aux équipes
### 2018–2020 – **Projets personnels & freelances**
Mise en place et gestion de serveurs personnels et professionnels : NAS, mini-serveurs Linux, Raspberry Pi, Docker Compose, CI/CD.
> 🔹 Maintenance complète du matériel, sécurité et gestion des utilisateurs
---
## 🖥️ Projets techniques personnels
- **docker-web** : outil Bash d’orchestration Docker (CI/CD et microservices)
- **NAS et serveurs Linux** : installation, configuration, sauvegardes et surveillance
- **Veille hardware & software** : suivi constant des innovations techniques et sécurité systèmes
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🤝 Profil humain
- Esprit d’analyse, rigueur et adaptabilité
- Autonomie dans la gestion d’un parc ou d’un projet technique
- Pédagogie et sens du service utilisateur
- Capacité à faire le lien entre technique et besoins métier

74
public/cv/cv-reactis.md
View File

@@ -1,74 +0,0 @@
# Valère BRON
**Technicien Helpdesk / Support Informatique N0/N1**
📍 Marseille – Permis B
📧 [contact@valere.dev](mailto:contact@valere.dev)
📞 [06 81 84 77 37](tel:+33681847737)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron)
💻 [GitHub](https://github.com/valerebron)
---
## 🎯 Profil
Technicien informatique passionné, issu du développement web, je mets aujourd’hui mon expérience technique au service du support et de l’assistance utilisateur.
Habitué à diagnostiquer, réparer et configurer des systèmes variés (Windows, Linux, macOS), je recherche un poste de proximité où la réactivité, la rigueur et le sens du service sont essentiels.
---
## 💡 Compétences techniques
- **Systèmes :** Windows 10/11, Linux (Debian/Ubuntu), macOS
- **Réseaux & Support :** Active Directory, DHCP, VPN, sauvegardes, prise en main à distance
- **Postes de travail :** installation, déploiement d’image, maintenance hardware et software
- **Outils :** GLPI, Gitea, GitLab, outils de supervision et ticketing
- **Langues :** Français (natif), Anglais technique (niveau B2)
---
## 🏢 Expériences professionnelles
### 2025 – Groupama | Développeur Vue.js
- Développement et maintenance d’une application Vue 3 en environnement Agile.
- Tests fonctionnels et collaboration avec les équipes métiers et techniques.
- Support technique ponctuel auprès des utilisateurs internes.
### 2024 – Fitarena | Développeur Vue.js
- Développement d’un agenda interactif et intégration d’API.
- Support aux utilisateurs et correction d’incidents fonctionnels.
### 2021–2023 – Potager City | Développeur Vue.js
- Développement front-end, maintenance applicative et optimisation des performances.
- Tests E2E et prévention des régressions techniques.
### Projets personnels (2020–2025)
- Montage, configuration et maintenance de serveurs NAS, mini-PC et Raspberry Pi.
- Déploiement d’infrastructures Docker (Gitea, Nginx Proxy, Jellyfin).
- Dépannage matériel et assistance technique pour particuliers et TPE.
- Développement d’un outil Bash d’orchestration Docker : [docker-web.valere.dev](https://docker-web.valere.dev).
---
## 🎓 Formation
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication & Industries Graphiques
---
## ⚙️ Points forts
- Esprit d’analyse et méthode dans la résolution d’incidents
- Polyvalence : développement, systèmes, réseaux, matériel
- Habitude du travail en autonomie et du contact direct avec les utilisateurs
- Curiosité technique et veille active sur le hardware et la sécurité
---
## 🚀 Objectif
Mettre mes compétences techniques et ma rigueur au service du support de proximité, dans un environnement exigeant comme celui du transport maritime, au sein de **REACTIS**.

92
public/cv/cv-rx.md
View File

@@ -1,92 +0,0 @@
# Valère BRON
**Technicien Maintenance & Support Utilisateurs | Windows, Linux, Hardware**
Autonome, rigoureux et passionné d’informatique, j’ai acquis au fil des années une expérience complète en développement, administration de systèmes et support utilisateurs.
Je souhaite aujourd’hui mettre mon expertise technique et ma polyvalence au service d’un rôle concret de maintenance et assistance sur site.
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences principales
### Support & Maintenance
- Support technique de niveau 1 et 2 pour utilisateurs finaux
- Dépannage matériel : PC, écrans, imprimantes, PXI
- Installation et configuration d’applications métiers et open source
- Gestion des mesures de sécurité : BIOS, GPO, KB, MCS
- Inventaire matériel et suivi via GLPI
### Systèmes & Réseaux
- Maîtrise de Windows XP, 7, 10 et Linux (Ubuntu, Debian, Zorin OS)
- Réseaux locaux : configuration, dépannage et partage de ressources
- Déploiement et maintenance de serveurs personnels et professionnels (Docker, NAS, mini-serveurs)
### Développement & Automatisation
- Scripting Bash / Node.js pour automatiser tâches et diagnostics
- Lecture et compréhension de logs applicatifs et flux API
- Connaissances de base en SQL, REST API et intégration front-end (Vue.js, Nuxt, TypeScript)
### Relation & Support utilisateur
- Communication claire et pédagogie avec utilisateurs industriels et équipes IT
- Suivi et documentation des interventions et procédures
- Capacité à travailler sur site, autonome et organisé
---
## 🧰 Expériences professionnelles
### 2025 – **Groupama** | Développeur Vue.js
Support interne, diagnostic et résolution de problèmes techniques sur l’application interne.
> 🔹 Assistance aux utilisateurs, tests fonctionnels et suivi des correctifs
### 2024 – **Fitarena** | Développeur Vue.js
Maintenance applicative et coordination avec le back-end pour résoudre incidents et bugs.
> 🔹 Lecture de logs, tests et optimisation des flux
### 2021–2023 – **Potager City** | Développeur Vue.js
Développement et maintenance d’applications web.
> 🔹 Mise en place de tests, support technique et documentation interne
### 2018–2020 – **Projets personnels & freelances**
Administration de serveurs Linux, NAS et mini-serveurs, dépannage matériel et logiciel, configuration et sécurité.
> 🔹 Gestion complète des équipements, inventaire, sauvegardes et mises à jour
---
## 🖥️ Projets techniques personnels
- **docker-web** : orchestration Docker & microservices via Bash
- Serveurs Linux et NAS : installation, supervision et maintenance
- Veille technique : suivi du hardware, software et sécurité
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🤝 Profil humain
- Autonomie, rigueur et sens du service
- Capacité à intervenir sur site et à expliquer clairement les solutions
- Polyvalence hardware, software et réseau

90
public/cv/cv-tds.md
View File

@@ -1,90 +0,0 @@
# Valère BRON
**Technicien Systèmes, Réseaux & Support IT – Marseille**
Polyvalent, autonome et passionné d’infrastructure, j’interviens sur tous les aspects techniques : systèmes, réseaux, stockage et virtualisation.
J’allie expérience en développement et en administration Linux/Docker à une vraie rigueur opérationnelle sur le terrain.
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🌐 [valere.dev](https://valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences principales
### 🖥️ Systèmes & Virtualisation
- Administration Linux (Ubuntu, Debian, Zorin OS) & Windows Server
- Gestion et maintenance d’environnements virtualisés (Docker, VMware)
- Sauvegarde, supervision et restauration des systèmes
- Gestion des comptes utilisateurs, permissions et scripts Bash
### 🌐 Réseaux & Sécurité
- Installation, configuration et diagnostic d’équipements Cisco / Fortinet / Alcatel
- Configuration de VLAN, VPN, DHCP, DNS, routage et pare-feux
- Surveillance de la performance réseau et sécurité (logs, monitoring)
- Mise en place de NAS et solutions de stockage partagées
### 🧰 Support & Maintenance
- Support technique niveau 2/3 auprès d’utilisateurs et équipes locales
- Diagnostic des incidents systèmes, réseaux et applicatifs
- Documentation technique et procédures d’intervention
- Préparation et maintenance d’équipements pour déploiement international
---
## 🧭 Expériences professionnelles
### 2025 – **Développeur & Administrateur Linux freelance**
Conception et maintenance d’environnements Docker, scripts Bash et automatisations réseau.
> 🔹 Supervision de serveurs, NAS et configurations VPN
> 🔹 Support technique à distance et sur site
### 2024 – **Fitarena** | Développeur Vue.js / Support applicatif
Participation à la maintenance et au support des applications internes.
> 🔹 Lecture de logs, diagnostic d’erreurs, mise en place de correctifs
### 2021–2023 – **Potager City** | Développeur & Support IT
Suivi technique, support utilisateur et gestion du déploiement applicatif.
> 🔹 Coordination entre les équipes métiers et IT
> 🔹 Documentation et assistance en production
### 2018–2020 – **Projets personnels & freelance**
Mise en place d’infrastructures locales (NAS, mini-serveurs, Docker, réseau).
> 🔹 Administration Linux et virtualisation
> 🔹 Automatisation via scripts Bash
---
## 🚢 Objectif professionnel
Intégrer le **service IT d’une compagnie de croisières** pour assurer la maintenance et le support des infrastructures à bord et à terre.
Allier **mobilité internationale**, **expertise technique** et **réactivité terrain** pour garantir la fiabilité des systèmes en environnement exigeant.
---
## 🎓 Formation
- **Licence Ingénierie de l’Internet** – 2011
- **BTS Communication & Industries Graphiques** – 2010
---
## 🧠 Points forts
- Polyvalence : systèmes, réseaux, développement, stockage
- Autonomie et rigueur sur le terrain
- Aisance en diagnostic et résolution d’incidents complexes
- Goût du voyage et disponibilité pour interventions à bord

100
public/cv/cv-xefi.md
View File

@@ -1,100 +0,0 @@
# Valère BRON
**Technicien & Conseiller Informatique | Polyvalent systèmes, réseaux et développement**
Passionné par l’informatique depuis toujours, j’ai d’abord évolué comme développeur web avant d’élargir mes compétences vers le support, l’administration système et la maintenance de postes.
Curieux, rigoureux et orienté utilisateur, j’aime autant **résoudre des pannes matérielles** qu’**accompagner les utilisateurs** pour qu’ils tirent le meilleur de leurs outils.
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences principales
### Support & Maintenance
- Déploiement, installation et configuration de postes Windows, macOS et Linux
- Maintenance matérielle (diagnostic, remplacement de composants, optimisation des performances)
- Sécurisation et mise à jour des systèmes
- Sauvegarde, restauration et clonage de disques (NAS, SSD, Raspberry Pi, mini-ATX, etc.)
- Suivi et résolution d’incidents logiciels et matériels
### Réseau & Systèmes
- Paramétrage réseau local et distant, partage de ressources, VPN
- Administration légère de serveurs Linux (Ubuntu, Debian, Zorin OS)
- Mise en place et supervision de NAS et serveurs personnels (Docker, Gitea, Jellyfin, etc.)
- Surveillance et optimisation des performances système
### Développement & Automatisation
- Scripting Bash et automatisation (outil personnel [docker-web](https://docker-web.valere.dev))
- Notions en Node.js, Vue.js et CI/CD (GitLab, Docker, etc.)
- Conception d’outils internes simples pour améliorer la productivité
### Relation client & conseil
- Écoute, pédagogie et accompagnement des utilisateurs
- Expérience en support technique et collaboration avec équipes pluridisciplinaires
- Capacité à vulgariser les problèmes et proposer des solutions concrètes
---
## 🧰 Expériences professionnelles
### 2025 – **Groupama** | Développeur Vue.js
Collaboration avec les équipes métier et techniques sur une architecture micro-frontend.
Mise en place de pratiques de travail collectives (pair/mob programming, suivi des priorités).
> 🔹 Coordination technique, support et communication avec les utilisateurs internes
### 2024 – **Fitarena** | Développeur Vue.js
Refonte d’un agenda interactif et optimisation du code existant.
> 🔹 Gestion d’environnements de développement, paramétrage des postes et assistance technique
### 2021–2023 – **Potager City** | Développeur Vue.js
Maintenance et optimisation d’une application web et de ses performances.
> 🔹 Veille sur la fiabilité des outils, tests techniques et amélioration continue des process
### 2018–2020 – **Projets personnels & freelances**
Mise en place et administration de serveurs personnels :
NAS, serveurs Docker, Raspberry Pi, machines mini-ATX pour usage personnel et professionnel.
> 🔹 Configuration matérielle, virtualisation, sauvegardes et sécurité des systèmes
---
## 🖥️ Projets techniques personnels
- **docker-web** : surcouche Bash pour orchestrer des applications web Docker
- **Serveurs personnels** : NAS, mini-serveurs Linux et Raspberry Pi
- **Maintenance & assistance** : accompagnement technique de particuliers et d’entreprises locales
- **Veille hardware & software** : suivi des innovations matérielles et logicielles grand public
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🤝 Profil humain
- Esprit d’équipe, sens du service et communication claire
- Curiosité technique et autonomie
- Passion pour la compréhension et la transmission des savoirs informatiques
---
**Souhait :** Rejoindre **XEFI** pour mettre à profit mon expérience technique et mon sens du service dans un rôle concret et polyvalent au contact des utilisateurs.

156
public/cv/cv.css Normal file
View File

@@ -0,0 +1,156 @@
/* Default styles for https://apitemplate.io/pdf-tools/convert-markdown-to-pdf/ */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}

1
public/cv/cv.md
View File

@@ -96,6 +96,7 @@ _(… autres expériences antérieures disponibles sur demande)_
## 🚀 Projets personnels ## 🚀 Projets personnels
- Web app Nuxt d'écoute de musique de streaming sous forme de jeux de cartes
- Paquets npm en TypeScript - Paquets npm en TypeScript
- Extensions Web - Extensions Web
- Microservices Docker - Microservices Docker

BIN
public/cv/cv.pdf Normal file
View File

Binary file not shown.

111
public/cv/cv.prompt Normal file
View File

@@ -0,0 +1,111 @@
voici mon cv en .md :
# Valère BRON
**Développeur Web | Vue.js, Nuxt, Node.js, Docker**
Développeur front Vue/Nuxt, j’aide les équipes à livrer des interfaces robustes et performantes. Focus sur la qualité (tests E2E), la DX (design system, tooling) et l’industrialisation (CI/CD, Docker).
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences
- **Front-end :** Vue 2/3, Nuxt, Pinia, React.js, Tailwind, SCSS, Storybook
- **Back-end :** Node.js, NestJS, GraphQL, Prisma, REST API
- **DevOps & CI/CD :** Docker, Docker Compose, GitLab, Drone, Gitea
- **Outils :** Vite, ITCSS, Atomic Design
---
## 🏢 Expériences
### 2025 – Groupama | Développeur Vue.js
Lors de cette mission pour Groupama, j'ai eu l'occasion de travailler au sein d'une équipe composée de
5 développeurs front, 2 lead dev et un facilitateur Scrum, en interaction avec une équipe métier sur site et à distance.
Dans ce cadre, j'ai participé à la construction d'une nouvelle application Vue 3 architecturée en micro-frontends.
L'accent a été mis en particulier sur les règles métiers et les tests fonctionnels.
- Développement & maintenance d’applications Vue 3
- Participation aux choix techniques et aux orientations produit
- Collaboration avec l’équipe pour assurer l’intégration des fonctionnalités
- Sécurisation des applications et suivi des bonnes pratiques
- Mob et pair programming, présentation du backlog et des priorités à l’équipe
### 2024 – Fitarena | Développeur Vue.js
Pour Fitarena, j'ai eu l'occasion de travailler avec l'architecte back-end pour développer un agenda interactif en Vue 3 et Pinia.
- Développement d’un agenda interactif en Vue 3 & Pinia
- Refactorisation du code existant et création de stores et services API
- Développement de composants UI spécifiques
### 2021–2023 – Potager City | Développeur Vue.js
Pour Potager City, j'ai travaillé sur le développement d'une application Vue 2 avec un accent particulier sur l'accessibilité et les performances.
Dans ce cadre, j'ai mis en place des tests de bout en bout (E2E) afin d'éviter les régressions CSS.
J'ai aussi mis en place le système de rendu des campagnes emailing avec un micro framework front-end from scratch.
- Développement front-end et optimisation SEO
- Coordination avec les équipes produit pour améliorer l’expérience utilisateur
- Mise en place de tests techniques et contrôle qualité du code
### 2020–2021 – MassiveMusic | Développeur Vue/TypeScript/Node/Prisma
MassiveMusic est un projet personnel fullstack qui m'a permis de consolider mes connaissances en Vue, Node.js, DevOps et web design en développant seul un réseau social avec lecture de musique en streaming de bout en bout.
- Composants Vue avec Atomic Design
- Intégration SCSS normalisée (ITCSS)
- API GraphQL & TypeScript et modélisation Prisma
- CI/CD via GitLab et Docker Compose
### 2020–2021 – Analytics | Développeur Node.js
J'ai développé le client et le serveur d'un outil de collecte et d'analyse de données navigateur en Node.js.
- Tracker client et API GraphQL & TypeScript
- CI/CD et modélisation Prisma
### 2020 – Studiolab | Développeur React.js
- Développement de composants avec React & Ant Design
### 2019 – Euronews | Développeur Vue.js
- Intégration SCSS normalisée (ITCSS) pour la v3 du site
### 2018 – Tyredating | Développeur Vue.js
- Développement de composants Vue pour CMS from scratch
- Intégration responsive
_(… autres expériences antérieures disponibles sur demande)_
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🚀 Projets personnels
- Web app Nuxt d'écoute de musique de streaming sous forme de jeux de cartes
- Paquets npm en TypeScript
- Extensions Web
- Microservices Docker
- Surcouche Docker Compose en Bash : [docker-web.valere.dev](https://docker-web.valere.dev)
- Kit full-stack Nuxt : [sidebase.io](https://sidebase.io)
Ces projets renforcent mes compétences en administration système, CI/CD et expérimentation front/back.
adaptes mon Cv au mieux pour l'annonce et surtout génère le bien en markdown code source,
voici l'annonce à laquelle je veux postuler :

25
public/cv/free-lettre.md Normal file
View File

@@ -0,0 +1,25 @@
# Lettre de motivation – Valère BRON
**Valère BRON**
📞 06 81 84 77 37
📧 contact@valere.dev
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
---
**Objet : Candidature au poste de Développeur Front-End – Free Pro**
Madame, Monsieur,
Développeur front-end spécialisé en Vue.js 3 et TypeScript, je souhaite rejoindre la DSI de Free Pro pour contribuer à la conception, au développement et à la maintenance de vos intranets et extranets. Votre mission, qui combine refactorisation de code existant, développement de nouvelles fonctionnalités et collaboration avec les équipes back-end, correspond parfaitement à mon expérience et à mes aspirations.
Au cours de mes missions récentes, j’ai développé et maintenu des applications Vue 3 modulaires, en micro-frontends, avec un accent particulier sur la qualité et la robustesse du code grâce à des tests unitaires et E2E. J’ai également travaillé sur des projets Nuxt et Quasar, ce qui me permet de concevoir des interfaces performantes et maintenables, tout en respectant les bonnes pratiques SSR/SSG. La collaboration avec les équipes back-end, via GraphQL ou REST, fait partie intégrante de mon quotidien, et je suis habitué à intégrer des solutions dans des environnements complexes et exigeants.
Motivé par les environnements stimulants et les projets à fort impact, je souhaite mettre mon expertise au service de Free Pro pour optimiser vos extranets et contribuer à leur modernisation. Rigoureux et organisé, je m’intègre facilement au sein d’une équipe Agile et partage ma curiosité et mon goût pour l’innovation avec mes collègues.
Je serais ravi de pouvoir échanger avec vous sur la manière dont je pourrais contribuer à vos projets et à vos ambitions technologiques.
Je vous remercie pour votre attention et reste à votre disposition pour un entretien.
Cordialement,
**Valère BRON**

BIN
public/cv/free.pdf Normal file
View File

Binary file not shown.

237
public/cv/html/cv-comymedia.html
View File

@@ -1,237 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Webdesigner / Développeur Front | Vue.js, Nuxt, WordPress, UI/UX</strong></p>
<p>Développeur front depuis plus de 12 ans, je combine expertise technique et sens du design pour créer des interfaces web performantes, accessibles et attractives. Passionné par l’expérience utilisateur, je transforme les concepts graphiques en sites web fonctionnels et optimisés.</p>
<p>📞 06 81 84 77 37<br>
📧 contact@valere.dev<br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a><br>
🎨 Portfolio : <a href="https://valere.dev/portfolio">valere.dev/portfolio</a></p>
<hr>
<h2>💡 Compétences</h2>
<ul>
<li><strong>Front-end &amp; CMS :</strong> Vue.js, Nuxt, React.js, HTML, CSS, JavaScript, WordPress, PrestaShop, WooCommerce, Divi, Elementor</li>
<li><strong>Graphisme &amp; UI :</strong> Photoshop, Illustrator, InDesign, XD, Tailwind, SCSS</li>
<li><strong>SEO &amp; marketing digital :</strong> Optimisation SEO, Google Ads, newsletters, intégration de chartes graphiques</li>
<li><strong>Méthodes &amp; outils :</strong> Git, GitLab, Jira, Agile/Scrum, tests E2E, CI/CD</li>
<li><strong>Soft skills :</strong> Autonomie, créativité, sens du détail, communication et travail en équipe</li>
</ul>
<hr>
<h2>🏢 Expériences</h2>
<h3>2025 – Groupama | Développeur Vue.js</h3>
<ul>
<li>Développement d’applications Vue 3, optimisation UX et accessibilité</li>
<li>Collaboration étroite avec les équipes métier et design</li>
<li>Participation à la conception et aux tests fonctionnels</li>
</ul>
<h3>2024 – Fitarena | Développeur Vue.js / UI</h3>
<ul>
<li>Création d’un agenda interactif Vue 3 &amp; Pinia</li>
<li>Développement de composants UI sur-mesure et intégration front</li>
</ul>
<h3>2021–2023 – Potager City | Développeur Front</h3>
<ul>
<li>Développement et maintenance d’une application Vue 2 avec focus accessibilité</li>
<li>Mise en place de tests E2E et optimisation SEO</li>
<li>Développement d’éléments graphiques pour campagnes emailing</li>
</ul>
<h3>2020–2021 – MassiveMusic | Développeur Fullstack &amp; Designer UI</h3>
<ul>
<li>Création d’un réseau social de streaming musical</li>
<li>Intégration de composants Vue avec Atomic Design</li>
<li>Design et prototypage d’interfaces utilisateur</li>
</ul>
<h3>2019 – Euronews | Intégrateur Front</h3>
<ul>
<li>Intégration SCSS normalisée (ITCSS) pour la V3 du site</li>
</ul>
<h3>2018 – Tyredating | Développeur Front</h3>
<ul>
<li>Création de composants Vue et intégration responsive</li>
<li>Réalisation de maquettes et d’éléments graphiques</li>
</ul>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🚀 Projets personnels</h2>
<ul>
<li>Développement de paquets npm et extensions Web</li>
<li>Projets WordPress et PrestaShop pour clients et expérimentations personnelles</li>
<li>Création de kits UI/UX pour applications web internes et prototypes interactifs</li>
</ul>
</body>
</html>

232
public/cv/html/cv-jalis.html
View File

@@ -1,232 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON — Développeur Front-End &amp; UX/UI</h1>
<p>Marseille / Freelance • Vue.js / React.js • Interfaces web accessibles et performantes</p>
<p>📞 06 81 84 77 37<br>
📧 contact@valere.dev<br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>Profil</h2>
<p>Développeur front-end expérimenté avec 12 ans d’expérience, spécialisé dans la création d’interfaces web modernes, accessibles et performantes.<br>
Passionné par l’expérience utilisateur, j’ai conçu des applications interactives et responsives, en intégrant des principes UX/UI et en travaillant étroitement avec les équipes design et produit.<br>
Je souhaite évoluer vers le design d’interfaces et l’optimisation des parcours utilisateurs au sein d’une agence innovante.</p>
<hr>
<h2>Compétences</h2>
<p><strong>UX/UI &amp; Design :</strong> Wireframes, prototypes interactifs, parcours utilisateurs multi-devices, accessibilité (WCAG), tests A/B, design system</p>
<p><strong>Front-End :</strong> Vue.js, React.js, TypeScript, JavaScript ES6+, HTML5, CSS3, Tailwind, SCSS, Storybook</p>
<p><strong>Outils &amp; logiciels :</strong> Figma, Adobe Suite (Photoshop, Illustrator, XD), Git, npm, Docker</p>
<p><strong>Méthodologie :</strong> Agile (Scrum / Kanban), collaboration produit et design, veille technologique</p>
<hr>
<h2>Expériences professionnelles</h2>
<h3>Développeur Front-End — Freelance</h3>
<p><strong>ESN &amp; clients grands comptes — Lyon &amp; Marseille • 2013–2025</strong></p>
<ul>
<li>Développement d’interfaces interactives et responsives en Vue.js et React.js</li>
<li>Intégration et maintenance de design systems pour simplifier le workflow design → dev</li>
<li>Création de composants réutilisables et tests d’accessibilité</li>
<li>Collaboration avec équipes UX/UI pour optimiser parcours utilisateurs et performances</li>
<li>Mise en place de prototypes et validation de concepts avant production</li>
</ul>
<p><strong>Projets notables :</strong></p>
<ul>
<li>Web TV synchronisée et plateforme interactive pour événement culturel</li>
<li>Applications SaaS et e-commerce avec intégration marketing et analytics</li>
<li>Systèmes front back orchestrés via Docker et CI/CD pour livraison rapide</li>
</ul>
<hr>
<h2>Projets personnels / démonstrateurs techniques</h2>
<ul>
<li>Kit front-end interactif avec Vue/React pour prototypage rapide</li>
<li>Microservices Docker pour apps web expérimentales</li>
<li>Web TV auto-hébergée et traitement d’images/vidéo en front et back</li>
</ul>
<hr>
<h2>Formation</h2>
<ul>
<li>Licence Ingénierie de l’Internet (2011)</li>
<li>Formation continue autodidacte en UX/UI, Figma, Adobe Suite</li>
<li>Veille constante sur design web, accessibilité et bonnes pratiques front-end</li>
</ul>
<hr>
<h2>Langues</h2>
<ul>
<li>Français : natif</li>
<li>Anglais : professionnel (documentation technique, échanges dev/design)</li>
</ul>
<hr>
<h2>Contact</h2>
<p><strong>Valère BRON</strong><br>
Disponible freelance / CDD<br>
Malt • LinkedIn • valere.dev</p>
</body>
</html>

254
public/cv/html/cv-manpower.html
View File

@@ -1,254 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Technicien Support Applicatif Niveau 2 | Windows, Linux, SQL &amp; SaaS</strong></p>
<p>Autonome, rigoureux et curieux, je dispose d’une expérience technique polyvalente combinant développement, administration de systèmes et support applicatif.<br>
Je souhaite mettre mes compétences au service d’un rôle de <strong>support niveau 2</strong>, assurant la résolution d’incidents complexes et l’accompagnement des utilisateurs.</p>
<p>📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences principales</h2>
<h3>Support Applicatif &amp; Technique</h3>
<ul>
<li>Analyse, diagnostic et résolution d’incidents applicatifs complexes (niveau 2)</li>
<li>Lecture et croisement de logs applicatifs, scripts et fichiers de configuration</li>
<li>Installation, configuration et maintenance de logiciels métiers</li>
<li>Interface avec utilisateurs finaux et équipes métiers pour assurer la continuité opérationnelle</li>
<li>Documentation des procédures et suivi des tickets via outils de ticketing</li>
</ul>
<h3>Environnements &amp; Réseaux</h3>
<ul>
<li>Systèmes : Windows, Linux (Ubuntu, Debian, Zorin OS), macOS</li>
<li>Réseau : protocole TCP/IP, VPN, configurations LAN/Wi-Fi</li>
<li>SaaS &amp; architecture web : compréhension des flux, APIs REST et bases de données SQL</li>
<li>Serveurs personnels et professionnels : Docker, Gitea, Jellyfin</li>
</ul>
<h3>Développement &amp; Automatisation</h3>
<ul>
<li>Scripting Bash / Node.js pour diagnostic et automatisation</li>
<li>Lecture et compréhension de code existant pour analyse d’incidents</li>
<li>Connaissances en Vue.js, Nuxt, TypeScript, NestJS pour support applicatif et debugging</li>
</ul>
<h3>Relation &amp; Support utilisateur</h3>
<ul>
<li>Communication claire avec utilisateurs métiers et équipes IT</li>
<li>Pédagogie, sens du service et accompagnement technique</li>
<li>Rigueur et autonomie en environnement exigeant</li>
</ul>
<hr>
<h2>🧰 Expériences professionnelles</h2>
<h3>2025 – <strong>Groupama</strong> | Développeur Vue.js</h3>
<p>Support technique interne, participation à la résolution d’incidents applicatifs et coordination avec l’équipe métier.</p>
<blockquote>
<p>🔹 Diagnostic des anomalies, tests et validation des correctifs</p>
</blockquote>
<h3>2024 – <strong>Fitarena</strong> | Développeur Vue.js</h3>
<p>Maintenance applicative, suivi des bugs et assistance aux utilisateurs lors des évolutions du front-end.</p>
<blockquote>
<p>🔹 Lecture des logs, vérification des flux API et tests fonctionnels</p>
</blockquote>
<h3>2021–2023 – <strong>Potager City</strong> | Développeur Vue.js</h3>
<p>Développement et optimisation d’applications web.</p>
<blockquote>
<p>🔹 Mise en place de tests E2E, support applicatif interne, documentation technique</p>
</blockquote>
<h3>2018–2020 – <strong>Projets personnels &amp; freelances</strong></h3>
<p>Gestion et maintenance de serveurs personnels et professionnels : NAS, mini-serveurs Linux, Raspberry Pi.</p>
<blockquote>
<p>🔹 Analyse des logs, correction de dysfonctionnements et administration système</p>
</blockquote>
<hr>
<h2>🖥️ Projets techniques personnels</h2>
<ul>
<li><strong>docker-web</strong> : outil Bash pour orchestrer Docker et microservices</li>
<li><strong>Serveurs Linux &amp; NAS</strong> : configuration, sécurité, supervision, flux applicatifs</li>
<li><strong>Veille technique</strong> : suivi des innovations hardware, software et cybersécurité</li>
</ul>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🤝 Profil humain</h2>
<ul>
<li>Rigueur, autonomie et réactivité</li>
<li>Sens du service et pédagogie pour les utilisateurs métiers</li>
<li>Capacité à travailler en environnement exigeant et en évolution rapide</li>
</ul>
<hr>
<p><strong>Souhait :</strong> Rejoindre <strong>Manpower / client secteur IT Marseille</strong> pour assurer le support applicatif de niveau 2, contribuer à la résolution d’incidents complexes et accompagner les utilisateurs dans leurs outils métiers.</p>
</body>
</html>

242
public/cv/html/cv-node-angular.html
View File

@@ -1,242 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Développeur Front-End &amp; Fullstack | Vue.js, Angular, Node.js, TypeScript</strong></p>
<p>Développeur web expérimenté, spécialisé dans la création d’interfaces performantes et engageantes, avec un intérêt marqué pour l’expérience utilisateur, les performances logicielles et la qualité des composants. Je combine expertise front-end et back-end pour contribuer à des plateformes digitales complexes.</p>
<p>📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences</h2>
<ul>
<li><strong>Front-end :</strong> Angular 15, Vue 2/3, Nuxt, React.js, Tailwind, SCSS, Storybook, optimisation des performances, UI/UX</li>
<li><strong>Back-end :</strong> Node.js, NestJS, Express, GraphQL, Prisma, REST API, Websockets, MongoDB, PostgreSQL</li>
<li><strong>DevOps &amp; CI/CD :</strong> Docker, Docker Compose, Git, GitHub Actions, GitLab CI, KeyCloak, Cloud AWS</li>
<li><strong>Tests &amp; qualité :</strong> Jest, tests unitaires et d’intégration, automatisation E2E</li>
<li><strong>Méthodologies :</strong> Scrum Agile, architecture modulaire, industrialisation des composants</li>
</ul>
<hr>
<h2>🏢 Expériences</h2>
<h3>2025 – Groupama | Développeur Vue.js / Front-End</h3>
<ul>
<li>Développement et maintenance front-end (Vue 3) et intégration avec API REST</li>
<li>Optimisation des performances et respect des bonnes pratiques d’accessibilité</li>
<li>Mob &amp; pair programming, participation aux orientations produit et backlog</li>
<li>Tests fonctionnels et unitaires pour sécuriser les déploiements</li>
</ul>
<h3>2024 – Fitarena | Développeur Vue.js &amp; UI</h3>
<ul>
<li>Création de composants UI réutilisables et performants</li>
<li>Refactorisation du code existant et optimisation front-end</li>
<li>Collaboration étroite pour améliorer l’expérience utilisateur</li>
</ul>
<h3>2021–2023 – Potager City | Développeur Front-End</h3>
<ul>
<li>Optimisation front-end et SEO, mise en place de tests E2E</li>
<li>Coordination avec les équipes produit pour des interfaces intuitives</li>
<li>Gestion de la qualité et des performances logicielles</li>
</ul>
<h3>2020–2021 – MassiveMusic | Développeur Fullstack</h3>
<ul>
<li>Architecture front-end avec Atomic Design et SCSS normalisé</li>
<li>Développement back-end Node.js et Prisma, CI/CD via Docker Compose</li>
<li>Gestion des données et API sécurisées</li>
</ul>
<h3>2020–2021 – Analytics | Développeur Node.js</h3>
<ul>
<li>API GraphQL &amp; TypeScript, suivi CI/CD et modélisation Prisma</li>
</ul>
<h3>2020 – Studiolab | Développeur React.js</h3>
<ul>
<li>Création de composants React &amp; Ant Design pour projets web interactifs</li>
</ul>
<h3>2019 – Euronews | Développeur Vue.js</h3>
<ul>
<li>Intégration SCSS normalisée (ITCSS) pour la refonte du site</li>
</ul>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🚀 Projets personnels &amp; Compétences Visuelles</h2>
<ul>
<li>Création de micro-animations front et effets visuels interactifs (SVG, CSS keyframes, transitions)</li>
<li>Surcouche Docker Compose et microservices pour projets fullstack (<a href="https://docker-web.valere.dev">docker-web.valere.dev</a>)</li>
<li>Développement de kits front-end Nuxt et Vue orientés UI/UX (<a href="https://sidebase.io">sidebase.io</a>)</li>
<li>Expérimentation et optimisation d’interfaces utilisateurs pour des applications web et SaaS</li>
</ul>
</body>
</html>

244
public/cv/html/cv-otoremote.html
View File

@@ -1,244 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<hr>
<h2>title: “Valère BRON — Développeur Front-End / TypeScript orienté Full-Stack”
author: “Valère BRON”
geometry: margin=2cm
fontsize: 11pt</h2>
<h1>Valère BRON</h1>
<p><strong>Développeur Front-End / TypeScript orienté Full-Stack</strong><br>
Marseille • Freelance • Vue.js / TypeScript / NestJS • Intérêt pour la santé numérique</p>
<p>📞 06 81 84 77 37<br>
📧 contact@valere.dev<br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>Profil</h2>
<p>Développeur front-end depuis 12 ans, spécialisé dans la construction d’interfaces web modernes, accessibles et performantes.<br>
Je me positionne aujourd’hui comme <strong>Front-End avancé</strong> avec montée en compétences sur <strong>NestJS, PostgreSQL et GraphQL</strong>.<br>
Attiré par les applications à impact (santé, culture, sciences) et les environnements agiles où l’on collabore directement avec les équipes produit et techniques.</p>
<hr>
<h2>Compétences</h2>
<p><strong>Front-End :</strong> Vue.js / Nuxt 3, TypeScript, HTML5, CSS3, Tailwind, Accessibilité (WCAG), State management (Pinia, VueUse), Tests (Vitest, Vue Test Utils)</p>
<p><strong>Full-Stack (en progression) :</strong> NestJS, Node.js, PostgreSQL, Prisma, REST / GraphQL, Auth, services, architecture modulaire</p>
<p><strong>DevOps &amp; outils :</strong> Docker / docker-web, GitLab (Git Flow), CI/CD, Gitea, Linux</p>
<p><strong>Méthodologie &amp; UX :</strong> Collaboration produit / UX, culture data, documentation technique, environnement Agile</p>
<hr>
<h2>Expériences professionnelles</h2>
<h3>Développeur Front-End — Freelance</h3>
<p><strong>ESN &amp; clients grands comptes — Lyon &amp; Marseille • 2013–2025</strong></p>
<ul>
<li>Intégration d’interfaces complexes et responsives</li>
<li>Composants UI sur-mesure en Vue.js / TypeScript</li>
<li>Optimisation performance front et audit accessibilité</li>
<li>Mise en place d’outils internes (design systems, librairies front)</li>
<li>Contribution ponctuelle à des API en Node/NestJS</li>
<li>Industrialisation via Docker, CI/CD, automatisations</li>
</ul>
<hr>
<h2>Projets personnels / démonstrateurs techniques</h2>
<ul>
<li><strong>PushToRecord (Android – Kotlin)</strong> : App en arrière-plan pour enregistrement audio → flux asynchrone, permissions, architecture modulaire</li>
<li><strong>Web TV auto-hébergée</strong> : Player synchronisé, génération dynamique de flux HLS → intégration front + backend, orchestration Docker</li>
<li><strong>Outil de superposition vidéo</strong> : Extraction de frames, fusion, rendu via interface web → API simples, traitement d’image, micro-services Docker</li>
<li><strong>docker-web</strong> : CLI d’orchestration Docker pour apps web → gestion images, automatisation, scripts Bash</li>
</ul>
<hr>
<h2>Formation</h2>
<ul>
<li>Autodidacte avancé • 12 ans d’expérience front, montée full-stack</li>
<li>Veille continue sur NestJS, PostgreSQL, GraphQL, perf front, UX</li>
<li>Ateliers OpenClassrooms / Udemy : NestJS &amp; Prisma (2024-2025)</li>
</ul>
<hr>
<h2>Valeur ajoutée pour OTOREMOTE</h2>
<ul>
<li>Forte expérience interface/utilisation</li>
<li>Culture UX/UI et accessibilité</li>
<li>Capacité front immédiate</li>
<li>Montée en compétence NestJS déjà entamée</li>
<li>Travail propre, documenté, orienté qualité</li>
<li>Appétence forte pour projets à impact humain</li>
</ul>
<hr>
<h2>Langues</h2>
<ul>
<li>Français : natif</li>
<li>Anglais : technique courant (documentation, échanges dev)</li>
</ul>
<hr>
<h2>Contact</h2>
<p><strong>Valère BRON</strong><br>
Marseille / Lyon — disponible en freelance et CDD<br>
Malt • LinkedIn • valere.dev</p>
</body>
</html>

255
public/cv/html/cv-proman.html
View File

@@ -1,255 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Technicien Informatique Polyvalent | Systèmes, Réseaux &amp; Applicatifs</strong></p>
<p>Autonome, rigoureux et curieux, j’ai passé plus de 10 ans dans le développement web avant d’élargir mes compétences à l’administration, au support et à la maintenance.<br>
Aujourd’hui, je souhaite mettre à profit mon expérience technique dans un rôle de <strong>technicien polyvalent</strong>, au croisement du matériel, des systèmes et des applications métiers.</p>
<p>📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences principales</h2>
<h3>Gestion du parc informatique</h3>
<ul>
<li>Installation, configuration et maintenance de postes Windows, macOS et Linux</li>
<li>Gestion des comptes utilisateurs (Active Directory, Office 365)</li>
<li>Sauvegarde, restauration et mise à jour du parc logiciel et matériel</li>
<li>Maintenance matérielle (diagnostic, remplacement, optimisation)</li>
<li>Mise en place et suivi de procédures de sécurité et de sauvegarde</li>
</ul>
<h3>Gestion des applicatifs métiers</h3>
<ul>
<li>Analyse des besoins utilisateurs et rédaction de cahiers de tests</li>
<li>Participation aux phases de recette et validation des évolutions</li>
<li>Suivi de la conformité fonctionnelle des mises à jour</li>
<li>Interface avec prestataires et DSI pour le support applicatif</li>
<li>Notions de SQL, APIs REST et intégration ERP</li>
</ul>
<h3>Réseau &amp; Sécurité</h3>
<ul>
<li>Configuration de réseaux locaux et VPN</li>
<li>Surveillance des performances, sécurisation des accès</li>
<li>Déploiement de solutions Docker, Gitea, Jellyfin sur serveurs Linux</li>
<li>Veille permanente sur les systèmes et la cybersécurité</li>
</ul>
<h3>Développement &amp; Automatisation</h3>
<ul>
<li>Scripting Bash / Node.js pour tâches automatisées</li>
<li>Connaissances en développement (Vue.js, Nuxt, TypeScript, NestJS)</li>
<li>Outils CI/CD : Docker, GitLab, Drone</li>
</ul>
<hr>
<h2>🧰 Expériences professionnelles</h2>
<h3>2025 – <strong>Groupama</strong> | Développeur Vue.js</h3>
<p>Collaboration étroite avec l’équipe métier pour la mise en place d’une nouvelle architecture applicative en micro-frontends.</p>
<blockquote>
<p>🔹 Coordination technique et support utilisateur lors des phases de recette</p>
</blockquote>
<h3>2024 – <strong>Fitarena</strong> | Développeur Vue.js</h3>
<p>Développement d’un agenda interactif et optimisation de la communication entre front et back.</p>
<blockquote>
<p>🔹 Participation aux tests, à la validation fonctionnelle et à la maintenance des environnements</p>
</blockquote>
<h3>2021–2023 – <strong>Potager City</strong> | Développeur Vue.js</h3>
<p>Développement et maintien d’une application Vue 2 performante et accessible.</p>
<blockquote>
<p>🔹 Automatisation de tests E2E, gestion des déploiements et support technique aux équipes</p>
</blockquote>
<h3>2018–2020 – <strong>Projets personnels &amp; freelances</strong></h3>
<p>Mise en place et gestion de serveurs personnels et professionnels : NAS, mini-serveurs Linux, Raspberry Pi, Docker Compose, CI/CD.</p>
<blockquote>
<p>🔹 Maintenance complète du matériel, sécurité et gestion des utilisateurs</p>
</blockquote>
<hr>
<h2>🖥️ Projets techniques personnels</h2>
<ul>
<li><strong>docker-web</strong> : outil Bash d’orchestration Docker (CI/CD et microservices)</li>
<li><strong>NAS et serveurs Linux</strong> : installation, configuration, sauvegardes et surveillance</li>
<li><strong>Veille hardware &amp; software</strong> : suivi constant des innovations techniques et sécurité systèmes</li>
</ul>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🤝 Profil humain</h2>
<ul>
<li>Esprit d’analyse, rigueur et adaptabilité</li>
<li>Autonomie dans la gestion d’un parc ou d’un projet technique</li>
<li>Pédagogie et sens du service utilisateur</li>
<li>Capacité à faire le lien entre technique et besoins métier</li>
</ul>
</body>
</html>

235
public/cv/html/cv-reactis.html
View File

@@ -1,235 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Technicien Helpdesk / Support Informatique N0/N1</strong><br>
📍 Marseille – Permis B<br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>🎯 Profil</h2>
<p>Technicien informatique passionné, issu du développement web, je mets aujourd’hui mon expérience technique au service du support et de l’assistance utilisateur.<br>
Habitué à diagnostiquer, réparer et configurer des systèmes variés (Windows, Linux, macOS), je recherche un poste de proximité où la réactivité, la rigueur et le sens du service sont essentiels.</p>
<hr>
<h2>💡 Compétences techniques</h2>
<ul>
<li><strong>Systèmes :</strong> Windows 10/11, Linux (Debian/Ubuntu), macOS</li>
<li><strong>Réseaux &amp; Support :</strong> Active Directory, DHCP, VPN, sauvegardes, prise en main à distance</li>
<li><strong>Postes de travail :</strong> installation, déploiement d’image, maintenance hardware et software</li>
<li><strong>Outils :</strong> GLPI, Gitea, GitLab, outils de supervision et ticketing</li>
<li><strong>Langues :</strong> Français (natif), Anglais technique (niveau B2)</li>
</ul>
<hr>
<h2>🏢 Expériences professionnelles</h2>
<h3>2025 – Groupama | Développeur Vue.js</h3>
<ul>
<li>Développement et maintenance d’une application Vue 3 en environnement Agile.</li>
<li>Tests fonctionnels et collaboration avec les équipes métiers et techniques.</li>
<li>Support technique ponctuel auprès des utilisateurs internes.</li>
</ul>
<h3>2024 – Fitarena | Développeur Vue.js</h3>
<ul>
<li>Développement d’un agenda interactif et intégration d’API.</li>
<li>Support aux utilisateurs et correction d’incidents fonctionnels.</li>
</ul>
<h3>2021–2023 – Potager City | Développeur Vue.js</h3>
<ul>
<li>Développement front-end, maintenance applicative et optimisation des performances.</li>
<li>Tests E2E et prévention des régressions techniques.</li>
</ul>
<h3>Projets personnels (2020–2025)</h3>
<ul>
<li>Montage, configuration et maintenance de serveurs NAS, mini-PC et Raspberry Pi.</li>
<li>Déploiement d’infrastructures Docker (Gitea, Nginx Proxy, Jellyfin).</li>
<li>Dépannage matériel et assistance technique pour particuliers et TPE.</li>
<li>Développement d’un outil Bash d’orchestration Docker : <a href="https://docker-web.valere.dev">docker-web.valere.dev</a>.</li>
</ul>
<hr>
<h2>🎓 Formation</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication &amp; Industries Graphiques</li>
</ul>
<hr>
<h2>⚙️ Points forts</h2>
<ul>
<li>Esprit d’analyse et méthode dans la résolution d’incidents</li>
<li>Polyvalence : développement, systèmes, réseaux, matériel</li>
<li>Habitude du travail en autonomie et du contact direct avec les utilisateurs</li>
<li>Curiosité technique et veille active sur le hardware et la sécurité</li>
</ul>
<hr>
<h2>🚀 Objectif</h2>
<p>Mettre mes compétences techniques et ma rigueur au service du support de proximité, dans un environnement exigeant comme celui du transport maritime, au sein de <strong>REACTIS</strong>.</p>
</body>
</html>

251
public/cv/html/cv-rx.html
View File

@@ -1,251 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Technicien Maintenance &amp; Support Utilisateurs | Windows, Linux, Hardware</strong></p>
<p>Autonome, rigoureux et passionné d’informatique, j’ai acquis au fil des années une expérience complète en développement, administration de systèmes et support utilisateurs.<br>
Je souhaite aujourd’hui mettre mon expertise technique et ma polyvalence au service d’un rôle concret de maintenance et assistance sur site.</p>
<p>📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences principales</h2>
<h3>Support &amp; Maintenance</h3>
<ul>
<li>Support technique de niveau 1 et 2 pour utilisateurs finaux</li>
<li>Dépannage matériel : PC, écrans, imprimantes, PXI</li>
<li>Installation et configuration d’applications métiers et open source</li>
<li>Gestion des mesures de sécurité : BIOS, GPO, KB, MCS</li>
<li>Inventaire matériel et suivi via GLPI</li>
</ul>
<h3>Systèmes &amp; Réseaux</h3>
<ul>
<li>Maîtrise de Windows XP, 7, 10 et Linux (Ubuntu, Debian, Zorin OS)</li>
<li>Réseaux locaux : configuration, dépannage et partage de ressources</li>
<li>Déploiement et maintenance de serveurs personnels et professionnels (Docker, NAS, mini-serveurs)</li>
</ul>
<h3>Développement &amp; Automatisation</h3>
<ul>
<li>Scripting Bash / Node.js pour automatiser tâches et diagnostics</li>
<li>Lecture et compréhension de logs applicatifs et flux API</li>
<li>Connaissances de base en SQL, REST API et intégration front-end (Vue.js, Nuxt, TypeScript)</li>
</ul>
<h3>Relation &amp; Support utilisateur</h3>
<ul>
<li>Communication claire et pédagogie avec utilisateurs industriels et équipes IT</li>
<li>Suivi et documentation des interventions et procédures</li>
<li>Capacité à travailler sur site, autonome et organisé</li>
</ul>
<hr>
<h2>🧰 Expériences professionnelles</h2>
<h3>2025 – <strong>Groupama</strong> | Développeur Vue.js</h3>
<p>Support interne, diagnostic et résolution de problèmes techniques sur l’application interne.</p>
<blockquote>
<p>🔹 Assistance aux utilisateurs, tests fonctionnels et suivi des correctifs</p>
</blockquote>
<h3>2024 – <strong>Fitarena</strong> | Développeur Vue.js</h3>
<p>Maintenance applicative et coordination avec le back-end pour résoudre incidents et bugs.</p>
<blockquote>
<p>🔹 Lecture de logs, tests et optimisation des flux</p>
</blockquote>
<h3>2021–2023 – <strong>Potager City</strong> | Développeur Vue.js</h3>
<p>Développement et maintenance d’applications web.</p>
<blockquote>
<p>🔹 Mise en place de tests, support technique et documentation interne</p>
</blockquote>
<h3>2018–2020 – <strong>Projets personnels &amp; freelances</strong></h3>
<p>Administration de serveurs Linux, NAS et mini-serveurs, dépannage matériel et logiciel, configuration et sécurité.</p>
<blockquote>
<p>🔹 Gestion complète des équipements, inventaire, sauvegardes et mises à jour</p>
</blockquote>
<hr>
<h2>🖥️ Projets techniques personnels</h2>
<ul>
<li><strong>docker-web</strong> : orchestration Docker &amp; microservices via Bash</li>
<li>Serveurs Linux et NAS : installation, supervision et maintenance</li>
<li>Veille technique : suivi du hardware, software et sécurité</li>
</ul>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🤝 Profil humain</h2>
<ul>
<li>Autonomie, rigueur et sens du service</li>
<li>Capacité à intervenir sur site et à expliquer clairement les solutions</li>
<li>Polyvalence hardware, software et réseau</li>
</ul>
</body>
</html>

248
public/cv/html/cv-tds.html
View File

@@ -1,248 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Technicien Systèmes, Réseaux &amp; Support IT – Marseille</strong><br>
Polyvalent, autonome et passionné d’infrastructure, j’interviens sur tous les aspects techniques : systèmes, réseaux, stockage et virtualisation.<br>
J’allie expérience en développement et en administration Linux/Docker à une vraie rigueur opérationnelle sur le terrain.</p>
<p>📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
🌐 <a href="https://valere.dev">valere.dev</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences principales</h2>
<h3>🖥️ Systèmes &amp; Virtualisation</h3>
<ul>
<li>Administration Linux (Ubuntu, Debian, Zorin OS) &amp; Windows Server</li>
<li>Gestion et maintenance d’environnements virtualisés (Docker, VMware)</li>
<li>Sauvegarde, supervision et restauration des systèmes</li>
<li>Gestion des comptes utilisateurs, permissions et scripts Bash</li>
</ul>
<h3>🌐 Réseaux &amp; Sécurité</h3>
<ul>
<li>Installation, configuration et diagnostic d’équipements Cisco / Fortinet / Alcatel</li>
<li>Configuration de VLAN, VPN, DHCP, DNS, routage et pare-feux</li>
<li>Surveillance de la performance réseau et sécurité (logs, monitoring)</li>
<li>Mise en place de NAS et solutions de stockage partagées</li>
</ul>
<h3>🧰 Support &amp; Maintenance</h3>
<ul>
<li>Support technique niveau 2/3 auprès d’utilisateurs et équipes locales</li>
<li>Diagnostic des incidents systèmes, réseaux et applicatifs</li>
<li>Documentation technique et procédures d’intervention</li>
<li>Préparation et maintenance d’équipements pour déploiement international</li>
</ul>
<hr>
<h2>🧭 Expériences professionnelles</h2>
<h3>2025 – <strong>Développeur &amp; Administrateur Linux freelance</strong></h3>
<p>Conception et maintenance d’environnements Docker, scripts Bash et automatisations réseau.</p>
<blockquote>
<p>🔹 Supervision de serveurs, NAS et configurations VPN<br>
🔹 Support technique à distance et sur site</p>
</blockquote>
<h3>2024 – <strong>Fitarena</strong> | Développeur Vue.js / Support applicatif</h3>
<p>Participation à la maintenance et au support des applications internes.</p>
<blockquote>
<p>🔹 Lecture de logs, diagnostic d’erreurs, mise en place de correctifs</p>
</blockquote>
<h3>2021–2023 – <strong>Potager City</strong> | Développeur &amp; Support IT</h3>
<p>Suivi technique, support utilisateur et gestion du déploiement applicatif.</p>
<blockquote>
<p>🔹 Coordination entre les équipes métiers et IT<br>
🔹 Documentation et assistance en production</p>
</blockquote>
<h3>2018–2020 – <strong>Projets personnels &amp; freelance</strong></h3>
<p>Mise en place d’infrastructures locales (NAS, mini-serveurs, Docker, réseau).</p>
<blockquote>
<p>🔹 Administration Linux et virtualisation<br>
🔹 Automatisation via scripts Bash</p>
</blockquote>
<hr>
<h2>🚢 Objectif professionnel</h2>
<p>Intégrer le <strong>service IT d’une compagnie de croisières</strong> pour assurer la maintenance et le support des infrastructures à bord et à terre.<br>
Allier <strong>mobilité internationale</strong>, <strong>expertise technique</strong> et <strong>réactivité terrain</strong> pour garantir la fiabilité des systèmes en environnement exigeant.</p>
<hr>
<h2>🎓 Formation</h2>
<ul>
<li><strong>Licence Ingénierie de l’Internet</strong> – 2011</li>
<li><strong>BTS Communication &amp; Industries Graphiques</strong> – 2010</li>
</ul>
<hr>
<h2>🧠 Points forts</h2>
<ul>
<li>Polyvalence : systèmes, réseaux, développement, stockage</li>
<li>Autonomie et rigueur sur le terrain</li>
<li>Aisance en diagnostic et résolution d’incidents complexes</li>
<li>Goût du voyage et disponibilité pour interventions à bord</li>
</ul>
</body>
</html>

230
public/cv/html/cv-weeneo.html
View File

@@ -1,230 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Développeur Front-End | A/B Testing | JavaScript Vanilla, HTML, CSS</strong></p>
<p>Développeur front spécialisé en expériences utilisateurs et optimisation des parcours clients. Passionné par l’UX et la performance front-end, je conçois, déploie et maintiens des applications digitales pour améliorer conversion et engagement.</p>
<p>📞 06 81 84 77 37<br>
📧 contact@valere.dev<br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences</h2>
<ul>
<li><strong>Front-End :</strong> JavaScript ES6+, HTML5, CSS3/SASS, DOM manipulation, Responsive Design, Accessibilité (WCAG)</li>
<li><strong>A/B Testing :</strong> Implementation front-end, création et déploiement de tests, tracking des événements, analyse statistique</li>
<li><strong>UX/UI &amp; Marketing Digital :</strong> parcours utilisateur, conversion web, micro-interactions, optimisation de l’engagement</li>
<li><strong>Outils &amp; Méthodes :</strong> GitLab (Git Flow, merge requests), Jira, Agile/Scrum, documentation technique</li>
<li><strong>Soft Skills :</strong> analyse et synthèse, rigueur, curiosité, communication avec équipes produit, marketing et UX</li>
</ul>
<hr>
<h2>🏢 Expériences</h2>
<h3>2025 – Groupama | Développeur Vue.js Front-End</h3>
<ul>
<li>Conception et développement de micro-frontends pour une application interne</li>
<li>Participation aux choix UX/UI et à l’intégration de nouvelles fonctionnalités</li>
<li>Collaboration avec l’équipe produit pour améliorer le parcours utilisateur</li>
<li>Mise en place de tests fonctionnels et revue de code pour sécuriser les déploiements</li>
</ul>
<h3>2024 – Fitarena | Développeur Front-End</h3>
<ul>
<li>Développement d’un agenda interactif avec Vue 3 et Pinia</li>
<li>Création de composants dynamiques et intégration d’API pour améliorer l’expérience utilisateur</li>
<li>Refactorisation de code et optimisation de la performance front</li>
</ul>
<h3>2021–2023 – Potager City | Développeur Front-End Vue.js</h3>
<ul>
<li>Développement d’applications front-end accessibles et performantes</li>
<li>Mise en place de tests E2E pour éviter les régressions et garantir une UX fluide</li>
<li>Conception de campagnes front-end pour l’emailing et interfaces interactives</li>
<li>Optimisation SEO et accessibilité des composants</li>
</ul>
<h3>2020–2021 – MassiveMusic | Développeur Full-Stack Front-End</h3>
<ul>
<li>Composants front-end avec Atomic Design, intégration SASS normalisée</li>
<li>Déploiement et maintenance de services front pour la lecture de musique en streaming</li>
<li>Intégration de systèmes de tracking et gestion de données utilisateurs pour analyser l’usage</li>
</ul>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🚀 Projets personnels</h2>
<ul>
<li>Développement et optimisation d’interfaces web animées, micro-interactions et effets visuels (parallaxes, keyframes)</li>
<li>Expérimentations A/B sur projets personnels pour analyser le comportement utilisateur</li>
<li>Paquets npm, extensions web et microservices Docker pour tests front-end et intégration UX</li>
</ul>
</body>
</html>

257
public/cv/html/cv-xefi.html
View File

@@ -1,257 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Technicien &amp; Conseiller Informatique | Polyvalent systèmes, réseaux et développement</strong></p>
<p>Passionné par l’informatique depuis toujours, j’ai d’abord évolué comme développeur web avant d’élargir mes compétences vers le support, l’administration système et la maintenance de postes.<br>
Curieux, rigoureux et orienté utilisateur, j’aime autant <strong>résoudre des pannes matérielles</strong> qu’<strong>accompagner les utilisateurs</strong> pour qu’ils tirent le meilleur de leurs outils.</p>
<p>📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences principales</h2>
<h3>Support &amp; Maintenance</h3>
<ul>
<li>Déploiement, installation et configuration de postes Windows, macOS et Linux</li>
<li>Maintenance matérielle (diagnostic, remplacement de composants, optimisation des performances)</li>
<li>Sécurisation et mise à jour des systèmes</li>
<li>Sauvegarde, restauration et clonage de disques (NAS, SSD, Raspberry Pi, mini-ATX, etc.)</li>
<li>Suivi et résolution d’incidents logiciels et matériels</li>
</ul>
<h3>Réseau &amp; Systèmes</h3>
<ul>
<li>Paramétrage réseau local et distant, partage de ressources, VPN</li>
<li>Administration légère de serveurs Linux (Ubuntu, Debian, Zorin OS)</li>
<li>Mise en place et supervision de NAS et serveurs personnels (Docker, Gitea, Jellyfin, etc.)</li>
<li>Surveillance et optimisation des performances système</li>
</ul>
<h3>Développement &amp; Automatisation</h3>
<ul>
<li>Scripting Bash et automatisation (outil personnel <a href="https://docker-web.valere.dev">docker-web</a>)</li>
<li>Notions en Node.js, Vue.js et CI/CD (GitLab, Docker, etc.)</li>
<li>Conception d’outils internes simples pour améliorer la productivité</li>
</ul>
<h3>Relation client &amp; conseil</h3>
<ul>
<li>Écoute, pédagogie et accompagnement des utilisateurs</li>
<li>Expérience en support technique et collaboration avec équipes pluridisciplinaires</li>
<li>Capacité à vulgariser les problèmes et proposer des solutions concrètes</li>
</ul>
<hr>
<h2>🧰 Expériences professionnelles</h2>
<h3>2025 – <strong>Groupama</strong> | Développeur Vue.js</h3>
<p>Collaboration avec les équipes métier et techniques sur une architecture micro-frontend.<br>
Mise en place de pratiques de travail collectives (pair/mob programming, suivi des priorités).</p>
<blockquote>
<p>🔹 Coordination technique, support et communication avec les utilisateurs internes</p>
</blockquote>
<h3>2024 – <strong>Fitarena</strong> | Développeur Vue.js</h3>
<p>Refonte d’un agenda interactif et optimisation du code existant.</p>
<blockquote>
<p>🔹 Gestion d’environnements de développement, paramétrage des postes et assistance technique</p>
</blockquote>
<h3>2021–2023 – <strong>Potager City</strong> | Développeur Vue.js</h3>
<p>Maintenance et optimisation d’une application web et de ses performances.</p>
<blockquote>
<p>🔹 Veille sur la fiabilité des outils, tests techniques et amélioration continue des process</p>
</blockquote>
<h3>2018–2020 – <strong>Projets personnels &amp; freelances</strong></h3>
<p>Mise en place et administration de serveurs personnels :<br>
NAS, serveurs Docker, Raspberry Pi, machines mini-ATX pour usage personnel et professionnel.</p>
<blockquote>
<p>🔹 Configuration matérielle, virtualisation, sauvegardes et sécurité des systèmes</p>
</blockquote>
<hr>
<h2>🖥️ Projets techniques personnels</h2>
<ul>
<li><strong>docker-web</strong> : surcouche Bash pour orchestrer des applications web Docker</li>
<li><strong>Serveurs personnels</strong> : NAS, mini-serveurs Linux et Raspberry Pi</li>
<li><strong>Maintenance &amp; assistance</strong> : accompagnement technique de particuliers et d’entreprises locales</li>
<li><strong>Veille hardware &amp; software</strong> : suivi des innovations matérielles et logicielles grand public</li>
</ul>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🤝 Profil humain</h2>
<ul>
<li>Esprit d’équipe, sens du service et communication claire</li>
<li>Curiosité technique et autonomie</li>
<li>Passion pour la compréhension et la transmission des savoirs informatiques</li>
</ul>
<hr>
<p><strong>Souhait :</strong> Rejoindre <strong>XEFI</strong> pour mettre à profit mon expérience technique et mon sens du service dans un rôle concret et polyvalent au contact des utilisateurs.</p>
</body>
</html>

262
public/cv/html/cv.html
View File

@@ -1,262 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Valère BRON</h1>
<p><strong>Développeur Web | Vue.js, Nuxt, Node.js, Docker</strong></p>
<p>Développeur front Vue/Nuxt, j’aide les équipes à livrer des interfaces robustes et performantes. Focus sur la qualité (tests E2E), la DX (design system, tooling) et l’industrialisation (CI/CD, Docker).</p>
<p>📞 <a href="tel:+33681847737">06 81 84 77 37</a><br>
📧 <a href="mailto:contact@valere.dev">contact@valere.dev</a><br>
🔗 <a href="https://www.linkedin.com/in/valere-bron/">LinkedIn</a><br>
💻 <a href="https://github.com/valerebron">GitHub</a></p>
<hr>
<h2>💡 Compétences</h2>
<ul>
<li><strong>Front-end :</strong> Vue 2/3, Nuxt, Pinia, React.js, Tailwind, SCSS, Storybook</li>
<li><strong>Back-end :</strong> Node.js, NestJS, GraphQL, Prisma, REST API</li>
<li><strong>DevOps &amp; CI/CD :</strong> Docker, Docker Compose, GitLab, Drone, Gitea</li>
<li><strong>Outils :</strong> Vite, ITCSS, Atomic Design</li>
</ul>
<hr>
<h2>🏢 Expériences</h2>
<h3>2025 – Groupama | Développeur Vue.js</h3>
<p>Lors de cette mission pour Groupama, j’ai eu l’occasion de travailler au sein d’une équipe composée de
5 développeurs front, 2 lead dev et un facilitateur Scrum, en interaction avec une équipe métier sur site et à distance.</p>
<p>Dans ce cadre, j’ai participé à la construction d’une nouvelle application Vue 3 architecturée en micro-frontends.
L’accent a été mis en particulier sur les règles métiers et les tests fonctionnels.</p>
<ul>
<li>Développement &amp; maintenance d’applications Vue 3</li>
<li>Participation aux choix techniques et aux orientations produit</li>
<li>Collaboration avec l’équipe pour assurer l’intégration des fonctionnalités</li>
<li>Sécurisation des applications et suivi des bonnes pratiques</li>
<li>Mob et pair programming, présentation du backlog et des priorités à l’équipe</li>
</ul>
<h3>2024 – Fitarena | Développeur Vue.js</h3>
<p>Pour Fitarena, j’ai eu l’occasion de travailler avec l’architecte back-end pour développer un agenda interactif en Vue 3 et Pinia.</p>
<ul>
<li>Développement d’un agenda interactif en Vue 3 &amp; Pinia</li>
<li>Refactorisation du code existant et création de stores et services API</li>
<li>Développement de composants UI spécifiques</li>
</ul>
<h3>2021–2023 – Potager City | Développeur Vue.js</h3>
<p>Pour Potager City, j’ai travaillé sur le développement d’une application Vue 2 avec un accent particulier sur l’accessibilité et les performances.
Dans ce cadre, j’ai mis en place des tests de bout en bout (E2E) afin d’éviter les régressions CSS.
J’ai aussi mis en place le système de rendu des campagnes emailing avec un micro framework front-end from scratch.</p>
<ul>
<li>Développement front-end et optimisation SEO</li>
<li>Coordination avec les équipes produit pour améliorer l’expérience utilisateur</li>
<li>Mise en place de tests techniques et contrôle qualité du code</li>
</ul>
<h3>2020–2021 – MassiveMusic | Développeur Vue/TypeScript/Node/Prisma</h3>
<p>MassiveMusic est un projet personnel fullstack qui m’a permis de consolider mes connaissances en Vue, Node.js, DevOps et web design en développant seul un réseau social avec lecture de musique en streaming de bout en bout.</p>
<ul>
<li>Composants Vue avec Atomic Design</li>
<li>Intégration SCSS normalisée (ITCSS)</li>
<li>API GraphQL &amp; TypeScript et modélisation Prisma</li>
<li>CI/CD via GitLab et Docker Compose</li>
</ul>
<h3>2020–2021 – Analytics | Développeur Node.js</h3>
<p>J’ai développé le client et le serveur d’un outil de collecte et d’analyse de données navigateur en Node.js.</p>
<ul>
<li>Tracker client et API GraphQL &amp; TypeScript</li>
<li>CI/CD et modélisation Prisma</li>
</ul>
<h3>2020 – Studiolab | Développeur React.js</h3>
<ul>
<li>Développement de composants avec React &amp; Ant Design</li>
</ul>
<h3>2019 – Euronews | Développeur Vue.js</h3>
<ul>
<li>Intégration SCSS normalisée (ITCSS) pour la v3 du site</li>
</ul>
<h3>2018 – Tyredating | Développeur Vue.js</h3>
<ul>
<li>Développement de composants Vue pour CMS from scratch</li>
<li>Intégration responsive</li>
</ul>
<p><em>(… autres expériences antérieures disponibles sur demande)</em></p>
<hr>
<h2>🎓 Diplômes</h2>
<ul>
<li>2011 – Licence Ingénierie de l’Internet</li>
<li>2010 – BTS Communication et Industries Graphiques</li>
</ul>
<hr>
<h2>🚀 Projets personnels</h2>
<ul>
<li>Paquets npm en TypeScript</li>
<li>Extensions Web</li>
<li>Microservices Docker</li>
<li>Surcouche Docker Compose en Bash : <a href="https://docker-web.valere.dev">docker-web.valere.dev</a></li>
<li>Kit full-stack Nuxt : <a href="https://sidebase.io">sidebase.io</a></li>
</ul>
<p>Ces projets renforcent mes compétences en administration système, CI/CD et expérimentation front/back.</p>
</body>
</html>

189
public/cv/html/motivatiob-jalis.html
View File

@@ -1,189 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<p>Valère BRON
Marseille
📧 contact@valere.dev</p>
<p>📞 06 81 84 77 37</p>
<hr>
<p>À l’attention du service recrutement JALIS
Objet : Candidature au poste de Designer UX/UI Senior</p>
<hr>
<p>Madame, Monsieur,</p>
<p>Développeur front-end depuis plus de 12 ans, j’ai acquis une solide expérience dans la conception et l’intégration d’interfaces web performantes, accessibles et centrées sur l’expérience utilisateur. Travaillant étroitement avec des équipes design et produit, j’ai toujours eu à cœur de transformer des concepts en parcours utilisateurs clairs et engageants, tout en veillant à la maintenabilité et la qualité du code.</p>
<p>Passionné par l’UX/UI et le design interactif, j’ai développé des prototypes et des interfaces pour des applications web, des plateformes SaaS et des projets culturels, en intégrant les principes d’accessibilité et en optimisant l’expérience multi-devices. Ma maîtrise de Vue.js, React.js, HTML, CSS et Tailwind me permet de traduire les concepts graphiques en interfaces fonctionnelles et réactives, en collaboration avec les designers et les équipes produit.</p>
<p>Rigoureux, curieux et force de proposition, je souhaite aujourd’hui évoluer vers un rôle de Designer UX/UI, afin de mettre pleinement mon expertise front et mon sens du design au service de projets innovants. Rejoindre JALIS serait pour moi l’opportunité de contribuer à la création d’interfaces modernes et performantes pour une agence reconnue pour son excellence et son innovation, tout en collaborant avec une équipe pluridisciplinaire passionnée.</p>
<p>Je serais ravi de pouvoir échanger avec vous pour détailler mes compétences et la valeur que je peux apporter à vos projets.</p>
<p>Je vous remercie pour votre attention et reste à votre disposition pour un entretien.</p>
<p>Cordialement,
Valère BRON</p>
</body>
</html>

187
public/cv/html/motivation-comymedia.html
View File

@@ -1,187 +0,0 @@
<html><head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
/* Default styles */
pre {
background: #2d2d2d;
border-radius: 4px;
margin: 0.5em 0;
}
code {
font-family: 'Fira Code', Consolas, Monaco, monospace;
}
/* Custom CSS */
/* ====== Markdown PDF Pro Theme ====== */
@page {
margin: 25mm 20mm;
margin-top: 0mm;
}
body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: #333;
background: white;
max-width: 800px;
margin: auto;
padding: 60px;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 0.6em;
line-height: 1.3;
color: #222;
}
h1 {
font-size: 24pt;
border-bottom: 2px solid #000;
/* accent color */
padding-bottom: 0.3em;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 4px solid #000;
padding-left: 0.5em;
}
h3 {
font-size: 14pt;
color: #444;
}
h4,
h5,
h6 {
font-size: 12pt;
color: #555;
}
/* Paragraphs */
p {
margin: 0.5em 0;
text-align: justify;
}
/* Links */
a {
color: #1e7fce;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Lists */
ul,
ol {
margin: 0.5em 0 0.5em 2em;
}
li {
margin-bottom: 0.3em;
}
/* Blockquote */
blockquote {
border-left: 4px solid #0078D7;
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
background: #f9f9f9;
font-style: italic;
}
/* Code */
code {
font-family: "Fira Code", "Consolas", monospace;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.95em;
}
pre {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.4;
}
/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
width: 100%;
font-size: 0.95em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.6em 0.8em;
text-align: left;
}
th {
background: #f0f0f0;
font-weight: 600;
}
tr:nth-child(even) td {
background: #fafafa;
}
/* Horizontal rule */
hr {
border: none;
border-top: 2px solid #eee;
margin: 2em 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
</head>
<body>
<h1>Lettre de motivation – Valère BRON</h1>
<p><strong>Objet : Candidature au poste de Webdesigner / Développeur Front – Lyon</strong></p>
<p>Madame, Monsieur,</p>
<p>Fort de plus de 12 ans d’expérience en développement front-end et intégration d’interfaces web, je souhaite mettre mes compétences au service de votre agence afin de contribuer à la création et à la maintenance de sites internet performants et esthétiques pour vos clients.</p>
<p>Passionné par l’expérience utilisateur, je combine expertise technique et sens du design pour transformer les concepts graphiques en interfaces fonctionnelles et accessibles. Mon parcours m’a permis de travailler sur des projets variés, du développement d’applications Vue.js et Nuxt à l’intégration de sites WordPress et PrestaShop, en passant par la réalisation de newsletters et l’optimisation SEO.</p>
<p>Mon profil polyvalent me permet de gérer à la fois le design, l’intégration et la maintenance technique, tout en restant force de proposition sur l’ergonomie, l’accessibilité et la performance. Je maîtrise les outils de création graphique tels que Photoshop, Illustrator, InDesign et XD, et je sais les mettre en pratique dans le cadre de projets web complexes.</p>
<p>Intégrer votre agence représente pour moi l’opportunité de contribuer à des projets ambitieux dans un environnement créatif et collaboratif, tout en continuant à enrichir mes compétences et à relever de nouveaux challenges techniques et graphiques.</p>
<p>Je serais ravi de pouvoir vous présenter mon portfolio et discuter de la manière dont je pourrais apporter ma valeur ajoutée à votre équipe.</p>
<p>Je vous remercie par avance pour l’attention portée à ma candidature et reste à votre disposition pour un entretien.</p>
<p>Cordialement,<br>
<strong>Valère BRON</strong><br>
📞 06 81 84 77 37<br>
📧 contact@valere.dev<br>
🔗 <a href="https://valere.dev/portfolio">Portfolio</a></p>
</body>
</html>

102
public/cv/integrateur-kicklox.md Normal file
View File

@@ -0,0 +1,102 @@
# Valère BRON
**Intégrateur Web & Front-end | HTML, CSS, JavaScript, CMS, Bootstrap**
Intégrateur et développeur front depuis 12 ans, j’interviens sur la création et l’amélioration d’interfaces web performantes, accessibles et responsives. Habitué aux environnements exigeants, je maîtrise l’intégration HTML/CSS moderne, les systèmes de design, la performance front, et la mise en place de workflows fiables (Git, CI/CD, Docker).
Je travaille aussi sur des projets incluant Vue.js / Nuxt, mais je suis parfaitement autonome sur les stacks plus classiques (HTML/CSS/JS natif, Bootstrap, Foundation, WordPress…).
📞 [06 81 84 77 37](tel:+33681847737)
📧 [contact@valere.dev](mailto:contact@valere.dev)
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences
- **Intégration Web :** HTML5, CSS3, SCSS, responsive design, accessibilité, performance front
- **JavaScript :** Vanilla JS, interactions UI, optimisation chargement & assets
- **Frameworks front-end :** Bootstrap, Foundation, Tailwind, Atomic Design
- **CMS :** WordPress, Joomla (intégration, thèmes, customisation front)
- **Méthodologies & qualité :** ITCSS, BEM, design system, tests E2E
- **Outils :** Git, Docker, CI/CD, Vite, Storybook
- **Écosystème JS :** Vue.js, Nuxt, Pinia (utile mais secondaire pour cette annonce)
---
## 🏢 Expériences
### 2025 – Groupama | Intégrateur Web / Développeur Front Vue.js
- Intégration d’interfaces complexes en HTML/CSS/JS
- Mise en place de composants UI cohérents et maintenables
- Travail sur l’accessibilité, la performance et la robustesse front
- Participation aux choix techniques et au design system
- Travail en pair/mob et interaction avec le métier
### 2024 – Fitarena | Intégrateur / Développeur Front Vue.js
- Intégration d’écrans et composants responsive
- Refonte de pages existantes (HTML/CSS/JS)
- Mise en place de stores et services API
- Création de composants UI sur mesure
### 2021–2023 – Potager City | Intégrateur Web / Développeur Front
- Intégration HTML/CSS/JS répondant à de fortes contraintes SEO & performance
- Optimisation responsive et accessibilité
- Mise en place de tests E2E pour garantir l’absence de régressions
- Création d’un micro-framework front pour les emails marketing
### 2020–2021 – MassiveMusic | Développeur Fullstack / Intégration
- Composants Vue avec Atomic Design
- Intégration SCSS normalisée (ITCSS)
- API GraphQL & TypeScript et modélisation Prisma
- CI/CD via GitLab et Docker Compose
### 2020–2021 – Analytics | Développeur Node.js
- Tracker client et API GraphQL & TypeScript
- CI/CD et modélisation Prisma
### 2020 – Studiolab | Développeur React.js
- Développement de composants avec React & Ant Design
### 2019 – Euronews | Intégrateur Web
- Normalisation SCSS (ITCSS)
- Intégration responsive sur un site à forte audience
### 2018 – Tyredating | Intégrateur Web
- Intégration responsive de composants web
- Travail sur un CMS custom et socle HTML/CSS
### Missions diverses (2015–2017)
- Intégration de sites vitrines et applications web
- Utilisation de **Bootstrap**, Foundation, SCSS
- Intégration sous **WordPress** et Joomla
- Optimisation des performances front et du temps de chargement
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🚀 Projets personnels
- Web app Nuxt d'écoute de musique de streaming sous forme de jeux de cartes
- Paquets npm en TypeScript
- Extensions Web
- Microservices Docker
- Surcouche Docker Compose en Bash : [docker-web.valere.dev](https://docker-web.valere.dev)
- Kit full-stack Nuxt : [sidebase.io](https://sidebase.io)
Ces projets renforcent mes compétences en administration système, CI/CD et expérimentation front/back.

BIN
public/cv/lumapps.pdf Normal file
View File

Binary file not shown.

27
public/cv/motivatiob-jalis.md
View File

@@ -1,27 +0,0 @@
Valère BRON
Marseille
📧 contact@valere.dev
📞 06 81 84 77 37
---
À l’attention du service recrutement JALIS
Objet : Candidature au poste de Designer UX/UI Senior
---
Madame, Monsieur,
Développeur front-end depuis plus de 12 ans, j’ai acquis une solide expérience dans la conception et l’intégration d’interfaces web performantes, accessibles et centrées sur l’expérience utilisateur. Travaillant étroitement avec des équipes design et produit, j’ai toujours eu à cœur de transformer des concepts en parcours utilisateurs clairs et engageants, tout en veillant à la maintenabilité et la qualité du code.
Passionné par l’UX/UI et le design interactif, j’ai développé des prototypes et des interfaces pour des applications web, des plateformes SaaS et des projets culturels, en intégrant les principes d’accessibilité et en optimisant l’expérience multi-devices. Ma maîtrise de Vue.js, React.js, HTML, CSS et Tailwind me permet de traduire les concepts graphiques en interfaces fonctionnelles et réactives, en collaboration avec les designers et les équipes produit.
Rigoureux, curieux et force de proposition, je souhaite aujourd’hui évoluer vers un rôle de Designer UX/UI, afin de mettre pleinement mon expertise front et mon sens du design au service de projets innovants. Rejoindre JALIS serait pour moi l’opportunité de contribuer à la création d’interfaces modernes et performantes pour une agence reconnue pour son excellence et son innovation, tout en collaborant avec une équipe pluridisciplinaire passionnée.
Je serais ravi de pouvoir échanger avec vous pour détailler mes compétences et la valeur que je peux apporter à vos projets.
Je vous remercie pour votre attention et reste à votre disposition pour un entretien.
Cordialement,
Valère BRON

23
public/cv/motivation-comymedia.md
View File

@@ -1,23 +0,0 @@
# Lettre de motivation – Valère BRON
**Objet : Candidature au poste de Webdesigner / Développeur Front – Lyon**
Madame, Monsieur,
Fort de plus de 12 ans d’expérience en développement front-end et intégration d’interfaces web, je souhaite mettre mes compétences au service de votre agence afin de contribuer à la création et à la maintenance de sites internet performants et esthétiques pour vos clients.
Passionné par l’expérience utilisateur, je combine expertise technique et sens du design pour transformer les concepts graphiques en interfaces fonctionnelles et accessibles. Mon parcours m’a permis de travailler sur des projets variés, du développement d’applications Vue.js et Nuxt à l’intégration de sites WordPress et PrestaShop, en passant par la réalisation de newsletters et l’optimisation SEO.
Mon profil polyvalent me permet de gérer à la fois le design, l’intégration et la maintenance technique, tout en restant force de proposition sur l’ergonomie, l’accessibilité et la performance. Je maîtrise les outils de création graphique tels que Photoshop, Illustrator, InDesign et XD, et je sais les mettre en pratique dans le cadre de projets web complexes.
Intégrer votre agence représente pour moi l’opportunité de contribuer à des projets ambitieux dans un environnement créatif et collaboratif, tout en continuant à enrichir mes compétences et à relever de nouveaux challenges techniques et graphiques.
Je serais ravi de pouvoir vous présenter mon portfolio et discuter de la manière dont je pourrais apporter ma valeur ajoutée à votre équipe.
Je vous remercie par avance pour l’attention portée à ma candidature et reste à votre disposition pour un entretien.
Cordialement,
**Valère BRON**
📞 06 81 84 77 37
📧 contact@valere.dev
🔗 [Portfolio](https://valere.dev/portfolio)

BIN
public/cv/pdf/cv-comymedia.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-jalis.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-manpower.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-node-angular.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-otoremote.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-proman.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-reactis.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-rx.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-tds.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-valere-bron.pdf
View File

Binary file not shown.

65
public/cv/pdf/cv-weeneo.md
View File

@@ -1,65 +0,0 @@
# Valère BRON
**Développeur Front-End | A/B Testing | JavaScript Vanilla, HTML, CSS**
Développeur front spécialisé en expériences utilisateurs et optimisation des parcours clients. Passionné par l’UX et la performance front-end, je conçois, déploie et maintiens des applications digitales pour améliorer conversion et engagement.
📞 06 81 84 77 37
📧 contact@valere.dev
🔗 [LinkedIn](https://www.linkedin.com/in/valere-bron/)
💻 [GitHub](https://github.com/valerebron)
---
## 💡 Compétences
- **Front-End :** JavaScript ES6+, HTML5, CSS3/SASS, DOM manipulation, Responsive Design, Accessibilité (WCAG)
- **A/B Testing :** Implementation front-end, création et déploiement de tests, tracking des événements, analyse statistique
- **UX/UI & Marketing Digital :** parcours utilisateur, conversion web, micro-interactions, optimisation de l’engagement
- **Outils & Méthodes :** GitLab (Git Flow, merge requests), Jira, Agile/Scrum, documentation technique
- **Soft Skills :** analyse et synthèse, rigueur, curiosité, communication avec équipes produit, marketing et UX
---
## 🏢 Expériences
### 2025 – Groupama | Développeur Vue.js Front-End
- Conception et développement de micro-frontends pour une application interne
- Participation aux choix UX/UI et à l’intégration de nouvelles fonctionnalités
- Collaboration avec l’équipe produit pour améliorer le parcours utilisateur
- Mise en place de tests fonctionnels et revue de code pour sécuriser les déploiements
### 2024 – Fitarena | Développeur Front-End
- Développement d’un agenda interactif avec Vue 3 et Pinia
- Création de composants dynamiques et intégration d’API pour améliorer l’expérience utilisateur
- Refactorisation de code et optimisation de la performance front
### 2021–2023 – Potager City | Développeur Front-End Vue.js
- Développement d’applications front-end accessibles et performantes
- Mise en place de tests E2E pour éviter les régressions et garantir une UX fluide
- Conception de campagnes front-end pour l’emailing et interfaces interactives
- Optimisation SEO et accessibilité des composants
### 2020–2021 – MassiveMusic | Développeur Full-Stack Front-End
- Composants front-end avec Atomic Design, intégration SASS normalisée
- Déploiement et maintenance de services front pour la lecture de musique en streaming
- Intégration de systèmes de tracking et gestion de données utilisateurs pour analyser l’usage
---
## 🎓 Diplômes
- 2011 – Licence Ingénierie de l’Internet
- 2010 – BTS Communication et Industries Graphiques
---
## 🚀 Projets personnels
- Développement et optimisation d’interfaces web animées, micro-interactions et effets visuels (parallaxes, keyframes)
- Expérimentations A/B sur projets personnels pour analyser le comportement utilisateur
- Paquets npm, extensions web et microservices Docker pour tests front-end et intégration UX

BIN
public/cv/pdf/cv-weeneo.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv-xefi.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/cv.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/motivatiob-jalis.pdf
View File

Binary file not shown.

BIN
public/cv/pdf/motivation-comymedia.pdf
View File

Binary file not shown.

BIN
public/cv/toursime-aix.pdf Normal file
View File

Binary file not shown.

BIN
public/cv/upfluence.pdf Normal file
View File

Binary file not shown.

BIN
public/mistral.pdf Normal file
View File

Binary file not shown.