Portfolio démonté

Ce portfolio est lui-même un projet : PHP côté serveur, JavaScript vanilla — zéro framework — et CSS fait main. Voici ses pièces détachées, chacune avec une démo qui tourne en direct. Quatre easter eggs sont planqués sur cette page.

↗ Voir le site en ligne

Sous le capot

Les effets, en vrai

Chaque animation du site, isolée et rejouable ici — avec un aperçu du code qui la produit.

🌐 Particules connectées

Réseau de points en canvas qui réagit au curseur. Tracé des liens quand deux points sont proches.

for(i<pts.length){ d = hypot(a.x-b.x, a.y-b.y); if(d < 60) drawLink(a,b, 1-d/60); }

⚡ Glitch RGB

Décalage des couches rouge/cyan sur un titre, par pseudo-éléments CSS et clip-path. Aucun JS pour l'effet.

GLITCH

.glitch::before{ color: #ff0040; clip-path: polygon(0 0,100% 0,100% 38%,0 38%); }

🎨 Système de thème

Bascule sombre/clair pilotée par variables CSS. Un attribut sur la racine, tout le reste suit.

data-theme = dark

⌨️ Terminal interactif

Interpréteur maison. Essaie help, stack, ouvrir… ou autre chose 😏

visiteur@portfolio:~$

Diagnostic

Ce que ce site voit de toi

Démo de fingerprinting passif — tout est lu côté navigateur, en JavaScript. Rien n'est envoyé ni stocké.

🔒 Ces informations sont accessibles à n'importe quel site que tu visites. C'est exactement pour ça que la confidentialité et le durcissement du navigateur comptent.

En bref

Le projet

🎯 Pourquoi

Une vitrine pour ma recherche d'alternance, mais aussi un terrain de jeu technique : tout est codé à la main pour comprendre en profondeur, sans framework.

🛠 Comment

PHP (sessions, CSRF, formulaire de contact), JS vanilla pour les animations (canvas, Web Audio, IntersectionObserver), CSS avec variables et thèmes.

🧠 Appris

Structurer un gros fichier JS, gérer l'accessibilité (prefers-reduced-motion), la performance des animations et la sécurité d'un formulaire.