Ce projet contient un portfolio professionnel complet pour Abdelghani Mebtouche, développeur full-stack freelance, accompagné de 12 mini-sites de démonstration couvrant différents secteurs d'activité.
├── index.html # Portfolio principal d'Abdelghani
├── mini-sites/ # Collection de mini-sites de démonstration
│ ├── agence-digitale/ # Site d'agence digitale
│ ├── cabinet-medical/ # Site de cabinet médical
│ ├── restaurant/ # Site de restaurant
│ ├── ecole/ # Site d'école primaire
│ ├── mosquee/ # Site de mosquée/centre islamique
│ ├── mairie/ # Site de mairie/collectivité
│ ├── centre-culturel/ # Site de centre culturel
│ ├── avocat/ # Site de cabinet d'avocat
│ ├── hotel/ # Site d'hôtel 4 étoiles
│ ├── boutique/ # Boutique en ligne mode
│ ├── produits-digitaux/ # Plateforme de formations en ligne
│ └── blog-personnel/ # Blog personnel tech
└── README.md # Documentation du projet
- Nom complet : Hani Mebtouche Abdelghani
- Profession : Développeur Full-Stack Freelance
- Spécialités : Développement web et gestion de bases de données
- LinkedIn : Profil LinkedIn
- Frontend : JavaScript (80%), Vue.js (80%), Bootstrap (90%), Tailwind CSS (80%)
- Backend : WordPress (70%), Quasar (70%)
- Bases de données : SQL Server (80%), Oracle (75%), MySQL (80%), SQL Server Data Tools (70%)
- Outils : Power BI (70%), GitHub (70%)
- ✅ Design épuré blanc et beige
- ✅ Navigation fluide avec scroll behavior smooth
- ✅ Animations et transitions Tailwind CSS
- ✅ Photo professionnelle intégrée
- ✅ Sections complètes : À propos, Compétences, Services, Projets, Contact
- ✅ Responsive design complet
- ✅ Intégration du projet externe : Dr Turqui Neuropédiatre
- Type : Agence de services digitaux
- Couleurs : Bleu, violet, rose
- Fonctionnalités : Services, portfolio, contact
- Accès :
mini-sites/agence-digitale/index.html
- Type : Site médical professionnel
- Couleurs : Bleu médical, vert, marine
- Fonctionnalités : Services médicaux, équipe, prise de RDV
- Accès :
mini-sites/cabinet-medical/index.html
- Type : Restaurant français traditionnel
- Couleurs : Orange, brun, crème
- Fonctionnalités : Menu, réservations, présentation chef
- Accès :
mini-sites/restaurant/index.html
- Type : École primaire
- Couleurs : Bleu, vert, violet, orange
- Fonctionnalités : Programmes, activités, inscriptions
- Accès :
mini-sites/ecole/index.html
- Type : Centre islamique
- Couleurs : Vert islamique, or, bleu
- Fonctionnalités : Horaires de prière, événements, services
- Accès :
mini-sites/mosquee/index.html
- Type : Site municipal officiel
- Couleurs : Bleu républicain, rouge, or
- Fonctionnalités : Services municipaux, actualités, démarches
- Accès :
mini-sites/mairie/index.html
- Type : Centre culturel et artistique
- Couleurs : Violet, rose, orange, turquoise
- Fonctionnalités : Programmation, spectacles, ateliers
- Accès :
mini-sites/centre-culturel/index.html
- Type : Cabinet d'avocats
- Couleurs : Marine, or, gris
- Fonctionnalités : Expertises juridiques, équipe, consultations
- Accès :
mini-sites/avocat/index.html
- Type : Hôtel 4 étoiles
- Couleurs : Or, bleu, vert
- Fonctionnalités : Chambres, réservations, restaurant, spa
- Accès :
mini-sites/hotel/index.html
- Type : E-commerce mode
- Couleurs : Rose, violet, bleu
- Fonctionnalités : Collections, panier, paiement
- Accès :
mini-sites/boutique/index.html
- Type : Plateforme de formations digitales
- Couleurs : Bleu, violet, vert
- Fonctionnalités : Formations, e-books, certification
- Accès :
mini-sites/produits-digitaux/index.html
- Type : Blog personnel technologie
- Couleurs : Bleu, violet, rose
- Fonctionnalités : Articles, catégories, newsletter
- Accès :
mini-sites/blog-personnel/index.html
- HTML5 : Structure sémantique
- CSS3 : Styles avancés
- Tailwind CSS : Framework CSS utility-first
- JavaScript : Interactions et animations
- Font Awesome : Icônes vectorielles
- Google Fonts : Typographies (Inter, Poppins, Playfair Display)
- AOS (Animate On Scroll) : Animations de défilement
- Portfolio Principal : Blanc, beige chaud, bleu élégant
- Mini-sites : Palettes spécifiques adaptées à chaque secteur
- Principale : Inter (lisibilité optimale)
- Display : Poppins/Playfair Display (titres élégants)
- Transitions fluides Tailwind CSS
- Effets de hover personnalisés
- Animations de défilement (AOS)
- Smooth scroll behavior
Tous les sites sont entièrement responsives avec :
- Mobile First : Conception optimisée pour mobile
- Breakpoints : SM (640px), MD (768px), LG (1024px), XL (1280px)
- Navigation mobile : Menus adaptés aux écrans tactiles
- Images responsive : Optimisation pour tous les formats
- Ouvrir
index.htmldans un navigateur pour le portfolio principal - Naviguer vers
mini-sites/[nom-du-site]/index.htmlpour chaque mini-site
# Avec Python
python -m http.server 8000
# Avec Node.js
npx serve
# Avec PHP
php -S localhost:8000- Compteur animé de projets et d'expérience
- Barres de progression pour les compétences
- Formulaire de contact fonctionnel
- Animation de texte dactylographié
- Sections avec animations au défilement
- Interactivité : Formulaires, réservations, paniers
- Navigation : Menus fluides et adaptatifs
- Contenu : Textes authentiques et professionnels
- Design : Cohérent avec l'identité de chaque secteur
Ce projet démontre :
- Polyvalence technique : Maîtrise des technologies web modernes
- Design adaptatif : Capacité à créer des identités visuelles variées
- UX/UI : Compréhension des besoins utilisateurs par secteur
- Professionnalisme : Qualité de production prête pour le marché
Chaque site utilise une configuration Tailwind personnalisée :
tailwind.config = {
theme: {
extend: {
colors: {
'brand-primary': '#couleur',
'brand-secondary': '#couleur'
}
}
}
}- Modifier les textes directement dans le HTML
- Ajouter des images dans les dossiers respectifs
- Personnaliser les formulaires de contact
Ce projet est destiné à des fins de démonstration et d'apprentissage.
Abdelghani Mebtouche
- Développeur Full-Stack Freelance
- Spécialiste en développement web et bases de données
- LinkedIn : Profil LinkedIn
Portfolio créé avec passion et expertise technique pour démontrer les compétences en développement web moderne.