Dans cet article de blog, nous vous montrerons comment utiliser ChatGPT, un modèle de langage puissant, pour créer un site Web de CV personnel en seulement 5 minutes. Nous vous montrerons également comment héberger votre site Web gratuitement avec l'aide de ChatGPT !
À l'ère numérique d'aujourd'hui, avoir une forte présence en ligne est crucial, surtout lorsqu'il s'agit de trouver un nouvel emploi. L'un des meilleurs moyens de mettre en valeur vos compétences et votre expérience consiste à créer un site Web de CV personnel. Cependant, créer un site Web à partir de zéro peut prendre du temps et être écrasant, surtout si vous n'avez pas d'expérience dans le développement Web. C'est là qu'intervient ChatGPT. Dans cet article de blog, nous vous montrerons comment utiliser ChatGPT, un modèle de langage puissant, pour créer un site Web de CV personnel en seulement 5 minutes. Non seulement cela, mais nous vous montrerons également comment héberger votre site Web gratuitement à l'aide de GitHub Pages. Avec ChatGPT, vous pouvez créer un site Web d'aspect professionnel qui met en valeur vos réalisations et vous distingue des autres candidats à un emploi. Alors, commençons!
Premiers pas avec ChatGPT
ChatGPT est basé sur un grand modèle de langage créé par OpenAI. J'ai été formé sur une quantité massive de données textuelles et j'ai utilisé des algorithmes d'apprentissage en profondeur pour générer des réponses de type humain aux requêtes en langage naturel. Je peux vous aider dans un large éventail de tâches, allant de la réponse aux questions et de la fourniture de recommandations à la création d'écritures créatives et bien plus encore. Il peut également diriger le code. Nous utiliserons cette fonctionnalité à l'étape suivante lorsque nous demanderons à ChapGPT de générer du code pour un site Web de CV.
Allons sur https://chat.openai.com/chat inscrivez-vous pour un compte gratuit et commencez à saisir la première invite : "Fournissez le code pour un site Web de CV personnel en utilisant HTML et CSS" :
Comme vous pouvez le voir, ChatGPT génère une réponse complète nous fournissant le code HTML et CSS pour un site Web de CV personnel simple mais efficace.
Voici le code HTML complet généré par ChatGPT :
< html >
< head >
< title > Mon CV personnel </ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< header >
< h1 > Mon nom </ h1 >
< nav >
< ul >
< li > < a href ="#about" > À propos de </ a > </ li >
< li > < a href = "#experience" > Expérience </ a > </ li >
< li > < a href = "#education" > Éducation </ a > </ li >
< li > < a href = "#skills" > Compétences <ai=51></ a > </li >
< li > < a href = "#contact" > Contact </ a > </ li >
</ ul >
</ nav >
</ header >
< main >
< section id = "about" >
< h2 > À propos Moi </ h2 >
< p > Rédigez ici une brève description de vous-même et de vos objectifs de carrière.</ p >
</ section>
< section id = "experience" >
< h2 > Expérience </ h2 >
< ul >
< li >
< h3 > Intitulé du poste </ h3 >
< p > Nom de l'entreprise, ville,État </ p >
< p > Période </ p >
< ul >
< li > Responsabilité 1 </ li >
< li >Responsabilité 2 </ li >
< li > Responsabilité 3 </ li >
</ ul >
</ li >
</ ul >
</ section >
< section id = "education" >
< h2 > Education </ h2 >
< ul >
< li >
< h3 > Nom du diplôme </ h3 >
< p > <ai=52>Nom de l'université, ville, état</ p >
< p > Plage de dates </ p >
</ li >
</ ul >
</ section >
< section id = "skills" >
< h2 > Compétences </ h2 >
< ul >
< li > Compétence 1 < / li >
< li > Compétence 2 </ li >
< li > Compétence 3 <ai=53></ li >
</ ul >
</ section >
< section id = "contact" >
< h2 > Contactez-moi </ h2 >
< form >
< label for = "name" > Nom :</ label >
< input type = "text" id = "name" name = "name" >
< label for = "email" > Email : </ label>
< input type = "email" id = "email" name = "email" >
< label for = "message" > Message :</ label >
< textarea id = "message" name = "message" > </ textarea >
< input type = "submit" value = "Submit" >
</ form >
</ section >
</ main>
</ corps >
</ html >
Et le code CSS correspondant :
body {
font-family : Arial, sans-serif;
marge : 0 ;
}
header {
background-color : #333 ;
couleur : #fff ;
rembourrage : 20px ;
}
entête h1 {
marge : 0 ;
}
nav {
flottant : droite;
}
nav ul {
list-style : none;
marge : 0 ;
rembourrage : 0 ;
}
nav li {
display : inline-block;
marge-gauche : 20px ;
}
nav a {
couleur : #fff ;
texte-décoration : aucun ;
}
nav a :hover {
text-decoration : underline;
}
principal {
rembourrage : 20px ;
}
section {
margin-bottom : 20px ;
}
section h2 {
margin-top : 0 ;
}
ul{
style de liste : aucun ;
marge : 0 ;
rembourrage : 0 ;
}
li {
marge inférieure : 10px ;
}
form {
margin-top : 20px ;
}
label {
display : block;
marge-bas : 5px ;
}
entrée [type= "texte" ] ,
entrée [type= "email" ] ,
zone de texte {
largeur : 100% ;
rembourrage : 10px ;
marge-bas : 10px ;
bordure : 1px solide #ccc ;
rayon de bordure : 4px ;
box-sizing : border-box;
}
input [type= "submit" ] {
background-color : #333 ;
couleur : #fff ;
bordure : aucune ;
rembourrage : 10px 20px ;
rayon de bordure : 4px ;
curseur : pointeur;
}
input [type= "soumettre" ] :hover {
background-color : #444 ;
}
Pour voir le résultat de ce code de site Web dans le navigateur, créez un nouveau dossier de projet et deux nouveaux fichiers :
mkdir CV-site web
cd CV-site web
touch index.html
touch style.css
Ensuite, copiez et collez le code HTML de la réponse de ChatGPT dans index.html. Copiez et collez le code CSS dans style.css.
Si vous ouvrez ensuite index.html dans le navigateur, vous devriez pouvoir voir le résultat suivant :
C'est déjà très bien - un site Web de CV personnel complet généré par ChatGPT sans avoir à écrire une seule ligne de code.
Voyons si nous pouvons aller plus loin et demander à ChatGPT d'apporter quelques modifications. Demandons d'inclure une photo à côté de la section "À propos de moi" et d'ajouter des icônes aux titres des différentes sections :
Encore une fois, ChatGPT vous fournit le code HTML et CSS complet. Il vous suffit de copier et coller à nouveau ce code dans index.html et style.css.
Voici le code HTML qui va dans index.html :
< html >
< head >
< title > Mon CV personnel </ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< header >
< h1 > Mon nom </ h1 >
< nav >
< ul >
< li > < a href ="#about" > < i class = "fa fa-user" > </ i > À propos de </ a > </ li >
< li > < a href = "#experience" > < i class = "fa fa-briefcase " > </ i > Expérience </ a > </ li >
< li > < a href = <ai=50>"#éducation" > < i class = "fa fa-graduation-cap" > </ i > Éducation </ a > </ li >
< li > < a href = "#skills" > < i class = "fa fa-code" > </ i > Compétences </ a > </ li >
< li > < a href = "#contact" > < i classe <ai=51>= "fa fa-enveloppe"> </ i > Contact </ a > </ li >
</ ul >
</ nav >
</ header >
< main >
< section id = "about" >
< img src = "ma-photo.jpg" alt = "Ma photo" >
< div >
< h2 > < i class = "fa fa-user" > </ i > À propos de moi</ h2 >
< p > Rédigez ici une brève description de vous-même et de vos objectifs de carrière.</ p >
</ div >
</ section >
< section id = "experience" >
< h2 > < i class = "fa fa-briefcase" > </ i > Expérience </ h2 >
< ul >
< li >
< h3 > Intitulé du poste </ h3 >
< p > Nom de l'entreprise, ville,État </ p >
< p > Plage de dates </ p >
< ul >
< li > Responsabilité 1 </ li >
< li > Responsabilité 2 </ li >
< li > Responsabilité 3 </ li >
</ ul >
</ li >
</ ul >
</ section >
< identifiant de section = "education" >
< h2 > < i class = "fa fa-graduation-cap" > </ i > Education </ h2 >
< ul >
< li >
< h3 > Nom du diplôme </ h3 >
< p > Nom de l'université , Ville,État </ p >
< p > Plage de dates </ p >
</ li >
</ ul >
</section >
< section id = "skills" >
< h2 > < i class = "fa fa-code" > </ i > Compétences </ h2 >
< ul >
< li > Compétence 1 </ li >
< li > Compétence 2 </ li >
< li > Compétence 3 </ li >
</ ul >
</ <ai=52>section >
<section id = "contact" >
< h2 > < i class = "fa fa-envelope" > </ i > Contactez-moi </ h2 >
< form >
< label for = "name" > Nom :</ label >
< input type = "text" id = "name" name = "name" >
< label for = "email" > E-mail :</ label >
< input type = "email" id = "email" name = "email" >
< label for = "message" > Message :</ label >
< textarea id = "message" name = "message" > </ textarea >
< input type = "submit" value = "Submit" >
</ form >
</ section >
</ principal >
</ corps >
</ html >
Et voici le code CSS qui va dans style.css :
body {
font-family : Arial, sans-serif;
marge : 0 ;
}
header {
background-color : #333 ;
couleur : #fff ;
rembourrage : 20px ;
}
header h1 {
font-size : 32px ;
marge : 0 ;
}
nav {
display : inline-block;
float : droite;
}
nav ul {
marge : 0 ;
rembourrage : 0 ;
}
nav li {
display : inline-block;
marge-gauche : 20px ;
}
nav a {
couleur : #fff ;
texte-décoration : aucun ;
}
nav a :hover {
color : #ccc ;
}
main {
largeur max : 800px ;
marge : 0 auto ;
rembourrage : 20px ;
}
rubrique {
marge-haut : 30px ;
}
section h2 {
font-size : 24px ;
marge : 0 ;
}
section ul {
marge : 10px 0 ;
}
section li {
margin-bottom : 10px ;
}
section h3 {
font-size : 18px ;
marge : 0 ;
}
section p {
marge : 0;
}
section img {
display : block;
float : droite;
marge-gauche : 20px ;
rayon de bordure : 50% ;
largeur : 200px ;
hauteur : 200px ;
}
form {
margin-top : 20px ;
}
label {
display : block;
marge-bas : 5px ;
}
entrée [type= "texte" ] ,
entrée [type= "email"] ,
zone de texte {
largeur : 100% ;
rembourrage : 10px ;
marge-bas : 10px ;
bordure : 1px solide #ccc ;
rayon de bordure : 4px ;
box-sizing : border-box;
}
input [type= "submit" ] {
background-color : #333 ;
couleur : #fff ;
bordure : aucune ;
rembourrage : 10px 20px ;
rayon de bordure : 4px ;
curseur : pointeur;
}
input [type= "submit" ] :hover {
background-color : #444 ;
}
.fa {
display : inline-block;
taille de police : 20px ;
marge droite : 5px ;
}
.fa-user :avant {
contenu : "\f007" ;
}
.fa-mallette :before {
content : "\f0b1" ;
}
.fa-graduation-cap :before {
content : "\f19d" ;
}
.fa-code :avant {
contenu : "\f121" ;
}
.fa-enveloppe :avant {
contenu : "\f0e0" ;
}
De plus, ChatGPT vous donne des instructions supplémentaires :
Notez que vous devrez fournir votre propre photo (dans la balise `img`) et la feuille de style Font Awesome (dans la section `head`) pour que ce code fonctionne correctement.
Ajoutons donc d'abord un fichier image au dossier du projet avec le nom de fichier my-photo.jpg.
Deuxièmement, nous devons nous assurer d'inclure la feuille de style Font Awesome dans le code. Demandons à nouveau à ChatGPT de nous fournir des instructions supplémentaires sur ce point :
Utilisons simplement l'option de lien CGN pour inclure la feuille de style Font Awesome. Copiez l'élément de lien correspondant de la réponse de ChatGPT et insérez-le dans la section head du fichier index.html.
Si nous vérifions à nouveau le résultat dans le navigateur, vous devriez pouvoir voir quelque chose de similaire à :
Utilisons simplement l'option de lien CGN pour inclure la feuille de style Font Awesome. Copiez l'élément de lien correspondant de la réponse de ChatGPT et insérez-le dans la section head du fichier index.html.
Si nous vérifions à nouveau le résultat dans le navigateur, vous devriez pouvoir voir quelque chose de similaire à :
Super! C'est un excellent site Web de CV personnel. La seule tâche qui reste est de remplir les détails des sections du CV.
Hébergement gratuit du site Web de CV
Une fois que le site Web de CV personnel est rempli avec le contenu respectif, il doit bien sûr être mis à disposition sur Internet. La grande chose est qu'il existe des options d'hébergement gratuites disponibles. Pour avoir un premier aperçu, demandons à ChatGPT de nous fournir des options d'hébergement gratuites :
Génial! Disons donc que nous aimerions continuer avec l'option 1 et héberger le site Web gratuitement sur les pages GitHub.
Encore une fois, nous pouvons simplement demander à ChatGPT de nous fournir des instructions détaillées pour l'option 1 (Pages GitHub) en tapant l'invite suivante :
Fournir des instructions pour l'option 1
ChatGPT nous donne ensuite un guide étape par étape clair et facile à suivre pour cette option d'hébergement :
1.Créez un compte GitHub si vous n'en avez pas déjà un. Allez sur https://github.com et créez un compte gratuit.
2. Créez un nouveau référentiel. Accédez à https://github.com/new et créez un nouveau référentiel avec un nom comme username.github.io, où usernameest votre nom d'utilisateur GitHub. Assurez-vous que le référentiel est défini sur "Public".
3. Clonez le référentiel sur votre ordinateur local. Ouvrez un terminal ou une invite de commande et exécutez la commande suivante, en la remplaçant usernamepar votre nom d'utilisateur GitHub :
git clone https://github.com/username/username.github.io.git
4. Copiez les fichiers de votre site Web dans le référentiel. Copiez tous les fichiers HTML, CSS, JavaScript et image de votre site Web dans le username.github.iodossier de votre ordinateur local.
5. Validez et envoyez les modifications à GitHub. Dans le terminal, accédez au username.github.iodossier et exécutez les commandes suivantes :
git add .
git commit - m "Commit initial"
git push origin main
Cela ajoutera, validera et transmettra toutes les modifications à votre référentiel GitHub.
6. Configurez les paramètres du référentiel pour les pages GitHub. Dans votre référentiel sur GitHub, accédez à l'onglet "Paramètres" et faites défiler jusqu'à la section "Pages GitHub". Sous "Source", sélectionnez la branche "principale" et cliquez sur "Enregistrer". Votre site Web devrait maintenant être en ligne sur https://username.github.io.
C'est ça! Votre site Web est maintenant hébergé sur les pages GitHub et est accessible au public. Vous pouvez apporter des modifications aux fichiers de votre site Web et les pousser vers GitHub, et GitHub Pages mettra automatiquement à jour votre site Web en direct.
Résumé
La création d'un site Web de CV personnel est un excellent moyen de mettre en valeur vos compétences et votre expérience à l'ère numérique d'aujourd'hui. Avec ChatGPT, vous pouvez créer un site Web d'aspect professionnel en seulement 5 minutes, même si vous n'avez aucune expérience en développement Web. L'hébergement de votre site Web sur les pages GitHub est également un excellent moyen de partager gratuitement votre travail avec des employeurs potentiels. Alors pourquoi ne pas essayer ? Avec ChatGPT, le processus n'a jamais été aussi simple.