Créer votre site Web de portefeuille avec ChatGPT : un tutoriel étape

Comment créer un site Web portfolio en utilisant ChatGPT

ChatGPT est le sujet d'IA le plus en vogue ces dernières semaines ; tout le monde partage des conversations à ce sujet ainsi que des idées concernant sa capacité à écrire du code. Bien que nous ne nous concentrerons pas sur la génération de code, ce tutoriel vous guidera étape par étape dans la création d'un site Web portfolio en utilisant ChatGPT, y compris les technologies nécessaires telles que HTML et Bootstrap.

Étape 1 : Configuration de l'ossature HTML

Nous commençons par demander à ChatGPT de créer une structure HTML de base incluant Bootstrap pour un design réactif. Pour garantir son exactitude, nous allons valider la réponse :

 <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Doe - Utilisatrice débutante d'IA</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
      /* Styles pour les sections */
      .full-height {
        height: 100vh;
      }
    </style>
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#home">Portfolio</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#about">À propos</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
    </div>
  </nav>

  <section id="home" class="full-height">
    <div class="container text-center">
      <h1>Bienvenue sur mon portfolio</h1>
      <img src="https://picsum.photos/seed/mountains/800/600" alt="Image de montagne" class="img-fluid">
    </div>
  </section>

  <section id="about" class="full-height">
    <div class="container text-center">
      <h2>À propos de moi</h2>
      <p>J'aime les sports de plein air tels que l'escalade et j'ai une passion pour la programmation. J'ai commencé ma carrière en tant qu'ingénieur qualité dans l'industrie automobile, passant à la programmation à travers des projets d'automatisation et de microcontrôleurs. Je suis arrivé en Pologne il y a 7 ans et j'ai embrassé le développement web au cours des 4 dernières années, me spécialisant en HTML et JavaScript. Actuellement, je travaille en tant que développeuse Full Stack.</p>
    </div>
  </section>

  <section id="contact" class="full-height">
    <div class="container text-center">
      <h2>Contactez-moi</h2>
      <form>
        <div class="form-group">
          <label for="name">Nom</label>
          <input type="text" class="form-control" id="name" required>
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" class="form-control" id="email" required>
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea class="form-control" id="message" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Envoyer le message</button>
      </form>
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Étape 2 : Travailler avec ChatGPT

Pour le titre de votre site Web portfolio, vous pourriez utiliser quelque chose de personnel et d'indicatif de votre statut, tel que "Jane Doe - Utilisatrice débutante d'IA".

Étape 3 : Création du contenu

Maintenant, rédigeons une introduction engageante :

"Bienvenue ! Je suis Jane Doe, une passionnée débutante dans le monde de l'intelligence artificielle et de la programmation. Je vous invite à explorer mon portfolio alors que je me lance dans ce voyage passionnant !"

Ajouter des sections

Nous devons diviser le site Web en sections fonctionnelles :

Accueil
À propos
Contact

Mettre en avant un arrière-plan époustouflant

Terminons par l'ajout d'un arrière-plan dégradé attrayant :

body {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Résultat final

Découvrez le produit final :

Étonnant, n'est-ce pas ? Bien que ChatGPT puisse aider considérablement à simplifier le processus, il y a toujours de la place pour votre propre créativité et ajustements !

Créer votre site Web de portefeuille avec ChatGPT : un tutoriel étape par étape