Bienvenue sur la page de démonstration des styles et composants du blog. Ce document sert de bac à sable (sandbox) et de "Lorem Ipsum" interactif pour tester l'intégralité des possibilités graphiques du design system.

[!NOTE] Backdrop configurator : Vous pouvez également configurer, prévisualiser et exporter vos fonds d'écrans de réunion sur le :github: Configurateur de Backdrop.

1. Titres et Typographie

Le texte courant utilise une police Serif haut de gamme (Lora) pour le confort de lecture, tandis que les titres utilisent Outfit pour une esthétique moderne et géométrique.

Voici un paragraphe standard avec du texte en gras, en italique, du texte de lien hypertexte, et du code en ligne const x = 42; pour tester l'espacement et la hauteur de ligne par défaut.

Sous-titre de niveau 3 (H3)

Sous-titre de niveau 4 (H4) pour test

"Ceci est une citation formatée (blockquote) pour mettre en valeur une phrase clé ou une source externe. Elle utilise la police Serif et une couleur atténuée." — Julien Avarre

2. Encarts et Callouts d'Information

Les encarts utilisent les formats d'alertes natifs de GitHub. Ils se colorent dynamiquement selon l'urgence de l'information :

[!NOTE] Ceci est une note standard. Elle est de couleur neutre et permet de donner des précisions intéressantes ou un contexte additionnel sur le sujet de l'article.

[!TIP] Voici une astuce utile ! Elle se pare d'une teinte verte chaleureuse et indique une bonne pratique, un raccourci ou un conseil d'optimisation.

[!WARNING] Avertissement important. Cet encart utilise une couleur orange pour signaler un point d'attention critique, une incompatibilité logicielle ou un risque de perte de données.

3. Listes, Tâches et Tableaux

Listes ordonnées et désordonnées

• Premier élément de liste à puces.
• Second élément avec sous-liste indendée :
• Sous-élément de premier niveau.
• Autre sous-élément.
• Troisième élément.

1. Étape numéro un.
2. Étape numéro deux.
3. Étape numéro trois.

Listes de tâches (Checklists)

• Tâche complétée avec succès.
• Seconde tâche validée.
• Tâche en attente d'exécution.
• Autre point à vérifier plus tard.

Tableaux de données simples

4. Grille Multi-Colonnes Responsives

Grâce à la structure en colonnes, vous pouvez disposer du contenu côte à côte. Sur écran mobile, les colonnes s'empilent automatiquement de manière fluide.

:::column_list :::column

Colonne Gauche

Voici la première colonne. Elle peut contenir n'importe quel texte ou image. Le système l'enveloppe dans un conteneur flexbox de manière transparente.

:::

:::column

Colonne Droite

Voici la seconde colonne. Elle s'aligne proprement avec la première colonne sur les grands écrans.

:::

:::

5. Composants Multimédias Interactifs

Carrousel de Diapo (Carousel Toggle)

Le moteur de carrousel extrait les éléments glissés sous un toggle "carousel" dans Notion pour en faire un diaporama interactif avec puces de navigation :

console.log("Hello from slide 2!");

Visionneuse d'Image Haute Définition

Les images larges sont compressées pour accélérer le chargement initial, et intègrent un zoom haute résolution réactif au clic :

L'idée centrale

J'ai remarqué que beaucoup de candidats se retrouvent face à un dilemme : écrire un CV en texte brut, très lisible pour les robots mais un peu triste pour les humains, ou concevoir une mise en page complexe sur Canva ou Figma, magnifique pour les yeux mais parfois illisible pour les algorithmes de tri.

Avec Jobby, j'ai voulu créer un petit compagnon simple et utile ! Il utilise un format Markdown propre qui se traduit instantanément en deux formats simultanés :

1. Une structure sémantique claire, idéale pour les robots de tri.
2. Un design épuré et élégant, très agréable pour les humains.

Les technologies utilisées

Développer Jobby a été un superbe terrain d'apprentissage ! Voici la configuration toute simple que j'ai choisie :

• Frontend : Des briques HTML légères, mises en valeur par des variables CSS personnalisées.
• Compilation PDF : L'outil Gotenberg pour générer des PDF propres via Docker.
• Respect de la vie privée : Une conception hors ligne où toutes vos données restent au chaud dans le stockage local de votre navigateur. Vos informations personnelles ne quittent jamais votre machine !

Je suis vraiment ravi de la rapidité et de la sécurité de Jobby, et j'espère de tout cœur que ce modeste outil pourra faciliter la recherche d'emploi et rendre cette étape un peu plus sereine !

Comment j'ai réussi à réduire à 3 clics la génération de mon CV personnalisé depuis une offre LinkedIn

C’est une vérité difficile à admettre pour tout professionnel de la tech : on peut être un excellent ingénieur depuis plus de 15 ans, et pourtant voir son CV rejeté en boucle par des algorithmes.

C'est exactement ce qui m'est arrivé. Mon CV, fièrement conçu sur Google Docs avec des tableaux bien alignés et des blocs denses, finissait systématiquement dans le trou noir des ATS (Applicant Tracking Systems) — ces robots trieurs de candidatures. Le constat était sans appel : mon CV était trop touffu, illisible pour les machines, et fichtrement statique.

C’est de cette frustration qu’est né Jobby.

Plus qu'un simple projet secondaire, Jobby est devenu un assistant de candidature autonome qui allie la puissance de l'IA générative, la flexibilité du Markdown et la robustesse d'un workflow automatisé. Laissez-moi vous expliquer comment j'ai transformé une corvée chronophage en un système magique, esthétique et redoutablement efficace.

🚀 ACCÈS RAPIDE — Profils Métiers, RH & Pressés

Le Pitch : Pourquoi votre CV doit d'abord devenir un document "vivant"

Avant de plonger dans le code, parlons de valeur d'usage. Si vous n'avez pas un profil purement technique, vous vous demandez sûrement : « Pourquoi automatiser son CV ? »

La réponse tient en un mot : la contextualisation.

Aujourd'hui, envoyer le même CV à dix entreprises différentes est une hérésie. Une candidature moderne doit être un dialogue personnalisé. Chaque offre d'emploi possède ses propres mots-clés, sa propre culture et ses défis spécifiques. Idéalement, il faudrait réécrire son CV pour chaque postulation. Mais qui a le temps de faire cela manuellement ?

C'est là que Jobby intervient pour simplifier le processus :

1. Zéro effort de mise en page : Vous définissez le design une fois pour toutes. Ensuite, vous n'y touchez plus jamais.
2. Pertinence maximale : L'IA analyse l'offre d'emploi et adapte instantanément vos expériences pour qu'elles résonnent parfaitement avec les besoins du recruteur.
3. Optimisation ATS & Humaine : Votre CV passe les filtres des machines tout en restant ultra-séduisant pour le recruteur humain.

La Révolution du Markdown : Quand le fond se sépare de la forme

En tant qu'ingénieur, le Markdown est pour moi une troisième langue. C'est un format de texte brut, léger, lisible par l'homme et adoré par les machines. Mais surtout, c'est le langage de prédilection des IA.

Tenter de faire rédiger un fichier Word ou un Google Doc à une IA se solde souvent par des catastrophes de mise en page (polices disparates, tableaux brisés, espacements anarchiques).

Avec le Markdown, le problème est résolu :

• L'IA se concentre uniquement sur le fond : Elle rédige le contenu textuel structuré (titres, listes à puces, gras).
• Le moteur de rendu s'occupe de la forme : Une fois le visuel (CSS/HTML) configuré pour être moderne, élégant et épuré, la structure Markdown s'y glisse parfaitement. Le résultat ? Un CV d'une esthétique irréprochable, sans aucun effort de mise en forme. On modifie le texte, et la magie du design opère instantanément.

[!TIP] Comprendre le Markedown en 10s: https://jobby.eole.me/markdown

Sous le capot : La stack technique de Jobby

Pour monter en compétences sur des technologies que je voulais explorer plus en détail, j'ai bâti Jobby autour d'une architecture moderne et légère :

[Page LinkedIn (ouverte)] ➔ [Sélecteur de texte / Ruse] ➔ [n8n (Docker)] ➔ [IA (Challenger)] ➔ [Notion / Markdown] ➔ [Gotenberg (PDF)] ➔ [Notion / Métadonnées, PDF & Suivi]

1. Docker, n8n & Gotenberg : J'ai déployé n8n (le chef d'orchestre de l'automatisation) et Gotenberg (une API Docker ultra-légère permettant de convertir du HTML/CSS en PDF parfaits) dans des conteneurs Docker.
2. Le contournement tactique (LinkedIn) : Inutile de se mentir, LinkedIn est une véritable forteresse (risques de bannissement, pièges à scrapers à chaque clic). Pour éviter l'usine à gaz d'un robot de navigation autonome qui se ferait repérer en trois secondes, j'ai préféré ruser : le workflow récupère simplement la sélection de texte de l'offre d'emploi depuis la page que j'ai préalablement ouverte manuellement. C'est propre, imparable et sécurisé.
3. Le "Master CV" dans Notion : Au lieu d'avoir un fichier CV figé, j'ai centralisé toute ma base de connaissances (compétences, projets, expériences détaillées) dans Notion. C'est ma source unique de vérité.
4. Le "Challenge" par l'IA (et mon coaching sur-mesure) : n8n envoie l'offre d'emploi et mon Master CV à un Modèle de Langage (LLM). L'IA compare les deux, identifie les forces à mettre en avant, élimine le superflu et rédige le CV idéal au format Markdown. Mais elle ne s'arrête pas là : elle joue aussi le rôle de coach de carrière. L'IA extrait pour moi :

• Les points clés à valoriser lors d'un futur entretien.
• Les pièges à éviter au vu de mon parcours ou de l'intitulé de l'offre.
• Les compétences à renforcer pour être parfaitement crédible.
• Et surtout, elle calcule un score de pertinence instantané (GO/NO-GO) pour m'éviter de perdre du temps sur des pistes peu qualifiées. Le workflow convertit ensuite le CV validé en HTML stylisé, puis fait appel à Gotenberg pour l'imprimer en un PDF haute définition.

1. Le Suivi automatisé & les métadonnées : En parallèle de la génération du CV, n'oublions pas le suivi ! n8n extrait automatiquement de l'annonce les métadonnées essentielles : URL de l'offre, titre du poste, nom de l'entreprise, un résumé rapide de l'opportunité, et mon fameux score GO/NO-GO. Tout cela est automatiquement enregistré dans ma base de suivi sur Notion, accompagné du PDF de mon CV sur-mesure attaché directement à la ligne. Chaque opportunité génère ainsi une fiche de suivi chirurgicale, sans aucune saisie manuelle.

Zoom sur l'industrialisation : Sécurité, Makefile et environnements

Au-delà des workflows d'automatisation, ce projet a été l'occasion parfaite de mettre en œuvre de véritables pratiques d'industrialisation et de DevOps :

• La gestion des secrets avec Doppler : Automatiser avec l'IA et Notion nécessite de jongler avec des clés d'API hautement sensibles. Pour éviter d'écrire ces secrets en clair dans mes fichiers de configuration, j'ai intégré Doppler. Grâce à leur offre gratuite extrêmement généreuse (Free Tier), je centralise, gère et injecte de manière ultra-sécurisée l'ensemble de mes variables d'environnement directement dans mes conteneurs en cours d'exécution.
• Le chef d'orchestre des commandes : Le Makefile : Pour éviter d'avoir à retenir des lignes de commande Docker à rallonge, j'ai créé un Makefile. Lancer l'environnement de développement, mettre à jour la stack ou nettoyer les conteneurs se fait désormais en une seule commande courte (ex: make dev, make build, etc.).
• Docker pour la Préprod et la Prod : Afin de garantir que l'application se comporte exactement de la même manière sur ma machine que sur mon serveur, j'ai mis en place une vraie séparation d'environnements (Preprod et Prod) à l'aide de fichiers de configuration Docker distincts. C'est l'assurance d'avoir des déploiements fluides, reproductibles et sans mauvaise surprise.

Une contribution pour la communauté : L'Éditeur Markdown en Open Source

La machinerie complète de Jobby (le scraping automatique, la synchronisation Notion et la couche IA) requiert des configurations d'API spécifiques, des jetons de sécurité privés gérés par Doppler et des ressources d'infrastructure qu'il m'est impossible de partager publiquement pour des raisons évidentes de sécurité et de coûts de fonctionnement.

Cependant, je n'ai pas voulu m'arrêter là.

La brique finale de Jobby — l'éditeur de Markdown en ligne — est un outil tellement puissant et pratique que j'ai décidé de le détacher du projet pour le rendre gratuit, accessible à tous et 100% open source.

Et pour que l'expérience soit complète, j'ai fait en sorte que cet éditeur en ligne puisse appeler ma brique de génération PDF (via Gotenberg). Même sans l'IA d'automatisation, tout le monde peut ainsi bénéficier de la puissance d'impression de Jobby.

Cet éditeur se suffit amplement à lui-même. Il vous permet de :

• Saisir ou coller votre CV en Markdown à gauche.
• Visualiser instantanément le rendu esthétique, moderne et professionnel à droite.
• Exporter votre CV en un clic dans un format PDF d'une qualité chirurgicale (grâce à l'API Gotenberg en arrière-plan), parfaitement optimisé pour les ATS et flatteur pour l'œil humain.

Rendre la technique accessible : Le tutoriel interactif

Je sais d'expérience que le format Markdown peut impressionner, voire freiner les profils moins habitués aux syntaxes informatiques. C'est pourquoi j'ai conçu un Tutoriel Interactif et Animé directement intégré à la plateforme.

Pas de grands discours théoriques : c'est un guide pas à pas, ultra-visuel, ludique et interactif. En seulement 20 secondes, vous apprenez à structurer votre document sans aucune friction. C'est la passerelle idéale pour prouver que la simplicité du format brut est à la portée de tous, sans exception !

L'Art du "Vibe Coding" et la quête de la satisfaction moderne

Si l'architecture de Jobby est robuste, l'interface utilisateur de l'éditeur a été une véritable cour de récréation créative. Pour concevoir cet éditeur, j'ai pleinement embrassé la philosophie du Vibe Coding : coder à la vitesse de la pensée en m'appuyant sur l'IA pour implémenter des fonctionnalités de haut vol et des détails d'interface ultra-soignés, conçus pour le pur plaisir de l'usage.

Voici un aperçu des petites touches de "satisfaction moderne" que j'ai pris un plaisir fou à intégrer :

• Un cockpit de contrôle d'impression (Mode Standard vs Mode Avancé) : L'affichage à droite de l'éditeur offre une véritable prévisualisation en temps réel de votre futur PDF (print preview). Pour piloter ce rendu, j'ai conçu un panneau de configuration digne d'un cockpit : ajustement à la volée des polices, du multi-colonnes, de l'alignement des éléments et gestion des templates avec des thèmes de couleurs prédéfinis. Pour s'adapter à chaque profil, l'interface propose deux niveaux de lecture :

  • Un Mode Standard (orienté "Métier") qui masque la complexité pour aller à l'essentiel et générer un document parfait en trois clics.
  • Un Mode Avancé (orienté "Tech") qui libère les réglages chirurgicaux (hauteurs de lignes, échelles de titres, et imports de configurations JSON).

• Un moteur de coloration syntaxique intégré : Fini le texte brut monochrome, froid et difficile à relire lors de la saisie. J'ai greffé un système de coloration syntaxique en temps réel directement dans la zone d'édition. Les titres, le gras, les listes, les liens et même mes balises stylisées personnalisées prennent immédiatement de la couleur au fur et à mesure de votre frappe, rendant la rédaction fluide et gratifiante.

• Un système de notifications empilables (Toaster) : Fini les popups de confirmation bloquants du navigateur. Les alertes glissent élégamment depuis le bas de l'écran avec un effet de flou et des dégradés subtils. En cas d'erreur de manipulation, un bouton "Undo" ou un simple Ctrl + Z vous permet de restaurer votre travail instantanément.

• Le volet de design rétractable en Glassmorphism : Le panneau de personnalisation s'efface d'un clic pour vous laisser un maximum d'espace de prévisualisation. Quand il est replié, un magnifique bouton flottant translucide prend le relais.

• Le multilingue natif (i18n) : L'éditeur parle désormais 7 langues (Français, Anglais, Espagnol, Allemand, Italien, Tchèque, Roumain) pour s'adapter à tous les profils d'utilisateurs à travers le monde.

• Le versionnage automatique : Un tampon de version intelligent s'imprime discrètement en bas de votre document. À chaque fois que vous générez un PDF ou imprimez votre CV, le compteur s'incrémente de manière autonome. C'est l'assurance absolue que vous regardez toujours la version la plus récente, sans avoir à renommer manuellement vos fichiers CV_v2_final_final_3.pdf.

• Des Dev Tools intégrés pour les plus curieux (l'astuce du chef) : Un panneau dédié permet de coller vos variables d'environnement, de configurer vos requêtes webhook n8n ou de lier vos identifiants de base Notion. L'éditeur intègre même des outils en ligne de commande pour synchroniser en un clin d'œil vos secrets Doppler (make n8n-dbs-push). La subtilité suprême ? L'interface de l'éditeur sert aussi de configurateur visuel dynamique pour tout mon flux d'impression Gotenberg sous le capot. Un formidable raccourci pour piloter l'architecture complète directement depuis le navigateur !

En conclusion

Jobby est la preuve qu'en combinant un peu de curiosité technique (Docker, n8n, Gotenberg) et une vision orientée produit, on peut transformer un processus frustrant en une routine fluide et valorisante. Ma recherche d'emploi n'est plus une corvée de mise en page, mais un exercice d'optimisation continue.

Prêt à passer votre CV au Markdown ? Essayez l'éditeur gratuit, découvrez l'explication interactive du Markdown et venez me dire ce que vous en pensez en commentaires !

🔗 Liens & Ressources utiles

• 🛠️ Découvrir l'Éditeur Markdown de Jobby — Testez l'outil gratuitement en ligne et exportez vos CVs en PDF.
• 📖 Tutoriel Interactif Jobby — Une explication animée et webnative pour apprendre à dompter le Markdown en quelques secondes.
• 💻 Projet GitHub : Jobby Editor — Accédez au code source, explorez la documentation ou laissez une étoile ⭐ !
• 🤝 Discutons sur LinkedIn — Suivez mes aventures d'ingénieur tech, ou partagez vos retours sur l'outil.

Je suis tellement ravi de partager cet espace avec vous. C'est ici que je rassemble mes réflexions, documente mes apprentissages techniques, partage mes aventures photographiques et note mes pensées sur l'improvisation théâtrale et la course en montagne.

L'idée derrière ce site

Mon souhait était de créer un espace simple et authentique pour réunir mes explorations techniques quotidiennes et mes passions créatives :

• Le côté Développeur (Julien Avarre) : Où je m'amuse avec l'architecture logicielle, développe des outils comme Jobby, configure des serveurs auto-hébergés et apprends l'orchestration système.

• Le côté Artiste (Éole) : Où j'explore la photographie, partage des rires en improvisation théâtrale et parcours de longues distances au cœur de nos magnifiques montagnes. En cliquant ou en faisant tourner la roue en haut à gauche, vous pouvez basculer entre ces deux univers ! C'est une façon ludique de partager les différentes activités qui me passionnent, toutes portées par le même enthousiasme d'apprendre et de créer.

Merci infiniment pour votre visite ! Je serais absolument ravi que vous jetiez un œil à mes projets, et n'hésitez surtout pas à me contacter !