

Ce que vous obtenez
- Un fichier HTML hors ligne, ou de vraies routes dans votre projet React, Vue, Svelte ou Astro
- Accueil, projets et études de cas, écrits et articles, conférences, Uses, À propos, CV, contact et 404
- Couvertures de projet dessinées en panneaux produit HTML sur fonds photographiques
- Palette de commandes, onglets d’expérience, grille de dépôts, filtres et formulaires validés
- En option : fonds ou photos PopNow, chiffrés avant de payer
Idéal pour
- Ingénieurs et créateurs indépendants qui veulent un site personnel
- Candidats qui ont besoin d’une page « recrutez-moi » avec études de cas
- Développeurs qui écrivent ou donnent des conférences et veulent tout réunir au même endroit
Pas fait pour
- Marques claires ou colorées : le design est uniquement sombre
- Designers graphiques dont le travail est surtout visuel
- Sites d’entreprise ou boutiques en ligne
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Site portfolio de développeur » (developer-portfolio-website) pour ceci : Créez mon site personnel. Je suis ingénieur backend à Berlin ; mon CV, trois projets et deux articles de blog sont dans ./notes.
Dans un agent de code
/popnow-developer-portfolio-website Créez mon site personnel. Je suis ingénieur backend à Berlin ; mon CV, trois projets et deux articles de blog sont dans ./notes.
Puis essayez
Créez un fond pour un quatrième projet dans le même style pierre sombre et faites-moi d’abord un devis.
Supprimez la section conférences et transformez la page Uses en page Méthode.
À préparer
- Vos postes, dates et résultats concrets
- Deux à six projets avec le problème, les décisions clés et les résultats
- Les articles, conférences, dépôts et outils que vous avez réellement
- Votre propre portrait et de vraies photos d’événements
Skills similaires
Tout voir →Créateur d’avatar 3D
+3Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
Calendrier heatmap d’activité
+3Une année d’activité quotidienne en calendrier de cases colorées, avec séries, totaux et navigation au clavier.
Modèle de landing page SaaS IA
+3Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
Section hero animée
+3Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
Modèle de site d’agence créative à shader
+3Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
Landing page SaaS sombre
+3Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
Site portfolio de designer
+3Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
Site SaaS éditorial
+3Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
Modèle de site glassmorphism
+3Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
Site web de produit matériel
+3Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
Diagramme d’architecture interactif
+3Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
Héros à grille interactive
+3Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
Explorateur de graphe de connaissances
+3Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
Modèle de tableau de bord KPI
+3Quatre indicateurs avec variations, courbe lumineuse, répartition et objectifs, sur papier chaud.
Landing page à partir de maquettes IA
+3Voyez trois maquettes de page complète, choisissez-en une, et votre agent la code proprement.
Modèle de site web magazine
+3Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
Héros à animation de particules
+3Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
Site de marque personnelle
+3Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
Page de lancement produit cinématique
+3Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
Modèle de dashboard admin
+3Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
Modèle de landing page SaaS
+3Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
Site CV portfolio façon scrapbook
+3Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
Modèle de site e-commerce de sneakers
+3Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
Modèle de page d’automatisation de workflows
+3Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
Questions
Pourquoi les couvertures de projet ne sont-elles pas des captures d’écran ?
Chaque couverture est une petite interface produit construite en HTML et CSS avec des données de votre domaine. Elle reste nette à toutes les tailles, s’accorde aux couleurs du site et ne montre jamais de données privées issues d’un vrai écran.
Ai-je besoin de PopNow ?
Non. Les fonds pierre et sable fournis sont réutilisables pour vos projets, et les conférences peuvent utiliser des vignettes dessinées. PopNow est facultatif pour de nouveaux fonds, une photo de poste de travail ou un portrait retouché, et chaque lancement est chiffré d’abord.
Et si je n’ai ni conférences ni dépôts open source ?
Les sections sans contenu réel sont supprimées avec leurs liens. Le skill n’invente jamais de conférences, de dépôts, de nombres d’étoiles ou de clients pour une personne réelle.
Peut-il s’intégrer à mon app Next.js existante ?
Oui. Il détecte la stack, conserve les fichiers sans rapport et reconstruit les mêmes routes en vraies pages, avec les mêmes tokens et polices.

