Evoubabp est un portfolio web moderne et innovant qui présente mes compétences, projets et approche de développement. Construit avec les technologies les plus récentes, ce site démontre mon expertise en développement full-stack et mon adaptation aux outils modernes.
"Je suis développeur expérimenté mais conscient que le domaine du code évolue. Je m'adapte parfaitement avec les outils modernes pour garantir la qualité, la sécurité et la performance de chaque ligne de code."
- Design circulaire interactif pour la section Développement Rigoureux
- Timeline horizontale pour la présentation des outils modernes
- Animations fluides avec Framer Motion
- Interface responsive optimisée pour tous les appareils
- Header dynamique avec effets de scroll
- Technologies utilisées avec filtres par catégorie (Mobile, Web, Fullstack)
- Projets showcase avec détails techniques
- Formations disponibles
- Développement Rigoureux - Processus de qualité (design circulaire)
- IA au cœur des solutions - Intelligence artificielle
- Outils modernes - CodeRabbit, Claude Code, Sentry (design timeline)
- Applications mobiles portfolio
- Design circulaire : Les 6 étapes de développement disposées en cercle avec hub central interactif
- Timeline workflow : Présentation innovante des outils sans surcharge de cartes
- AnimatePresence : Transitions fluides entre les états
- Hover effects : Interactions engageantes sur tous les éléments
- React 18 - Bibliothèque UI
- TypeScript - Typage statique
- Vite - Build tool ultra-rapide
- Styled Components - CSS-in-JS avec support TypeScript
- Framer Motion - Animations déclaratives
- GSAP - Animations avancées (partiellement utilisé)
- CodeRabbit - Révision de code IA
- Claude Code - Assistant de développement IA
- Sentry - Monitoring et performance
- ESLint - Linting JavaScript/TypeScript
- Prettier - Formatage de code
- React Icons - Bibliothèque d'icônes complète
- Lottie - Animations vectorielles
- Node.js >= 18.x
- npm ou yarn
# Cloner le repository
git clone https://github.com/TardinDev/Evoubabp.git
# Naviguer dans le dossier
cd Evoubabp
# Installer les dépendances
npm install
# Lancer le serveur de développement
npm run dev
# Build pour la production
npm run build
# Prévisualiser le build de production
npm run previewEvoubabp/
├── src/
│ ├── components/
│ │ ├── AI/ # Section IA
│ │ ├── DevTools/ # Développement rigoureux (design circulaire)
│ │ ├── Header/ # En-tête avec navigation
│ │ ├── TechUsed/ # Technologies avec filtres
│ │ ├── Tools/ # Outils modernes (design timeline)
│ │ ├── formation/ # Formations disponibles
│ │ └── projects/ # Portfolio de projets
│ ├── hooks/ # Custom React hooks
│ ├── shared/
│ │ └── types/ # Types TypeScript partagés
│ ├── utils/ # Utilitaires et helpers
│ ├── Pages/ # Pages principales
│ └── main.tsx # Point d'entrée
├── public/ # Assets statiques
└── package.json
Design circulaire innovant avec :
- Hub central affichant l'étape active
- 6 nœuds circulaires : Code Propre, Tests Rigoureux, Sécurité, Validation Continue, UX, Performance
- Panel de détails dynamique avec métriques
- Indicateurs de progression cliquables
Timeline horizontale interactive avec :
- CodeRabbit (orange) - Révision IA
- Claude Code (étoile orange) - Développement assisté
- Sentry (violet foncé) - Monitoring
Filtrage par catégorie :
- Mobile (React Native, Flutter)
- Web (React, Vue.js, Angular)
- Fullstack (Node.js, Python, etc.)
{
"dev": "vite", // Serveur de développement
"build": "vite build", // Build de production
"preview": "vite preview", // Prévisualiser le build
"lint": "eslint . --ext ts,tsx" // Linting du code
}// Gradients
const primaryGradient = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)";
const orangeGradient = "linear-gradient(135deg, #FF6B35, #F7931E)";
// Backgrounds
const lightBg = "#ffffff";
const mobileSectionBg = "#d4e4fa";Toutes les animations utilisent Framer Motion pour des performances optimales :
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>Le site est entièrement responsive avec des breakpoints :
- Mobile : < 768px
- Tablet : 768px - 1024px
- Desktop : > 1024px
- Bundle size : ~3.1MB (avec optimisations possibles)
- Code splitting : À implémenter pour améliorer les performances
- Lazy loading : Images et composants chargés à la demande
- Cache stratégique : Optimisation du temps de chargement
- Protection contre les vulnérabilités OWASP
- Chiffrement SSL/TLS
- Validation des entrées
- Audit de sécurité régulier
- ✅ 100% Code Coverage
- ✅ 99.9% Disponibilité
- ✅ < 2s Temps de chargement
- ✅ A+ Score de sécurité
Ce projet est un portfolio personnel, mais les suggestions et feedbacks sont les bienvenus !
- Fork le projet
- Créer une branche feature (
git checkout -b feature/AmazingFeature) - Commit les changements (
git commit -m 'Add some AmazingFeature') - Push sur la branche (
git push origin feature/AmazingFeature) - Ouvrir une Pull Request
Ce projet est sous licence privée - voir le fichier LICENSE pour plus de détails.
Tardin Davy - Développeur Full-Stack
- Portfolio : evoubap.com
- GitHub : @TardinDev
- LinkedIn : Davy Tardin
- React pour l'excellente bibliothèque UI
- Vite pour le build tool ultra-rapide
- Framer Motion pour les animations fluides
- Styled Components pour le CSS-in-JS
- Anthropic pour Claude Code
- CodeRabbit pour la révision de code IA
- Sentry pour le monitoring
⭐ N'hésitez pas à donner une étoile si vous aimez ce projet ! ⭐