KILLIAN HERZER - Développeur Fullstack et Creative Technologist à Annecy

Développeur Fullstack.Rigueur Backend & Interactivité Frontend. En recherche d'opportunité de fin d'études.

Expertises en Développement Web à Annecy et Haute-Savoie

Killian Herzer, expert en technologies web modernes, propose des solutions de développement sur mesure :

  • Développement Fullstack : Maîtrise complète de React, Next.js, TypeScript et Node.js.
  • Creative Coding & WebGL : Création d'expériences 3D immersives avec Three.js et React Three Fiber.
  • Performance & SEO : Optimisation poussée pour des scores Lighthouse de 99+.
  • Backend Robuste : Développement d'architectures sécurisées avec Symfony et PHP.

Portfolio de Réalisations Digitales

Célia - Expérience 3D réalisé pour Gobelins

Mission : "Célia" est une expérience narrative immersive sensibilisant à l'impact environnemental du numérique. L'utilisateur incarne un photographe animalier cherchant un vison d'Europe dans une forêt, découvrant progressivement la face cachée des datacenters.

Intervention technique : En collaboration étroite avec l'autre développeur du projet, Valentin Gassend, et les designers, j'ai pris en charge plusieurs aspects techniques clés de l'expérience. J'ai notamment travaillé sur l'optimisation des performances graphiques en implémentant des techniques de Level of Detail (LOD) et de Culling. J'ai également développé le shader de l'eau pour la rivière, ainsi que l'ensemble des interfaces utilisateur (UI), incluant l'introduction, le générique de fin et le curseur personnalisé. Mon rôle a aussi couvert la conception et l'implémentation du système d'interactions, de la gestion des événements, du comportement de la caméra, ainsi que du système audio et de l'affichage des sous-titres.

Stack technique : React, Three.js, GSAP, React three/drei/fiber, Zustand, Theatre.js, Howler.js

Localisation du projet : Annecy, France

Mots-clés associés : Narration, 3D, WebGL, Expérience

Concept : Réalisé en partenariat avec La Quadrature du Net, ce projet visait à vulgariser la pollution numérique non par la morale, mais par l'émotion et la poésie. L'expérience prend la forme d'un "layon" (parcours guidé) dans une forêt 3D stylisée, où le défilement (scroll) déclenche narration et animations via Theatre.js. Le contraste entre la nature préservée et les données industrielles se révèle à travers des interactions photographiques, culminant par une rencontre symbolique avec l'espèce menacée.

J. Pancras - Portfolio réalisé pour Genesii

Mission : Cette refonte complète a transformé le portfolio du photographe Jeremy Pancras en une expérience immersive. Le site met en valeur son travail via un design épuré, des animations fluides et de nombreuses micro-interactions.

Intervention technique : Mon rôle a couvert toutes les étapes, depuis l'audit technique de l'ancien site pour évaluer la charge de travail et définir un plan d'action. J'ai ensuite pris en charge l'intégralité de la conception en réalisant les maquettes et en créant un système de design sur Figma. Le développement du site a été entièrement réalisé par mes soins, en reconstruisant chaque page avec Next.js et TypeScript. J'ai également implémenté toutes les animations et interactions avec Framer Motion et GSAP. La communication avec le client pour les retours et ajustements a été gérée par mes soins, avant l'optimisation des performances et le déploiement.

Stack technique : React, Next.js, TypeScript, Tailwind CSS, GSAP

Localisation du projet : Annecy, France

Mots-clés associés : Vitrine, Interactif, Refonte, Portfolio

Concept : Le site existant étant techniquement instable et daté, l'objectif était double : assurer la pérennité technique et offrir un écrin visuel à la hauteur des productions de l'artiste. La conception privilégie une esthétique minimaliste où la navigation et les interactions (boutons magnétiques, scroll doux) servent le contenu visuel. La refonte technique s'appuie sur Next.js et TypeScript pour la performance, combinés à Framer Motion et GSAP pour créer une exploration intuitive et vivante.

Voeux 2026 - Expérience 3D réalisé pour Genesii

Mission : Dans cette expérience immersive, l'utilisateur se retrouve dans un hangar virtuel avec pour mission d'assembler le véhicule d'intervention de l'agence (un van style 'Agence Tous Risques'). Chaque module installé (roues, phares, stickers...) révèle une valeur clé de l'entreprise pour l'année à venir. Une fois le véhicule opérationnel, l'expérience culmine avec un générique de fin dynamique, inspiré des films d'action, présentant l'équipe et les réalisations de l'agence.

Intervention technique : J'ai piloté ce projet en autonomie complète de A à Z. Mon intervention a couvert la direction artistique, la modification des assets 3D (style low-poly pixelisé), le développement intégral en JavaScript vanilla et Three.js, ainsi que l'implémentation du moteur audio interactif.

Stack technique : JavaScript, Three.js, WebGL, HTML/CSS, Web Audio API

Localisation du projet : Annecy, France

Mots-clés associés : 3D, WebGL, Gamification, Sound Design

Concept : Ce projet est né d'un défi interne : 'carte blanche' sur 3 jours pour créer les vœux de l'agence. Le concept du van 'Agence Tous Risques' a été retenu pour son esprit d'équipe et d'intervention. La production a suivi une approche agile : sécuriser d'abord le générique de fin, puis développer la mécanique d'assemblage (drag & drop) sur le temps restant. Une attention particulière a été portée à l'optimisation UX pour garantir une fluidité parfaite sur mobile comme sur desktop.

Ciao - Site vitrine réalisé pour Genesii

Mission : Le site du bar "Ciao" est une expérience web immersive retranscrivant l'ambiance vivante de l'établissement via un design riche en animations. Il propose des fonctionnalités sur-mesure comme un visualiseur de carte interactif et des galeries dynamiques, le tout ponctué de micro-interactions et de transitions complexes.

Intervention technique : Mon rôle a couvert l'intégralité de la chaîne de production. J'ai d'abord traduit la direction artistique fournie en un design system et un wireframe sur Figma. J'ai ensuite assuré le développement complet du site : construction du thème WordPress et de l'architecture de données (ACF), puis implémentation des animations front-end via GSAP. J'ai mené ce projet en totale autonomie, de la réception des assets jusqu'à la mise en ligne, tout en restant en contact direct avec le client.

Stack technique : WordPress, JavaScript, PHP, GSAP

Localisation du projet : Annecy, France

Mots-clés associés : Bar, Restaurant, Vitrine

Concept : Réalisé pour l'entreprise Genesii, l'enjeu était de dépasser le site vitrine classique pour traduire la direction artistique du bar en une expérience numérique énergique et mémorable. Le projet a débuté par une phase de design et de wireframing sur Figma pour établir un système graphique cohérent. La réalisation technique repose sur un thème WordPress sur-mesure, dynamisé par GSAP pour les animations et du JavaScript spécifique pour les chargements asynchrones (AJAX), garantissant une navigation fluide tout en restant administrable par le client.

H.A.N.D.S. - Expérience interactive

Mission : "H.A.N.D.S." est une expérience web interactive qui permet de contrôler une interface futuriste (et fictive) uniquement par les gestes de la main, capturés via la webcam. Le projet met en œuvre une reconnaissance de gestes en temps réel pour interagir avec l'interface et déclencher des effets, avec la possibilité d'entraîner une IA en direct pour reconnaître de nouveaux signes.

Intervention technique : J'ai réalisé ce projet de A à Z, couvrant la conception de l'architecture et du concept d'interaction, le développement de toute la logique applicative en JavaScript, l'intégration des librairies MediaPipe pour la détection et TensorFlow.js pour la classification, la création de l'interface utilisateur (UI), du design et des animations CSS, ainsi que la mise en place de la logique d'entraînement du modèle de Machine Learning.

Stack technique : JavaScript, MediaPipe Hands, TensorFlow.js

Localisation du projet : Annecy, France

Mots-clés associés : Webcam, Canvas 2D, Interactif, Expérimentation

Concept : Ce projet personnel visait à explorer des interactions homme-machine alternatives, en s'affranchissant du clavier et de la souris pour créer une démonstration technique innovante. L'idée centrale repose sur l'utilisation de la librairie MediaPipe pour suivre les points-clés de la main, couplée à un système hybride : des calculs géométriques pour les actions simples (clic, pincement) et un classifieur TensorFlow.js (KNN) pour les gestes complexes (signe du "Metal", poing fermé). L'interface adopte un design "cyberpunk" entièrement pilotable par le mouvement, intégrant une phase d'apprentissage où le développeur enseigne les gestes au modèle.

Apogée - Expérience 3D

Mission : "Apogée" est un jeu de stratégie et de gestion en 3D jouable dans le navigateur, où le joueur étend sa civilisation sur une carte hexagonale. En gérant ses ressources et ses constructions, il fait évoluer son empire visuellement et structurellement.

Intervention technique : J'ai mené ce projet de bout en bout. Cela inclut la conception du concept de jeu et de la boucle de gameplay, le développement de toute l'application avec React et Three.js (via @react-three/fiber), la création de l'interface utilisateur (UI) et du design, l'intégration des modèles 3D, et l'implémentation de toute la logique de jeu : gestion des ressources, conditions de déblocage, sauvegarde, et animations de victoire.

Stack technique : React, Three.js, React Three/fiber, React Three/drei, Vite

Localisation du projet : Annecy, France

Mots-clés associés : Web App, Jeu, Expérimentation

Concept : Développé pour démontrer mes compétences en applications web complexes, ce projet avait pour but de fusionner une logique de jeu complète (ressources, conditions de victoire) avec un rendu 3D temps réel performant. Le concept repose sur une grille hexagonale générée en 3D où le joueur place des bâtiments via une interface React. La progression se fait par paliers technologiques (village, ville, empire), soutenue par un système de sauvegarde locale et une gestion d'état rigoureuse pour animer un grand nombre d'éléments sans perte de fluidité.

K. Herzer - Portfolio réalisé pour Killian Herzer

Mission : Mon portfolio personnel conçu comme une double expérience : une interface web rapide pour l'accès à l'information, et une immersion 3D dans un bureau d'enquêteur pour plonger dans mon univers. Ce projet se décline en deux facettes complémentaires. La version 'Web' (Next.js) va à l'essentiel pour présenter mes compétences de manière claire et performante. La version 'Simulation' (Three.js) vous transporte dans une ambiance de film noir : un bureau d'enquêteur virtuel où chaque dossier à examiner représente un de mes projets. C'est une exploration ludique et narrative qui invite l'utilisateur à 'enquêter' sur mon travail.

Intervention technique : J'ai réalisé ce projet de A à Z. Sur la partie 3D, j'ai conçu l'environnement du bureau, géré les interactions (raycasting sur les dossiers) et travaillé les éclairages pour obtenir cette atmosphère cinématique. Côté Web, j'ai développé une architecture Next.js robuste et modulaire. C'est mon terrain de jeu personnel : j'y expérimente continuellement de nouvelles technos (comme la synchro temps réel via Ably) pour repousser mes limites.

Stack technique : React, Next.js, Three.js, WebGL, React Fiber/Drei, GSAP, Tailwind CSS, Zustand, Ably

Localisation du projet : Annecy, France

Mots-clés associés : Portfolio, 3D, Expérience

Concept : Au-delà de la simple vitrine, je voulais démontrer ma capacité à produire du Three.js de qualité sous une contrainte de temps serrée. Le défi était double : proposer une navigation classique fluide, tout en construisant une scène 3D riche et interactive qui ne sacrifie pas la performance. L'ambiance 'Tech-Noir' sert de fil rouge graphique entre les deux versions, créant une identité forte et cohérente.

HUMAN? - Expérience interactive

Mission : L'idée est venue d'un tweet montrant un meuble en 3D à construire servant de captcha. Je me suis demandé jusqu'où on pouvait pousser le concept de vérification de sécurité en le rendant totalement ridicule. C'est devenu ma propre collection de captchas improbables : du Wordle au code Morse, en passant par des trucs purement frustrants.

Intervention technique : J'ai tout fait de A à Z : le template global qui imite le vrai reCAPTCHA et chaque mini-jeu à l'intérieur. J'ai conçu la logique de chaque épreuve pour qu'elle soit à la fois jouable et absurde, en bossant les animations pour que ça reste fluide malgré le délire.

Stack technique : React, SCSS, Vite, GSAP

Localisation du projet : Annecy, France

Mots-clés associés : React, Fun, UX, Expérimentation

Concept : C'est mon simplement un bac à sable. Je voulais détourner le widget reCAPTCHA que tout le monde déteste pour en faire un terrain de jeu. Je rajoute un nouveau mini-jeu dès qu'une idée un peu tordue me passe par la tête. Le défi, c'est de garder le format 300x300 du widget original tout en proposant des interactions complètement inattendues.

Parcours et Formation

Diplômé des GOBELINS Paris en tant qu'Expert en Création Numérique Interactive.

Plus de 8 ans d'expérience en programmation et 3 ans d'alternance chez Genesii à Annecy.

Killian Herzer - Développeur Web Freelance / Alternance - Basé à Annecy, 74000, France.

INITIALIZING...
SAT_LINK: SEARCHING...
ENCRYPTED
FREQ: 12.4 Hz
SIGNAL TRACING...
00%
CAM_04 [REC]SIGNAL_STRONG
00:00:00:00
ISO 800
LIVE FEED
ANALYSER_ACTIVE...
SYS. DIAGNOSTIC
STABLE
IMMERSIVE_MODE
VERSION 3D
DISPONIBLE
X: 0 Y: 0
FERMER PREUVE [ESC]
LAT: 48.8566 N
LON: 2.3522 E
SECURE_GRID_99
codeEVIDENCE_A.jpg
>> analyzing logic...
>> bug eliminated
>> system optimized
Top Secret // Case #2026

KILLIAN
HERZER

Développeur Fullstack.
Rigueur Backend & Interactivité Frontend.
En recherche d'opportunité de fin d'études.

EVIDENCE BOARD

SECTOR: WEB
SCANNING: ACTIVE
RESTRICTED_ACCESS
Plongez dans l'enquête : une version 3D interactive unique vous attend sur ordinateur. Connectez-vous pour vivre l'expérience complète.
Célia
Expérience 3D
PREUVE #01

Célia

[ CLIQUER POUR DÉCRYPTER ]
J. Pancras
Portfolio
PREUVE #02

J. Pancras

[ CLIQUER POUR DÉCRYPTER ]
Voeux 2026
Expérience 3D
PREUVE #03

Voeux 2026

[ CLIQUER POUR DÉCRYPTER ]
Ciao
Site vitrine
PREUVE #04

Ciao

[ CLIQUER POUR DÉCRYPTER ]
H.A.N.D.S.
Expérience interactive
PREUVE #05

H.A.N.D.S.

[ CLIQUER POUR DÉCRYPTER ]
Apogée
Expérience 3D
PREUVE #06

Apogée

[ CLIQUER POUR DÉCRYPTER ]
K. Herzer
Portfolio
PREUVE #07

K. Herzer

[ CLIQUER POUR DÉCRYPTER ]
HUMAN?
Expérience interactive
PREUVE #08

HUMAN?

[ CLIQUER POUR DÉCRYPTER ]
Célia
Expérience 3D
PREUVE #01

Célia

[ CLIQUER POUR DÉCRYPTER ]
J. Pancras
Portfolio
PREUVE #02

J. Pancras

[ CLIQUER POUR DÉCRYPTER ]
Voeux 2026
Expérience 3D
PREUVE #03

Voeux 2026

[ CLIQUER POUR DÉCRYPTER ]
Ciao
Site vitrine
PREUVE #04

Ciao

[ CLIQUER POUR DÉCRYPTER ]
H.A.N.D.S.
Expérience interactive
PREUVE #05

H.A.N.D.S.

[ CLIQUER POUR DÉCRYPTER ]
Apogée
Expérience 3D
PREUVE #06

Apogée

[ CLIQUER POUR DÉCRYPTER ]
K. Herzer
Portfolio
PREUVE #07

K. Herzer

[ CLIQUER POUR DÉCRYPTER ]
HUMAN?
Expérience interactive
PREUVE #08

HUMAN?

[ CLIQUER POUR DÉCRYPTER ]
Célia
Expérience 3D
PREUVE #01

Célia

[ CLIQUER POUR DÉCRYPTER ]
J. Pancras
Portfolio
PREUVE #02

J. Pancras

[ CLIQUER POUR DÉCRYPTER ]
Voeux 2026
Expérience 3D
PREUVE #03

Voeux 2026

[ CLIQUER POUR DÉCRYPTER ]
Ciao
Site vitrine
PREUVE #04

Ciao

[ CLIQUER POUR DÉCRYPTER ]
H.A.N.D.S.
Expérience interactive
PREUVE #05

H.A.N.D.S.

[ CLIQUER POUR DÉCRYPTER ]
Apogée
Expérience 3D
PREUVE #06

Apogée

[ CLIQUER POUR DÉCRYPTER ]
K. Herzer
Portfolio
PREUVE #07

K. Herzer

[ CLIQUER POUR DÉCRYPTER ]
HUMAN?
Expérience interactive
PREUVE #08

HUMAN?

[ CLIQUER POUR DÉCRYPTER ]
Célia
Expérience 3D
PREUVE #01

Célia

[ CLIQUER POUR DÉCRYPTER ]
J. Pancras
Portfolio
PREUVE #02

J. Pancras

[ CLIQUER POUR DÉCRYPTER ]
Voeux 2026
Expérience 3D
PREUVE #03

Voeux 2026

[ CLIQUER POUR DÉCRYPTER ]
Ciao
Site vitrine
PREUVE #04

Ciao

[ CLIQUER POUR DÉCRYPTER ]
H.A.N.D.S.
Expérience interactive
PREUVE #05

H.A.N.D.S.

[ CLIQUER POUR DÉCRYPTER ]
Apogée
Expérience 3D
PREUVE #06

Apogée

[ CLIQUER POUR DÉCRYPTER ]
K. Herzer
Portfolio
PREUVE #07

K. Herzer

[ CLIQUER POUR DÉCRYPTER ]
HUMAN?
Expérience interactive
PREUVE #08

HUMAN?

[ CLIQUER POUR DÉCRYPTER ]
Célia
Expérience 3D
PREUVE #01

Célia

[ CLIQUER POUR DÉCRYPTER ]
J. Pancras
Portfolio
PREUVE #02

J. Pancras

[ CLIQUER POUR DÉCRYPTER ]
Voeux 2026
Expérience 3D
PREUVE #03

Voeux 2026

[ CLIQUER POUR DÉCRYPTER ]
Ciao
Site vitrine
PREUVE #04

Ciao

[ CLIQUER POUR DÉCRYPTER ]
H.A.N.D.S.
Expérience interactive
PREUVE #05

H.A.N.D.S.

[ CLIQUER POUR DÉCRYPTER ]
Apogée
Expérience 3D
PREUVE #06

Apogée

[ CLIQUER POUR DÉCRYPTER ]
K. Herzer
Portfolio
PREUVE #07

K. Herzer

[ CLIQUER POUR DÉCRYPTER ]
HUMAN?
Expérience interactive
PREUVE #08

HUMAN?

[ CLIQUER POUR DÉCRYPTER ]
EVIDENCE ARCHIVE08 FILES
Célia
PREUVE #01

Célia

Expérience 3D
[ CLIQUER POUR DÉCRYPTER ]
J. Pancras
PREUVE #02

J. Pancras

Portfolio
[ CLIQUER POUR DÉCRYPTER ]
Voeux 2026
PREUVE #03

Voeux 2026

Expérience 3D
[ CLIQUER POUR DÉCRYPTER ]
Ciao
PREUVE #04

Ciao

Site vitrine
[ CLIQUER POUR DÉCRYPTER ]
H.A.N.D.S.
PREUVE #05

H.A.N.D.S.

Expérience interactive
[ CLIQUER POUR DÉCRYPTER ]
Apogée
PREUVE #06

Apogée

Expérience 3D
[ CLIQUER POUR DÉCRYPTER ]
K. Herzer
PREUVE #07

K. Herzer

Portfolio
[ CLIQUER POUR DÉCRYPTER ]
HUMAN?
PREUVE #08

HUMAN?

Expérience interactive
[ CLIQUER POUR DÉCRYPTER ]
EVIDENCE ARCHIVE08 FILES

SUBJECT PROFILE

CASE FILE: KH-03
STATUS: GRADUATING
Killian HERZER
Identity
REC_ACTIVE [●]
ISO_FACE_ID: 99.9%
CLASS:DEV_FULLSTACK
XP_LEVEL:MASTER_DEGREE
LANG_1:FR (Natif)
LANG_2:EN (Courant)
SYSTEM_ALERT
OPEN TO WORK
// CONTRACTS: ENABLED[REMOTE_READY]
COMPETENCE_ANALYSIS_REPORT[READ_ONLY]

Développeur hybride obsédé par la fusion entre rigueur technique et impact visuel. Je ne construis pas juste des sites, je conçois des systèmes immersifs qui marquent les esprits.

// ACADEMIC_LOG [DIPLÔMES]

[GOBELINS PARIS]2024-2026
MASTER - Expert Création Numérique & Interactive (Lead Tech)
[MY DIGITAL SCHOOL]2021-2024
BACHELOR - Concepteur Développeur d'Application

// FIELD_OPERATIONS [EXPÉRIENCE]

[3 ANS D'ACTIVITÉ]2023-2026
GENESII - Développeur Web & Applicatif Fullstack (Alternance)
[STAGES (3+ MOIS)]2021-2023
DIVERS - Multiples Déploiements
[8 ANS DE PROGRAMMATION]2017-2026
TOTAL_RUNTIME - Protocole d'Apprentissage Continu
EQUIPMENT_INVENTORY
HARD SKILLS
React
TypeScript
Next.js
Symfony
Three.js / WebGL
PHP
WordPress
SQL
Node.js
GSAP
Bootstrap
Tailwind
Vue / Nuxt
SOFT SKILLS
Résolution de problèmes
Esprit critique
Autonomie
Curiosité
Collaboration
Créativité
DANGER: HIGH
PROTOCOL_ALT // IMMERSIVE_MODE

Ce portfolio existe aussi en 3D

Explorez une version interactive et immersive de mon univers. Navigation spatiale, environnement 3D temps réel et expérience sensorielle complète.

▷LANCER LA VERSION 3D→
STATUSONLINE
ENGINETHREE.JS
RENDERWEBGL 2.0
INITIATE PROTOCOL // START TRANSMISSION //
CHANNEL OPEN

Et si on collaborait
ensemble ?

killianherzer@gmail.com
INITIATE CONTACT
LIGNE SÉCURISÉE ÉTABLIE
© 2026 KILLIAN HERZER
FERMER TERMINAL [ESC]
bg
TOP SECRET // DECRYPTED
PREUVE #XX
Type
METADONNÉES
2024
Pro
Values
1mo
ACCÉDER AU SITE

RAPPORT_MISSION

Description

Evidence Main

ANALYSE_TECHNIQUE

Context

Evidence Secondary

MY_INTERVENTION

Intervention

CRÉDITS :

    USEFUL_LINKS

      LOG_PREUVES_ADDITIONNELLES