Volez la structure de ce portfolio (le prompt inclus)
Le problème résolu
La plupart des portfolios se ressemblent, en voici un qui sort du lot, plus le prompt de base pour construire le vôtre.
Le prompt à copier
Optimisé avec
Construis un héros de portfolio personnel en un seul écran (pas besoin de scroller) avec React, TypeScript, Vite et Tailwind CSS. Fond bleu marine très sombre (#0a0e2a ou équivalent). Toute la page tient dans un seul viewport à hauteur fixe.
**Barre du haut :**
- Gauche : ton nom/marque, petit, en majuscules, avec une accroche de deux mots en dessous (style "Design & Ingénierie").
- Droite : une rangée de nav avec 2 liens simples ("Travaux", "Contact") suivis de 2 contrôles façon interrupteurs entre crochets, ex. "Thème[A]" et "Son[ ]", qui doivent vraiment ressembler à des switches actifs (ajoute un vrai onClick sur au moins un, même s'il se contente de basculer une classe CSS).
**Bande verticale à gauche :**
- Une fine bande verticale collée au bord gauche de l'écran contenant un petit badge/logo et un libellé pivoté à -90deg (CSS `transform: rotate(-90deg)`), dans le style d'un tag de récompense/crédibilité.
**Centre de l'écran :**
- Un grand mot en 3D façon gonflé/tube glossy (ton prénom ou une salutation). Sans WebGL/Three.js sous la main, approxime avec une police cursive/manuscrite en gras, un `text-shadow` épais en couches ou un remplissage SVG en dégradé, plus un léger `filter: drop-shadow(...)`, et une animation en keyframes `transform: rotate()` lente pour l'effet d'ondulation.
- Disperse 3-4 petits badges/stickers décoratifs autour du centre, à des positions et z-index différents, chacun avec une animation `translateY` flottante indépendante et lente (durées différentes, ex. 3s/4s/5s) pour un effet de profondeur.
- Superpose une grille discrète de petits repères "+" sur le fond (motif CSS répétitif ou spans positionnés en absolu), opacité ~10-15%.
**Barre HUD en bas :**
- En bas à gauche : un indicateur qui se met à jour en direct combinant un fuseau horaire/lieu et une température ou un nombre similaire (des données fictives suffisent, utilise juste un `setInterval` pour donner l'impression que c'est en direct).
- En bas au centre : les coordonnées du curseur en direct, mises à jour via un listener `mousemove`, formatées comme "0759 X 0347 Y".
- En bas à droite : une petite icône (globe ou équivalent).
**Titre :**
- Une affirmation personnelle grande, en gras, sur plusieurs lignes, en blanc, positionnée à côté ou sous le centre (ex. 3 lignes courtes et percutantes, `text-4xl md:text-6xl font-bold leading-tight`).
**État hover optionnel (à faire si tu veux le vrai effet waouh) :**
- Au survol/clic de la zone centrale, bascule le fond en noir pur, fais apparaître en fondu une photo et un court paragraphe bio avec 2-3 liens soulignés inline (anciens travaux/projets), et anime l'apparition d'un petit logo signature façon cursive dans une couleur d'accent (ex. vert) en haut à gauche. Utilise un simple state React plus des transitions CSS, pas besoin de vrai backend.
Stack technique : React + TypeScript + Vite, Tailwind CSS, animations CSS classiques pour le flottement/l'ondulation (pas besoin de Three.js sauf si tu veux aller plus loin). Tout se passe dans un seul viewport, sans scroll nécessaire.
C’est la structure derrière un portfolio personnel qui sort vraiment du lot : un mot central en rendu 3D façon ballon gonflé, un HUD discret (heure, coordonnées du curseur mises à jour en direct), et un état survol qui fait apparaître portrait et bio sans jamais quitter l’écran. Tout ce qui compte tient dans un seul viewport, exactement le genre de « wow » immédiat qui accroche avant même le premier scroll.
Ce qui vaut le coup d’être volé
Un mot central en 3D façon tube/ballon plutôt qu’un simple titre plat, ça se lit tout de suite comme plus technique et plus cher.
Une bande HUD qui tourne en continu (heure, température, coordonnées), pas cher à construire, très efficace pour signaler « cette personne construit de vraies choses interactives ».
Un état hover directement sur le héros plutôt qu’une deuxième section à scroller, le « wow » reste contenu dans un seul écran.
Le prompt ci-dessous est volontairement générique : structure et technique, pas le contenu personnel de qui que ce soit. Remplace le nom, l’accroche et les liens par les tiens.
