Site Freelance AutoFlowAI - Workflows IA n8n

Site web moderne créé avec Astro.js pour présenter des services de freelance spécialisés dans l'automatisation IA avec n8n.

🚀 Fonctionnalités

• Design moderne : Interface épurée avec animations et micro-interactions
• Responsive : Optimisé pour tous les appareils
• Performance : Site statique rapide généré avec Astro.js
• Sections complètes :
  • Hero avec statistiques et animations
  • Services détaillés avec tarification
  • Processus de travail structuré
  • Portfolio de réalisations
  • Formulaire de contact interactif
  • Footer complet

🛠️ Technologies utilisées

• Astro.js - Framework moderne pour sites statiques
• CSS3 - Styles avancés avec variables CSS et animations
• JavaScript - Interactions et formulaires
• Font Awesome - Icônes
• Google Fonts - Police Inter

📁 Structure du projet

src/
├── components/
│   ├── Navigation.astro
│   ├── Hero.astro
│   ├── Services.astro
│   ├── Process.astro
│   ├── Portfolio.astro
│   └── Contact.astro
├── layouts/
│   └── Layout.astro
└── pages/
    └── index.astro

🏃‍♂️ Démarrage rapide

# Installation des dépendances
npm install

# Serveur de développement
npm run dev

# Build de production
npm run build

# Prévisualisation du build
npm run preview

🎨 Personnalisation

Couleurs (CSS Variables)

Les couleurs principales sont définies dans src/layouts/Layout.astro :

• --primary-color : Bleu principal
• --secondary-color : Violet secondaire
• --accent-color : Cyan d'accentuation

Contenu

• Modifiez les textes dans chaque composant
• Adaptez les services et tarifs dans Services.astro
• Personnalisez le portfolio dans Portfolio.astro

Contact

• Configurez le formulaire dans Contact.astro
• Modifiez les informations de contact dans le footer

📈 Performances

• Score Lighthouse : 95+
• Temps de chargement optimisé
• SEO optimisé
• Images et ressources compressées

🔧 Optimisations incluses

• Meta tags SEO
• Open Graph pour réseaux sociaux
• Schema.org pour référencement
• Optimisation des images
• Lazy loading
• CSS critique inline

📱 Responsive

• Mobile First
• Breakpoints optimisés
• Touch-friendly
• Navigation mobile hamburger

🎯 Sections détaillées

Hero

• Titre accrocheur avec animation
• Statistiques clés
• Call-to-action principal
• Visualisation workflow animée

Services

• 3 services principaux
• Tarification transparente
• Technologies maîtrisées
• Features détaillées

Processus

• 4 étapes claires
• Méthodologie Agile
• Durées estimées
• Visualisation cycle

Portfolio

• 6 réalisations diverses
• Résultats quantifiés
• Technologies utilisées
• Témoignages clients

Contact

• Formulaire complet
• Moyens de contact multiples
• Validation JS
• Footer avec liens

📄 Licence

Projet personnel - Tous droits réservés