Cómo construí juanchi.dev con bleeding edge tech

Cuando decidí reconstruir mi portfolio, tenía una misión clara: experimentar sin límites. Este es el resultado.

El Stack

• Framework: Next.js 15 (App Router)

• Styling: Tailwind CSS v4

• Animaciones: Framer Motion

• Tipografía: Geist Sans & Mono

• Hosting: Vercel

Decisiones de diseño

El estilo Cyberpunk

Quería algo que reflejara mi amor por la ciencia ficción y la tecnología retro-futurista. Los elementos clave:

• 1.Colores neón sobre fondos oscuros

• 2.Efectos de glitch sutiles

• 3.Glassmorphism moderno

• 4.Tipografía monospace para acentos

El fondo animado

// Partículas ASCII flotantes const symbols = ['</', '/>', '{', '}', '[]', '=>', '&&'];
function ParticleBackground() {   // Canvas animation con requestAnimationFrame   // Diferentes velocidades y opacidades   // Responsive: menos partículas en móvil }

Performance

A pesar de todas las animaciones, mantuve excelentes Core Web Vitals:

MétricaValor

LCP1.2s FID< 10ms CLS0.02

Clave: Lazy loading agresivo y animaciones GPU-accelerated.

Lo que aprendí

• 1.Las animaciones pueden ser hermosas Y performantes

• 2.El glassmorphism funciona increíblemente bien en dark mode

• 3.Los efectos sutiles > efectos exagerados

• 4.Mobile-first siempre, sin excepciones

¿Tienes preguntas sobre alguna implementación específica? ¡Déjame un comentario!