Steal This Portfolio's Structure (Prompt Included)

Build a single-viewport personal portfolio hero using React, TypeScript, Vite, and Tailwind CSS. Dark navy background (#0a0e2a or similar deep blue). The whole page is one fixed-height hero with no scroll required to see the full effect.

**Top bar:**
- Left: site mark (your name/brand), small, uppercase, plus a two-line tagline underneath (e.g. "Design & Engineering" style two-word category label).
- Right: a text nav row with 2 plain links ("Work", "Contact") followed by 2 bracketed toggle-style controls, e.g. "Theme[A]" and "Sound[ ]" that visually read as live switches (use a real onClick toggle for at least one, even if it just flips a CSS class).

**Left rail:**
- A thin vertical strip pinned to the left edge of the viewport containing a small badge/logo and a label rotated -90deg (CSS `transform: rotate(-90deg)`), styled like an awards/credibility tag.

**Hero centerpiece:**
- A large 3D-styled word (your name or a greeting) rendered with a glossy, inflated "tube" look. If you don't have a WebGL/Three.js setup handy, approximate this with a bold cursive/script font, heavy layered text-shadow or SVG gradient fill plus a subtle CSS `filter: drop-shadow(...)`, and a slow `transform: rotate()` keyframe animation for the wobble.
- Scatter 3-4 small decorative badge/sticker images or emoji-style icons around the centerpiece at different positions and z-indexes, each with a slow independent `translateY` float animation (different durations, e.g. 3s/4s/5s) for a parallax feel.
- Layer a faint grid of small "+" tick marks across the background (repeating CSS background pattern or absolutely positioned spans), opacity ~10-15%.

**Bottom HUD bar:**
- Bottom-left: a live-updating text readout combining a timezone/location string and a temperature or similar live number (fake data is fine, just make it look live with a `setInterval` tick).
- Bottom-center: live cursor coordinates that update via a `mousemove` listener, formatted like "0759 X 0347 Y".
- Bottom-right: a small icon (globe or similar).

**Headline:**
- A large, bold, multi-line personal claim/statement in white, positioned beside or below the centerpiece (e.g. 3 short punchy lines, `text-4xl md:text-6xl font-bold leading-tight`).

**Optional hover-reveal state (do this if you want the "wow" moment):**
- On hover/click of the hero area, swap the background to pure black, fade in a portrait photo and a short bio paragraph with 2-3 underlined inline links (past work/projects), and animate in a small signature-style cursive logo mark in an accent color (e.g. green) at the top-left. Use a simple React state toggle plus CSS transitions, no need for a real backend.

Tech stack: React + TypeScript + Vite, Tailwind CSS, plain CSS keyframes for the float/wobble animations (no Three.js required unless you want to go further). Everything happens in one viewport, no scroll needed.