Article original : How to Build a Portfolio Website Using Figma and AI Tools – A Guide for Developers
Depuis que mon article sur Comment devenir un développeur Full Stack et obtenir un emploi en 2025 est devenu viral, j'ai reçu d'innombrables DM, e-mails et même des messages WhatsApp de lecteurs. Les gens posent des questions sur tout, de l'apprentissage du code et la maîtrise du system design au web design et à la place de l'IA dans le développement moderne.
J'ai traité ces sujets un par un. Mon dernier article sur les principes de system design a reçu d'excellents retours, et cet encouragement m'a poussé à continuer.
Dernièrement, j'ai développé un profond intérêt pour le design UI/UX – pas seulement par curiosité, mais parce que de nombreux lecteurs demandaient un guide détaillé. Ils en voulaient un qui explique comment apprendre le web design, comment l'appliquer à des projets réels et comment l'IA redessine le domaine.
Avec le recul, mon parcours a commencé il y a six ans en tant que testeur de logiciels. De là, je suis passé au développement full-stack, puis au DevOps. J'ai également exploré l'analyse de données, et aujourd'hui, je gère une carrière de freelance à plein temps parallèlement à mon travail agricole.
Une chose que j'ai apprise en cours de route, c'est qu'un portfolio solide peut vous emmener dans des endroits que vous n'auriez jamais imaginés.
J'ai un portfolio depuis des années, mais je suis en train de le reconstruire entièrement à partir de zéro pour le rendre plus propre, plus intelligent et plus représentatif de ce que je suis devenu en tant que développeur.
Dans ce tutoriel, je vais vous expliquer comment j'ai créé mon nouveau portfolio et vous montrer comment vous pouvez construire le vôtre aussi – avec la bonne structure, le bon design et une touche de magie en copywriting pour le faire sortir du lot.
Ce que nous allons couvrir :
Qu'est-ce qu'un site portfolio et pourquoi en avez-vous besoin ?
Comment utiliser Figma pour concevoir votre propre portfolio
Qu'est-ce qu'un site portfolio et pourquoi en avez-vous besoin ?
Un site portfolio est votre propre espace sur internet où vous pouvez fièrement montrer vos meilleurs travaux, projets et réalisations. Considérez-le comme votre CV numérique, mais beaucoup plus visuel et personnel. Au lieu de simplement lister vos compétences ou vos intitulés de poste, il permet aux gens de voir réellement ce que vous avez construit, conçu ou créé, et cela raconte votre histoire mieux que n'importe quel document.
Il aide les employeurs, les clients ou les collaborateurs à comprendre vos compétences, votre expérience et votre créativité en un coup d'œil. Bien qu'il soit bénéfique pour les designers, les développeurs, les rédacteurs et les photographes, toute personne souhaitant partager son travail en ligne peut en créer un, des étudiants et freelances aux professionnels en entreprise.
Voici pourquoi avoir un site portfolio est important :
Une collection de vos meilleurs travaux : comme une galerie où vous gardez vos projets, œuvres d'art ou réalisations les plus impressionnants au même endroit.
Votre identité en ligne : C'est votre marque personnelle, montrant qui vous êtes, ce que vous faites et ce qui fait que votre travail se distingue.
Un moyen de présenter vos compétences : Grâce aux images, vidéos et démos en direct, il donne aux gens une image claire de votre talent et de votre créativité.
Une porte ouverte aux opportunités : Les gens peuvent visiter votre site, explorer votre travail et vous contacter directement pour des emplois, des collaborations ou du travail en freelance.
Un outil pour la croissance de carrière : Un portfolio bien construit vous aide à attirer des clients, à vous faire remarquer par les employeurs et à ouvrir des portes à de nouveaux partenariats.
En mots simples, votre site portfolio est votre histoire professionnelle racontée visuellement – un mélange de votre travail, de votre passion et de votre personnalité qui aide le monde à voir de quoi vous êtes capable.
Composants importants d'un site portfolio
Maintenant que nous savons pourquoi un site portfolio est important, examinons les composants clés qui le font sortir du lot. Chaque partie joue un rôle pour montrer qui vous êtes, ce que vous pouvez faire et comment vous pouvez aider les autres.
Comme je suis développeur et que les personnes qui m'ont contacté sont principalement des passionnés de technologie, je donnerai ici un exemple de portfolio technique. Mais vous pouvez appliquer les enseignements de ce guide pour construire n'importe quel type de portfolio pour n'importe quelle niche ou entreprise.
1. Page d'accueil : La première impression
Votre page d'accueil est comme la porte d'entrée de votre monde numérique. Elle doit dire rapidement aux visiteurs qui vous êtes, ce que vous faites et pourquoi vous valez la peine d'être embauché ou de collaborer avec vous. Gardez-la propre, simple et accueillante : juste quelques lignes fortes sur vos compétences et le type de projets sur lesquels vous travaillez.
Astuce : Utilisez un titre court comme « Salut, je suis Prankur – Je construis des applications web rapides et conviviales. »
2. Section À propos : Votre histoire
C'est ici que vous créez un lien avec votre public. Partagez votre parcours : comment vous avez commencé, ce qui vous motive et quel genre de problèmes vous aimez résoudre. Restez conversationnel et honnête. Les gens aiment travailler avec de vrais humains, pas avec des mots à la mode.
Astuce : Ajoutez une photo professionnelle mais amicale (optionnel) ici pour rendre le tout plus personnel.
3. Section Projets / Travaux : Montrez, ne vous contentez pas de dire
C'est le cœur de votre portfolio. Listez vos meilleurs projets – ceux qui représentent vos compétences les plus fortes et le type de travail que vous voulez continuer à faire. Chaque projet devrait inclure :
Une courte description de ce que c'est.
Les outils ou technologies que vous avez utilisés.
Le défi que vous avez résolu.
Une capture d'écran ou un lien vers une démo en direct.
Un lien GitHub pour que les gens puissent voir comment vous codez.
Astuce : 3 à 6 projets solides valent mieux que 15 moyens. Si vous contribuez activement à l'open source, vous devriez également l'ajouter à votre portfolio.
4. Études de cas : Racontez l'histoire derrière le travail
Les études de cas poussent vos projets un peu plus loin. Elles expliquent votre processus de réflexion et comment vous avez compris le problème du client, quelles étapes vous avez suivies et quels résultats vous avez obtenus. Cela aide les employeurs ou clients potentiels à voir vos compétences en résolution de problèmes, pas seulement vos designs ou votre code.
Astuce : Restez court et concentrez-vous sur la transformation « avant → après ».
5. Section Compétences & Outils
Listez vos compétences techniques et créatives clés, comme HTML, CSS, JavaScript, React, Figma ou l'IA.
Vous pouvez les grouper ainsi :
Outils Frontend
Outils Backend
Outils de Design
Outils d'IA ou de productivité
Astuce : Gardez la liste ciblée et mettez en avant les outils que vous utilisez réellement, pas tous les outils que vous avez essayés une fois.
6. Témoignages : Preuve sociale (Optionnel)
Les gens font confiance aux gens. Incluez quelques citations ou courts témoignages de clients, de coéquipiers ou de mentors qui peuvent attester de vos compétences et de votre professionnalisme. Cela renforce instantanément la confiance et la crédibilité.
Si vous débutez, vous pourrez ajouter cette section plus tard, car au début vous n'aurez pas de témoignages. Une fois que vous aurez commencé à travailler, vous pourrez poliment demander à vos clients de donner leur avis sur votre travail. Assurez-vous simplement d'obtenir leur permission pour l'ajouter à votre site.
Astuce : Demandez un témoignage de 2-3 phrases juste après avoir terminé un projet.
7. Section Blog ou Articles (Optionnel)
Si vous écrivez des tutoriels ou partagez des connaissances, ajoutez une section blog. Cela vous aide à vous démarquer comme quelqu'un qui non seulement construit, mais enseigne et communique des idées clairement. Cela booste également le SEO et maintient votre site à jour.
Astuce : Même 2-3 articles éducatifs solides peuvent faire une énorme différence.
8. Section Contact : Facilitez la prise de contact
Votre page de contact doit être simple, visible et accueillante. Incluez votre e-mail, vos liens sociaux (LinkedIn, GitHub, X/Twitter), et peut-être un formulaire de contact. Vous pouvez également ajouter un petit appel à l'action comme :
« Vous avez un projet en tête ? Connectons-nous. »
Astuce : Placez votre lien de contact dans le menu principal. Ne le cachez pas.
9. Résumé / CV téléchargeable (Optionnel)
Si vous cherchez un emploi, incluez un lien pour télécharger votre dernier CV. Vous pouvez également ajouter un « résumé rapide » de votre expérience, de votre formation et de vos certifications directement sur le site.
10. Appel à l'action (CTA)
Tout bon portfolio se termine par un petit coup de pouce – une étape suivante simple pour votre visiteur. Cela pourrait être :
« Construisons quelque chose d'incroyable ensemble. »
« Engagez-moi pour votre prochain projet. »
« Découvrez mes derniers travaux. »
Un CTA clair peut aider à transformer un visiteur en prospect ou en abonné.
Votre portfolio n'est pas seulement une galerie. C'est un outil de narration. Il dit au monde ce que vous pouvez faire, comment vous pensez et ce qui vous rend unique. Assurez-vous que chaque section sert un but, soit propre et reflète votre véritable personnalité.
Comment faire sortir votre site portfolio du lot
1. Présentez vos meilleurs travaux
N'incluez que vos projets les plus solides et les plus pertinents. La qualité compte plus que la quantité. Quelques excellents exemples de votre travail créeront une bien meilleure impression qu'une longue liste de projets moyens.
2. Utilisez des images et des vidéos de haute qualité
Assurez-vous que votre travail a l'air clair et professionnel. De bons visuels attirent instantanément l'attention et montrent que vous vous souciez de la présentation. Utilisez des captures d'écran propres, des mockups ou de courtes vidéos de démonstration.
3. Écrivez clairement et restez concis
Expliquez votre travail et vos compétences dans un langage simple et facile à lire. Évitez les longs paragraphes — la plupart des visiteurs ne font que survoler. Quelques lignes qui vont droit au but suffisent.
4. Racontez votre histoire
Utilisez votre section « À propos de moi » pour partager votre parcours — comment vous avez commencé, ce que vous aimez construire et quel genre de travail vous appréciez le plus. Les gens se connectent davantage aux histoires qu'aux simples titres ou CV.
5. Gardez une navigation simple
Assurez-vous que les visiteurs peuvent facilement trouver vos projets, vos informations de contact et d'autres détails clés. Un menu propre et une mise en page claire aident les gens à se concentrer sur votre travail au lieu de chercher où cliquer.
6. Tenez-le à jour
Chaque fois que vous terminez un nouveau projet ou apprenez une nouvelle compétence, ajoutez-le à votre portfolio. Un portfolio à jour montre que vous êtes actif, que vous apprenez et que vous progressez dans votre domaine.
7. Optimisez pour le SEO
Utilisez les bons mots-clés — ceux que les gens pourraient taper en cherchant votre type de travail (comme « développeur frontend » ou « expert Figma to code »). Cela aide votre site à apparaître dans les résultats de recherche. De nombreux constructeurs de sites web basés sur l'IA peuvent aider avec la configuration SEO de base.
Comment utiliser Figma pour concevoir votre propre portfolio
Concevoir votre propre portfolio peut sembler intimidant au début, mais des outils comme Figma rendent le processus étonnamment intuitif – même si vous n'êtes pas un designer professionnel. Avec Figma, vous pouvez planifier visuellement chaque section de votre portfolio avant de le transformer en un site web en direct.
J'apprends le web design et j'utilise Figma depuis longtemps pour mes projets clients. Mais ici, je n'ai pas construit l'intégralité du portfolio à partir de zéro. J'ai utilisé la bibliothèque d'inspiration de design de Figma pour obtenir des idées, et j'ai construit le portfolio sur cette base.
Voyons comment vous pouvez faire cela, étape par étape, en utilisant la mise en page ci-dessous comme exemple :
1. Commencez par un Wireframe
Avant d'ajouter des couleurs ou des visuels sophistiqués, commencez par un simple wireframe. C'est essentiellement un croquis rapide de la mise en page de votre portfolio.
Dans Figma, vous pouvez créer des frames pour chaque section que vous voulez sur votre site :
Section Hero (votre nom, titre et boutons d'appel à l'action)
« Ce que je fais de mieux » ou compétences
Tech stack
Projets mis en avant
Aperçus de blog ou d'articles
Services et tarifs
Formulaire de contact
Cela vous aide à obtenir la bonne structure avant de vous concentrer sur le design. Ne vous souciez pas encore des polices ou des images – des boîtes et des textes de remplacement suffisent.
Voici un exemple de wireframe que j'ai créé pour visualiser à quoi tout devrait ressembler avant de passer dans Figma. C'est toujours une bonne idée de dessiner ou de planifier votre design sur papier d'abord, car cela vous aide à avoir une image claire de la mise en page et à affiner les détails comme les couleurs, les polices et l'espacement dès le début.
Une fois que le wireframe est prêt, vous pouvez commencer à ajouter vos couleurs préférées, la typographie et les images pour donner vie au design. Si vous voulez aller plus loin et comprendre comment choisir les bonnes palettes de couleurs et polices, il vaut la peine d'explorer la psychologie du design — elle joue un rôle énorme dans la façon dont les gens perçoivent votre travail.
2. Ajoutez une hiérarchie visuelle et de la couleur
Une fois que votre structure semble solide, commencez à ajouter de la typographie et de la couleur pour créer une hiérarchie visuelle. Cela aide les yeux du spectateur à savoir où se concentrer en premier.
Par exemple, dans le design d'exemple ci-dessus, la section hero (en haut) attire instantanément l'attention avec une typographie grasse (« I build things for the web ») et une image de fond/hero subtile.
Utilisez les styles de couleur de Figma pour définir une palette cohérente. Essayez d'utiliser environ 3 à 4 nuances qui se complètent. Gardez cela minimaliste et professionnel. Pour le texte, vous pouvez choisir des polices neutres comme Poppins, Inter ou Roboto, qui rendent très bien sur les thèmes sombres et clairs.
3. Créez des composants réutilisables
Figma vous permet de transformer des éléments d'interface récurrents comme des boutons, des cartes et des tags en composants. Dans l'exemple de portfolio ici, remarquez comment chaque carte de projet, aperçu d'article et boîte de tarif suit la même mise en page. En créant un seul composant de carte et en le réutilisant, vous pouvez facilement maintenir la cohérence et tout mettre à jour en une seule fois plus tard.
Dans ce design, j'utiliserai un composant de mise en avant de blog plusieurs fois, donc au lieu de le concevoir encore et encore, je l'ai fait une fois et je l'utilise maintenant plusieurs fois.
4. Ajoutez votre contenu et vos images
Maintenant que votre design de base est prêt, il est temps de le rendre personnel. Vous pouvez remplacer les éléments de remplissage par :
Vos meilleures captures d'écran de projets (utilisez des mockups si nécessaire),
Une photo de profil professionnelle ou des visuels pertinents,
Du contenu réel, comme votre bio, vos compétences et les détails de vos services.
Assurez-vous de garder un espacement propre. Cela garantit que toutes les sections restent bien alignées, même lorsque vous ajustez ou ajoutez de nouveaux éléments plus tard.
Dans cette section hero, j'ai utilisé mon nom ainsi que la couleur et la police de mon choix sur la gauche, et vous pouvez voir les Styles montrant toutes les couleurs que j'ai utilisées dans le projet.
5. Créez des prototypes interactifs
Avant d'exporter votre design, utilisez le Mode Prototype de Figma pour lier les différentes pages entre elles – par exemple, faites en sorte que « Projets » dans la navigation supérieure défile en douceur vers votre section de projets. Cela vous donne une démo fonctionnelle pour tester comment les utilisateurs expérimenteront votre portfolio avant même d'écrire une seule ligne de code.
Vous pouvez également partager ce prototype avec des amis ou des mentors pour obtenir des retours rapides.
6. Exportez ou transmettez pour le développement
Après avoir testé votre design en Mode Prototype et lorsque vous êtes satisfait, la dernière étape est le handoff. Utilisez le panneau d'exportation pour télécharger tous les assets requis (icônes, logos, images) dans leurs formats corrects. Partagez ensuite le fichier Figma et passez en Dev Mode, où vous pouvez inspecter la typographie, l'espacement, les tailles et les valeurs de couleur. Ces assets exportés et ces spécifications inspectées sont ce que les développeurs utilisent pour créer le code HTML/CSS final.
Note : Le Dev Mode dans Figma vous permet d'inspecter le CSS et d'exporter vos éléments facilement. Comme je n'ai pas de plan Figma payant, je ne peux pas montrer l'inspection et l'exportation.
Concevoir votre portfolio dans Figma vous donne une liberté totale sur la mise en page, les choix de couleurs et la façon dont vous présentez votre personnalité. Gardez cela simple, donnez la priorité à l'utilisabilité et concevez avec clarté. Une fois la mise en page terminée et testée, la convertir en un site fonctionnel devient simple.
Vous pouvez également utiliser l'auto layout simplement en faisant un clic droit sur les composants de la section de design.
L'Auto Layout permet aux designers de définir des règles pour l'espacement, la direction, le padding et l'alignement des éléments. Cela garantit que les mises en page comme les boutons, les listes et les cartes s'adaptent instantanément (s'étendent/rétrécissent) aux changements de contenu ou aux différentes tailles d'écran sans ajustements manuels.
Une fois que vous avez construit et testé votre mise en page Figma, la conversion en code devient la partie facile.
Outils de génération de code à partir de Figma
Une fois que vous en avez fini avec le wireframe et les couleurs, et que votre portfolio est prêt sur Figma, il est temps de convertir ce design Figma en code. Il y a deux façons de le faire :
Méthode manuelle
Méthode IA
Comment convertir manuellement des designs Figma en code
Lorsque vous concevez un site web ou une application dans Figma, la prochaine grande étape est de transformer ce design en code fonctionnel. Traditionnellement, les développeurs font cela manuellement : inspecter chaque élément, écrire le HTML, le CSS, puis affiner la mise en page dans des frameworks comme React ou Tailwind CSS.
Il est important de comprendre comment ce processus est normalement fait à la main. C'est la base sur laquelle chaque développeur frontend s'appuie — et c'est aussi ce qui vous aide à évaluer et à améliorer le code généré par l'IA plus tard.
Lorsque vous concevez un site web ou une application dans Figma, l'étape suivante consiste à traduire cette mise en page visuelle en véritable HTML, CSS et JavaScript. Les développeurs commencent généralement par examiner chaque élément du design – sa taille, son espacement, sa typographie, sa couleur et ses règles de mise en page – et le reconstruisent manuellement en code.
Exportation des assets visuels
En utilisant le panneau Export de Figma, vous téléchargez uniquement ce qui doit être recréé visuellement en code :
icônes
illustrations
logos
images ou miniatures
La plupart des éléments structurels (boutons, cartes, sections, conteneurs) ne sont pas exportés – vous devrez les construire en utilisant HTML et CSS.
Reconstruction de la mise en page avec HTML et CSS
Vous recréerez la page section par section :
Configuration de la structure HTML
Ajout de Flexbox ou CSS Grid pour les mises en page
Application de la typographie exactement comme spécifié dans Figma
Correspondance de l'espacement en utilisant le padding, les marges et les gaps
Définition des couleurs en utilisant les codes hexadécimaux de l'inspecteur Figma
Si vous utilisez Tailwind CSS, cela revient à appliquer les bonnes classes utilitaires, mais la logique reste la même : tout est recréé manuellement.
Une fois que votre mise en page Figma est prête, le vrai travail se passe à l'intérieur de votre éditeur de code (qui pour moi est VS Code). Voici comment les développeurs reconstruisent traditionnellement l'UI une section à la fois.
Configurez la structure de votre projet
Dans VS Code, créez la structure de votre projet. Elle ressemblera à quelque chose comme ceci :
project/
├── index.html
├── styles.css
├── /assets
│ ├── logo.svg
│ ├── hero-image.png
│ └── icons/
Si vous utilisez React, la structure devient :
src/
├── App.jsx
├── components/
├── index.css
├── assets/
Cette structure reflète ce que vous avez vu dans Figma : chaque section de design majeure devient un conteneur ou un composant.
Écrivez la structure HTML section par section
Maintenant, vous allez regarder la frame Figma et la convertir en balisage brut.
À titre d'exemple, regardons la Section Hero.
La frame Figma montre :
un titre
un sous-texte
un bouton
une illustration
Votre HTML devient donc ceci :
<section class="hero">
<div class="hero-content">
<h1>Modern UI for Everyone</h1>
<p>Beautiful designs built for speed and accessibility.</p>
<button class="cta-btn">Get Started</button>
</div>
<img src="assets/hero-image.png" alt="Hero illustration" class="hero-img" />
</section>
Vous mappez essentiellement chaque calque Figma sur un élément HTML.
Construisez les mises en page en utilisant Flexbox ou Grid
Dans Figma, les mises en page sont visuelles. En HTML/CSS, vous devez traduire les règles de mise en page.
Si Figma montre deux colonnes (texte + image), vous utiliserez Flexbox :
.hero {
display: flex;
align-items: center;
justify-content: space-between;
}
Si Figma a une mise en page à 3 cartes, vous utiliserez Grid :
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
Vous reconstruisez littéralement la mise en page à partir de zéro en interprétant la structure de la frame Figma.
Appliquez la typographie exactement comme dans Figma
Ensuite, vous irez dans Figma, sélectionnerez un calque de texte et vérifierez l'Inspecteur :
Font family: Inter
Font size: 36px
Line height: 44px
Font weight: 700
Letter spacing: -1%
Puis recréez-le comme ceci :
.hero h1 {
font-family: 'Inter', sans-serif;
font-size: 36px;
line-height: 44px;
font-weight: 700;
letter-spacing: -0.01em;
}
C'est pourquoi les développeurs doivent connaître leurs fondamentaux : les outils d'IA manquent souvent ces détails subtils.
Recréez l'espacement avec le Padding, les Marges et les Gaps
Dans Figma, l'espacement est visuel. Mais en code, vous devez le calculer et l'appliquer.
Exemple d'espacement Figma :
Padding à l'intérieur d'un bouton : 16px vertical / 32px horizontal
Marge sous un titre : 24px
Gap entre les éléments : 32px
Vous écrivez donc ce code :
.cta-btn {
padding: 16px 32px;
}
.hero h1 {
margin-bottom: 24px;
}
.hero-content {
display: flex;
flex-direction: column;
gap: 32px;
}
Tout doit correspondre au design. Et dans ce cas, l'espacement est ce qui donne à l'UI un aspect poli.
Appliquez les couleurs en utilisant les codes hexadécimaux de Figma
Dans l'inspecteur Figma :
Bleu primaire →
#4A78FFArrière-plan →
#F8FAFCTexte →
#1A1A1A
Dans votre CSS :
body {
background-color: #F8FAFC;
color: #1A1A1A;
}
.cta-btn {
background-color: #4A78FF;
color: white;
}
Vous devrez copier manuellement chaque code hexadécimal dans le CSS, car c'est là que la précision compte.
(Si vous utilisez Tailwind) Appliquez des classes utilitaires au lieu d'écrire du CSS
Passer sans arrêt de votre design Figma à un fichier CSS séparé peut ralentir tout votre flux de travail. Tailwind CSS résout cela en vous permettant d'écrire des styles directement dans votre HTML en utilisant de petites classes utilitaires réutilisables.
Dans cette section, vous apprendrez comment prendre les valeurs exactes en pixels que vous voyez dans l'Inspecteur Figma et les transformer en utilitaires Tailwind.
Étape 1 : Comprendre l'échelle d'espacement de Tailwind
Tailwind n'utilise pas de valeurs brutes en pixels. À la place, il utilise une échelle d'espacement cohérente, généralement basée sur une grille de 4px.
Voici la règle simple : Prenez la valeur en pixels de Figma, divisez par 4, et ce nombre devient votre utilitaire Tailwind.
Exemple :
| Figma | Tailwind | Signification |
margin-top: 32px | mt-8 | 32 ÷ 4 = 8 → donc la classe est mt-8 |
Préfixes à connaître :
m= marginp= paddingt,b,l,r= top, bottom, left, rightx= horizontal (gauche + droite)y= vertical (haut + bas)
Étape 2 : Conversion d'un padding complexe
Si votre élément Figma utilise un padding différent pour X et Y, convertissez chaque côté séparément.
Exemple :
| Figma | Tailwind | Signification |
padding: 16px 32px | py-4 px-8 | 16 ÷ 4 = 4 → py-4 |
32 ÷ 4 = 8 → px-8 |
Étape 3 : Conversion des tailles de police
Tailwind n'utilise pas de tailles en pixels pour les polices. À la place, il utilise des noms sémantiques – presque comme des tailles de T-shirt.
Exemple :
| Taille de police Figma | Classe Tailwind | Signification |
36px | text-4xl | Le 4xl de Tailwind correspond à 36px dans l'échelle par défaut |
Cela encourage la cohérence typographique, au lieu de choisir manuellement des tailles de police aléatoires.
Pourquoi cette méthode est si rapide
Une fois que vous y êtes habitué, le flux de travail devient une seconde nature :
Valeur Figma → diviser par 4 → appliquer la classe Tailwind
Pas de changement de fichier. Pas de nommage de classes CSS. Pas de feuille de style surchargée.
Juste une traduction directe et rapide du design vers le code.
Essayez par vous-même
Ouvrez un composant Figma (comme un bouton ou une carte) et vérifiez son espacement, son padding et sa taille de police dans l'Inspecteur. Puis convertissez tout en utilisant les règles simples ci-dessus.
Très vite, vous transformerez des designs Figma en code Tailwind propre en quelques secondes.
Vous traduisez toujours Figma en code manuellement.
Très bien, revenons à notre flux de travail :
Rendre le tout responsive
Vous vérifiez comment le design doit se comporter sur différentes tailles d'écran :
mises en page empilées vs côte à côte
mise à l'échelle des polices
ajustements d'espacement
navigation rétractable ou réorganisation des grilles
Cela nécessite d'écrire des styles responsives et des points d'arrêt (breakpoints), ce que les outils d'IA peuvent tenter mais perfectionnent rarement.
Pourquoi la méthode manuelle est importante
Même si cela prend plus de temps, cette approche enseigne des fondamentaux que les outils d'IA ne peuvent tout simplement pas remplacer :
Comment fonctionnent les systèmes d'espacement
Comment les composants se comportent dans les navigateurs réels
Comment la mise en page change selon les appareils
Comment optimiser pour la performance et l'accessibilité
Ces compétences vous permettent d'inspecter le code intelligemment et de l'améliorer partout où c'est nécessaire, ce qui est presque toujours nécessaire, quel que soit l'outil que vous utilisez.
Comment utiliser les outils d'IA pour convertir des designs Figma en code (Optionnel)
Pour accélérer ce processus, vous pouvez désormais utiliser des outils automatisés de conversion Figma-to-code basés sur l'IA. Ces outils analysent le fichier Figma et génèrent instantanément du code que vous pouvez intégrer dans votre stack technique.
Il existe plusieurs outils disponibles sur le marché, comme V0, Builder.io et Kombai.
V0 est un projet de Vercel axé sur la génération rapide d'UI, intégré aux flux de travail Next.js.
Builder.io est un CMS visuel avec intégration Figma et un éditeur visuel qui peut exporter des composants pour des applications web.
Kombai est une extension IDE qui convertit les frames Figma sélectionnées en code React/NextJS/React Native et offre des fonctionnalités conscientes du dépôt (repo-aware).
Construire en direct
À des fins de démonstration, j'utiliserai Kombai, une extension VS Code. Et comme la plupart d'entre nous, développeurs, passons beaucoup de temps dans VS Code, c'est l'endroit idéal pour le tester.
Pour l'installer dans VS Code, ouvrez simplement le Marketplace des extensions, recherchez 'kombai', cliquez sur 'Installer' et ouvrez l'extension.
Maintenant, dans le panneau de l'agent, cliquez sur le bouton « Let’s get started » et inscrivez-vous ou connectez-vous avec vos identifiants.
Il est maintenant temps de tester l'agent pour un travail réel. Pour ce faire, j'utiliserai le fichier Figma joint pour construire ce portfolio.
Quelques points à garder à l'esprit avant de commencer :
Vous devrez activer WebGL si Figma ne fonctionne pas sur votre navigateur.
Vous devez savoir comment copier le lien du fichier Figma et comment exporter le design depuis Figma.
Pour copier le lien du fichier de design Figma, ouvrez votre fichier de design Figma et sélectionnez simplement votre design souhaité, sélectionnez copier/coller, puis sélectionnez « copy link to selection ». Cela copiera l'URL complète du fichier de design.
Vous pouvez également copier le lien de n'importe quel composant Figma et suivre la même approche pour obtenir le résultat souhaité.
Ouvrez l'extension de l'agent dans VSCode et sélectionnez l'agent Figma (icône) en bas de la barre d'outils de l'agent. Cela ouvrira une nouvelle fenêtre contextuelle. Collez-y le lien que vous avez copié vers le fichier de design (consultez la capture d'écran ci-dessous). Ensuite, vous pouvez donner un prompt à l'agent sur ce que vous voulez qu'il fasse avec ce fichier Figma.
Dans mon cas, je voulais répliquer le même design, j'ai donc donné ce prompt avec mon lien de design Figma :
« Tu es un expert en design UI/UX et ta tâche est de construire et de répliquer l'intégralité du design Figma en code HTML/CSS/JS à partir de l'URL jointe. »
Après avoir confirmé cela, l'agent commencera à travailler pour répliquer le même design que celui que vous avez vu dans le fichier Figma.
Et voici les résultats :
Maintenant, vous avez une vue d'ensemble des deux approches et de quand utiliser chacune d'elles.
Voici le lien du projet en direct - FCC FIGMA TO CODE
Voici le lien GitHub pour le code du projet - Github Code
Défis du code généré par l'IA (et pourquoi la supervision du développeur est essentielle)
Les outils d'IA peuvent accélérer le processus de passage du design au code, mais le résultat est rarement prêt pour la production. La plupart des outils ont du mal avec la précision de la mise en page, l'accessibilité et la réactivité, en particulier dans les designs du monde réel. Vous devez vous attendre à examiner et à améliorer diverses parties du code généré, telles que :
Problèmes d'espacement et d'alignement : L'IA peut mal interpréter le padding, les marges ou l'espacement de la grille, de sorte que les mises en page nécessitent souvent un ajustement manuel.
Points d'arrêt responsives : La plupart des outils génèrent des mises en page pour une seule taille d'écran. Vous devez toujours ajouter des points d'arrêt pour tablettes/mobiles et les tester sur différents appareils.
HTML sémantique : L'IA a tendance à utiliser trop d'éléments
<div>au lieu de balises significatives comme<header>,<nav>,<section>ou<button>.Lacunes d'accessibilité : L'absence de texte alternatif, des étiquettes inappropriées, des choix de contraste de couleurs faibles et un manque d'attributs ARIA (balises HTML) sont des problèmes courants.
Surcharge de classes utilitaires (dans le code basé sur Tailwind) : L'IA produit de longues listes de classes répétitives qui nécessitent un nettoyage pour la maintenabilité.
Structure de composants incohérente : L'IA peut générer des composants qui ne sont pas réutilisables ou qui ne suivent pas les conventions de nommage, un refactoring est donc souvent nécessaire.
Tokens et thèmes : Les couleurs, les tailles de police et l'espacement peuvent ne pas correspondre aux design tokens à moins d'être corrigés manuellement.
En raison de ces limitations, le code généré par l'IA doit être traité comme un point de départ, et non comme un produit final. Vous devrez toujours valider la logique, affiner la structure et vous assurer que le résultat final répond aux normes de qualité du monde réel. L'IA réduit le travail répétitif, mais c'est à vous, en tant que développeur, de garantir l'exactitude, l'accessibilité et la maintenabilité à long terme du code.
Ce que je préfère
La méthode manuelle vous donne un contrôle total et vous enseigne les fondamentaux, qui sont essentiels pour comprendre comment les mises en page, l'espacement et les composants se traduisent réellement en code réel.
Lorsque vous écrivez vous-même le HTML, le CSS et la structure des composants, vous développez une compréhension plus profonde de la façon dont les mises en page, l'espacement, la réactivité, la typographie et l'accessibilité fonctionnent réellement sous le capot. Ces fondamentaux sont ce qui fait de vous un développeur frontend solide, et aucun outil automatisé ne peut remplacer cet apprentissage.
Les outils de design-to-code assistés par l'IA peuvent aider pour la rapidité – surtout dans les premières étapes quand vous voulez juste un point de départ rapide. Ils éliminent une partie du travail de configuration répétitif, mais le résultat a presque toujours besoin d'être affiné.
Dans les projets réels, le flux de travail le plus fiable est une combinaison des deux approches : utilisez l'automatisation uniquement pour le boilerplate, puis appuyez-vous sur vos propres connaissances frontend pour nettoyer, réorganiser et peaufiner l'interface afin qu'elle réponde aux normes du monde réel.
Personnellement, je préfère toujours coder mes designs manuellement parce que cela me permet de rester connecté au métier et m'aide à construire une mémoire musculaire. C'est le seul moyen de comprendre pleinement comment le design se traduit en une interface vivante et responsive, et comment chaque décision affecte la performance et l'expérience utilisateur.
Les outils d'IA ne remplacent pas les développeurs frontend. Ils les soutiennent simplement. Ils gèrent les tâches répétitives pour que vous puissiez vous concentrer sur les compétences qui comptent vraiment : la clarté de la structure, l'accessibilité, le comportement responsive et la création d'une expérience qui semble polie et intentionnelle.
Copywriting pour votre portfolio
Maintenant que votre portfolio est conçu et codé, portons à nouveau notre attention sur ce qu'il dit réellement.
Le copywriting est l'art d'utiliser les mots pour convaincre les gens de prendre une action spécifique, comme acheter un produit, s'inscrire à un service ou visiter un site web. C'est un mélange de créativité et de marketing, où les mots sont utilisés pour vendre des idées ou des produits de manière intelligente et émotionnelle.
Un copywriter écrit de nombreux types de contenu, des pages de vente, des textes de sites web et des posts sur les réseaux sociaux aux scripts publicitaires et aux e-mails. L'objectif est simple : faire agir les gens.
Alors, qu'est-ce qui rend le copywriting efficace ?
Connaître son public : Un bon copywriter comprend ce dont les gens ont besoin, quels problèmes ils rencontrent et ce qui les motive.
Utiliser des mots persuasifs : Des mots qui suscitent des émotions et donnent envie aux lecteurs d'agir.
Clarté et impact : Garder le message court, clair et facile à comprendre.
Voix de marque cohérente : Écrire dans un ton qui correspond à la personnalité de la marque — qu'il soit amusant, professionnel ou inspirant.
Comment utiliser le copywriting dans votre portfolio
Votre portfolio ne consiste pas seulement à montrer votre travail – il s'agit de raconter votre histoire d'une manière qui connecte avec les gens. C'est là que le copywriting intervient. Un bon texte transforme votre portfolio d'une simple vitrine en quelque chose qui semble personnel, clair et convaincant.
Voici comment vous pouvez utiliser le copywriting efficacement tout en construisant votre portfolio :
1. Commencez par un titre fort
La première ligne que les gens voient doit leur dire instantanément qui vous êtes et ce que vous faites. Par exemple :
« Je construis des applications web modernes et responsives qui transforment les idées en réalité numérique. »
Votre titre est comme votre elevator pitch : court, puissant et clair.
2. Racontez votre histoire
Dans la section À propos de moi, ne vous contentez pas de lister vos compétences. Vous devriez également parler de votre parcours aux visiteurs. Écrivez sur la façon dont vous avez commencé à programmer, ce que vous avez appris en cours de route et ce qui vous motive. Restez conversationnel et authentique, comme si vous parliez à un ami.
« J'ai commencé à coder il y a six ans avec de simples pages HTML. Aujourd'hui, je conçois des applications full-stack et j'aide les startups à donner vie à leurs idées. »
3. Écrivez des descriptions axées sur les bénéfices
Lorsque vous présentez vos projets, ne vous contentez pas de décrire ce que vous avez construit. Expliquez pourquoi c'est important.
Au lieu de : « J'ai construit une application de gestion de tâches. »
Essayez : « Un gestionnaire de tâches simple et épuré qui aide les utilisateurs à rester productifs sans distractions. »
Ce petit changement transforme votre projet en une histoire de résolution de problème, pas seulement une démo technique.
4. Ajoutez un appel à l'action (CTA)
Chaque portfolio devrait guider les visiteurs vers une action, comme vous contacter, consulter votre GitHub ou lire votre blog.
Voici quelques exemples :
« Envie de collaborer ? Construisons quelque chose d'incroyable ensemble. »
« Vous cherchez un développeur qui écrit du code propre et efficace ? Contactez-moi ! »
Un CTA clair montre de l'assurance et donne une direction aux gens.
5. Restez simple et authentique
Évitez les mots compliqués ou les mots à la mode. Écrivez comme un humain, pas comme une brochure. Utilisez des phrases simples et claires qui sonnent comme votre véritable voix.
Le bon copywriting ne consiste pas à être malin – il s'agit d'être clair et honnête.
6. Maintenez un ton cohérent
Que votre style soit formel ou amical, gardez le même sur toutes les pages – accueil, à propos, projets et contact. Un ton cohérent aide à construire votre marque personnelle et rend votre portfolio professionnel.
Le copywriting est le fil invisible qui lie votre portfolio. Il aide les gens non seulement à voir votre travail, mais à ressentir votre histoire.
Benchmarks de test pour un site portfolio
Avant que votre portfolio ne soit mis en ligne, il est important de le tester pour savoir s'il ressemble et fonctionne comme prévu. Un site rapide, responsive et accessible laisse une forte première impression, et les benchmarks vous aident à mesurer s'il est à la hauteur de vos standards. Un site bien testé se charge plus vite, est mieux classé et offre aux utilisateurs (et aux recruteurs) une expérience fluide.
Voici les benchmarks clés que vous devriez toujours vérifier, ainsi que la raison pour laquelle ils sont importants.
1. Temps de chargement de la page
C'est le temps qu'il faut pour que votre page se charge complètement après que quelqu'un l'a visitée. Un site qui se charge rapidement semble fluide et professionnel, tandis qu'un site lent fait fuir instantanément les gens.
C'est important car la plupart des visiteurs partent si un site met plus de 3 secondes à charger. Des outils comme GTmetrix ou Pingdom peuvent vous aider à suivre et à améliorer la vitesse de chargement des pages en optimisant les images et en réduisant les scripts inutiles.
2. Core Web Vitals (LCP, INP, CLS)
Google utilise les Core Web Vitals pour mesurer l'expérience utilisateur en conditions réelles.
LCP (Largest Contentful Paint) : La rapidité avec laquelle votre contenu principal devient visible.
INP (Interaction to Next Paint) : La rapidité avec laquelle votre site répond lorsque les utilisateurs interagissent.
CLS (Cumulative Layout Shift) : La stabilité de votre mise en page pendant le chargement.
Ces métriques affectent directement la façon dont les utilisateurs perçoivent votre site et impactent également le classement SEO. Vous pouvez les tester sur PageSpeed Insights.
3. Optimisation mobile
La plupart des gens consulteront votre portfolio sur leur téléphone, il doit donc être parfait et fonctionner parfaitement sur les petits écrans.
Un site optimisé pour le mobile améliore non seulement l'expérience utilisateur, mais il est également mieux classé dans les résultats de recherche mobile de Google. Utilisez des mises en page responsives et des grilles flexibles pour garantir une visualisation fluide sur tous les appareils.
4. Conformité à l'accessibilité (WCAG)
L'accessibilité signifie rendre votre portfolio utilisable par tout le monde, y compris les personnes handicapées.
C'est important car le respect des normes WCAG (comme un contraste de couleurs approprié, la navigation au clavier et le texte alternatif pour les images) montre votre professionnalisme et votre inclusivité. Des outils comme Lighthouse ou WAVE peuvent vous aider à vérifier le classement de votre portfolio pour les métriques d'accessibilité clés.
5. Bonnes pratiques SEO
Le SEO n'est pas réservé aux entreprises. Il peut également aider votre site personnel à apparaître lorsque quelqu'un recherche votre nom ou vos compétences.
Si vous ajoutez des balises meta appropriées, des titres structurés (H1, H2, H3) et des URL descriptives, ces fonctionnalités peuvent aider les recruteurs ou les clients à vous trouver plus facilement. Un portfolio bien optimisé est souvent plus performant lors des recherches d'emploi et sur les blogs techniques.
6. Réactivité (Délai d'interaction)
La réactivité mesure la rapidité avec laquelle votre site web réagit lorsque les utilisateurs cliquent ou font défiler. Une interface qui lag semble peu professionnelle et nuit à l'engagement des utilisateurs. En minimisant les scripts lourds et en optimisant les animations, vous garantissez un retour immédiat et fluide pour chaque action.
7. Vérifications de sécurité (HTTPS)
Même un simple portfolio a besoin du HTTPS. Cela renforce la confiance et vous protège, vous et vos visiteurs, contre les violations de données. Les navigateurs comme Chrome signalent désormais les sites non sécurisés, l'activation du SSL est donc indispensable.
8. Taille des ressources (HTML, CSS, JS, Images)
Les ressources lourdes peuvent tout ralentir. Compresser les fichiers, minifier le CSS/JS et utiliser des formats d'image de nouvelle génération (comme WebP) peut considérablement améliorer la vitesse et les performances.
9. Compatibilité avec les navigateurs et les appareils
Tout le monde n'utilise pas Chrome sur un ordinateur portable. Assurez-vous donc de tester votre portfolio sur les principaux navigateurs (Chrome, Firefox, Safari, Edge) et appareils (ordinateur, tablette, mobile). Des outils de test simulés comme DebugBear ou Basemark Web aident à détecter tôt les problèmes de mise en page.
10. Real User Monitoring (RUM)
Au lieu de tester uniquement dans un laboratoire, le RUM capture la façon dont les vrais visiteurs expérimentent votre site. Cela vous aide à comprendre les performances dans des scénarios réels – sur différents appareils, réseaux et emplacements – et à ajuster votre design en fonction de données réelles.
Hébergement de votre portfolio
Il est maintenant temps de pousser vos modifications sur GitHub et de les déployer sur l'hébergeur de votre choix. Les services d'hébergement jouent un rôle crucial dans la présentation de votre travail. Selon le type de projets que vous construisez, voici quelques-unes des meilleures options d'hébergement gratuit que j'ai utilisées jusqu'à présent pour mes projets personnels et professionnels.
Vercel – Idéal pour les projets Next.js/React, offrant un déploiement fluide au sein de l'écosystème Vercel.
GitHub Pages – Excellent pour l'hébergement de sites web statiques et de portfolios personnels.
Netlify – Idéal pour les projets à forte composante frontend avec un déploiement facile et une intégration CI/CD.
Votre portfolio est prêt, et vous pouvez le partager n'importe où avec un simple lien.
Comment utiliser votre portfolio efficacement
Maintenant que votre portfolio est prêt, il est temps de l'utiliser de la bonne manière. Que vous postuliez pour un emploi, que vous fassiez une proposition à un client freelance ou que vous fassiez simplement du networking avec des personnes partageant les mêmes idées, votre portfolio est votre atout le plus précieux.
Considérez-le comme votre introduction numérique. Il montre non seulement ce que vous avez construit, mais aussi comment vous pensez et travaillez. La clé est de l'utiliser intelligemment dans le bon contexte.
Disons que vous tombez sur une offre d'emploi ou que vous voulez contacter directement un recruteur ou un fondateur d'entreprise. Au lieu d'envoyer simplement un CV classique, vous pouvez faire sortir votre message du lot en y joignant le lien de votre portfolio. Voici un exemple de la façon dont vous pouvez le faire :
Exemple d'e-mail/message direct :
Bonjour [Nom du responsable du recrutement/CEO],
Je suis Prankur, un Développeur Full Stack basé en Inde avec plus de 6 ans d'expérience dans la création d'applications mobiles et web.
J'ai vu l'ouverture pour le poste de [Titre du poste/Rôle] dans votre entreprise et je pense que mes compétences correspondent parfaitement à ce que vous recherchez.
Vous pouvez explorer mon travail ici : [URL du Portfolio]
Je suis disponible pour commencer immédiatement et je suis enthousiaste à l'idée de contribuer à votre équipe et à votre codebase.
Cordialement,
Prankur Pandey
Cette touche petite mais professionnelle – inclure le lien de votre portfolio dans chaque e-mail, proposition ou message LinkedIn – augmente vos chances d'être remarqué. Un portfolio bien présenté parle plus fort qu'un CV, et il aide les recruteurs ou les clients à comprendre rapidement vos compétences, votre sens du design et votre profondeur en codage.
Alors, ne vous contentez pas de construire votre portfolio. Utilisez-le activement. Partagez-le sur les sites d'emploi, les posts LinkedIn, votre bio GitHub, ou même dans des conversations informelles avec des collaborateurs potentiels. Chaque partage est une nouvelle opportunité qui ne demande qu'à se concrétiser.
Questions & Réponses
1. Est-ce que construire un portfolio est vraiment important ?
Absolument. Au lieu d'envoyer une douzaine de liens vers votre GitHub, Behance et LinkedIn, il est beaucoup plus efficace de combiner tout votre travail dans un site portfolio propre et accessible. Cela vous donne l'air organisé, professionnel et facile à évaluer.
2. Est-ce que cela vaut la peine d'acheter un nom de domaine ?
Oui, ça l'est, si vous êtes sérieux au sujet de votre carrière. Avoir votre propre domaine (comme votrenom.dev ou votrenom.com) apporte une touche personnelle et professionnelle.
Mais si vous êtes encore en train d'apprendre ou si vous expérimentez simplement, c'est très bien de commencer avec un domaine gratuit. Une fois que vous aurez des projets solides à montrer, investir dans votre propre domaine en vaut totalement la peine.
3. Puis-je utiliser l'IA ou des outils no-code pour construire mon portfolio ?
Vous pouvez, mais si vous êtes développeur, vous devriez essayer de le coder vous-même d'abord. C'est un excellent moyen de montrer votre créativité et votre contrôle technique sur le design et la logique. Voici un guide simple et direct pour vous aider à démarrer.
Une fois que votre design est prêt, vous pouvez toujours utiliser l'IA ou des outils no-code pour accélérer le processus ou en automatiser des parties. Considérez l'IA comme une aide, pas comme un remplacement.
4. Comment puis-je obtenir des outils d'IA pour tester ?
C'est facile : visitez les sites officiels des outils qui vous intéressent et inscrivez-vous. La plupart des outils d'IA proposent des essais gratuits ou des crédits limités que vous pouvez utiliser pour explorer et tester leurs fonctionnalités en fonction de votre flux de travail et de vos besoins.
5. Je débute tout juste. Que devrais-je utiliser : les outils d'IA ou la méthode manuelle ?
Je recommande vivement d'utiliser la méthode manuelle car elle vous aidera à bien comprendre votre métier, et vous construirez également une mémoire musculaire sur une technologie et son fonctionnement.
6. Quelle plateforme devrais-je utiliser pour l'hébergement ?
La plupart des fournisseurs d'hébergement proposent un plan gratuit, vous pouvez donc commencer par là. Ensuite, quand vous ressentirez le besoin d'étendre votre portfolio, passez à un plan payant.
Notes finales
Construire un portfolio solide demande du temps, des efforts et de l'attention aux détails. Mais c'est l'un des investissements les plus intelligents que vous puissiez faire dans votre carrière technologique.
Les outils et les templates peuvent aider à accélérer le processus, mais votre créativité, vos compétences et votre narration sont ce qui fait vraiment sortir un portfolio du lot. Un portfolio bien conçu ne montre pas seulement ce que vous pouvez construire, il révèle comment vous pensez et pourquoi votre travail est important.
Bien que vous puissiez utiliser des outils de design, des frameworks ou même l'assistance de l'IA pour gagner du temps, assurez-vous de comprendre les bases du design, de la structure et de l'utilisabilité. Le but n'est pas de créer quelque chose de tape-à-l'œil ; c'est de produire quelque chose de clair, professionnel et authentique.
Votre portfolio est votre identité numérique, alors traitez-le comme votre marque personnelle. Continuez à l'affiner à mesure que vos compétences se développent et laissez-le évoluer parallèlement à votre carrière.
Conclusion
Un portfolio n'est pas seulement un site web. C'est votre histoire racontée à travers votre travail. Il aide les employeurs, les clients et les collaborateurs à comprendre ce que vous faites de mieux et pourquoi vous vous démarquez.
Dans cet article, j'ai partagé tout ce qui m'a aidé à construire et à affiner mon propre portfolio, de la compréhension de la structure du design et du copywriting aux benchmarks de test et d'optimisation. Mon objectif est de vous aider à créer un portfolio qui non seulement est superbe, mais qui vous ouvre également de réelles opportunités.
Dans mon prochain tutoriel, j'explorerai certainement quelque chose de nouveau.
Design + Créativité + Développement + Exécution = La Stack Ultime du Développeur 🔥
Continuez à apprendre, continuez à construire et, plus important encore, continuez à partager votre travail.
Si vous avez trouvé cet article utile, n'hésitez pas à me le faire savoir. Je suis toujours ouvert à l'apprentissage, à la collaboration et aux nouvelles opportunités.
Maintenant, c'est votre tour : que construisez-vous ensuite ? Faites-le-moi savoir en m'envoyant un DM !
Suivez-moi sur 𝕏 : Prankur sur 𝕏
Connectez-vous avec moi sur LinkedIn : LinkedIn de Prankur
Suivez-moi sur GitHub : GitHub de Prankur
Voir mon Portfolio : Portfolio de Prankur