Un portfolio moderne et responsive développé avec Nuxt 3, présentant mes projets, compétences et expériences professionnelles.

• 🎨 Design moderne avec thème sombre/clair
• 📱 Responsive sur tous les appareils
• ⚡ Performance optimisée avec Nuxt 3
• 🎬 Animations fluides avec Vue Transitions
• 📊 Statistiques des projets dynamiques
• 🔍 Filtrage des projets par technologie
• 🌐 SEO optimisé avec meta tags dynamiques
• 🐳 Containerisé avec Docker

• Nuxt 3 - Framework Vue.js full-stack
• Vue 3 - Framework JavaScript réactif
• TypeScript - Typage statique
• Tailwind CSS - Framework CSS utilitaire
• Nuxt Icon - Gestion des icônes

• ESLint - Linting du code
• Prettier - Formatage du code
• Docker - Containerisation
• Git - Contrôle de version

• Node.js 20+
• npm
• Git

# Cloner le projet
git clone https://github.com/williamloree/OpenFolio
cd OpenFolio

# Installer les dépendances
npm install

# Lancer le serveur de développement
npm run dev

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

# Builder l'image Docker
docker build -t OpenFolio .

# Lancer le conteneur
docker run -p 3000:3000 OpenFolio

OpenFolio/
├── 📂 components/          # Composants Vue réutilisables
│   ├── Header.vue
│   └── Footer.vue
├── 📂 pages/              # Pages Nuxt (routage automatique)
│   ├── index.vue          # Page d'accueil
│   ├── projets.vue        # Page des projets
│   └── contact.vue        # Page de contact
├── 📂 public/             # Fichiers statiques
│   ├── 📂 images/         # Images du portfolio
│   └── 📂 data/           # Données JSON
├── 📂 assets/             # Ressources (CSS, images à traiter)
├── 📂 utils/              # Fonctions utilitaires
├── 📄 nuxt.config.ts      # Configuration Nuxt
├── 📄 tailwind.config.js  # Configuration Tailwind
├── 📄 Dockerfile          # Configuration Docker
└── 📄 package.json        # Dépendances du projet

Les données sont stockées dans des fichiers JSON dans le dossier public/data/ :

• education.json - Formations et diplômes
• experiences.json - Expériences professionnelles
• projects.json - Projets réalisés
• skills.json - Compétences techniques

{
  "projects": [
    {
      "id": "1",
      "title": "Mon Super Projet",
      "description": "Description courte du projet",
      "longDescription": "Description détaillée...",
      "image": "/images/projet1.jpg",
      "technologies": ["Vue.js", "Nuxt.js", "Tailwind"],
      "status": "completed",
      "demoUrl": "https://demo.example.com",
      "githubUrl": "https://github.com/user/repo",
      "featured": true
    }
  ]
}

# Développement
npm run dev              # Serveur de développement
npm run build            # Build de production
npm run preview          # Aperçu du build de production

# Qualité du code
npm run lint             # Vérification ESLint
npm run lint:fix         # Correction automatique ESLint

# Docker
docker build -t OpenFolio .    # Builder l'image
docker run -p 3000:3000 OpenFolio  # Lancer le conteneur

Le portfolio est optimisé pour tous les appareils :

• 📱 Mobile : 320px - 768px
• 📱 Tablet : 768px - 1024px
• 💻 Desktop : 1024px+

Le portfolio propose un système de thèmes complet et personnalisable directement via nuxt.config.ts.

• 🌙 Default - Thème sombre moderne (défaut)
• 🌈 Cyberpunk - Néon et futurisme
• 🌲 Forest - Tons verts et naturels
• 🌊 Ocean - Bleus apaisants

export default defineNuxtConfig({
  // Changer le thème principal ici
  css: ["~/assets/themes/default.css"], // ou cyberpunk.css, forest.css, ocean.css
  
  // Configuration avancée des thèmes
  runtimeConfig: {
    public: {
      themeOptions: {
        // Mode développeur pour debug des thèmes
        devMode: process.env.NODE_ENV === 'development',
        // Thème actuel
        currentTheme: 'default',
        // Particules de fond activées
        backgroundParticles: true,
        // Transitions activées
        smoothTransitions: true
      }
    }
  }
})

Chaque thème utilise des variables CSS définies dans assets/themes/[theme].css :

:root {
  /* Couleurs principales */
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  --accent-color: #10b981;
  
  /* Arrière-plans */
  --background-primary: #000000;
  --background-secondary: #111827;
  --background-tertiary: #1f2937;
  
  /* Textes */
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  
  /* Gradients personnalisés */
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-card: linear-gradient(145deg, #1f2937, #111827);
  
  /* Effets visuels */
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);
}

1. Créer le fichier CSS dans assets/themes/mon-theme.css
2. Définir les variables selon la structure ci-dessus
3. Modifier nuxt.config.ts :

   css: ["~/assets/themes/mon-theme.css"]

• 🎆 Particules animées configurables par thème
• ✨ Transitions fluides entre les sections
• 🐛 Mode debug pour développement
• 📱 Responsive sur tous les appareils
• ♿ Accessibilité préservée

# Build du projet
npm run build

# Les fichiers sont dans .output/

# Builder l'image Docker
docker build -t OpenFolio .

# Lancer avec docker-compose
docker-compose up -d

• ⚡ Lighthouse Score : 95+
• 🎯 Core Web Vitals : Optimisés
• 📦 Bundle Size : < 200KB
• 🚀 First Paint : < 1.5s

Les contributions sont les bienvenues !

1. Fork le projet
2. Créez votre branche (git checkout -b feature/nouvelle-fonctionnalite)
3. Commitez vos changements (git commit -m 'Ajout nouvelle fonctionnalité')
4. Push sur la branche (git push origin feature/nouvelle-fonctionnalite)
5. Ouvrez une Pull Request

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

• 📧 Email : loreewilliam988@gmail.com
• 💼 LinkedIn : Votre Profil
• 🐱 GitHub : Votre Username
• 🌐 Portfolio : votre-domaine.com

• Nuxt.js pour l'excellent framework
• Tailwind CSS pour le framework CSS
• Iconify pour les icônes
• La communauté open source pour l'inspiration

⭐ N'hésitez pas à mettre une étoile si ce projet vous a aidé !