Bienvenue sur le dépôt de mon portfolio personnel. Ce projet est bien plus qu'un simple CV en ligne : ce site est le hub central de mes réalisations en développement, infrastructure et cybersécurité.
Le site propose une expérience immersive basée sur une esthétique "High-Tech" et minimaliste, structurée autour de plusieurs modules clés :
- Accueil : Interface fluide
- Projets : Galerie asymétrique exposant mes réalisations
- Parcours : Une timeline interactive retraçant mon parcours scolaire et professionnel.
- A propos : Présentation technique avec un système de "Infinite Marquee" pour les stacks technologiques.
- Contact : Hub de communication permettant une prise de contact directe.
Le projet est entièrement containerisé et repose sur une architecture micro-services gérée par Docker Compose.
- Infrastructure : Docker & Docker Compose
- Serveur Web : Nginx (Alpine)
- Tunneling & Sécurité : Cloudflare Tunnel (Zero Trust)
- CI/CD : Déploiement via Git & Docker Compose
Accès au site : https://eolivarez.site
Le projet s’appuie sur un environnement full-stack React moderne, orienté performance, typage strict et déploiement optimisé Edge.
- Framework React full-stack : Next.js 15+ — App Router, Server Components, routing basé sur le système de fichiers, optimisation automatique des performances (SSR / SSG / ISR).
- Langage : TypeScript — Typage statique avancé, sécurité à la compilation, meilleure maintenabilité du code.
- Styling utility-first : Tailwind CSS — Design system cohérent, classes utilitaires, responsive natif et optimisation du bundle.
- Animations & micro-interactions : Framer Motion — Animations déclaratives, transitions fluides, layout animations et orchestration avancée.
- Icônes SVG optimisées : Lucide React — Bibliothèque d’icônes minimaliste, tree-shaking compatible.
- Web analytics : Umami — Solution open-source d’analyse d’audience, légère et respectueuse de la vie privée, auto-hébergée.
- Hébergement & Infra : Docker — Containerisation du site statique avec un serveur Nginx optimisé, auto-hébergé sur une VM dédiée.
- Réseau & Sécurité : Cloudflare Tunnel — Exposition sécurisée du service sans ouverture de ports (Zero Trust), protection contre les attaques et gestion automatique du certificat SSL.
- Protection Formulaire : Cloudflare Turnstile — Alternative respectueuse de la vie privée à reCAPTCHA, avec une intégration invisible pour l'utilisateur.
- Monitoring de Contact : Webhook Discord — Système de notification instantané avec logs de transmission formatés (Style Console).
- Clonage du projet
git clone https://github.com/eolivarez2008/Portfolio.git
cd Portfolio- Installation des dépendances
npm install- Configuration des variables d'environnement
Création du fichier .env.local à la racine du projet
# Cloudflare Turnstile (Captcha)
NEXT_PUBLIC_TURNSTILE_SITE_KEY=votre_cle_publique
TURNSTILE_SECRET_KEY=votre_cle_secrete
# Notifications Discord
DISCORD_WEBHOOK_URL=votre-webhook_url
# Monitoring du serveur avec Uptime Kuma
UPTIME_KUMA_URL=votre-utpime_kuma_url- Lancer le serveur de développement
npm run devLe projet sera accessible sur http://localhost:3000
Développé par Emilien Olivarez – Étudiant en Bac Pro CIEL (ex-SN) Lycée Louis de Cormontaigne, Metz
Ce projet est sous licence MIT. Vous pouvez :
- utiliser librement les fichiers,
- les modifier,
- les redistribuer,
- y compris pour un usage commercial,
à condition de respecter les termes de la licence MIT : https://opensource.org/licenses/MIT