nextjs resume
1.0.0
Un curriculum vitae construit en particulier avec les professionnels du logiciel. Impressionnez votre employeur potentiel avec un beau site Web de CV incroyablement rapide, ou générez un PDF pour les e-mails et l'impression.
Voir un exemple
Votre curriculum vitae peut également générer une URL sécurisée qui affichera des informations non accessibles sur l'URL publique. La version sécurisée peut inclure des informations privées telles que le courrier électronique, le numéro de téléphone et l'adresse postale. Vous pouvez envoyer le lien privé à un employeur potentiel ou l'utiliser pour générer vous-même un PDF plus complet.
Le projet ne nécessite que quelques étapes pour configurer votre configuration personnalisée, ajouter du contenu au CMS interne et déployer sur Vercel ou NetLify!
Le moyen le plus simple de commencer est de se cloner et de se déployer en une seule étape. Ensuite, vous pouvez modifier le CMS et le modèle pour répondre à vos besoins.
Le projet est conçu pour être déployé sur Netlify ou Vercel. Vous pouvez cliquer sur l'un des boutons suivants pour cloner le repo, définir les variables d'environnement et déployer.
Pour personnaliser votre curriculum vitae, clonez le projet que vous venez de créer sur votre machine et cd local.
cd my-resume
npm i J'ai testé le projet avec bun , npm , pnpm et yarn et je n'ai rencontré aucun problème notable. Pour le développement, le coureur de test est par défaut à bun .
Ouvrez le projet dans l'éditeur préféré et ouvrez le dossier edit-me/config/ sur la racine où vous pouvez modifier le fichier resumeConfig.ts pour répondre à vos besoins. Le fichier de configuration contient les constantes suivantes qui seront utilisées tout au long du projet (elles sont dactylographiées pour fournir une assurance sectionnelle et une vérification des erreurs appropriées):
accentColor : AccentColor . Le nom d'une palette d'accent à partir des couleurs de l'interface utilisateur Radix. Si vous utilisez une couleur standard, la couleur du texte contrastée sera blanche et si elle utilise une couleur vive, la couleur du texte contrastée sera noire.neutralColor : NeutralColor . Le nom d'une palette neutre de Radix UI Grays.appTheme : 'system' | 'light' | 'dark' . Si appTheme est défini sur system , le site de CV sera par défaut la préférence système de l'utilisateur. S'il est réglé sur light ou dark la préférence de l'utilisateur sera remplacée.imageTheme : 'light' | 'dark' . Vos icônes d'image et d'application OG seront générées dans une variante claire ou sombre.pdfTheme : 'light' | 'dark' . Votre PDF sera généré dans une variante claire ou sombre. Vous trouverez également links.ts qui génèrent des liens externes au bas du document. Vous pouvez utiliser n'importe quelle icône à partir d'icônes simples à côté de ces liens.
Le générateur de curriculum vitae fournit 19 palettes de couleurs d'accent et 6 palettes de couleurs neutres prêtes à l'emploi. Vous trouverez ci-dessous des captures d'écran à partir de quelques variations en mode clair et sombre.
| Mode léger | Mode sombre |
|---|---|
Bleu / mauve  | Bleu / mauve  |
Rubis / gris  | Rubis / gris  |
Menthe / ardoise  | Menthe / ardoise  |
Vos préférences d'accent, de neutre et de jeu de couleurs s'appliquent également à l'image OG générée.
| Mode léger | Mode sombre |
|---|---|
Bleu / ardoise  | Bleu / ardoise  |
Ensuite, modifiez les données CMS simulées incluses dans edit-me/content/ . Chaque fichier de marque utilise les champs de matière frontale qui sont utilisés pour ajouter des attributs à l'élément. Ces attributs sont sûrs de type, donc le projet ne s'exécute pas si les champs requis sont manquants ou non valides. Le reste du fichier Markdown sera rendu en tant que HTML pour fournir une description de l'élément.
Bien que les fichiers simulés doivent être assez explicites, vous pouvez afficher la configuration de ContentLayer pour des descriptions détaillées des champs requis et facultatifs.
Peu importe où l'application est déployée, elle peut avoir besoin d'accès aux variables d'environnement suivantes:
PRIVATE_KEY (facultatif): Il s'agit d'un code, déterminé par l'auteur, qui fournira un accès à l'URL à une version du curriculum vitae qui comprend des informations privées. Nous vous recommandons de générer ce code (par exemple un UUID ou d'utiliser un générateur de mot de passe). Votre projet peut être configuré pour fournir une URL secrète qui affichera plus d'informations que l'URL publique. Ceci est utile si vous souhaitez envoyer un curriculum vitae complet à un employeur potentiel, ou si vous souhaitez générer un PDF pour votre propre usage. Dans cette version, vous pouvez inclure des informations personnelles telles que le courrier électronique, le numéro de téléphone et l'adresse que vous ne souhaitez pas visible pour le grand public.
L'URL privée ne fonctionnera que si vous avez ajouté une variable d'environnement PRIVATE_KEY . Si vous travaillez localement, vous pouvez l'ajouter dans un fichier .env.local :
PRIVATE_KEY=your-private-key
Vous pouvez ensuite visiter https://your-url.com/private/your-private-key pour voir la version privée du curriculum vitae.
Pour l'intégration de Markdown intégrée, veuillez noter que vous devez être sûr de ne pas commettre les informations privées à un dépôt Git public . Utilisez cette fonctionnalité dans un dépôt privé, et même alors, veuillez soyez conscient des problèmes de sécurité concernant la mise en place d'informations privées à tout repos git.
Pour ajouter des données privées au CMS, ajoutez-les simplement au dossier privateFields .
cms/privateFields/ . Ajoutez autant de champs d'informations de contact privés que vous souhaitez afficher. Ils apparaîtront dans l'ordre dans lequel ils sont disposés dans le dossier, vous pouvez donc utiliser un préfixe de nombre pour les commander.label : chaîne requise . L'étiquette du champ, telle que "e-mail" ou "adresse". Cette URL privée est aussi sûre que les personnes auxquelles vous l'envoyez . Pour invalider une ancienne URL privée, il vous suffit de modifier la variable d'environnement PRIVATE_KEY .
Le modèle est conçu pour être réactif, beau et accessible dès la sortie de la boîte. Il prend en charge le théâtre automatique du mode noir / léger dans la version Web et une excellente disposition d'impression à une seule page dans la version PDF. Le projet prend en charge un ensemble minimal de configurations telles que les couleurs d'accent, mais si vous êtes un développeur ou un concepteur frontal, vous pouvez facilement ouvrir le code source et le personnaliser comme bon vous semble.
Si vous souhaitez vraiment aller en profondeur sur la personnalisation, vous avez un contrôle total de la configuration du vent arrière dans le dossier du dossier racine tailwind.config.ts .
Nous utilisons la génération d'images Next.js pour générer un graphique dynamique (Facebook / Twitter) Partager des images et des icônes d'applications. Vous pouvez modifier la mise en page, les styles et le texte de l'image OG à l'aide de classes Tailwind dans src/app/api/og/route.tsx et l'icône dans src/app/icon.tsx .
Cette image de partage dynamique utilisera votre paramètre accentColor personnalisé, ainsi que les données du CMS.
Pour synchroniser votre curriculum vitae avec la dernière version de ce projet, vous pouvez effectuer ce qui suit:
// add the original repo as a git remote
git remote add upstream [email protected]:colinhemphill/nextjs-resume.git
// pull changes from upstream
git pull upstream mainRésolvez ensuite tous les conflits de fusion et apportez vos modifications souhaitées. Vous devrez regarder par-dessus le Changelog pour voir ce qui s'est passé depuis la dernière fois que vous avez tiré, et veuillez noter que les modifications en amont pourraient briser vos personnalisations!
