Róbate la estructura de este portfolio (con el prompt incluido)
El problema que resuelve
La mayoría de los portfolios se ven iguales, aquí uno que no, más el prompt base para construir el tuyo.
El prompt para copiar
Optimizado con
Construye un héroe de portfolio personal en una sola pantalla (sin necesidad de hacer scroll) usando React, TypeScript, Vite y Tailwind CSS. Fondo azul marino muy oscuro (#0a0e2a o similar). Toda la página cabe en un solo viewport de altura fija.
**Barra superior:**
- Izquierda: tu nombre/marca, pequeño, en mayúsculas, más una etiqueta de dos palabras debajo (estilo "Diseño e Ingeniería").
- Derecha: una fila de navegación con 2 enlaces simples ("Trabajos", "Contacto") seguidos de 2 controles tipo interruptor entre corchetes, ej. "Tema[A]" y "Sonido[ ]", que visualmente parezcan switches reales (usa un onClick real en al menos uno, aunque solo alterne una clase CSS).
**Franja vertical izquierda:**
- Una franja vertical delgada pegada al borde izquierdo con un pequeño badge/logo y una etiqueta rotada -90deg (CSS `transform: rotate(-90deg)`), con estilo de sello de premio/credibilidad.
**Centro de la pantalla:**
- Una gran palabra en 3D con aspecto de globo/tubo inflado y brillante (tu nombre o un saludo). Si no tienes WebGL/Three.js a mano, aproxímalo con una fuente cursiva en negrita, un `text-shadow` grueso en capas o un relleno degradado SVG más un `filter: drop-shadow(...)` sutil, y una animación lenta en keyframes `transform: rotate()` para el efecto de balanceo.
- Dispersa 3-4 pequeños badges/stickers decorativos alrededor del centro, en posiciones y z-index distintos, cada uno con una animación flotante `translateY` lenta e independiente (duraciones distintas, ej. 3s/4s/5s) para un efecto de profundidad.
- Superpón una cuadrícula tenue de pequeñas marcas "+" sobre el fondo (patrón CSS repetitivo o spans posicionados en absoluto), opacidad ~10-15%.
**Barra HUD inferior:**
- Abajo a la izquierda: un indicador que se actualiza en vivo combinando zona horaria/ubicación y una temperatura o número similar (datos ficticios están bien, solo usa un `setInterval` para que parezca en vivo).
- Abajo al centro: coordenadas del cursor en vivo, actualizadas mediante un listener `mousemove`, con formato "0759 X 0347 Y".
- Abajo a la derecha: un pequeño ícono (globo o similar).
**Titular:**
- Una afirmación personal grande, en negrita, de varias líneas, en blanco, ubicada junto o debajo del centro (ej. 3 líneas cortas y contundentes, `text-4xl md:text-6xl font-bold leading-tight`).
**Estado hover opcional (hazlo si quieres el momento "wow"):**
- Al pasar el cursor o hacer clic en el área del héroe, cambia el fondo a negro puro, muestra en fundido una foto de retrato y un breve párrafo bio con 2-3 enlaces subrayados (trabajos/proyectos anteriores), y anima la aparición de un pequeño logo tipo firma cursiva en un color de acento (ej. verde) en la esquina superior izquierda. Usa un simple estado de React más transiciones CSS, sin necesidad de backend real.
Stack técnico: React + TypeScript + Vite, Tailwind CSS, keyframes CSS simples para las animaciones de flotación/balanceo (Three.js no es necesario a menos que quieras ir más lejos). Todo sucede en un solo viewport, sin necesidad de scroll.
Esta es la estructura detrás de un portfolio personal que realmente destaca: una palabra central en 3D con efecto globo, una franja HUD discreta (hora en vivo, coordenadas del cursor en vivo), y un estado hover que revela un retrato y una bio sin salir nunca de la pantalla. Todo lo que importa cabe en un solo viewport, exactamente el tipo de « wow » inmediato que engancha a un visitante antes del primer scroll.
Qué vale la pena robar
Una palabra central en 3D tipo tubo/globo en lugar de un titular plano se lee al instante como más técnico y más caro.
Una franja HUD en vivo persistente (hora, temperatura, coordenadas), barata de construir, desproporcionadamente efectiva para señalar « esta persona construye cosas interactivas reales ».
Un estado hover en el propio héroe en lugar de una segunda sección a la que hacer scroll, mantiene el « wow » contenido en una sola pantalla.
El prompt de abajo es deliberadamente genérico: estructura y técnica, no el contenido personal real de nadie. Cambia el nombre, la afirmación y los enlaces por los tuyos.
