Site web professionnel
Environnement
Node.js, npm, Git, GitHub Pages
Technologies
JavaScript, React, CSS, Markdown, MDX
Déploiement
GitHub Pages, GitLab CI/CD, Netlify
Résultats obtenus
- Site web professionnel fonctionnel et responsive
- Chronologie interactive du parcours professionnel
- Maîtrise des bases de Docusaurus et React
- Déploiement automatisé via GitLab CI/CD
Présentation du projet
Pour débuter mon premier projet en entreprise, mon tuteur m'a assigné la tâche de créer un site web à la fois personnel et professionnel pour une utilisation future. Je me suis renseigné pour trouver des outils adaptés à la réalisation de ce site et j'ai découvert Docusaurus, qui fournit des templates de sites web permettant de partir sur une base solide.
Docusaurus s'est révélé être un excellent outil pour les développeurs débutants car il combine une interface graphique intuitive avec des langages de programmation comme JavaScript et React. Cette combinaison m'a permis d'apprendre progressivement tout en construisant un site fonctionnel et professionnel.
Défis techniques
Modification des fichiers JavaScript
Du côté du développement, il était relativement facile de comprendre comment modifier le site web. Cependant, la tâche la plus complexe était de modifier ou créer des fichiers en JavaScript.
Solution mise en œuvre
J'ai adopté une approche progressive, en commençant par de petites modifications des fichiers existants pour comprendre leur structure. J'ai ensuite consulté la documentation officielle de Docusaurus et des tutoriels en ligne pour approfondir mes connaissances. Cette méthode m'a permis de gagner en confiance et de maîtriser progressivement la création et la modification de fichiers JavaScript.
Création d'une chronologie interactive
Je voulais ajouter une page contenant une chronologie de mon parcours professionnel. Cela m'a pris beaucoup de temps en raison du nombre de fichiers requis et des lignes de code nécessaires.
Solution mise en œuvre
Pour créer une chronologie qui ne soit pas basique, j'ai décidé d'ajouter une touche de modernité et de dynamisme. J'ai recherché des composants React compatibles avec Docusaurus et j'ai finalement opté pour une bibliothèque de chronologie personnalisable. J'ai ensuite adapté le code pour l'intégrer à mon site, en ajoutant des animations et des interactions pour améliorer l'expérience utilisateur.
Personnalisation du thème
Bien que Docusaurus fournisse des templates, je souhaitais personnaliser l'apparence pour créer un site unique qui reflète mon identité professionnelle.
Solution mise en œuvre
J'ai exploré les options de personnalisation offertes par Docusaurus, en modifiant les fichiers CSS et en créant des composants React personnalisés. J'ai également utilisé les variables CSS pour définir une palette de couleurs cohérente à travers le site. Cette approche m'a permis de conserver la structure solide du template tout en créant une identité visuelle unique.
Méthodologie et étapes
Recherche et choix de l'outil
Exploration des différentes solutions pour créer un site web professionnel, comparaison des avantages et inconvénients, et sélection de Docusaurus comme outil principal.
Installation et configuration
Mise en place de l'environnement de développement, installation de Node.js et npm, initialisation du projet Docusaurus et configuration des paramètres de base.
Création du contenu
Rédaction des pages en Markdown, organisation de la structure du site, création des sections principales et intégration des médias (images, icônes).
Personnalisation et développement
Modification du thème, création de composants personnalisés, développement de la chronologie interactive et adaptation du design pour refléter mon identité professionnelle.
Déploiement et intégration continue
Configuration du déploiement sur GitHub Pages, mise en place d'un pipeline CI/CD avec GitLab pour automatiser les mises à jour, et tests de compatibilité sur différents appareils.
Solutions techniques
Templates Docusaurus
- Utilisation des templates prédéfinis comme base solide
- Adaptation de la structure pour mes besoins spécifiques
- Configuration du système de navigation
- Personnalisation des composants de base
Contenu et Markdown
- Rédaction du contenu en Markdown et MDX
- Organisation des pages et de la documentation
- Intégration de composants React dans le contenu
- Utilisation de métadonnées pour le référencement
Développement JavaScript
- Création de composants React personnalisés
- Modification des fichiers de configuration
- Implémentation de la chronologie interactive
- Ajout d'animations et d'interactions
Déploiement et CI/CD
- Configuration du déploiement sur GitHub Pages
- Mise en place d'un pipeline GitLab CI/CD
- Automatisation des tests et du déploiement
- Gestion des versions et des mises à jour
Compétences acquises
Développement web
Maîtrise des bases de JavaScript, React et CSS pour la création d'interfaces web modernes
Docusaurus
Configuration et personnalisation de Docusaurus pour créer des sites web documentaires
Gestion de projet
Organisation du travail, planification des tâches et résolution de problèmes techniques
Déploiement
Configuration de l'intégration continue et du déploiement automatisé avec GitLab CI/CD
Conclusion
Ce projet m'a permis de créer un site web professionnel fonctionnel tout en développant mes compétences en développement web. Docusaurus s'est révélé être un excellent choix pour débuter, offrant un équilibre parfait entre simplicité d'utilisation et possibilités de personnalisation avancées.
La création de la chronologie interactive a été particulièrement enrichissante, me permettant d'approfondir mes connaissances en JavaScript et React. Ce projet a également renforcé ma capacité à rechercher des solutions, à résoudre des problèmes techniques et à mettre en œuvre des fonctionnalités complexes de manière progressive.