Portfolio Web - Ahmed DOUYRY

Description du projet

Ce projet est un portfolio web personnel realise uniquement en HTML5 et CSS3, dans le cadre du Mini Projet 1 du module Web. Il presente mon parcours, mes competences, mes experiences professionnelles, mes projets et mes coordonnees de contact.

---

Structure du projet

/
├── index.html      # Page principale du portfolio
├── style.css       # Feuille de styles CSS
└── README.md       # Rapport de projet

---

Sections du portfolio

Section	Description
Navigation	Barre de navigation fixe avec liens d'ancrage et menu hamburger mobile
Hero	Presentation principale avec nom, titre, description et liens sociaux
A propos	Description personnelle, informations de contact et statistiques
Competences	Langages, frameworks, bases de donnees, DevOps et outils
Experience	Timeline des stages professionnels
Projets	Carte des projets academiques et personnels
Formation	Parcours academique
Langues	Competences linguistiques avec indicateurs visuels
Contact	Informations de contact et formulaire
Footer	Liens vers les reseaux sociaux

---

Captures d'ecran

Hero / Header

A propos

Competences

Experience

Projets

Formation

Contact

---

Technologies utilisees

• HTML5 : Structure semantique du site (<nav>, <section>, <header>, <footer>, <main>)
• CSS3 : Mise en page, animations et responsive design

---

Exigences CSS respectees

Flexbox et Grid

• CSS Grid utilise pour :
  • La grille about-grid (2 colonnes)
  • La grille skills-categories (auto-fit responsive)
  • La grille projects-grid (auto-fit responsive)
  • La grille education-grid (auto-fit responsive)
  • La grille contact-wrapper (2 colonnes)
  • Les statistiques about-stats (3 colonnes)
• Flexbox utilise pour :
  • La barre de navigation
  • Les boutons hero et liens sociaux
  • Les tags de competences
  • La timeline d'experience
  • Les langues
  • Le footer

Palette de couleurs coherente (3 couleurs)

Couleur	Code HEX	Utilisation
Bleu fonce (fond)	#0a0f1a	Arriere-plan principal
Cyan (accent)	#06b6d4	Accents, liens, hover
Gris clair (texte)	#e2e8f0	Texte principal

Typographie

• Police systeme lisible : Segoe UI, Tahoma, Geneva, Verdana, sans-serif
• Hierarchie claire : titres en gras (700-800), texte courant en 400-500

Responsive Design

• 3 media queries implementees :
  • @media (max-width: 992px) — Tablettes : reorganisation hero, grilles en 1 colonne
  • @media (max-width: 768px) — Mobile : menu hamburger, ajustements tailles et espacements
  • @media (max-width: 480px) — Petit mobile : boutons plein largeur, grilles simplifiees

Animations CSS

• fadeInUp, fadeInLeft, fadeInRight — Apparitions fluides
• glowPulse — Effet lumineux sur l'avatar
• float — Animation de flottement des icones tech
• typing + blinkCaret — Effet machine a ecrire sur le titre
• scaleIn — Apparition avec zoom
• slideDown — Animation de la navbar
• Transitions hover sur toutes les cartes et boutons

---

Comment visualiser le projet

1. Cloner le repository :

   git clone https://github.com/ahmed-douyry/portfolio.git

2. Ouvrir le fichier index.html dans un navigateur web

Aucune dependance externe, aucun framework, aucun build necessaire.

---

Auteur

• Nom : Ahmed DOUYRY
• Email : [email protected]
• LinkedIn : linkedin.com/in/ahmed-douyry
• GitHub : github.com/ahmed-douyry