Ceci est un portfolio personnel moderne et interactif créé entièrement avec l'aide de l'IA. Il showcase les projets et compétences de Vincent Guerrini, développeur logiciel en première année d'études.
Le site est conçu pour offrir une expérience utilisateur fluide et engageante avec des animations modernes, un design responsive et des fonctionnalités interactives.
- Photo de profil avec animation d'entrée
- Présentation accrocheuse avec gradient moderne
- Compteur de visites persistant (sauvegardé en localStorage)
- Design captivant qui attire l'attention
- Présentation personnelle de Vincent Guerrini
- Description de ses études en tant que Software Developer
- Texte engageant et professionnel
- 6 domaines de compétences présentés en cartes animées:
- 🐍 Python - Développement d'applications
- 🦀 Go - Programming backend performante
- ☕ Java - Applications orientées objet
- 🌐 JavaScript - Développement web interactif
- 🎨 HTML & CSS - Design responsive
- 📚 Résolution de problèmes - Approche analytique
- Carrousel interactif avec 6 projets:
- The Hangman - Jeu du pendu en Go (CLI)
- The Vengeful Blade - Jeu RPG (première expérience jeu)
- Fighting-Tournaments - Tournoi de combat en Java
- PlatineThemAll-Bot - Bot Discord pour chasseurs de trophées
- Portfolio IA - Ce site web! (créé avec l'IA)
- Calculator - Calculatrice en Golang
Fonctionnalités du carrousel:
- ✅ Navigation par boutons (❮ ❯)
- ✅ Navigation au clavier (flèches ← →)
- ✅ Indicateurs pour voir la position actuelle
- ✅ Lien direct vers chaque repo GitHub
- ✅ Descriptions détaillées et icônes par projet
Système de filtrage:
- 🎮 Tous - Affiche tous les projets
- 🎯 Jeux - Affiche uniquement les jeux (3 projets)
- 💾 Programmes - Affiche uniquement les applications (4 projets)
-
Formulaire de contact complet avec:
- Champ Nom
- Champ Email
- Champ Sujet
- Textarea Message
- Bouton d'envoi animé
-
Fonctionnalité d'envoi email:
- Intégré avec le service FormSubmit.co
- Envoie les messages à:
vincent.dev@gmail.com - Messages de confirmation/erreur clairs
-
Liens de contact rapides (au pied de page):
- 📱 GitHub: https://github.com/Yokasashii
- 💼 LinkedIn: https://www.linkedin.com/in/vincent-guerrini-163920374/
- ✉️ Email: vincent.dev@gmail.com
- Toggle en en-tête (🌙/☀️) pour basculer les thèmes
- Persistance du choix (sauvegardé en localStorage)
- Cohérence totale - Tous les éléments s'adaptent parfaitement
- Couleurs optimisées pour lisibilité et confort visuel
- Fade-In-Up: Animation d'apparition des sections au scroll
- Bounce-In: Apparition dynamique de la photo de profil
- Pulse: Effet de pulsation sur les icônes
- Slide-In: Entrée fluide des éléments
- Glow: Effet de luminescence sur certains éléments
- Hover Effects: Transformations dynamiques au survol
- Transition fluide entre les projets
- Indicateurs visuels de position
- Responsive sur tous les appareils
- Animations de transition cubic-bezier
- Light Mode (défaut): Blanc/Gris clair avec texte foncé
- Dark Mode: Bleu navy/Gris foncé avec texte clair
- Variables CSS pour gérer les couleurs
- Transition douce entre les thèmes
- Desktop: Layout complet et spacieux
- Tablette: Grille adaptée et espacement réduit
- Mobile: Single column, éléments optimisés
- Tous les composants s'adaptent parfaitement
- Code Konami secret: ↑↑↓↓←→←→BA
- Activation: Spin d'écran + confetti animé
- Une petite surprise amusante!
Portfolio---IA/
├── README.md # Documentation du projet
├── prompt.md # Specifications initiales
├── asset/
│ └── monvisage.png # Photo de profil
└── server/
├── index.html # Structure HTML
├── style.css # Styles et animations
└── script.js # Logique interactive
- Un navigateur web moderne (Chrome, Firefox, Safari, Edge)
- Connexion Internet (pour les liens externes et FormSubmit)
- Clonez le repository
- Ouvrez
server/index.htmldans votre navigateur - Découvrez le portfolio!
Le site peut être hébergé sur:
- GitHub Pages
- Netlify
- Vercel
- N'importe quel serveur web statique
| Couleur | Code | Usage |
|---|---|---|
| Primaire | #6366f1 |
Boutons, liens, accents |
| Secondaire | #ec4899 |
Dégradés, highlights |
| Accent | #f59e0b |
Éléments spéciaux |
| Blanc (Light) | #ffffff |
Fond clair |
| Gris Clair | #f8f9fa |
Sections alternées |
| Bleu Navy (Dark) | #0f172a |
Fond sombre |
| Gris Foncé | #1e293b |
Sections sombres |
- HTML5: Structure sémantique moderne
- CSS3: Flexbox, Grid, Animations, Gradients
- JavaScript (Vanilla): Pas de dépendances externes
- LocalStorage pour persistance données
- Intersection Observer pour animations
- FormSubmit API pour emails
- Gestion d'événements avancée
- Responsive design avec media queries
- ✅ Pas de dépendances externes (sauf FormSubmit API)
- ✅ Chargement rapide (fichiers légers)
- ✅ Optimisé pour SEO basique
- ✅ Images optimisées
// Navigation
- Cliques sur les boutons ❮ ❯
- Flèches du clavier (← →)
- Clic sur les indicateurs// Boutons de filtre
- Tous: affiche les 6 projets
- Jeux: affiche 3 projets
- Programmes: affiche 4 projets// Envoi de message
- Validation des champs
- Message de succès/erreur
- Réinitialisation automatique// Visites
- Incrémenté à chaque chargement
- Persistant en localStorage
- Sauvegarde automatique✅ Structure HTML complète avec sections (About, Skills, Projects, Contact) ✅ Design moderne et cohérent en light/dark mode ✅ Carrousel de projets interactif avec filtrage ✅ Formulaire de contact fonctionnel ✅ Animations fluides et engageantes ✅ Responsive design (mobile, tablette, desktop) ✅ Compteur de visites persistant ✅ Liens cliquables vers GitHub, LinkedIn, Email ✅ Photo de profil visible et bien intégrée ✅ Mode sombre/clair accessible et cohérent ✅ Améliorations bonus (Easter egg, smooth scroll, etc.)
- Intégration d'un blog
- Animation parallaxe sur le héros
- Système de notation des projets
- Chatbot IA pour le support
- Intégration des statistiques GitHub en temps réel
- PWA (Progressive Web App)
- Multilangue (FR/EN)
- Analytics avancées
Ce projet a été créé entièrement avec l'aide de l'IA. Libre d'utilisation et de modification.
Vincent Guerrini
- GitHub: https://github.com/Yokasashii
- LinkedIn: https://www.linkedin.com/in/vincent-guerrini-163920374/
- Email: vincent.dev@gmail.com
En première année d'études en tant que Software Developer à Ynov.
Portfolio créé avec ❤️ et l'IA | © 2026