Création d'un Portfolio avec Bootstrap

Je vais me créer un portfolio dont le code et le contenu vont être écrits par ChatGPT. J'espère que ChatGPT trouvera les bonnes formules pour me vendre et qu'il prendra pas un code trop dégueulasse parce qu'il en va quand même de ma réputation. Surtout que je vais lui demander une chose que jamais vous ne m'auriez pensé capable de demander vu ma position sur le sujet. Je vais lui demander de coder tout ça avec Bootstrap. Pourquoi ? Vous allez vous dire que je suis complètement fada, que j'ai perdu les pédales et que de me faire un portfolio de cette façon ça va tout sauf me mettre en avant. Et bien écoutez vous avez raison. Mais je me consolerai avec la fierté absolue et l'honneur de n'avoir qu'une seule parole. J'avais annoncé que si je perdais le challenge contre mon ami William, je devrais me créer un portfolio avec Bootstrap. Et bien à la fin de cette vidéo, vous me verrez mettre en ligne le site cursed-benjamincode.tv Et nous le ferons avec Hostinger qui ont accepté de sponsoriser cette vidéo loufoque alors Merci beaucoup à eux. Pour ceux qui ne l'ont jamais fait, ça sera intéressant de voir comment on met en ligne un site une fois qu'il est terminé sur votre ordinateur. Et vous trouverez dans la description un lien et un code promo qui vous permettront d'avoir 10% de réduction sur le site Hostinger pour tout ce qui concerne les hébergements. Allez, découvrons sans plus attendre ce que ChatGPT4 a dans le ventre et attendez-vous à être surpris, choqués et absolument pas déçus. Allez, on va commencer par lui demander le truc qui sera le plus pratique pour créer ce portfolio. Est-ce que tu connais Benjamin Code ? Vas-y, dis oui, dis oui, je t'en supplie. Oui, je connais Benjamin Code. Il est un influenceur et entrepreneur français qui est surtout connu pour sa chaîne YouTube Benjamin Code et son compte Instagram. Sur sa chaîne YouTube, il partage des conseils et des astuces liées à l'entrepreneuriat, la finance personnelle, l'investissement... Non, c'est pas vrai. Non, Benjamin Code est également l'auteur de plusieurs livres et a lancé diverses entreprises au fil des années. Euh, t'es sûr de toi ? Je m'excuse pour la confusion. Ah, il semble que j'ai fait une erreur dans ma réponse précédente. Benjamin Code est effectivement un développeur web spécialisé en développement front-end. Il partage ses connaissances et... compétences sur le développement web, notamment HTML, CSS, JavaScript, ainsi que sur des frameworks et bibliothèques populaires telles que React et Vue.js. Je suis absolument prêt à vous aider, Benjamin. N'hésitez pas à poser votre question ou à demander de l'aide sur n'importe quel sujet. Les choses sérieuses commencent. En fait, je vais avoir besoin de toi pour coder mon portfolio en HTML, CSS et en utilisant la technologie Bootstrap. En fait, je n'aime pas du tout Bootstrap, mais ça fera rire mes abonnés que mon portfolio soit fait avec. Alors allons-y. D'accord, je comprends. Le portefeuille de l'autre devra contenir les informations suivantes un héros banner qui prend toute la hauteur de l'écran avec un call to action pour aller voir mes vidéos youtube des blocs de texte décrivant qui est benjamin code et qui met en avant ces différentes qualités en fonction de ce que tu sais de lui on illustrera ses différents blocs de texte avec des images pour rendre le design un peu plus intéressant une section qui met en avant trois de mes meilleures vidéos il y aura une image de preview et le titre de la vidéo le tout sera des liens qui amèneront sur les vidéos youtube il faudra que certains éléments et des animations quand on passe la souris dessus Si tu peux trouver des animations originales, je serais content. Bah oui, quand même, vous me connaissez, j'aime bien les animations un peu stylées. Si tu utilises des images pour illustrer le contenu, il faudra que tu me donnes des promptes précis pour que je puisse faire générer par mid-journée toutes les images que tu voudras utiliser sur le site. Bah oui, tant qu'à faire un portfolio complètement généré par des IA, autant aussi générer les images par des IA. Ça va faire un truc tellement cursed les amis, j'ai très très peur d'ores et déjà. J'aimerais aussi qu'il y ait une navbar en sticky qui permette de passer d'une section à une autre en amenant le scroll à la bonne position de la section. Le footer devra contenir les infos vers mes réseaux sociaux, des icônes avec des liens devraient suffire. Pour que le site ait un peu de caractère, j'aimerais que tu choisisses deux polices sur Google Fonts. On va voir ce qu'il va choisir, on va voir s'il a du goût ou si c'est une énorme chèvre. Les amis, je vous propose qu'on envoie ça comme ça à ChatGPT et qu'on voit ce qu'il va nous créer. D'accord, voici une première version du portfolio en utilisant HTML, CSS et Bootstrap en fonction des informations que vous avez fournies. Vous pourrez modifier et personnaliser ce code selon vos besoins et préférences. On va faire du pair programming avec ChatGPT et on va voir si ce qu'il écrit est correct pour l'instant. Alors, il importe Bootstrap. jusque là c'est normal il importe des fontes de google il va prendre la roboto qui est une fonte super classique et voyons voir l'autre il a un peu plus de goût roboto et moncera voir ces deux fontes qui se ressemblent pas mal ça va pas faire des trucs très ouf niveau design mais c'est pas grave on va dire que c'est ok quand même Il met fonta aux hommes pour les icônes, ok. Il a mis un titre, portfolio de Benjamin Code. Il commence par la navbar comme je lui ai demandé, tac tac tac, fixe top, donc il y a le côté sticky avec ça j'imagine. Ok, donc il met mon logo qui s'appelle Benjamin Code. Ensuite qu'est-ce qu'il nous fait ? Bon ça c'est du bullshit de bootstrap, je sais pas du tout comment ça marche mais j'imagine que ça c'est la navbar avec des éléments qui se déplient etc. J'imagine que c'est pour le responsive qui fait un truc avec un collapse. Ça, ça va être un petit peu la surprise. Accueil, à propos, vidéo, alors ça sera les différentes sections. Ok, accueil, à propos et vidéo. On sait déjà à quelle sauce on va être mangé. Il commence à faire le héros banner dans une section. Niveau sémantique, en tout cas, c'est très stylé. On y met les navbars dans une nav, ensuite il fait des sections. Franchement, niveau du code, c'est clean as fuck pour l'instant. Il met Benjamin Code dans un H1 parce que c'est le gros titre de la page. Développeur front... et youtubeur il met le lien vers ma chaîne youtube alors si c'est vraiment le lien là il est trop fort qu'est ce qu'il a mis voir mes vidéos ok c'est le call to action il enchaîne avec la section about d'accord il met des images ça c'est ce truc que j'aurais à générer avec mid journée qui est benjamin code benjamin code est un développeur web français spécialisé en développement frontaine il partage ses connaissances et compétences html css javascript sur ses chaînes youtube et d'autres plateformes en ligne benjamin est également passionné par la création de contenu et la formation des autres développeurs à travers ces vidéos et tutoriels. On peut dire ok. Ah, il s'est arrêté parce qu'il a une limite de nombre de caractères quand il vous répond. Du coup, quand ça, ça arrive, il faut lui dire... J'ai été arrêté. En plus. Peux-tu reprendre ? Je m'excuse pour l'interruption, voici la suite du code pour le portfolio. Alors, mes vidéos instructives et engageantes. Merci Tchad, j'ai pété, tu fais plaisir. Ensuite, on a une section qui s'appelle qualité. Les qualités de Benjamin Code. Oh, qu'est-ce qu'il va me trouver, je suis tout excité. Qualité 1, créativité. Merci Tchad, merci beaucoup. Benjamin Code aborde les défis de développement avec créativité et ingéniosité, trouvant toujours des solutions innovantes pour les problèmes complexes. Tu me touches, tu me flattes ! Et voici le code CSS. Ah, il met du style ! Il fait ça en plusieurs fichiers. Merde, j'aurais dû lui préciser de tout mettre dans le même fichier, ça aurait été plus simple. Là, il me donne les promptes pour les images. Une image pour le héros Banner représentant Benjamin Code devant un ordinateur ou en train de filmer une vidéo. T'as recommandé... 1920, 1980, 1080 pixels, ok. Une image de Benjamin Code pour la section à propos, taille recommandée 300, 300. Vous pouvez également ajouter des animations ou des effets de survol personnalisés en utilisant CSS ou JavaScript. N'hésitez pas à personnaliser davantage de code pour correspondre à vos préférences et à votre identité de marque. Alors, je lui ai dit, je trouve que tu te reposes un peu trop sur moi, je t'avais demandé de créer toi-même des animations pour les hovers sur les images et les liens, et au final, tu n'as rien choisi toi-même, et tu me laisses tout choisir. Corrige ça s'il te plaît en éditant les parties du code impacté. Ne me régénère pas toute la page d'un coup, seulement les parties modifiées. Je te demanderai à la toute fin de notre conversation de régénérer l'entièreté de la page. Merci. Parce qu'en général, si vous lui demandez de modifier un truc, il te régénère tout tout tout. C'est un peu chiant, ça prend du temps pour rien. Alors là, on lui donne des petites consignes pour que ça soit plus efficace. Je m'excuse pour cela, mais j'espère oui. Voici les modifications pour ajouter des animations sur les images et les liens dans votre fichier CSS. Ah, là il commence à me faire plaisir. Les liens auront une traduction de couleurs et de textes. plus fluides lorsqu'ils sont survolés. Je sais pas ce que ça veut dire de texte plus fluide. Mais on verra. Ça veut peut-être dire quelque chose en robot. Alors maintenant les amis, on va faire un truc ensemble. On va générer les images qu'il m'a suggéré de faire. On va utiliser Midjourney pour ça. Et vous allez voir comment on s'y prend. Déjà, il faut aller sur Discord pour utiliser l'outil. Dans le channel Midjourney, on a toutes les anciennes générations que j'ai tentées. Et alors ce qu'on va faire, c'est qu'on va prendre une image que j'ai déjà uploadée. Par exemple, celle-là. On va faire... copier le lien. Donc je lui dis imagine, je lui passe le lien pour lui dire imagine ce mec en photo là et après je lui dis devant un ordinateur en train de filmer une vidéo et je lui dis l'aspect ratio 16 neuvième. Et alors là je sais pas vraiment à quelle sauce je vais être mangé mais j'ai hâte de voir. Ce que je vois n'a pas l'air terrible. Alors c'est le... Putain celle-là on dirait un mix de moi et de Thibaut Houdon, le youtuber de Dockstring. Celle-là c'est peut-être celle qui ressemble le plus. Attendez je vais demander à ma copine. Alors, mon amour, qui ressemble le plus à Benjamin ? Pensez à quand je dis à toi bonne nuit dans la salle, comme je dis. Bonne nuit, chérie. Et le premier ? Quel est le premier ? Ceux-là ? Ou celui-là ? Oh, celui-là ? Oui. Oh mon dieu. Oui celui-là. Et celui-là est plus mignon ? Je ne sais pas. La vraie réponse était celui-là ! Oh bien sûr ! Mais pour les 4 ? Oui pour les 4. Je n'aime pas aucun d'entre eux. Tu préfères celui-là ? Oui, le plus original. Alors celui-là ? Le premier. Ok. C'est le premier alors qu'il me ressemble le plus du coup je vais lui demander de me faire une version grande qualité du premier. Vas-y. Upgrade the first. Imagine Benjamin Code avec un grand sourire et d'immenses boucles d'oreilles. Oh mon dieu. Bah écoutez, on va prendre celle-là. On va lui demander d'upscale le 3. Ok. Trois images représentant chacune des qualités de Benjamin Code. Ça, je vais faire un truc que j'aime bien faire d'habitude. Représente, dans le style d'une illustration de carte Magic the Gathering, le concept de la créativité. Voilà, c'est chaud ce que je lui demande. Et alors, créativité, bon bah, voilà, on prendra celle-là. Hop, je fais un petit screenshot. Ok donc on a nos images, bon bah on va lui demander de tout rassembler en un seul fichier. Bien sûr, voici le code complet avec le CSS intégré dans le fichier HTML. Allez on va le lancer dans Chrome et... C'est parti ! Alors, alors alors alors on se calme. Benjamin Code, développeur Fontaine, voir mes vidéos. Ça c'est pas du tout lisible. T'assures pas trop de chat GPT. La navbar elle est bien sticky, tout est là et est-ce qu'on a bien cet élément de... Oui on a bien ce scroll ! Oh qui est Benjamin Code avec cette image absolument dégoûtante ! Benjamin Codd est un développeur front-end, là on sait ce que ça dit. Est-ce qu'on a les over-effects ? Ils sont là, ils sont pas du plus bel effet, ils sont même plutôt dégueulasses. Mais il y a de l'animation. Créativité, Benjamin Codd aborde les défis du développement web. Ok, les vidéos sont là, vous ne devriez pas utiliser Bootstrap. Et là, mes différents réseaux sociaux dans le footer. Écoutez les amis, à part ce héros banner qui est un peu éclaté parce que pas très lisible, force est de constater que, juste en ayant papoté avec ChatGPT, Il a créé le contenu de mon site avec une structure de site qui fait à peu près sens. Il a fait le design, il a codé tout ça. C'est un premier jet qui est quand même assez choquant, assez stylé. Tout fonctionne, ça, ça marche bien. Est-ce qu'il a prévu un responsive d'ailleurs ? Eh oui, il a prévu un petit truc en mode responsive. Ça, c'est parce que c'est bootstrap, avec tous ces outils de collapse et tout le bordel là. Alors en l'état, le site est... un petit peu dégueu, il y a des petits problèmes à droite à gauche. On va tenter de faire à ChatGPT une série de corrections. On va voir comment il les comprend et les solutions qu'il propose pour gérer ces corrections. Je lui ai dit, je suis assez impressionné par le résultat, même si je trouve que tu ne t'es pas foulé niveau police choisi. Les deux se ressemblent beaucoup. De plus, vu que l'image du héros banner est sombre, on ne lit pas le texte par-dessus. Pourrais-tu faire quelque chose pour le rendre plus lisible ? Aussi, je trouve que ça ne respire pas assez, les textes sont trop... coller aux images c'est pas terrible tu peux ajouter un peu d'espace pour que la maquette respire un peu plus et il me répond je vous présente mes excuses pour ces problèmes voici les modifications pour améliorer la lisibilité du texte du euro banner et espacer davantage les éléments bon il m'a fourni trois trucs pour régler les trois problèmes dont je lui ai parlé et c'est incroyable de voir à quel point il comprend la description des problèmes que je lui donne et les solutions proposées sur le papier en tout cas semble fonctionner donc je les appliquer rapidement là donc ça c'était avant on s'en rappelle avec des trucs tout collé là trop collé et puis les fontes qui n'étaient pas top le dégradé ici c'est nul ça leur encore moins lisible et là ouais ça respire un peu mieux déjà là on se retrouve un petit peu plus je trouve bon on va juste l'aider un petit peu on va lui passer le texte en blanc voilà déjà on lit un peu mieux ce qui se passe bon je trouve ça vraiment pas mal il s'est juste planté sur le héros banner la couleur il a pas trop capté mais toutes les solutions qu'il a proposées en tout cas étaient pertinentes et fonctionnent plutôt bien. Le site il est mieux actuellement, je pourrais presque l'envoyer comme ça en ligne, mais j'ai envie de faire un dernier test, vraiment pousser ChatGPT dans ses retranchements, je vais lui demander de me créer un hero banner de Creative Coder, à savoir qu'on va essayer de mettre une sorte de effet 3JS, peut-être que je vais lui demander de modifier un petit peu cette image, et que avec la souris il se passe un truc sympa avec des shaders qui font évoluer un petit peu l'image. Aucune idée de ce qu'il va me proposer mais trop trop hâte de tester quelque chose et de voir ce que ça va donner. Bon par rapport à ce projet je ne vais pas vous mentir, j'ai passé un temps infini dessus, quasiment tout l'après-midi, ça ne fonctionne pas. Tchad GPT échoue en boucle, regardez toute cette discussion là. Il n'arrive pas à reproduire un comportement que je qualifierais de background size cover. En 3JS il n'arrive pas à faire une sorte de background size cover. Du coup j'ai cette espèce de comportement dégueulasse. Et c'était le point de départ de tout ce projet. En fait après je voulais faire appliquer des shaders assez cool avec le mouvement de la souris. Et ça, il y arrive plutôt pas mal. J'ai réussi à lui faire faire des trucs un petit peu stylés. Là je vous montre des images de ce que j'ai réussi à lui faire faire. Le problème c'est que l'image avait toujours ce ratio déformé tout pourri tout dégueulasse. Et ça a un peu tué le projet dans l'œuf quoi. C'est dommage j'aurais trop aimé vous montrer la partie où il gère de ouf sur les shaders parce qu'il est vraiment bon pour ça. Mais là il faut se rendre à l'évidence, il a échoué. Il a échoué. Et de ce fait, mon portfolio maudit restera nul à chier et moche, comme quoi c'était la destinée. Maintenant qu'on a notre site, qui est pas si cursed qu'on le pensait, c'est pas le site que je me serais fait moi-même, mais il est moins dégueulasse que prévu, on va le mettre en ligne via Hostinger. Donc je vais vous montrer comment faire. Alors il s'agit d'aller dans la description de la vidéo et de cliquer sur le lien hostinger.fr slash benjamincode. Alors via mon URL, vous arrivez directement sur la page Hostinger avec une énorme promo dont je ne serais que trop vous conseiller de profiter. Cette offre vous offre un hébergement avec un trafic illimité, sans site web possible, c'est trop trop cool. Avec un seul hébergement, du coup, vous pouvez mettre absolument tout ce que vous voulez, il n'y a aucun problème, je pense. pas connaître quelqu'un qui a plus de 100 sites à son actif. Tout un tas d'options assez intéressantes. Donc, vas-y, ça nous plaît, on commande. Ça nous amène, du coup, sur le panier. Il y a 7 offres, là. C'est celles qu'il faut choisir parce que c'est super chouette. Est-ce que vous avez un code promo ? Oui, vous en avez un ! Le code promo s'appelle... j'aime un code et comme si c'était pas déjà assez bas vous appliquez le code et vous avez encore moins 10% dessus donc c'est trop cool vous avez une giga offre vous rentrez votre carte tout bordel ça je vais pas le faire en live pour pas que vous me voliez mes informations vous allez recevoir un mail qui va vous dire vous avez enfin un compte et c'est vrai vous allez recevoir vos informations vous vous connecter et en théorie vous allez retrouver votre hébergement qui sera ici. Moi, c'est le Premium Web Hosting. J'ai déjà un site dessus qui s'appelle Choice of Dev. Vous, vous n'aurez pas de site quand vous arriverez, mais vous aurez un domaine offert. Donc, c'est super cool. Moi, pour ce site, ce que je vais faire, je vais obtenir un nouveau nom de domaine. Je vais l'appeler curse-benjamin-code.fr. Il est disponible. Je l'achète. Donc voilà, votre nom de domaine a bien été relié à votre hébergement. Maintenant, ce qui va nous intéresser, c'est d'y envoyer notre site. Donc, vous cliquez soit sur le gestionnaire de fichiers ici, qui va vous amener sur un gestionnaire de fichiers sur lequel vous pouvez envoyer votre site là-dedans, dans public.html. Ou alors vous pouvez aller directement dans fichiers, ici, compte FTP. Et là vous avez toutes les informations pour vous connecter en FTP à votre site. Nous on va utiliser Filzilla. Vous allez prendre toutes les informations, nom de FTP vous le mettez là. Ensuite nom d'utilisateur FTP vous le mettez là. Le password vous le reportez ici, vous vous connectez. Donc boum, vous êtes connecté, vous arrivez là, vous allez dans public HTML et là tout simplement, vous glissez déposer votre site ici. Et donc si vous vous retrouvez sur votre tableau de bord, vous cliquez ici et voilà, votre site est en ligne. Et quel site mes amis, quel site, qu'est-ce que je suis heureux. Maintenant ça ne me donne qu'un seul objectif, c'est de me grouiller à me faire mon vrai portfolio pour remplacer cette horreur.

Je vais lui demander de coder tout ça avec Bootstrap. Pourquoi ? Vous allez vous dire que je suis complètement fada, que j'ai perdu les pédales et que de me faire un portfolio de cette façon ça va tout sauf me mettre en avant. Et bien écoutez vous avez raison.

Mais je me consolerai avec la fierté absolue et l'honneur de n'avoir qu'une seule parole. J'avais annoncé que si je perdais le challenge contre mon ami William, je devrais me créer un portfolio avec Bootstrap. Et bien à la fin de cette vidéo, vous me verrez mettre en ligne le site cursed-benjamincode.tv Et nous le ferons avec Hostinger qui ont accepté de sponsoriser cette vidéo loufoque alors Merci beaucoup à eux.

Pour ceux qui ne l'ont jamais fait, ça sera intéressant de voir comment on met en ligne un site une fois qu'il est terminé sur votre ordinateur. Et vous trouverez dans la description un lien et un code promo qui vous permettront d'avoir 10% de réduction sur le site Hostinger pour tout ce qui concerne les hébergements. Allez, découvrons sans plus attendre ce que ChatGPT4 a dans le ventre et attendez-vous à être surpris, choqués et absolument pas déçus.

Allez, on va commencer par lui demander le truc qui sera le plus pratique pour créer ce portfolio. Est-ce que tu connais Benjamin Code ? Vas-y, dis oui, dis oui, je t'en supplie.

Oui, je connais Benjamin Code. Il est un influenceur et entrepreneur français qui est surtout connu pour sa chaîne YouTube Benjamin Code et son compte Instagram. Sur sa chaîne YouTube, il partage des conseils et des astuces liées à l'entrepreneuriat, la finance personnelle, l'investissement... Non, c'est pas vrai. Non, Benjamin Code est également l'auteur de plusieurs livres et a lancé diverses entreprises au fil des années.

Euh, t'es sûr de toi ? Je m'excuse pour la confusion. Ah, il semble que j'ai fait une erreur dans ma réponse précédente.

Benjamin Code est effectivement un développeur web spécialisé en développement front-end. Il partage ses connaissances et... compétences sur le développement web, notamment HTML, CSS, JavaScript, ainsi que sur des frameworks et bibliothèques populaires telles que React et Vue.js. Je suis absolument prêt à vous aider, Benjamin.

N'hésitez pas à poser votre question ou à demander de l'aide sur n'importe quel sujet. Les choses sérieuses commencent. En fait, je vais avoir besoin de toi pour coder mon portfolio en HTML, CSS et en utilisant la technologie Bootstrap. En fait, je n'aime pas du tout Bootstrap, mais ça fera rire mes abonnés que mon portfolio soit fait avec.

Alors allons-y. D'accord, je comprends. Le portefeuille de l'autre devra contenir les informations suivantes un héros banner qui prend toute la hauteur de l'écran avec un call to action pour aller voir mes vidéos youtube des blocs de texte décrivant qui est benjamin code et qui met en avant ces différentes qualités en fonction de ce que tu sais de lui on illustrera ses différents blocs de texte avec des images pour rendre le design un peu plus intéressant une section qui met en avant trois de mes meilleures vidéos il y aura une image de preview et le titre de la vidéo le tout sera des liens qui amèneront sur les vidéos youtube il faudra que certains éléments et des animations quand on passe la souris dessus Si tu peux trouver des animations originales, je serais content.

Bah oui, quand même, vous me connaissez, j'aime bien les animations un peu stylées. Si tu utilises des images pour illustrer le contenu, il faudra que tu me donnes des promptes précis pour que je puisse faire générer par mid-journée toutes les images que tu voudras utiliser sur le site. Bah oui, tant qu'à faire un portfolio complètement généré par des IA, autant aussi générer les images par des IA.

Ça va faire un truc tellement cursed les amis, j'ai très très peur d'ores et déjà. J'aimerais aussi qu'il y ait une navbar en sticky qui permette de passer d'une section à une autre en amenant le scroll à la bonne position de la section. Le footer devra contenir les infos vers mes réseaux sociaux, des icônes avec des liens devraient suffire.

Pour que le site ait un peu de caractère, j'aimerais que tu choisisses deux polices sur Google Fonts. On va voir ce qu'il va choisir, on va voir s'il a du goût ou si c'est une énorme chèvre. Les amis, je vous propose qu'on envoie ça comme ça à ChatGPT et qu'on voit ce qu'il va nous créer. D'accord, voici une première version du portfolio en utilisant HTML, CSS et Bootstrap en fonction des informations que vous avez fournies. Vous pourrez modifier et personnaliser ce code selon vos besoins et préférences.

On va faire du pair programming avec ChatGPT et on va voir si ce qu'il écrit est correct pour l'instant. Alors, il importe Bootstrap. jusque là c'est normal il importe des fontes de google il va prendre la roboto qui est une fonte super classique et voyons voir l'autre il a un peu plus de goût roboto et moncera voir ces deux fontes qui se ressemblent pas mal ça va pas faire des trucs très ouf niveau design mais c'est pas grave on va dire que c'est ok quand même Il met fonta aux hommes pour les icônes, ok. Il a mis un titre, portfolio de Benjamin Code.

Il commence par la navbar comme je lui ai demandé, tac tac tac, fixe top, donc il y a le côté sticky avec ça j'imagine. Ok, donc il met mon logo qui s'appelle Benjamin Code. Ensuite qu'est-ce qu'il nous fait ?

Bon ça c'est du bullshit de bootstrap, je sais pas du tout comment ça marche mais j'imagine que ça c'est la navbar avec des éléments qui se déplient etc. J'imagine que c'est pour le responsive qui fait un truc avec un collapse. Ça, ça va être un petit peu la surprise.

Accueil, à propos, vidéo, alors ça sera les différentes sections. Ok, accueil, à propos et vidéo. On sait déjà à quelle sauce on va être mangé. Il commence à faire le héros banner dans une section.

Niveau sémantique, en tout cas, c'est très stylé. On y met les navbars dans une nav, ensuite il fait des sections. Franchement, niveau du code, c'est clean as fuck pour l'instant. Il met Benjamin Code dans un H1 parce que c'est le gros titre de la page.

Développeur front... et youtubeur il met le lien vers ma chaîne youtube alors si c'est vraiment le lien là il est trop fort qu'est ce qu'il a mis voir mes vidéos ok c'est le call to action il enchaîne avec la section about d'accord il met des images ça c'est ce truc que j'aurais à générer avec mid journée qui est benjamin code benjamin code est un développeur web français spécialisé en développement frontaine il partage ses connaissances et compétences html css javascript sur ses chaînes youtube et d'autres plateformes en ligne benjamin est également passionné par la création de contenu et la formation des autres développeurs à travers ces vidéos et tutoriels. On peut dire ok.

Ah, il s'est arrêté parce qu'il a une limite de nombre de caractères quand il vous répond. Du coup, quand ça, ça arrive, il faut lui dire... J'ai été arrêté. En plus. Peux-tu reprendre ?

Je m'excuse pour l'interruption, voici la suite du code pour le portfolio. Alors, mes vidéos instructives et engageantes. Merci Tchad, j'ai pété, tu fais plaisir.

Ensuite, on a une section qui s'appelle qualité. Les qualités de Benjamin Code. Oh, qu'est-ce qu'il va me trouver, je suis tout excité. Qualité 1, créativité.

Merci Tchad, merci beaucoup. Benjamin Code aborde les défis de développement avec créativité et ingéniosité, trouvant toujours des solutions innovantes pour les problèmes complexes. Tu me touches, tu me flattes ! Et voici le code CSS. Ah, il met du style !

Il fait ça en plusieurs fichiers. Merde, j'aurais dû lui préciser de tout mettre dans le même fichier, ça aurait été plus simple. Là, il me donne les promptes pour les images. Une image pour le héros Banner représentant Benjamin Code devant un ordinateur ou en train de filmer une vidéo.

T'as recommandé... 1920, 1980, 1080 pixels, ok. Une image de Benjamin Code pour la section à propos, taille recommandée 300, 300. Vous pouvez également ajouter des animations ou des effets de survol personnalisés en utilisant CSS ou JavaScript.

N'hésitez pas à personnaliser davantage de code pour correspondre à vos préférences et à votre identité de marque. Alors, je lui ai dit, je trouve que tu te reposes un peu trop sur moi, je t'avais demandé de créer toi-même des animations pour les hovers sur les images et les liens, et au final, tu n'as rien choisi toi-même, et tu me laisses tout choisir. Corrige ça s'il te plaît en éditant les parties du code impacté. Ne me régénère pas toute la page d'un coup, seulement les parties modifiées. Je te demanderai à la toute fin de notre conversation de régénérer l'entièreté de la page.

Merci. Parce qu'en général, si vous lui demandez de modifier un truc, il te régénère tout tout tout. C'est un peu chiant, ça prend du temps pour rien.

Alors là, on lui donne des petites consignes pour que ça soit plus efficace. Je m'excuse pour cela, mais j'espère oui. Voici les modifications pour ajouter des animations sur les images et les liens dans votre fichier CSS. Ah, là il commence à me faire plaisir. Les liens auront une traduction de couleurs et de textes.

plus fluides lorsqu'ils sont survolés. Je sais pas ce que ça veut dire de texte plus fluide. Mais on verra. Ça veut peut-être dire quelque chose en robot.

Alors maintenant les amis, on va faire un truc ensemble. On va générer les images qu'il m'a suggéré de faire. On va utiliser Midjourney pour ça.

Et vous allez voir comment on s'y prend. Déjà, il faut aller sur Discord pour utiliser l'outil. Dans le channel Midjourney, on a toutes les anciennes générations que j'ai tentées.

Et alors ce qu'on va faire, c'est qu'on va prendre une image que j'ai déjà uploadée. Par exemple, celle-là. On va faire...

copier le lien. Donc je lui dis imagine, je lui passe le lien pour lui dire imagine ce mec en photo là et après je lui dis devant un ordinateur en train de filmer une vidéo et je lui dis l'aspect ratio 16 neuvième. Et alors là je sais pas vraiment à quelle sauce je vais être mangé mais j'ai hâte de voir. Ce que je vois n'a pas l'air terrible.

Alors c'est le... Putain celle-là on dirait un mix de moi et de Thibaut Houdon, le youtuber de Dockstring. Celle-là c'est peut-être celle qui ressemble le plus. Attendez je vais demander à ma copine. Alors, mon amour, qui ressemble le plus à Benjamin ?

Pensez à quand je dis à toi bonne nuit dans la salle, comme je dis. Bonne nuit, chérie. Et le premier ?

Quel est le premier ? Ceux-là ? Ou celui-là ?

Oh, celui-là ? Oui. Oh mon dieu. Oui celui-là.

Et celui-là est plus mignon ? Je ne sais pas. La vraie réponse était celui-là !

Oh bien sûr ! Mais pour les 4 ? Oui pour les 4. Je n'aime pas aucun d'entre eux.

Tu préfères celui-là ? Oui, le plus original. Alors celui-là ? Le premier.

Ok. C'est le premier alors qu'il me ressemble le plus du coup je vais lui demander de me faire une version grande qualité du premier. Vas-y.

Upgrade the first. Imagine Benjamin Code avec un grand sourire et d'immenses boucles d'oreilles. Oh mon dieu.

Bah écoutez, on va prendre celle-là. On va lui demander d'upscale le 3. Ok. Trois images représentant chacune des qualités de Benjamin Code.

Ça, je vais faire un truc que j'aime bien faire d'habitude. Représente, dans le style d'une illustration de carte Magic the Gathering, le concept de la créativité. Voilà, c'est chaud ce que je lui demande. Et alors, créativité, bon bah, voilà, on prendra celle-là. Hop, je fais un petit screenshot.

Ok donc on a nos images, bon bah on va lui demander de tout rassembler en un seul fichier. Bien sûr, voici le code complet avec le CSS intégré dans le fichier HTML. Allez on va le lancer dans Chrome et...

C'est parti ! Alors, alors alors alors on se calme. Benjamin Code, développeur Fontaine, voir mes vidéos. Ça c'est pas du tout lisible. T'assures pas trop de chat GPT.

La navbar elle est bien sticky, tout est là et est-ce qu'on a bien cet élément de... Oui on a bien ce scroll ! Oh qui est Benjamin Code avec cette image absolument dégoûtante ! Benjamin Codd est un développeur front-end, là on sait ce que ça dit. Est-ce qu'on a les over-effects ?

Ils sont là, ils sont pas du plus bel effet, ils sont même plutôt dégueulasses. Mais il y a de l'animation. Créativité, Benjamin Codd aborde les défis du développement web. Ok, les vidéos sont là, vous ne devriez pas utiliser Bootstrap. Et là, mes différents réseaux sociaux dans le footer.

Écoutez les amis, à part ce héros banner qui est un peu éclaté parce que pas très lisible, force est de constater que, juste en ayant papoté avec ChatGPT, Il a créé le contenu de mon site avec une structure de site qui fait à peu près sens. Il a fait le design, il a codé tout ça. C'est un premier jet qui est quand même assez choquant, assez stylé. Tout fonctionne, ça, ça marche bien.

Est-ce qu'il a prévu un responsive d'ailleurs ? Eh oui, il a prévu un petit truc en mode responsive. Ça, c'est parce que c'est bootstrap, avec tous ces outils de collapse et tout le bordel là. Alors en l'état, le site est... un petit peu dégueu, il y a des petits problèmes à droite à gauche.

On va tenter de faire à ChatGPT une série de corrections. On va voir comment il les comprend et les solutions qu'il propose pour gérer ces corrections. Je lui ai dit, je suis assez impressionné par le résultat, même si je trouve que tu ne t'es pas foulé niveau police choisi.

Les deux se ressemblent beaucoup. De plus, vu que l'image du héros banner est sombre, on ne lit pas le texte par-dessus. Pourrais-tu faire quelque chose pour le rendre plus lisible ? Aussi, je trouve que ça ne respire pas assez, les textes sont trop... coller aux images c'est pas terrible tu peux ajouter un peu d'espace pour que la maquette respire un peu plus et il me répond je vous présente mes excuses pour ces problèmes voici les modifications pour améliorer la lisibilité du texte du euro banner et espacer davantage les éléments bon il m'a fourni trois trucs pour régler les trois problèmes dont je lui ai parlé et c'est incroyable de voir à quel point il comprend la description des problèmes que je lui donne et les solutions proposées sur le papier en tout cas semble fonctionner donc je les appliquer rapidement là donc ça c'était avant on s'en rappelle avec des trucs tout collé là trop collé et puis les fontes qui n'étaient pas top le dégradé ici c'est nul ça leur encore moins lisible et là ouais ça respire un peu mieux déjà là on se retrouve un petit peu plus je trouve bon on va juste l'aider un petit peu on va lui passer le texte en blanc voilà déjà on lit un peu mieux ce qui se passe bon je trouve ça vraiment pas mal il s'est juste planté sur le héros banner la couleur il a pas trop capté mais toutes les solutions qu'il a proposées en tout cas étaient pertinentes et fonctionnent plutôt bien.

Le site il est mieux actuellement, je pourrais presque l'envoyer comme ça en ligne, mais j'ai envie de faire un dernier test, vraiment pousser ChatGPT dans ses retranchements, je vais lui demander de me créer un hero banner de Creative Coder, à savoir qu'on va essayer de mettre une sorte de effet 3JS, peut-être que je vais lui demander de modifier un petit peu cette image, et que avec la souris il se passe un truc sympa avec des shaders qui font évoluer un petit peu l'image. Aucune idée de ce qu'il va me proposer mais trop trop hâte de tester quelque chose et de voir ce que ça va donner. Bon par rapport à ce projet je ne vais pas vous mentir, j'ai passé un temps infini dessus, quasiment tout l'après-midi, ça ne fonctionne pas. Tchad GPT échoue en boucle, regardez toute cette discussion là. Il n'arrive pas à reproduire un comportement que je qualifierais de background size cover.

En 3JS il n'arrive pas à faire une sorte de background size cover. Du coup j'ai cette espèce de comportement dégueulasse. Et c'était le point de départ de tout ce projet. En fait après je voulais faire appliquer des shaders assez cool avec le mouvement de la souris.

Et ça, il y arrive plutôt pas mal. J'ai réussi à lui faire faire des trucs un petit peu stylés. Là je vous montre des images de ce que j'ai réussi à lui faire faire.

Le problème c'est que l'image avait toujours ce ratio déformé tout pourri tout dégueulasse. Et ça a un peu tué le projet dans l'œuf quoi. C'est dommage j'aurais trop aimé vous montrer la partie où il gère de ouf sur les shaders parce qu'il est vraiment bon pour ça.

Mais là il faut se rendre à l'évidence, il a échoué. Il a échoué. Et de ce fait, mon portfolio maudit restera nul à chier et moche, comme quoi c'était la destinée.

Maintenant qu'on a notre site, qui est pas si cursed qu'on le pensait, c'est pas le site que je me serais fait moi-même, mais il est moins dégueulasse que prévu, on va le mettre en ligne via Hostinger. Donc je vais vous montrer comment faire. Alors il s'agit d'aller dans la description de la vidéo et de cliquer sur le lien hostinger.fr slash benjamincode. Alors via mon URL, vous arrivez directement sur la page Hostinger avec une énorme promo dont je ne serais que trop vous conseiller de profiter.

Cette offre vous offre un hébergement avec un trafic illimité, sans site web possible, c'est trop trop cool. Avec un seul hébergement, du coup, vous pouvez mettre absolument tout ce que vous voulez, il n'y a aucun problème, je pense. pas connaître quelqu'un qui a plus de 100 sites à son actif.

Tout un tas d'options assez intéressantes. Donc, vas-y, ça nous plaît, on commande. Ça nous amène, du coup, sur le panier.

Il y a 7 offres, là. C'est celles qu'il faut choisir parce que c'est super chouette. Est-ce que vous avez un code promo ?

Oui, vous en avez un ! Le code promo s'appelle... j'aime un code et comme si c'était pas déjà assez bas vous appliquez le code et vous avez encore moins 10% dessus donc c'est trop cool vous avez une giga offre vous rentrez votre carte tout bordel ça je vais pas le faire en live pour pas que vous me voliez mes informations vous allez recevoir un mail qui va vous dire vous avez enfin un compte et c'est vrai vous allez recevoir vos informations vous vous connecter et en théorie vous allez retrouver votre hébergement qui sera ici.

Moi, c'est le Premium Web Hosting. J'ai déjà un site dessus qui s'appelle Choice of Dev. Vous, vous n'aurez pas de site quand vous arriverez, mais vous aurez un domaine offert. Donc, c'est super cool.

Moi, pour ce site, ce que je vais faire, je vais obtenir un nouveau nom de domaine. Je vais l'appeler curse-benjamin-code.fr. Il est disponible. Je l'achète. Donc voilà, votre nom de domaine a bien été relié à votre hébergement.

Maintenant, ce qui va nous intéresser, c'est d'y envoyer notre site. Donc, vous cliquez soit sur le gestionnaire de fichiers ici, qui va vous amener sur un gestionnaire de fichiers sur lequel vous pouvez envoyer votre site là-dedans, dans public.html. Ou alors vous pouvez aller directement dans fichiers, ici, compte FTP. Et là vous avez toutes les informations pour vous connecter en FTP à votre site. Nous on va utiliser Filzilla.

Vous allez prendre toutes les informations, nom de FTP vous le mettez là. Ensuite nom d'utilisateur FTP vous le mettez là. Le password vous le reportez ici, vous vous connectez. Donc boum, vous êtes connecté, vous arrivez là, vous allez dans public HTML et là tout simplement, vous glissez déposer votre site ici.

Et donc si vous vous retrouvez sur votre tableau de bord, vous cliquez ici et voilà, votre site est en ligne. Et quel site mes amis, quel site, qu'est-ce que je suis heureux. Maintenant ça ne me donne qu'un seul objectif, c'est de me grouiller à me faire mon vrai portfolio pour remplacer cette horreur.

Transcript for:Création d'un Portfolio avec Bootstrap

Transcript for:
Création d'un Portfolio avec Bootstrap