🚀 Getting Started - Zed Photography Portfolio

Bienvenue dans votre nouveau portfolio photographique professionnel ! Ce guide vous accompagnera pas à pas pour personnaliser et déployer votre site.

📋 Résumé du Projet

Vous avez maintenant un portfolio photographique complet créé avec Nue.js, comprenant :

✅ Pages Créées

• 🏠 Accueil (index.md) - Présentation avec galerie mise en avant

• 👤 À Propos (apropos.md) - Histoire, philosophie et parcours

• 📷 Portfolio (portfolio.md) - Galerie complète par catégories

• 💼 Services (services.md) - Prestations détaillées avec tarifs

• 📞 Contact (contact.md) - Formulaire et informations de contact

🎨 Design & Fonctionnalités

• Design responsive (mobile, tablette, desktop)

• Images avec lazy loading optimisé

• Système de galerie modulaire

• Navigation fluide entre les pages

• SEO optimisé avec métadonnées complètes

• Accessibilité avec alt tags et structure sémantique

🚀 Démarrage Rapide

Option A : Script Automatique

# Lancer le script de configuration
./setup.sh

Option B : Manuel

1. Vérifier les prérequis

# Vérifier Bun/Node.js
bun --version  # ou node --version

# Installer Nue.js si nécessaire
bun install -g nue  # ou npm install -g nue

1. Lancer le serveur de développement

nue

1. Ouvrir dans le navigateur

http://localhost:8080

🎯 Personnalisation Prioritaire

1. Informations de Base

Modifiez site.yaml avec vos informations :

title: "Votre Nom Photography"
description: "Votre description personnalisée"
author: "Votre Nom"

social:
  instagram: "https://instagram.com/votre-compte"
  facebook: "https://facebook.com/votre-page" 
  linkedin: "https://linkedin.com/in/votre-profil"

2. Page d'Accueil

Dans index.md, personnalisez :

• hero_title : Votre nom/marque

• hero_description : Votre présentation

• gallery_photos : Vos meilleures photos

• services : Vos prestations réelles

3. Page À Propos

Dans apropos.md, modifiez :

• photographer_name : Votre vrai nom

• experience_years : Vos années d'expérience

• location : Votre localisation

• Le contenu des sections texte

4. Services et Tarifs

Dans services.md, ajustez :

• services_detailed : Vos prestations réelles

• additional_services : Services complémentaires

• Les prix selon votre grille tarifaire

5. Contact

Dans contact.md, mettez à jour :

• contact_info : Vos vraies coordonnées

• business_hours : Vos horaires réels

• services_prices : Tarifs actualisés

🖼️ Gestion des Images

Images Actuelles

Le site utilise des images placeholder de Lorem Picsum. Trois options pour les remplacer :

Option 1 : Images Locales

# Ajoutez vos photos dans le dossier images/
images/
├── portrait-1.jpg
├── wedding-1.jpg
├── nature-1.jpg
└── ...

Option 2 : Service d'Hébergement

Uploadez vos images sur :

• Cloudinary

• AWS S3

• Google Drive (liens publics)

• Votre propre serveur

Option 3 : Autres Services Placeholder

Remplacez les URLs dans les fichiers .md :

• Unsplash : https://source.unsplash.com/400x300/?portrait

• Custom placeholder : https://via.placeholder.com/400x300

📖 Guide détaillé : Voir IMAGES-SETUP.md

🎨 Personnalisation Visuelle

Couleurs

Modifiez les CSS Custom Properties dans @global/styles.css :

:root {
  --primary-color: #1a1a1a;      /* Couleur principale */
  --secondary-color: #f5f5f5;     /* Arrière-plan clair */
  --accent-color: #c9a96e;        /* Couleur d'accent (or) */
  --text-color: #333;             /* Texte principal */
  --text-light: #666;             /* Texte secondaire */
}

Typographie

Pour changer la police, modifiez dans @global/styles.css :

body {
  font-family: 'Votre-Police', 'Georgia', serif;
}

Layout

Le layout principal se trouve dans @global/layout.html

• Header avec navigation

• Footer avec informations contact

🌐 Déploiement

Netlify (Recommandé)

1. Push sur GitHub

# Ajouter remote GitHub
git remote add origin https://github.com/votre-username/portfolio.git
git branch -M main
git push -u origin main

1. Configurer Netlify

2. Connecter le repository

3. Build command : nue build -p

4. Publish directory : .build

5. Déployer : Automatique à chaque push

Alternatives

• Vercel : Configuration similaire

• GitHub Pages : Nécessite workflow GitHub Actions

• Serveur classique : Servir le contenu de .build/

📊 Optimisations SEO

Métadonnées

Chaque page .md peut avoir ses propres métadonnées :

--
title: "Titre spécifique - Votre Nom"
description: "Description unique de cette page"
--

Images

• Utilisez des alt tags descriptifs

• Optimisez la taille des images (recommandé : <500KB)

• Formats modernes : WebP, AVIF

Performance

• Le site est déjà optimisé avec lazy loading

• CSS inliné pour réduire les requêtes

• Code minifié en production

🔧 Maintenance

Ajouter du Contenu

# Nouvelle page
echo "---\ntitle: Nouvelle Page\n---\n# Contenu" > nouvelle-page.md

# Ajouter à la navigation (site.yaml)
nav:
  - Nouvelle Page: /nouvelle-page.html

Sauvegardes Git

# Commits réguliers
git add .
git commit -m "Update: description des changements"
git push

Mises à jour

# Mettre à jour Nue.js
npm update -g nue  # ou bun update -g nue

📚 Resources & Support

Documentation

• Portfolio : PORTFOLIO-README.md - Documentation détaillée

• Images : IMAGES-SETUP.md - Guide gestion images

• Nue.js : https://nuejs.org/docs/ - Documentation officielle

Fichiers Importants

• site.yaml - Configuration principale

• @global/styles.css - Styles CSS

• @global/layout.html - Layout général

• @library/gallery.html - Composants galerie

Support

• 🐛 Problèmes : Créer une issue sur GitHub

• 💬 Questions : Discussions GitHub du projet

• 📖 Nue.js : https://nuejs.org/docs/

✅ Checklist de Lancement

Avant de Publier

• [ ] Remplacer toutes les images placeholder

• [ ] Personnaliser tous les textes

• [ ] Vérifier les informations de contact

• [ ] Tester sur mobile/tablette

• [ ] Configurer les liens réseaux sociaux

• [ ] Vérifier les prix/services

• [ ] Tester le formulaire de contact

Après Publication

• [ ] Configurer Google Analytics (optionnel)

• [ ] Soumettre à Google Search Console

• [ ] Partager sur réseaux sociaux

• [ ] Imprimer cartes de visite avec URL

• [ ] Backup régulier des photos

🎉 Prêt à Commencer !

Votre portfolio est maintenant prêt ! Commencez par personnaliser les informations de base, puis ajoutez progressivement vos vraies photos et contenus.

Commandes Essentielles

nue              # Développement
nue build -p     # Build production  
git add .        # Sauvegarder
git commit -m "Update"  # Commit
git push         # Déployer

Bon succès avec votre nouveau portfolio ! 📸✨