🎬 Samuel Dulex Portfolio

L'Art de transformer chaque événement en Histoire

🌐 Site Web • 📸 Instagram • 🎥 YouTube

---

❓ Troubleshooting

Si vous rencontrez des problèmes lors de l'installation ou du lancement :

1. Erreur sharp ou optimisation d'images :
   • Assurez-vous d'utiliser Node.js 20 (requis pour sharp précompilé).
   • Si l'erreur persiste :

     rm -rf node_modules package-lock.json
     npm install --legacy-peer-deps

2. Erreur npm run introuvable :
   • Installez npm via Node.js installer.
3. Problèmes d'environnement :
   • Vérifiez que .env existe (copié depuis .env.example).
   • Les variables PUBLIC_WEB3FORMS_ACCESS_KEY et PUBLIC_CF_ANALYTICS_TOKEN sont nécessaires (peuvent être "mock" pour le dev).
4. Tests Playwright :
   • Si npm run test:e2e échoue, lancez npx playwright install --with-deps pour installer les navigateurs.
   • Le serveur de dev n'est pas lancé automatiquement par les tests. Lancez npm run dev dans un autre terminal avant les tests.
5. Build failed (assets) :
   • Vérifiez que toutes les images référencées dans src/content/project/*.mdx existent réellement.

📖 À propos

Portfolio professionnel de Samuel Dulex, spécialisé dans la création de contenu vidéo et la captation d'événements. Ce site présente mes projets de manière dynamique et immersive, avec un focus sur l'expérience utilisateur et la performance.

Mission: Connecter, Communiquer, Captiver — transformer chaque événement en une histoire mémorable.

Consultez la documentation d'architecture pour plus de détails techniques.

(Note: This project is implemented purely as a static Astro SSG architecture without dynamic backend frameworks).

✨ Fonctionnalités

🎨 Design & Expérience

• Mode sombre/clair avec transition fluide
• Architecture responsive optimisée (Mobile First)
• Animations modernes avec View Transition API & ScrollReveal
• Cartes Projets 3D avec effet Tilt et glare subtil
• Carousel d'accueil intelligent
• Lecteur vidéo intégré avec streaming optimisé

🚀 Performance & SEO

• SEO optimisé avec metadata complète
• RSS Feed pour les dernières publications
• Images optimisées via Sharp
• Carbon Badge avec calcul d'empreinte écologique
• Lighthouse score de 100% en Performance et Accessibilité
• Sécurité renforcée avec CodeQL Analysis et Headers CSP stricts

📚 Documentation

Une documentation détaillée est disponible dans le dossier docs/ :

• 🏗 Architecture : Structure du projet, concepts clés et extension.
• 🔐 Environnement : Variables d'environnement et secrets.
• 📡 API : Endpoints statiques (RSS, Sitemap).
• 🤖 AI : Politique d'utilisation de l'IA.

🚀 Quick Start

Prérequis

• Node.js 20 (Requis pour l'optimisation des images via sharp)
• npm 10+ (Requis pour l'exécution des scripts et le gestionnaire de paquets)

Installation

# Cloner le repository
git clone https://github.com/kuasar-mknd/profilePro.git
cd profilePro

# Installer les dépendances
npm install --legacy-peer-deps

# Configurer l'environnement
cp .env.example .env

# Installer les navigateurs pour les tests E2E
npx playwright install --with-deps

# Lancer le serveur de développement
# Note: Cela lance d'abord l'optimisation des images ('npm run images')
npm run dev

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

Scripts disponibles

• npm run dev : Optimise les images et lance le serveur de développement.
• npm run build : Génère le build de production (avec optimisation d'images et génération CSP).
• npm run check : Vérifie le code (linting + formatage + types).
• npm run lighthouse : Lance l'audit de performance.
• npm run test:e2e : Lance les tests end-to-end avec Playwright.

API Access

Le site est statique mais expose des données via des endpoints générés au build :

# Récupérer le flux RSS (XML)
curl https://portfolio.kuasar.xyz/rss.xml

# Récupérer le Sitemap (XML)
curl https://portfolio.kuasar.xyz/sitemap-index.xml

📂 Structure du projet

/
├── public/              # Assets statiques
├── src/
│   ├── components/      # Composants Astro
│   ├── content/         # Collections de contenu (MDX)
│   ├── layouts/         # Templates de pages
│   ├── pages/           # Pages du site
│   └── config.mjs       # Configuration du site
├── astro.config.mjs     # Configuration Astro
└── package.json

⚙️ Configuration

Personnalisez le site via src/config.mjs (Titre, Réseaux sociaux, etc.) et ajoutez des projets dans src/content/project/.

Voir ARCHITECTURE.md pour plus de détails.

🌐 Déploiement

Le déploiement est automatisé sur Cloudflare Pages via GitHub Actions. Le workflow assure :

1. Vérification de la qualité (check).
2. Tests End-to-End (test:e2e).
3. Scan de sécurité (CodeQL, Dependency Review).
4. Build et déploiement via Wrangler.

Pour plus de détails sur le pipeline, voir ARCHITECTURE.md.

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page. You can also take a look at the contributing guide and code of conduct.

🛡️ Security

Please review our Security Policy for information on reporting security vulnerabilities.

📄 License

Copyright © 2025 Samuel Dulex. This project is MIT licensed.

---

Construit avec ❤️ par Samuel Dulex