Steal This Portfolio's Structure (Prompt Included)
The problem it solves
Most portfolios look the same, here's one that doesn't, plus the base prompt to build your own.
The prompt to copy
Optimized with
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.
This is the structure behind a personal portfolio that genuinely stands out: a 3D balloon-styled centerpiece word, a quiet HUD strip (live time, live cursor coordinates), and a hover state that reveals a portrait and bio without ever leaving the screen. Everything that matters fits in one viewport, exactly the kind of immediate « wow » that hooks a visitor before the first scroll.
What’s worth stealing
A 3D tube/balloon centerpiece word instead of a flat headline instantly reads as more technical and more expensive.
A persistent live HUD strip (time, temperature, coordinates), cheap to build, disproportionately effective at signaling « this person builds real interactive things. »
A hover state on the hero itself rather than a second section to scroll to, keeps the « wow » contained to one screen.
The prompt below is deliberately generic: structure and technique, not anyone’s actual personal content. Swap in your own name, claim, and links.
