Bienvenue sur le dépôt de mon Portfolio Interactif. Ce projet est une vitrine de mes compétences, combinant une expérience utilisateur immersive en 3D avec une interface web moderne et accessible.

🔗 Démo en ligne : ange-grimaud.fr

Ce portfolio a été conçu pour offrir deux expériences de navigation distinctes :

1. 🌍 Mode Expérience (3D) : Une expérience immersive où l'utilisateur navigue dans un environnement 3D (développé avec Three.js et React Three Fiber). Chaque élément du décor représente une section de mon parcours.
2. 📄 Mode Classique : Une interface web traditionnelle, épurée et réactive, pour une lecture rapide et efficace des informations.

L'objectif est de démontrer une maîtrise technique à la fois dans le développement web "classique" et dans la création d'expériences graphiques avancées.

• Switch Mode : Passez instantanément du mode 3D au mode Classique.
• Support Mobile : Interface responsive adaptée aux écrans tactiles.
• Dark/Light Mode : Gestion des thèmes intégrée.
• Multilingue : Changement de langue dynamique & intégrale.
• Animations : Transitions fluides entre les pages et les états.

Ce projet utilise les dernières technologies de l'écosystème React :

• React 19 : Bibliothèque UI principale.
• Vite : Bundler ultra-rapide pour le développement.
• Zustand : Gestionnaire d'état global léger et performant.

• Three.js : Moteur 3D.
• React Three Fiber : Réconciliateur React pour Three.js.
• @react-three/drei : Collection d'aides et d'abstractions pour R3F.
• @react-three/postprocessing : Effets de post-traitement.

• Framer Motion : Bibliothèque d'animations pour React.
• CSS : Gestion des styles globaux et dynamiques.

• ESLint : Linter pour assurer la qualité du code.

L'architecture du projet est organisée par fonctionnalités (features) pour une meilleure maintenabilité :

├── 📁 public
│   ├── 📁 character
│   │   ├── 📄 animations.glb
│   │   ├── 📄 idle.glb
│   │   └── 📄 skin.glb
│   ├── 📁 cursors
│   │   ├── 📄 arrow.cur
│   │   └── 📄 hand.cur
│   ├── 📁 fonts
│   │   └── 📄 PersonalFont.ttf
│   ├── 📁 images
│   │   ├── 🖼️ ange.jpeg
│   │   └── 🖼️ kimono.png
│   ├── 📁 models
│   │   ├── 📁 buildings
│   │   │   ├── 📄 fountain.glb
│   │   │   ├── 📄 house.glb
│   │   │   ├── 📄 runeStone.glb
│   │   │   ├── 📄 tower.glb
│   │   │   └── 📄 treeStump.glb
│   │   ├── 📁 nature
│   │   │   ├── 📄 bush.glb
│   │   │   ├── 📄 rock.glb
│   │   │   └── 📄 tree.glb
│   │   └── 📁 props
│   │       └── 📄 sign.glb
│   ├── 📁 pdf
│   │   └── 📕 CV_Ange_GRIMAUD.pdf
│   ├── 📁 sounds
│   │   └── 🎵 background_music.mp3
│   ├── 📁 textures
│   │   └── 🖼️ grass.jpg
│   └── 📄 CNAME
├── 📁 src
│   ├── 📁 components
│   │   ├── 📁 books
│   │   │   ├── 📄 ProjectPage.jsx
│   │   │   ├── 📄 SkillsPage.jsx
│   │   │   └── 📄 TextPage.jsx
│   │   ├── 📁 classic
│   │   │   ├── 📄 ContactCard.jsx
│   │   │   ├── 📄 ProjectCard.jsx
│   │   │   └── 📄 SkillBar.jsx
│   │   ├── 📁 common
│   │   │   ├── 📄 KeyCap.jsx
│   │   │   ├── 📄 LanguageSwitchButton.jsx
│   │   │   └── 📄 ThemeSwitch.jsx
│   │   └── 📁 layout
│   │       ├── 📄 LoadingScreen.jsx
│   │       └── 📄 UI.jsx
│   ├── 📁 data
│   │   └── 📄 content.js
│   ├── 📁 features
│   │   ├── 📁 classic
│   │   │   └── 📄 ClassicPortfolio.jsx
│   │   ├── 📁 menu
│   │   │   └── 📄 MainMenu.jsx
│   │   └── 📁 world
│   │       ├── 📄 Effects.jsx
│   │       ├── 📄 Environment.jsx
│   │       ├── 📄 GameScene.jsx
│   │       ├── 📄 Player.jsx
│   │       └── 📄 World.jsx
│   ├── 📁 hooks
│   │   └── 📄 useIsMobile.js
│   ├── 📁 store
│   │   └── 📄 useStore.js
│   ├── 📁 styles
│   │   └── 🎨 index.css
│   ├── 📄 App.jsx
│   └── 📄 main.jsx
├── ⚙️ .gitignore
├── 📝 README.md
├── 📄 eslint.config.js
├── 🌐 index.html
├── ⚙️ package-lock.json
├── ⚙️ package.json
└── 📄 vite.config.js

Pour lancer ce projet localement, suivez ces étapes :

• Node.js (v18+ recommandé)
• npm ou yarn

1. Cloner le dépôt

   git clone https://github.com/Letrude/letrude.github.io.git
   cd letrude.github.io

2. Installer les dépendances

   npm install

3. Lancer le serveur de développement

   npm run dev

   L'application sera accessible à l'adresse http://localhost:5173.

4. Construire pour la production

   npm run build

Ange GRIMAUD - Développeur Fullstack

• 📧 Email : ange.grimaud@etu.uca.fr
• 💼 LinkedIn : Ange GRIMAUD
• 🐙 GitHub : letrude

Fait avec ❤️ et beaucoup de café ☕