Documentation du template NeonMint

🎯 Vue d’ensemble

NeonMint est un template minimaliste et moderne conçu pour les développeurs et les créatifs digitaux. Son esthétique sombre avec des accents vert menthe offre une expérience visuelle propre, élégante et fonctionnelle, idéale pour les portfolios, dashboards ou pages d’atterrissage tech.

📁 Structure du projet

└── 📁NeonMint
    └── 📁public
        ├── android-chrome-192x192.png
        ├── android-chrome-512x512.png
        ├── apple-touch-icon.png
        ├── favicon-16x16.png
        ├── favicon-32x32.png
        ├── favicon.ico
        └── 📁images
            ├── 📁posts    # Images des articles
            └── 📁projects # Images des projets
         └── site.webmanifest # Fichier de configuration PWA
    └── 📁src
      ├── 📁components  # Composants UI réutilisables
      │   ├── 📁blog    # Composants du blog
      │   ├── 📁layout  # Composants de layout
      │   ├── 📁portfolio # Composants du portfolio
      │   └── 📁ui      # Composants UI
      ├── 📁icons       # Icônes (.svg)
      ├── 📁layouts     # Layouts du site
      │   ├── Layout.astro           # Layout principal de l’application
      │   ├── MarkdownAbout.astro    # Layout de la page À propos
      │   ├── MarkdownPostLayout.astro # Layout des articles
      │   └── ProjectLayout.astro    # Layout des projets
      ├── 📁pages       # Pages du site
      │   ├── about-me.md            # Page À propos
      │   │   ├── 📁blog   # Page Tous les articles
      │   │   ├── index.astro        # Accueil du blog
      │   │   ├── 📁posts            # Articles du blog
      ├── │   ├── └── index.astro     # Page Tous les articles
      │   │   ├── 📁tags             # Tags du blog
      │   │   └── 📁techs            # Technos du blog
      │   ├── index.astro            # Page d’accueil
      │   ├── 📁portfolio
      │   │   └── 📁projects         # Projets du portfolio
      │   ├── robots.txt.ts          # Configuration robots.txt
      │   └── rss.xml.js             # Configuration RSS
      ├── 📁scripts
      │   └── menu.js                # Script du menu
      ├── 📁styles
      │   └── global.css             # Styles globaux
      └── 📁utils
         └── languages.ts           # Configuration des technologies
    ├── .gitignore
    ├── astro.config.mjs
    ├── package-lock.json
    ├── package.json
    ├── README.md
    └── tsconfig.json

🛠️ Stack technologique

• Framework : Astro v5.4.2
• Bibliothèque UI : Preact v10.26.2
• Style : TailwindCSS v4.0.8
• Icônes : astro-icon v1.1.5
• Coloration syntaxique : PrismJS v1.30.0
• Animations : tailwindcss-animated v2.0.0
• Analytique : @vercel/speed-insights v1.2.0

✨ Fonctionnalités clés

1. 🚀 Performance optimisée

   • Génération de site statique
   • Hydratation partielle avec Preact
   • Images et assets optimisés

2. 💻 Expérience de développement moderne

   • Support TypeScript
   • Rechargement à chaud des modules
   • Intégration ESLint

3. 🔍 SEO & Analytics

   • Génération de sitemap intégrée
   • Support RSS
   • Vercel Speed Insights

4. 🎨 Style & UI

   • TailwindCSS pour un styling utility‑first
   • Composants animés
   • Design responsive
   • Support du mode sombre

🚀 Bien démarrer

1. 📦 Installation

   npm install

2. ⚡ Développement

   npm run dev

3. 🏗️ Build (construction)

   npm run build

4. 👀 Aperçu (preview)

   npm run preview

⚙️ Configuration

Le projet est configuré via plusieurs fichiers clés :

• astro.config.mjs : configuration principale Astro
• tailwind.config.js : configuration TailwindCSS
• tsconfig.json : configuration TypeScript

🎨 Personnalisation

📄 Ajouter de nouvelles pages

Créez de nouveaux fichiers .astro dans le répertoire src/pages. Le nom du fichier déterminera la route.

🔧 Ajouter de nouveaux langages ou technologies

Pour intégrer un nouveau langage de programmation ou un outil technologique dans les capsules du site, suivez ces étapes :

1. 🖼️ Ajouter l’icône SVG : placez le fichier SVG du langage ou de l’outil dans le dossier src/icons.

    > **💡 Recommandation** : pour les icônes SVG, je recommande [SVGL](https://svgl.app/), une excellente bibliothèque de vecteurs de haute qualité qui propose des icônes optimisées pour la plupart des langages et technologies.

2. 📝 Enregistrer le langage : ouvrez le fichier utils/languages.ts et ajoutez une nouvelle entrée à l’objet languages suivant ce format :

   html: {
       name: "HTML 5",
       iconName: "html",
   },

   Où :

   • html : identifiant unique du langage
   • name : nom affiché dans l’interface
   • iconName : nom du fichier SVG sans extension (doit correspondre exactement au nom du fichier dans src/icons)

Une fois ces étapes terminées, le nouveau langage ou la nouvelle technologie sera disponible dans les capsules du site. Vous pourrez le sélectionner lors de la création ou de l’édition de projets ou d’articles, et l’icône correspondante s’affichera correctement dans l’interface.

Si vous rencontrez des problèmes durant ce processus, essayez de redémarrer le serveur de développement. Dans certains cas, les changements de configuration ou de ressources statiques nécessitent un redémarrage pour être détectés correctement.

Pour vérifier que le nouveau langage a bien été ajouté, consultez la liste des technologies disponibles dans l’interface après redémarrage du serveur.

🎨 Styling

• Utilisez les classes TailwindCSS pour le styling
• Ajoutez des styles personnalisés dans src/styles/global.css

🧩 Composants

• Créez des composants réutilisables dans src/components
• Importez les icônes avec astro-icon

🚀 Déploiement

Le site est configuré pour un déploiement sur Vercel, mais peut être déployé sur n’importe quel hébergeur statique.

🤝 Contribuer

1. Forker le dépôt
2. Créer une branche de fonctionnalité
3. Committer vos changements
4. Pusher la branche
5. Créer une Pull Request

📄 Licence

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