Eclipse est un template de développement web moderne conçu avec Astro, MDX et Tailwind CSS. Ce template a été créé pour aider les développeurs, designers et créateurs de contenu à construire des portfolios en ligne performants et élégants. Que vous souhaitiez mettre en avant vos projets ou partager vos idées et tutoriels via un blog, Eclipse offre une approche simple et minimaliste du design web.
Fonctionnalités
- Vitrine de Projets : Une section dédiée pour présenter vos projets avec des descriptions détaillées, des images et des visuels attractifs. Idéale pour montrer vos réalisations de manière élégante.
- Blog Fonctionnel : Inclut un blog où vous pouvez partager des idées, des tutoriels, des mises à jour ou des histoires personnelles. Le blog est optimisé pour offrir une expérience utilisateur fluide et agréable.
- Section « À Propos » : Un espace pour présenter votre profil professionnel, vos compétences et votre parcours. C’est l’endroit idéal pour vous introduire auprès de vos visiteurs.
- Optimisation SEO : Le template est optimisé pour les moteurs de recherche, garantissant ainsi une meilleure visibilité de votre site sur le web.
Technologies Utilisées
- Astro : Un générateur de site statique rapide et optimisé pour des performances maximales.
- MDX : Permet de créer facilement et d’intégrer du contenu dynamique avec une syntaxe Markdown tout en ajoutant des composants React.
- Tailwind CSS : Utilisé pour un design UI réactif et esthétique, Tailwind vous permet de personnaliser facilement l’apparence du site tout en garantissant une expérience mobile fluide.
- Eclipse Lighthouse Score : Eclipse est conçu pour être performant, avec un score élevé sur Lighthouse pour les performances, l’accessibilité et les meilleures pratiques.
Structure du Projet
La structure du projet est organisée comme suit :
/src
: Contient tous les fichiers source du projet./components
: Composants UI réutilisables./pages
: Les pages de l’application./content
: Contenu du site (incluant les blogs et les projets)./data
: Fichiers de données comme les configurations ou les constantes./public
: Ressources statiques comme les images et les polices./styles
: Styles globaux et configuration Tailwind CSS.
Utilisation de MDX
MDX est utilisé dans Eclipse pour créer du contenu dynamique. MDX vous permet d’écrire du JSX dans des fichiers Markdown, ce qui rend facile l’intégration de composants React au sein de vos contenus Markdown.
Voici comment MDX est utilisé dans Eclipse :
- Créez des fichiers MDX dans les répertoires
/src/pages
ou/src/content/*
. - Utilisez la syntaxe Markdown pour la mise en forme du texte.
- Intégrez des composants React directement dans le contenu Markdown pour des éléments interactifs.
Contribuer
Les contributions à Eclipse sont les bienvenues ! Si vous avez des idées, des améliorations ou des corrections de bugs, n’hésitez pas à forker le dépôt et à soumettre une pull request. Pour des changements majeurs, veuillez ouvrir une issue au préalable afin de discuter de vos idées.
Ce template a été créé pendant mon temps libre car je voulais m’entraîner à travailler avec Astro, MDX et Tailwind CSS. Je l’ai ensuite publié sur GitHub pour permettre à d’autres personnes de l’utiliser. Si vous êtes développeur ou créateur de contenu, je vous encourage à essayer Eclipse pour vos projets et portfolios en ligne.