Projet — Ohmyfood
Dynamiser une page web avec des animations CSS
Objectifs
- Intégrer une maquette mobile-first à partir de designs fournis (mobile + desktop).
- Mettre en place des animations CSS avancées pour enrichir l’expérience utilisateur.
- Structurer et optimiser le code avec SASS.
- Utiliser Git et GitHub pour versionner le projet et assurer un suivi propre et professionnel.
- Garantir une cohérence graphique et une navigation fluide sur l’ensemble du site.
- Mettre en place un environnement front-end complet et organisé.
Mon rôle
- En tant que développeur front-end, j’ai été responsable de :
- L’intégration complète de la maquette en mobile-first, puis l’adaptation en desktop.
- La création et l’optimisation des animations CSS (transitions, keyframes, effets d’apparition, micro-interactions).
- La structuration du projet avec SASS (partials, variables, mixins, architecture modulaire).
- La mise en place du dépôt GitHub, la gestion des commits et du versionnement.
- L’assurance qualité : cohérence visuelle, responsive design, fluidité des interactions.
Ce que j’ai appris
- Approche mobile-first et logique responsive.
- Intégration fidèle à partir d’une maquette Figma.
- Création d’animations CSS modernes pour dynamiser l’interface.
CSS & SASS
- Architecture SASS modulaire (7-1 ou équivalent).
- Utilisation de variables, mixins, nesting, partials.
- Optimisation du code CSS pour une meilleure maintenabilité.
- Comprendre comment les animations améliorent l’expérience utilisateur.
- Créer des effets subtils, non intrusifs, mais engageants.
- Utilisation professionnelle de Git : branches, commits structurés, historique propre.
- Publication et hébergement du projet sur GitHub.
Résultat
- Une interface moderne, fluide et responsive, respectant les maquettes mobile et desktop.
- Un site enrichi d’animations CSS élégantes et performantes.
- Un code propre, organisé et maintenable grâce à SASS.
- Un dépôt GitHub clair, structuré et prêt à être présenté à des recruteurs.