Portfolio

Portfolio professionnel - Développeur Web en formation

🚀 Portfolio Marwan Mohammad - Développeur Web

📖 Description

Portfolio professionnel de Marwan Mohammad, développeur web en formation. Ce site présente mon parcours d'apprentissage, mes compétences en développement et mes certifications obtenues.

🌐 Version Live: mamohm.github.io/portfolio

✨ Caractéristiques

• Design Responsif : Adapté à tous les écrans (mobile, tablette, desktop)
• Performance Optimisée : Code CSS/JS minifié et images optimisées
• Accessibilité : Conforme aux standards WCAG 2.1
• SEO Friendly : Meta tags, Schema.org, Open Graph
• Protection du Contenu : Système anti-copie pour les certificats
• Animations Fluides : Transitions CSS3 et animations JavaScript
• Multi-sections : Accueil, À propos, Services, Compétences, Portfolio, Contact

🛠️ Technologies Utilisées

Frontend

• HTML5 : Structure sémantique moderne
• CSS3 :
  • Flexbox et Grid Layout
  • Animations et transitions
  • Variables CSS natives
  • Media queries pour le responsive
• JavaScript (Vanilla) :
  • Manipulation du DOM
  • Système de filtres portfolio
  • Navigation burger menu
  • Protection contre la copie

Outils et Services

• GitHub Pages : Hébergement gratuit
• Git : Contrôle de version
• Visual Studio Code : Éditeur de code
• Google Fonts : Typographies Playfair Display et Inter

🗂️ Structure du Projet

portfolio/
├── 📁 assets/
│   ├── 📁 css/
│   │   └── global.css          # Styles principaux
│   ├── 📁 js/
│   │   └── global.js           # Scripts JavaScript
│   ├── 📁 img/
│   │   ├── 📁 favicon/         # Icônes et favicons
│   │   ├── 📁 social/          # Icônes réseaux sociaux
│   │   └── 📁 sectors/         # Icônes services
│   └── 📁 certificates/        # Images des certificats
├── index.html                  # Page principale
├── README.md                   # Documentation
└── .gitignore                  # Fichiers à ignorer

🎨 Sections du Portfolio

1. Hero Section

• Présentation personnelle
• Navigation principale
• Call-to-action vers contact

2. À Propos

• Parcours d'apprentissage
• Objectifs professionnels
• Photo de profil

3. Services/Formation

• Technologies apprises
• Méthodes d'apprentissage
• Objectifs futurs

4. Compétences

• Compétences techniques (HTML, CSS, JS, Python)
• Barres de progression animées
• Compétences transversales

5. Portfolio

• 6 certificats sélectionnés
• Système de filtres par catégorie
• Projets personnels
• Protection anti-copie

6. Contact

• Liens directs (Email, LinkedIn, GitHub)
• Formulaire de contact simplifié
• Réseaux sociaux

📱 Responsive Design

Le site s'adapte automatiquement à tous les écrans :

• Desktop (1200px+) : Layout à 2 colonnes
• Tablette (768px - 1199px) : Layout adaptatif
• Mobile (< 768px) : Layout en colonne unique avec menu burger

🛡️ Système de Protection

Protection des Certificats

• Filigrane dynamique "PORTFOLIO MARWAN"
• Désactivation du clic droit
• Blocage du glisser-déposer
• Protection contre la sélection
• Blocage des raccourcis de développeur

Sécurité

• Validation HTML5 native
• Échappement des caractères spéciaux
• Headers de sécurité recommandés

🚀 Installation et Utilisation

Méthode 1: Clone Local

# Cloner le repository
git clone https://github.com/MaMohm/portfolio.git

# Naviguer dans le dossier
cd portfolio

# Ouvrir avec un serveur local
# Option 1: Python
python -m http.server 8000

# Option 2: Node.js
npx serve .

# Option 3: PHP
php -S localhost:8000

Méthode 2: GitHub Pages

Le site est automatiquement déployé sur GitHub Pages à chaque push sur la branche main.

Méthode 3: Téléchargement Direct

1. Télécharger le ZIP depuis GitHub
2. Extraire les fichiers
3. Ouvrir index.html dans un navigateur

⚡ Optimisations Performance

• CSS optimisé : Minification et regroupement
• Images optimisées : Format WebP pour les navigateurs compatibles
• Lazy Loading : Chargement différé des images
• Mise en cache : Headers Cache-Control appropriés
• CDN : Utilisation de Google Fonts CDN

📊 Compatibilité Navigateurs

Navigateur	Version Minimale	Statut
Chrome	60+	✅ Testé
Firefox	55+	✅ Testé
Safari	12+	✅ Testé
Edge	79+	✅ Testé
Opera	47+	✅ Testé

🎯 Objectifs du Projet

Objectifs Pédagogiques

• Maîtriser les bases du HTML5 sémantique
• Approfondir CSS3 (Flexbox, Grid, animations)
• Apprendre JavaScript moderne (ES6+)
• Comprendre le responsive design
• Découvrir les bonnes pratiques web

Objectifs Professionnels

• Présenter mes compétences en développement
• Documenter mon parcours d'apprentissage
• Créer une présence en ligne professionnelle
• Faciliter la recherche d'opportunités

🔄 Roadmap et Améliorations Futures

Version 1.1 (Prochaine)

• Mode sombre/clair
• Multilingue (FR/EN/AR)
• Blog de développement
• Plus de projets personnels

Version 1.2 (Future)

• PWA (Progressive Web App)
• Optimisations SEO avancées
• Intégration API GitHub
• Formulaire de contact backend

Version 2.0 (Long terme)

• Migration vers un framework (React/Vue)
• CMS headless pour le contenu
• Analytics avancés
• Tests automatisés

📈 Métriques et Analytics

Performance (Lighthouse)

• Performance : 95/100
• Accessibilité : 100/100
• Bonnes pratiques : 100/100
• SEO : 100/100

Fonctionnalités Tracking

• Pages vues
• Temps de session
• Interactions portfolio
• Clics sur liens externes

🤝 Contribution

Ce projet est personnel, mais les suggestions sont les bienvenues !

Comment contribuer :

1. Fork le projet
2. Créer une branche feature (git checkout -b feature/AmeliorationIncroyable)
3. Commit les changements (git commit -m 'Ajout fonctionnalité incroyable')
4. Push vers la branche (git push origin feature/AmeliorationIncroyable)
5. Ouvrir une Pull Request

Signaler un Bug :

• Utiliser les GitHub Issues
• Décrire le problème en détail
• Inclure captures d'écran si possible
• Spécifier navigateur et version

📄 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

Utilisation Autorisée

• ✅ Usage personnel et commercial
• ✅ Modification et distribution
• ✅ Usage dans des projets privés

Conditions

• 📋 Inclure la licence dans les copies
• 📋 Créditer l'auteur original

📞 Contact

Marwan Mohammad - Développeur Web en Formation

---

🙏 Remerciements

• Inspiration Design : Communauté Dribbble et Behance
• Ressources : MDN Web Docs, W3Schools, Stack Overflow
• Outils : GitHub, Visual Studio Code, Git
• Fonts : Google Fonts (Playfair Display, Inter)
• Icons : Icons8, Feather Icons

---

📚 Ressources d'Apprentissage

Documentations Utilisées

• MDN Web Docs - Référence HTML/CSS/JS
• CSS-Tricks - Techniques CSS avancées
• JavaScript.info - Guide JavaScript moderne
• Can I Use - Compatibilité navigateurs

Tutoriels Suivis

• HTML/CSS responsive design
• JavaScript manipulation DOM
• Git et GitHub Pages
• Optimisation performance web

---

🔧 Développement Local

Prérequis

• Navigateur web moderne
• Éditeur de code (VS Code recommandé)
• Git pour la gestion de version
• Serveur local (optionnel)

Configuration VS Code Recommandée

Extensions Utiles :

• Live Server : Serveur de développement en temps réel
• Prettier : Formatage automatique du code
• Auto Rename Tag : Renommage automatique des balises HTML
• Bracket Pair Colorizer : Coloration des parenthèses
• GitLens : Amélioration de l'intégration Git

Settings.json :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "html.format.wrapAttributes": "force-aligned",
  "css.validate": true,
  "javascript.validate.enable": true
}

---

Dernière mise à jour : Septembre 2025
Status : En développement actif 🚧
Version : 1.0.0