Bienvenidos a mi blog

Este es el primer artículo de mi blog, donde compartiré lo que voy aprendiendo en mi camino como Frontend Developer. No pretendo tener todas las respuestas, pero sí documentar el proceso real de construir cosas.

¿Por qué crear un portafolio desde cero?

Podría haber usado una plantilla. Hubiera sido más rápido. Pero elegí construirlo desde cero por una razón simple: el portafolio es mi producto.

Si mi propuesta de valor es construir productos web que resuelvan problemas reales, ¿qué mejor demostración que el sitio donde lo cuento?

Mi filosofía: El medio es el mensaje. Un portafolio no es solo una lista de habilidades, es una demostración viva de ellas.

El enfoque: Design System de 4 pilares

Antes de escribir una sola línea de código, definí un Design System basado en 4 pilares:

1. Propósito y valores

¿Por qué existe este sitio? No para "tener un portafolio", sino para demostrar que puedo construir productos web profesionales. Cada decisión técnica está justificada.

2. Principios de diseño

Definí reglas claras:

Claridad sobre decoración: Si algo no comunica, no existe
Consistencia pragmática: Patrones reutilizables, no perfeccionismo
Progresivo y accesible: Funciona sin JavaScript, mejora con él

3. Identidad y lenguaje

Colores, tipografía, espaciado. Todo documentado. No porque sea obligatorio, sino porque me obliga a tomar decisiones conscientes.

4. Componentes

Átomos, moléculas, organismos. Atomic Design aplicado con sentido común, no como dogma.

Las tecnologías que elegí (y por qué)

No elegí tecnologías porque "están de moda". Cada una resuelve un problema concreto:

Tecnología	Por qué la elegí
Next.js 15	SSG para rendimiento, App Router para estructura clara
TypeScript	Errores en desarrollo, no en producción
Tailwind CSS	Velocidad de desarrollo, consistencia automática
Framer Motion	Animaciones declarativas que respetan `prefers-reduced-motion`
shadcn/ui	Componentes accesibles que puedo modificar

Importante: No uses tecnologías solo porque son populares. Entiende qué problema resuelven y si aplica a tu contexto.

Código real del proyecto

Así se ve un componente de este portafolio. No es código de tutorial, es código de producción:

interface LogoProps {
  className?: string
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
}

const sizeMap = {
  xs: 'h-5 w-auto',
  sm: 'h-7 w-auto',
  md: 'h-10 w-auto',
  lg: 'h-12 w-auto',
  xl: 'h-16 w-auto',
}

export function Logo({ className, size = 'md' }: LogoProps) {
  return (
    <svg
      viewBox="0 0 35 37"
      fill="none"
      className={cn(sizeMap[size], className)}
      aria-hidden="true"
    >
      {/* SVG paths con fill="currentColor" para soporte de temas */}
    </svg>
  )
}

Notas sobre este código:

Props tipadas: TypeScript previene errores
Mapa de tamaños: Consistencia sin magic numbers
currentColor: El logo funciona en modo claro y oscuro
aria-hidden: Accesibilidad considerada

Lecciones aprendidas

Después de semanas construyendo este proyecto, estas son las lecciones más importantes:

1. Planificar antes de codear

Suena obvio, pero es tentador empezar a escribir código inmediatamente. El tiempo invertido en el Design System me ahorró horas de refactoring.

2. "Boring code" es mejor que "clever code"

Prefiero código que cualquier desarrollador pueda entender en 30 segundos sobre código "ingenioso" que solo yo entiendo.

3. Mobile-first no es opcional

El 60%+ del tráfico web es móvil. Diseñar para desktop primero es diseñar para la minoría.

4. Documentar decisiones, no solo código

Los comentarios explican el "qué". La documentación explica el "por qué". El "por qué" es más valioso.

5. Enviar es mejor que perfeccionar

Un portafolio publicado con imperfecciones es infinitamente mejor que un portafolio perfecto que nunca sale.

"Si no te avergüenza la primera versión de tu producto, lo lanzaste demasiado tarde." — Reid Hoffman

Lo que viene

Este blog será un espacio para documentar mi aprendizaje. Próximos temas:

Scroll-telling con Framer Motion: Cómo construí las animaciones de la sección About
Formularios que funcionan: Validación, honeypot anti-spam, y Resend para emails
Analytics sin invadir privacidad: Microsoft Clarity vs Google Analytics

Reflexión final

Construir un portafolio desde cero es un ejercicio de toma de decisiones. Cada línea de código, cada color, cada palabra es una decisión.

Lo importante no es que todas las decisiones sean perfectas. Lo importante es que sean conscientes y estén justificadas.

Si llegaste hasta aquí, gracias por leer. Esto recién empieza.

¿Tienes preguntas o feedback? Puedes encontrarme en GitHub o LinkedIn.