jsoncv
1.0.0
Une boîte à outils pour construire votre CV avec JSON et créer des fichiers HTML / PDF élégants.
JSONCV comprend les composants suivants:
Pour les explications approfondies et les directives d'utilisation, veuillez vous référer à la documentation ci-dessous.
JSONCV utilise le schéma JSON pour créer la norme basée sur JSON pour CVS.
Le schéma utilisé dans JSONCV est une fourche du schéma de CV JSON, avec les différences suivantes:
Version de schéma JSON
JSON RESUME utilise la version Draft-04 obsolète, tandis que JSONCV utilise le Draft-07 actuel. Pour garantir la compatibilité avec le projet-07, toutes les instances de additionalItems ont été supprimées.
Section de sideProjects supplémentaires
JSONCV comprend une section supplémentaire, appelée sideProjects , qui permet la distinction entre les projets secondaires et les projets de carrière
Propriété name supplémentaire dans meta section
JSONCV comprend une propriété name dans la section meta , qui permet à l'utilisateur de spécifier le nom souhaité pour les fichiers HTML / PDF exportés.
Ces différences n'ont pas d'impact sur la compatibilité entre le CV JSONCV et JSON. Cela signifie que vous pouvez facilement importer des données de CV JSON dans JSONCV et vice versa, car les données JSONCV passeront la validation du schéma de CV JSON.
Le différentiel complet entre le schéma de CV JSON et le schéma JSONCV peut être consulté ici
JSONCV est livré avec un éditeur en ligne qui fournit une interface utilisateur graphique pour créer et modifier vos données JSONCV. Visitez-le sur https://jsoncv.reorx.com/editor/.
L'éditeur se compose de trois vitesses, de gauche à droite:
Barre latérale
Permet la navigation vers différentes sections du formulaire de schéma et fournit des opérations telles que "Télécharger HTML" et "Télécharger des données"
Formulaire de schéma
Vous permet de modifier les propriétés de vos données CV. Vous pouvez également sélectionner les propriétés à afficher ou à masquer.
Prévisualisation
Affiche le HTML CV rendu lorsque des modifications sont apportées dans le formulaire de schéma.
Le produit central de JSONCV est CV HTML, qui est la représentation HTML de vos données JSONCV. Il s'agit d'un document HTML compact et unique qui peut être converti en PDF ou hébergé en ligne pour créer un site Web CV statique.
CV HTML est conçu avec une disposition spécifique pour afficher un CV sur une feuille de papier A4. Le CSS a été adapté pour optimiser l'impression, assurant la meilleure typographie, soit imprimée sur papier ou enregistrée en PDF. Par conséquent, CV HTML est le mieux adapté pour créer des CV / CV professionnels ou académiques, plutôt que des sites Web de portefeuille créatifs ou interactifs.
CV HTML prend en charge les thèmes, qui peuvent être trouvés dans le répertoire src/themes .
Pour obtenir CV HTML, veuillez consulter les données CV à l'exportation et le HTML et construire HTML localement
Les convertisseurs sont des scripts pour aider les utilisateurs à convertir les données JSONCV de / vers d'autres sources.
Actuellement, il n'y a qu'un seul convertisseur disponible: rxresume-to-jsoncv.js , qui convertit les données exportées de Rxresume au format JSONCV.
Si vous avez des exigences supplémentaires, n'hésitez pas à soumettre un problème. Les demandes de traction sont également grandement appréciées.
Il est recommandé d'écrire votre CV à l'aide de l'éditeur en ligne. Cependant, si vous êtes à l'aise avec JSON, vous pouvez maintenir le fichier de données à l'aide d'un éditeur de texte sur votre machine locale.
Lorsque vous ouvrez l'éditeur pour la première fois, un exemple de données est chargé. Vous pouvez soit le modifier ou cliquer sur le bouton "Nouvelles données" pour démarrer avec un formulaire vide. Vos données CV sont enregistrées dans votre navigateur chaque fois que vous apportez un changement, vous n'avez donc pas à vous soucier de perdre votre travail.
Si vous avez déjà une copie locale de vos données CV, vous pouvez cliquer sur le bouton "Télécharger les données" pour les charger dans l'éditeur.
Une fois la modification terminée, vous pouvez cliquer sur le bouton JSON Télécharger pour exporter vos données CV au format JSON.
Si vous souhaitez exporter le HTML rendu dans le volet Aperçu, cliquez simplement sur le bouton Télécharger HTML .
Veuillez noter que vous pouvez nommer les fichiers exportés en ajoutant la propriété meta.name . S'il n'est pas spécifié, le nom de fichier sera construit en utilisant une combinaison de basics.name et meta.version .
Pour garder les choses simples, JSONCV n'inclut ni n'utilise d'outils externes pour générer des PDF. Au lieu de cela, vous devez utiliser le fichier HTML généré pour le convertir en document PDF. La seule exigence est un navigateur moderne; Les étapes ci-dessous utilisent Google Chrome comme exemple:
Ouvrez le fichier HTML généré dans Chrome.
Appuyez sur ⌘ P (ou ⌃ P dans Windows) et la boîte de dialogue d'impression s'ouvrira.
Dans la boîte de dialogue, sélectionnez "Destination" comme "Enregistrer en tant que PDF" et assurez-vous que tous les éléments des "options" ne sont pas contrôlés.
Cliquez sur "Enregistrer" pour enregistrer le fichier PDF dans votre système de fichiers.
Veuillez noter que le PDF exporté de Chrome peut avoir des problèmes avec la copie de texte. Pour plus d'informations, consultez la section FAQ.
JSONCV utilise Vite comme outil de construction de site statique. Le fichier index.html à la racine du projet est le point d'entrée pour construire un CV HTML à un seul fichier.
Voici les étapes pour créer un CV HTML à l'aide de vos propres données:
Assurez-vous que vous utilisez NodeJS version 18 ou supérieure.
Installez les dépendances en fonctionnant: npm run install
Créez votre CV HTML en spécifiant les variables de l'environnement DATA_FILENAME et OUT_DIR :
DATA_FILENAME="$HOME/Downloads/mycv/cv.json" OUT_DIR="$HOME/Downloads/mycv" npm run build
Cela créera votre CV HTML à l'aide du fichier de données situé chez $HOME/Downloads/mycv/cv.json , et le HTML généré sera situé dans le répertoire $HOME/Downloads/mycv .
Les variables d'environnement suivantes sont prises en charge dans le processus de construction:
DATA_FILENAME : les données CV à utiliser peuvent être un chemin relatif ou absolu.OUT_DIR : Le répertoire de sortie du fichier HTML généré.THEME : Le thème à utiliser doit être l'un des noms du répertoire dans src/themes/ .Pour personnaliser la couleur primaire du thème, modifiez la variable CSS - primaire-couleur dans index.scss. Notez que la réalisation de ce changement entraînera des changements non stages dans le GIT. Si vous souhaitez construire le HTML vous-même, il est recommandé de créer un nouveau projet au lieu de modifier le code source dans JSONCV. Pour des instructions sur la façon de procéder, veuillez vous référer à la section Build a Static CV Site.
Le fichier index.html généré peut être utilisé n'importe où et sur n'importe quelle plate-forme d'hébergement. Téléchargez-le simplement sur un serveur Web et vous aurez votre propre site CV en ligne. Le thème intégré "Reorx" comprend également une prise en charge réactive pour les appareils mobiles.
Cependant, si vous voulez une personnalisation supplémentaire, comme le site CV à https://cv.reorx.com/ qui a un pied de page avec des liens vers le fichier PDF et la page d'accueil de l'auteur, vous pouvez suivre ces étapes:
Créer un référentiel vide
Ajouter JSONCV comme sous-module
git submodule add https://github.com/reorx/jsoncv.git
Mettez votre fichier de données CV, par exemple cv.json , dans le projet.
Initialiser package.json en exécutant npm init .
Installez JSONCV en tant que dépendance en exécutant npm i ./jsoncv .
Copiez les scripts et devDependencies de ./jsoncv/package.json à package.json , puis exécutez npm i pour les installer.
Copier ./jsoncv/vite.json.js à vite.json.js et apporter les modifications suivantes:
./src en ./jsoncv/src .dataFilename en votre fichier de données CV, par exemple cv.json .renderData.theme au thème que vous souhaitez utiliser. Copier ./jsoncv/index.html à index.html et modifier toutes les instances de ./src à ./jsoncv/src . Copiez ensuite ./jsoncv/index.scss à index.scss .
Exécutez npm run build pour tester si tout fonctionne.
Après avoir terminé ces étapes, vous pouvez désormais ajouter vos propres éléments et styles à index.html et index.scss pour personnaliser davantage votre site Web CV. Vous pouvez utiliser HTML, CSS et JavaScript pour ajouter votre propre marque, mise en page et fonctionnalité au site.
JSONCV comprend plusieurs thèmes intégrés que vous pouvez utiliser directement dans l'éditeur ou lors de la création du site CV statique. Si vous souhaitez créer votre propre thème personnalisé, voici comment:
La hiérarchie du système de fichiers pour les thèmes est la suivante:
src/themes
└── reorx
├── index.ejs
└── index.scss
Vous pouvez ajouter votre propre thème en créant un nouveau dossier sous src/themes avec les fichiers index.ejs et index.scss .
index.ejs est un modèle EJS utilisé pour construire le contenu CV. Les données transmises au modèle sont structurées comme suit:
cv : L'ensemble des données JSONCV conformes au schéma JSONCVfn : un ensemble de fonctions utilitairesgetCVTitle : obtient le titre CV des données cvreformatDate : transforme une chaîne de date en un format spécifiégetIconSVG : obtient la chaîne SVG iconifée ou l'élément DOM à partir du nom de l'icônenoSchemaURL : Retirez le schéma ( https:// ) préfixe de l'URLPour plus d'informations, consultez la définition complète de SRC / Themes / Data.js.
Une fois que vous avez créé un nouveau thème (utilisons yourtheme comme exemple), vous pouvez commencer à le développer et à prévisualiser en exécutant le code suivant:
THEME=yourtheme npm run dev-site
Les demandes de traction pour ajouter de nouveaux thèmes sont toujours les bienvenues.
Vous pouvez simplement nommer le thème après votre propre nom, c'est ce que j'ai fait pour le thème "Reorx". Parce que je pense que le thème est étroitement lié au goût esthétique et personnel du développeur, et les mots courants peuvent ne pas représenter avec précision le thème.
Oui, c'est un problème connu avec la fonctionnalité "Enregistrer en tant que PDF" de Chrome. Le PDFS résultant peut avoir du texte qui est en arrière lorsqu'il est copié dans Aperçu.app sur macOS.
Ce problème a été signalé par plusieurs utilisateurs et n'est pas spécifique à JSONCV. Comme on le voit dans: "Save en tant que PDF" produit des documents avec du texte vers l'arrière. - Communauté Google Chrome
Solution: utilisez Firefox ou Safari pour obtenir le PDF
Voir JavaScript garantit l'ordre des propriétés de l'objet? - Stack Overflow
summary et description des propriétés JSONCV n'a pas pu être rendu possible sans ces projets impressionnants ci-dessous:
Si vous pensez que ce projet est agréable à utiliser ou fait gagner du temps, pensez à me donner une tasse de café :)
