Site Personnel - Nicolas Devaux (Astro)

Site personnel moderne de Nicolas Devaux, développeur Web front-end, construit avec Astro.

🚀 Technologies utilisées

• Astro - Framework web moderne pour des sites ultra-rapides
• Tailwind CSS - Framework CSS utilitaire pour un design moderne
• TypeScript - Typage statique pour un code plus robuste
• Cloudflare Pages - Déploiement et hébergement

🛠️ Développement local

Prérequis

• Node.js 24.22.0 ou version ultérieure
• npm ou yarn

Installation

# Cloner le repository
git clone <votre-repo>
cd nicodev-astro

# Installer les dépendances
npm install

# Lancer le serveur de développement
npm run dev

Le site sera accessible sur http://localhost:4321

Commandes utiles

# Build de production
npm run build

# Preview du build de production
npm run preview

# Lancer les tests
npm run test

📁 Structure du projet

src/
├── components/     # Composants réutilisables
├── layouts/        # Layouts de pages
├── pages/          # Pages du site
├── styles/         # Styles globaux
└── utils/          # Utilitaires
public/
├── images/         # Images statiques
└── favicon.svg     # Favicon

🎨 Design System

Le site utilise Tailwind CSS avec une palette de couleurs personnalisée :

• Primaire : Bleu (#2563eb)
• Secondaire : Violet (#7c3aed)
• Accent : Vert (#059669)
• Neutre : Gris (#6b7280)

📱 Responsive Design

Le site est entièrement responsive et optimisé pour :

• Mobile (320px+)
• Tablet (768px+)
• Desktop (1024px+)
• Large Desktop (1280px+)

🚀 Déploiement

Cloudflare Pages

1. Connectez votre repository GitHub à Cloudflare Pages
2. Configurez les paramètres de build :
   • Build command : npm run build
   • Build output directory : dist
3. Déployez !

Variables d'environnement

Variable	Obligatoire	Description
PUBLIC_FORMSPREE_*	En production	URLs des formulaires Formspree
PUBLIC_STRIPE_PAYMENT_LINK_SERENITE	Non	Lien Stripe Payment Link — offre Sérénité (29 €/mois)
PUBLIC_STRIPE_PAYMENT_LINK_VISIBILITE	Non	Lien Stripe Payment Link — offre Visibilité (49 €/mois)

Sans les liens Stripe, les cartes d’offre affichent uniquement le bouton vers /devis/. Sur Cloudflare Pages, ajoutez les mêmes variables dans Settings → Environment variables.

📊 Performance

Le site est optimisé pour les performances avec :

• Génération statique (SSG)
• Images optimisées
• CSS et JS minifiés
• Cache des assets statiques
• Lazy loading des images

🔧 Configuration

Astro

Configuration dans astro.config.mjs :

• Mode statique (SSG)
• Tailwind CSS intégré
• Optimisations de build

Tailwind CSS

Configuration dans tailwind.config.mjs :

• Palette de couleurs personnalisée
• Typographie optimisée
• Composants personnalisés

📝 Licence

Ce projet est sous licence MIT.