Volez la structure de ce portfolio (le prompt inclus)

Construis un héros de portfolio personnel en un seul écran (pas besoin de scroller) avec React, TypeScript, Vite et Tailwind CSS. Fond bleu marine très sombre (#0a0e2a ou équivalent). Toute la page tient dans un seul viewport à hauteur fixe.

**Barre du haut :**
- Gauche : ton nom/marque, petit, en majuscules, avec une accroche de deux mots en dessous (style "Design & Ingénierie").
- Droite : une rangée de nav avec 2 liens simples ("Travaux", "Contact") suivis de 2 contrôles façon interrupteurs entre crochets, ex. "Thème[A]" et "Son[ ]", qui doivent vraiment ressembler à des switches actifs (ajoute un vrai onClick sur au moins un, même s'il se contente de basculer une classe CSS).

**Bande verticale à gauche :**
- Une fine bande verticale collée au bord gauche de l'écran contenant un petit badge/logo et un libellé pivoté à -90deg (CSS `transform: rotate(-90deg)`), dans le style d'un tag de récompense/crédibilité.

**Centre de l'écran :**
- Un grand mot en 3D façon gonflé/tube glossy (ton prénom ou une salutation). Sans WebGL/Three.js sous la main, approxime avec une police cursive/manuscrite en gras, un `text-shadow` épais en couches ou un remplissage SVG en dégradé, plus un léger `filter: drop-shadow(...)`, et une animation en keyframes `transform: rotate()` lente pour l'effet d'ondulation.
- Disperse 3-4 petits badges/stickers décoratifs autour du centre, à des positions et z-index différents, chacun avec une animation `translateY` flottante indépendante et lente (durées différentes, ex. 3s/4s/5s) pour un effet de profondeur.
- Superpose une grille discrète de petits repères "+" sur le fond (motif CSS répétitif ou spans positionnés en absolu), opacité ~10-15%.

**Barre HUD en bas :**
- En bas à gauche : un indicateur qui se met à jour en direct combinant un fuseau horaire/lieu et une température ou un nombre similaire (des données fictives suffisent, utilise juste un `setInterval` pour donner l'impression que c'est en direct).
- En bas au centre : les coordonnées du curseur en direct, mises à jour via un listener `mousemove`, formatées comme "0759 X 0347 Y".
- En bas à droite : une petite icône (globe ou équivalent).

**Titre :**
- Une affirmation personnelle grande, en gras, sur plusieurs lignes, en blanc, positionnée à côté ou sous le centre (ex. 3 lignes courtes et percutantes, `text-4xl md:text-6xl font-bold leading-tight`).

**État hover optionnel (à faire si tu veux le vrai effet waouh) :**
- Au survol/clic de la zone centrale, bascule le fond en noir pur, fais apparaître en fondu une photo et un court paragraphe bio avec 2-3 liens soulignés inline (anciens travaux/projets), et anime l'apparition d'un petit logo signature façon cursive dans une couleur d'accent (ex. vert) en haut à gauche. Utilise un simple state React plus des transitions CSS, pas besoin de vrai backend.

Stack technique : React + TypeScript + Vite, Tailwind CSS, animations CSS classiques pour le flottement/l'ondulation (pas besoin de Three.js sauf si tu veux aller plus loin). Tout se passe dans un seul viewport, sans scroll nécessaire.