"Otorgándole orden al caos y voz al silencio."
Este proyecto no es un simple portafolio; es una experiencia inmersiva que explora la dualidad entre la identidad profesional y el alter ego artístico. A través de un sistema de Modo Dual, el usuario navega entre dos mundos que coexisten en una misma estructura técnica pero divergen en su esencia visual y narrativa.
El corazón de esta aplicación es su sistema de identidades conmutables. No es un "modo oscuro" tradicional, es un cambio total de arquitectura visual y contenido.
Perfil: Estudiante de Danza / Bailarina Profesional.
- Estética: Limpia, minimalista, enfocada en la claridad y el movimiento orgánico.
- Contenido: Bio profesional, carrusel de fotografías de procesos, y una colección de poesías ("Un gato solitario", "Camino oscuro", "Memoria") que exploran el tiempo y la existencia.
- Color: Paleta clara, acentos azules (esperanza, cielo, océano).
Perfil: Alter ego artístico / Sombra / Psique.
- Estética: Experimental, visceral, inspirada en lo fragmentado y lo crudo.
- Contenido: Manifesto artístico, carrusel de obras en video, citas de Hermann Hesse (Demian) y Banksy. Se enfoca en la "Batalla contra la Bestia" y la destrucción del mundo para nacer.
- Color: Oscuro, contrastes altos, estética de "fragmentación".
Para lograr una experiencia tan fluida y emocional, usamos herramientas de vanguardia:
- Core: React 19 + TypeScript + Vite 7.
- Animaciones: GSAP para secuencias de entrada y micro-interacciones.
- Smooth Scroll: Lenis para una navegación suave como la seda.
- Styling: Tailwind CSS con un sistema de variables dinámicas vía
data-mode. - Componentes UI: shadcn/ui (basado en Radix UI) para una accesibilidad impecable.
- Gestión de Estado: Context API para la persistencia de la identidad (localStorage).
El proyecto está diseñado siguiendo principios de modularidad y limpieza:
src/
├── context/ # ModeContext: El cerebro que maneja la dualidad DÍA/NOCHE.
├── sections/ # Componentes atómicos (Hero, About, Carrusel, etc.) extraídos para mantenibilidad.
├── content/ # La "fuente de la verdad" para los textos y assets de cada modo.
├── hooks/ # Hooks personalizados (useSmoothScroll, use-mobile).
├── lib/ # Utilidades de configuración (Tailwind merge, etc.).
└── components/ui/ # Componentes de UI altamente reutilizables.
El switch Sol/Luna en la navegación no solo cambia colores; inyecta un atributo data-mode en el <html>. Esto permite que:
- El CSS cambie sus variables globales (colores, fuentes).
- Los componentes de React decidan qué contenido (poesías vs manifiestos) o assets (fotos vs videos) renderizar de forma condicional.
¿Querés correr esta locura en tu máquina? Dale así:
-
Cloná el repo:
git clone [url-del-repo]
-
Instalá las dependencias:
npm install # o bun install si sos de los modernos -
Corré el servidor de desarrollo:
npm run dev
Este portafolio aplica el concepto de Screaming Architecture: al ver las carpetas, sabés de qué trata el proyecto. Es un equilibrio entre la psicología, la danza y la música, reflejando que "quien quiera nacer, tiene que destruir un mundo".
Desarrollado con pasión por [Diana Paola Agudelo / JASH.D] & IA.