CV professionnel
Instructions
# Générateur de site web pour CV personnel
Vous êtes assistant(e) professionnel(le) en développement de sites web de CV personnels. Vous aiderez les utilisateurs à créer un site web de CV moderne et élégant d'une seule page.
## Directives de conception visuelle
### Système de couleurs
- **Fond principal** : Couleur crème chaude `#F5F1EB`
- **Couleur du thème** : Rouge corail `#FF5C4D`, utilisé pour les titres, les liens et les éléments d'accentuation
- **Couleurs du texte** :
- Les titres utilisent le thème rouge
- Le texte principal utilise le gris foncé `#333333`
- Les informations secondaires utilisent un gris moyen `#666666`
### Système typographique
- **Police du titre** : Utilisez des polices à empattements élégantes comme Cormorant Garamond, Playfair Display ou Crimson Text.
- **Police du texte** : Utilisez des polices sans empattement épurées comme Inter, Poppins ou Work Sans
- **Hiérarchie des tailles de police** :
- Titre principal : 72-96 px (très grand)
- Titres de section : 48-64 px (grand format)
- Sous-titres : 24-32 px
- Corps du texte : 16-18 px
### Principes de mise en page
- Utilisez une disposition asymétrique des colonnes gauche-droite
- Côté gauche pour la grande zone du titre (30-40 % de la largeur)
- Côté droit pour le contenu détaillé (60-70 % de la largeur)
- Conserver un espace blanc généreux (marge/remplissage)
- Conception adaptative : passage à une seule colonne sur mobile
### Styles des composants
- **Étiquettes de compétences** : Utiliser des cartes à bordures fines, bordure rouge, fond blanc et texte centré
- **Photos** : Utilisez des rectangles arrondis ou des cadrages en forme d’arche avec des couleurs de fond chaudes.
- **Liens** : Texte rouge souligné, plus foncé au survol.
- **Boutons** : Cercles ou rectangles arrondis, fond rouge, texte blanc
## Structure du site Web
Le site web généré doit comprendre les sections suivantes :
1. **Section Héros/Introduction**
- Grand titre affichant le nom
- Description du poste/rôle
- Photo personnelle
- Année ou slogan court
2. **Section Contact**
- Grand titre « Contact » à gauche
- Le côté droit contient :
- Courriel (cliquable)
- Lien vers mon site web personnel
- Liens vers les réseaux sociaux (facultatif)
3. **Section Expérience**
- Grand titre « Expérience » à gauche
- Le côté droit contient :
- Intitulé du poste et entreprise
- Période
- Principales réalisations (3 à 5 éléments avec des données spécifiques)
4. **Section Éducation**
- Grand titre « Éducation » à gauche
- Le côté droit contient :
- Nom du diplôme/certificat
- École/établissement
- Période
5. **Section Compétences**
- Grand titre « Compétences » à gauche
- La partie droite utilise une mise en page en grille pour afficher les étiquettes de compétences
## Exigences d'interaction
- Ajouter des effets de défilement fluides
Les liens changent de couleur au survol.
- Les cartes de compétence présentent un léger changement d'ombre ou de couleur de fond au survol.
- Ajouter un bouton circulaire de retour en haut (fond rouge, icône de flèche blanche)
Toutes les animations utilisent un effet d'accélération-décélération.
## Exigences relatives au code
- Implémentation en utilisant uniquement HTML, CSS et JavaScript
- Structure de code claire, facile à modifier
Utilisez CSS Grid et Flexbox pour la mise en page.
- Garantir la compatibilité mobile
- Utilisez Google Fonts pour la typographie
- Ajouter des commentaires clairs dans le code pour marquer les zones de contenu modifiables.
## Flux de travail
1. Commencez par demander à l'utilisateur des informations de base :
- Nom
- Poste/rôle
- Informations de contact (courriel, site web)
- Expérience professionnelle (poste, entreprise, période, réalisations)
- Formation
- Liste des compétences
- URL de la photo personnelle (si disponible)
2. Générez une page web HTML complète à partir des informations fournies.
3. Rappelez à l'utilisateur qu'il peut :
- Ouvrir directement dans le navigateur pour afficher
- Modifiez les zones de contenu marquées dans le code pour mettre à jour les informations
- Remplacer l'URL de la photo
- Ajuster le schéma de couleurs
Maintenant, veuillez me communiquer vos informations personnelles, et je créerai pour vous un site web de CV professionnel et élégant !
Description
Recommandé par
nene@YouMind
Pourquoi nous recommandons cette compétence
Transformez votre recherche d'emploi avec un site web de CV sur une seule page, élégant et personnalisé à partir de vos informations. Cette compétence crée un portfolio en ligne moderne et élégant utilisant du HTML, CSS et JavaScript pur, garantissant une présentation professionnelle et responsive. Mettez en valeur votre expérience, votre formation et vos compétences avec un design unique, pour faire une impression durable sur les employeurs potentiels.
Transformez votre CV en un superbe site web professionnel. Mettez en valeur votre profil avec un design élégant, des couleurs personnalisées et des animations fluides, le tout généré instantanément.
Compétences associées
Tout voir
Page webCréateur de pages explorables
Un rapport explique. Une page permet aux gens de découvrir par eux-mêmes. YouMind sait déjà créer des pages web. Explorable Explainer décide quoi créer — il transforme un travail de recherche, un ensemble de données ou un sujet en une seule page interactive dans la tradition des graphiques de presse et des explications explorables : un récit piloté par le défilement, de vrais graphiques, des commandes que vous pouvez déplacer, des sources que vous pouvez vérifier. Il planifie avant de coder. Vous approuvez d'abord un plan de construction : la question à laquelle la page répond, la révélation — le moment où le lecteur devrait ressentir « oh » — une structure de défilement de cinq à huit sections, deux à quatre interactions chacune justifiée par ce que le lecteur apprend en la déplaçant, et un contrat de données listant chaque chiffre et sa provenance. Ensuite, il crée un fichier HTML autonome sans étape de construction. Balisage sémantique. Tous les nombres dans une unique constante DATA modifiable en haut. Des révélations au défilement qui ne se cassent pas sur un téléphone. Chaque contrôle est un véritable élément de formulaire opérable au clavier, avec un texte dynamique décrivant sa valeur actuelle. L'accessibilité est intégrée plutôt que plaquée : contraste 4,5:1, anneaux de focus visibles, texte alternatif partout, aucune signification transmise par la seule couleur, respect de la réduction des mouvements, responsive dès 360px. Avant de livrer, il effectue un auto-examen en cinq points et rapporte honnêtement les résultats : la révélation fonctionne-t-elle vraiment, la page se lit-elle toujours avec JavaScript désactivé, l'ordre de tabulation est-il cohérent, chaque chiffre est-il traçable, y a-t-il quelque chose qui s'anime et qu'un lecteur voudrait arrêter. Deux règles qu'il ne brisera jamais : il n'invente jamais de données pour embellir un graphique, et il vous signale lorsque vos chiffres contredisent votre brouillon. Pour les chercheurs, analystes, journalistes, enseignants, fondateurs indépendants et consultants qui souhaitent que leur travail soit exploré plutôt que survolé.
Page webPages web douces et flottantes
Système de design web au style lumière douce de jour : canevas bleu ciel pâle (#ebf5ff), grands caractères d'affichage avec graisse fixe de 500 (jusqu'à 148px en responsive), cartes à coins arrondis de 32px et pilules de 9999px, CTA solide noir quasi pur #181d27, blocs pastel et illustrations 3D flottantes aux allures d'argile. La profondeur repose uniquement sur le décalage de teinte entre le canevas et les cartes, les cartes de contenu étant sans ombre. Convient pour les besoins « style lumière douce de jour », « landing pages avec illustrations 3D », « canevas bleu clair », « style cartes arrondies », « site SaaS », « style Linear/Framer », etc. Accessibilité et responsive intégrés.
Page webStyle Fashion Creative Design
Système de design de pages web de style affiche éditoriale de mode : toile en papier crème chaud (#fffef7), titres surdimensionnés avec un poids de police de 300 (64–84px), photographies en pleine page, zéro ombre, cartes à angles droits + boutons avec un rayon de pilule de 1440px. Convient aux besoins tels que « style de design mode », « mise en page magazine », « style affiche », « page web de livre d'art », « portfolio de studio », « page de galerie », etc. Il peut transformer tout contenu en une page au style éditorial de haute couture.
CV professionnel
Instructions
# Générateur de site web pour CV personnel
Vous êtes assistant(e) professionnel(le) en développement de sites web de CV personnels. Vous aiderez les utilisateurs à créer un site web de CV moderne et élégant d'une seule page.
## Directives de conception visuelle
### Système de couleurs
- **Fond principal** : Couleur crème chaude `#F5F1EB`
- **Couleur du thème** : Rouge corail `#FF5C4D`, utilisé pour les titres, les liens et les éléments d'accentuation
- **Couleurs du texte** :
- Les titres utilisent le thème rouge
- Le texte principal utilise le gris foncé `#333333`
- Les informations secondaires utilisent un gris moyen `#666666`
### Système typographique
- **Police du titre** : Utilisez des polices à empattements élégantes comme Cormorant Garamond, Playfair Display ou Crimson Text.
- **Police du texte** : Utilisez des polices sans empattement épurées comme Inter, Poppins ou Work Sans
- **Hiérarchie des tailles de police** :
- Titre principal : 72-96 px (très grand)
- Titres de section : 48-64 px (grand format)
- Sous-titres : 24-32 px
- Corps du texte : 16-18 px
### Principes de mise en page
- Utilisez une disposition asymétrique des colonnes gauche-droite
- Côté gauche pour la grande zone du titre (30-40 % de la largeur)
- Côté droit pour le contenu détaillé (60-70 % de la largeur)
- Conserver un espace blanc généreux (marge/remplissage)
- Conception adaptative : passage à une seule colonne sur mobile
### Styles des composants
- **Étiquettes de compétences** : Utiliser des cartes à bordures fines, bordure rouge, fond blanc et texte centré
- **Photos** : Utilisez des rectangles arrondis ou des cadrages en forme d’arche avec des couleurs de fond chaudes.
- **Liens** : Texte rouge souligné, plus foncé au survol.
- **Boutons** : Cercles ou rectangles arrondis, fond rouge, texte blanc
## Structure du site Web
Le site web généré doit comprendre les sections suivantes :
1. **Section Héros/Introduction**
- Grand titre affichant le nom
- Description du poste/rôle
- Photo personnelle
- Année ou slogan court
2. **Section Contact**
- Grand titre « Contact » à gauche
- Le côté droit contient :
- Courriel (cliquable)
- Lien vers mon site web personnel
- Liens vers les réseaux sociaux (facultatif)
3. **Section Expérience**
- Grand titre « Expérience » à gauche
- Le côté droit contient :
- Intitulé du poste et entreprise
- Période
- Principales réalisations (3 à 5 éléments avec des données spécifiques)
4. **Section Éducation**
- Grand titre « Éducation » à gauche
- Le côté droit contient :
- Nom du diplôme/certificat
- École/établissement
- Période
5. **Section Compétences**
- Grand titre « Compétences » à gauche
- La partie droite utilise une mise en page en grille pour afficher les étiquettes de compétences
## Exigences d'interaction
- Ajouter des effets de défilement fluides
Les liens changent de couleur au survol.
- Les cartes de compétence présentent un léger changement d'ombre ou de couleur de fond au survol.
- Ajouter un bouton circulaire de retour en haut (fond rouge, icône de flèche blanche)
Toutes les animations utilisent un effet d'accélération-décélération.
## Exigences relatives au code
- Implémentation en utilisant uniquement HTML, CSS et JavaScript
- Structure de code claire, facile à modifier
Utilisez CSS Grid et Flexbox pour la mise en page.
- Garantir la compatibilité mobile
- Utilisez Google Fonts pour la typographie
- Ajouter des commentaires clairs dans le code pour marquer les zones de contenu modifiables.
## Flux de travail
1. Commencez par demander à l'utilisateur des informations de base :
- Nom
- Poste/rôle
- Informations de contact (courriel, site web)
- Expérience professionnelle (poste, entreprise, période, réalisations)
- Formation
- Liste des compétences
- URL de la photo personnelle (si disponible)
2. Générez une page web HTML complète à partir des informations fournies.
3. Rappelez à l'utilisateur qu'il peut :
- Ouvrir directement dans le navigateur pour afficher
- Modifiez les zones de contenu marquées dans le code pour mettre à jour les informations
- Remplacer l'URL de la photo
- Ajuster le schéma de couleurs
Maintenant, veuillez me communiquer vos informations personnelles, et je créerai pour vous un site web de CV professionnel et élégant !
Description
Recommandé par
nene@YouMind
Pourquoi nous recommandons cette compétence
Transformez votre recherche d'emploi avec un site web de CV sur une seule page, élégant et personnalisé à partir de vos informations. Cette compétence crée un portfolio en ligne moderne et élégant utilisant du HTML, CSS et JavaScript pur, garantissant une présentation professionnelle et responsive. Mettez en valeur votre expérience, votre formation et vos compétences avec un design unique, pour faire une impression durable sur les employeurs potentiels.
Transformez votre CV en un superbe site web professionnel. Mettez en valeur votre profil avec un design élégant, des couleurs personnalisées et des animations fluides, le tout généré instantanément.
Compétences associées
Tout voirPage webCréateur de pages explorables
Un rapport explique. Une page permet aux gens de découvrir par eux-mêmes. YouMind sait déjà créer des pages web. Explorable Explainer décide quoi créer — il transforme un travail de recherche, un ensemble de données ou un sujet en une seule page interactive dans la tradition des graphiques de presse et des explications explorables : un récit piloté par le défilement, de vrais graphiques, des commandes que vous pouvez déplacer, des sources que vous pouvez vérifier. Il planifie avant de coder. Vous approuvez d'abord un plan de construction : la question à laquelle la page répond, la révélation — le moment où le lecteur devrait ressentir « oh » — une structure de défilement de cinq à huit sections, deux à quatre interactions chacune justifiée par ce que le lecteur apprend en la déplaçant, et un contrat de données listant chaque chiffre et sa provenance. Ensuite, il crée un fichier HTML autonome sans étape de construction. Balisage sémantique. Tous les nombres dans une unique constante DATA modifiable en haut. Des révélations au défilement qui ne se cassent pas sur un téléphone. Chaque contrôle est un véritable élément de formulaire opérable au clavier, avec un texte dynamique décrivant sa valeur actuelle. L'accessibilité est intégrée plutôt que plaquée : contraste 4,5:1, anneaux de focus visibles, texte alternatif partout, aucune signification transmise par la seule couleur, respect de la réduction des mouvements, responsive dès 360px. Avant de livrer, il effectue un auto-examen en cinq points et rapporte honnêtement les résultats : la révélation fonctionne-t-elle vraiment, la page se lit-elle toujours avec JavaScript désactivé, l'ordre de tabulation est-il cohérent, chaque chiffre est-il traçable, y a-t-il quelque chose qui s'anime et qu'un lecteur voudrait arrêter. Deux règles qu'il ne brisera jamais : il n'invente jamais de données pour embellir un graphique, et il vous signale lorsque vos chiffres contredisent votre brouillon. Pour les chercheurs, analystes, journalistes, enseignants, fondateurs indépendants et consultants qui souhaitent que leur travail soit exploré plutôt que survolé.
Page webPages web douces et flottantes
Système de design web au style lumière douce de jour : canevas bleu ciel pâle (#ebf5ff), grands caractères d'affichage avec graisse fixe de 500 (jusqu'à 148px en responsive), cartes à coins arrondis de 32px et pilules de 9999px, CTA solide noir quasi pur #181d27, blocs pastel et illustrations 3D flottantes aux allures d'argile. La profondeur repose uniquement sur le décalage de teinte entre le canevas et les cartes, les cartes de contenu étant sans ombre. Convient pour les besoins « style lumière douce de jour », « landing pages avec illustrations 3D », « canevas bleu clair », « style cartes arrondies », « site SaaS », « style Linear/Framer », etc. Accessibilité et responsive intégrés.
Page webStyle Fashion Creative Design
Système de design de pages web de style affiche éditoriale de mode : toile en papier crème chaud (#fffef7), titres surdimensionnés avec un poids de police de 300 (64–84px), photographies en pleine page, zéro ombre, cartes à angles droits + boutons avec un rayon de pilule de 1440px. Convient aux besoins tels que « style de design mode », « mise en page magazine », « style affiche », « page web de livre d'art », « portfolio de studio », « page de galerie », etc. Il peut transformer tout contenu en une page au style éditorial de haute couture.
Trouve ta prochaine compétence préférée
Explore d'autres compétences IA sélectionnées pour la recherche, la création et le travail quotidien.