💻

Création d'un Portfolio avec Bootstrap

Nov 2, 2024

Création d'un Portfolio avec ChatGPT et Bootstrap

Contexte

  • Objectif : Créer un portfolio avec ChatGPT en utilisant Bootstrap suite à un challenge perdu contre un ami.
  • But : Rire des abonnés et rester fidèle à sa parole.
  • Sponsor : Hostinger, offert une réduction de 10% pour les hébergements.

Demande à ChatGPT

  • Créer un portfolio en HTML, CSS, Bootstrap.
  • Contenu requis :
    • Héros Banner : Pleine hauteur, call to action vers YouTube.
    • Texte : Décrire Benjamin Code avec des images illustratives.
    • Section Vidéos : Trois meilleures vidéos avec images et titres.
    • Navbar : Sticky pour naviguer entre sections.
    • Footer : Liens vers réseaux sociaux.
    • Choix de polices sur Google Fonts (Roboto et Monserrat choisis).

Développement du Site

  • Code initial :
    • Importation de Bootstrap et Google Fonts.
    • Création de la navbar sticky.
    • Section Héros avec un appel à l'action "Voir mes vidéos".
    • Section "À propos" et "Qualités" avec animations de survol.
    • CSS séparé (souhait non respecté), instructions pour images avec Midjourney.
  • Modifications demandées :
    • Ajout de animations sur les images et liens.
    • Amélioration de la lisibilité du texte sous le héros banner.

Utilisation de Midjourney

  • Génération d'images pour le site via Discord.
  • Critique des images par comparaison avec une photo existante.

Problèmes rencontrés

  • Le héros banner était peu lisible, texte noir sur fond sombre.
  • Espacement insuffisant entre textes et images.
  • Solution partielle sur l'ajout d'un effet 3JS, problème de ratio non résolu.

Mise en ligne avec Hostinger

  • Utilisé pour héberger le site.
  • Offre d'hébergement avec trafic illimité.
  • Processus expliqué :
    • Achat et liaison du nom de domaine.
    • Utilisation de Filezilla pour transférer les fichiers.
  • Site accessible en ligne avec le nom de domaine choisi.

Conclusion

  • Portfolio créé avec une structure basique mais fonctionnelle.
  • Besoin d'améliorations esthétiques et fonctionnalités supplémentaires.
  • Objectif futur de créer un portfolio plus personnel et professionnel.

Full transcript