Portfolio Profesional a Medida: Caso Real con Next.js 16 y Framer Motion
Hago portfolios a medida para cualquier tipo de profesional. Caso real: portfolio para Laura Cobos, joyera artesanal. Next.js 16, carrusel infinito sin librerías, hover swap y 95/100 en Lighthouse.
Tabla de contenidos
No solo hago SaaS o aplicaciones de empresa. También hago portfolios a medida para todo tipo de profesionales: fotógrafas, diseñadoras, joyeras, arquitectos, músicos, desarrolladores, consultores.
Este artículo es el caso real del portfolio que hice para Laura Cobos, joyera artesanal y Oficial de 1ª Categoría con más de 10 años de experiencia en alta joyería. Puedes verlo en lauracobosg.netlify.app.
Por qué un profesional creativo necesita un portfolio propio
LinkedIn es suficiente para un perfil básico. Pero cuando tu trabajo es visual — una pieza de joyería, una fotografía, un diseño de interiores — necesitas un espacio donde el trabajo sea el protagonista, no el algoritmo de una red social.
Un portfolio a medida permite:
- Diseño 100% adaptado a la estética de tu trabajo
- Sin distracciones — sin publicidad, sin notificaciones, sin perfiles de competencia al lado
- URL propia que puedes poner en tarjetas, Instagram, presupuestos
- SEO real — tu nombre aparece en Google cuando alguien te busca
- Rendimiento — carga en menos de 1.5 segundos
El proyecto: portfolio para Laura Cobos
Laura necesitaba un portfolio que transmitiera la elegancia de la alta joyería artesanal. No una plantilla de Wix ni un tema de WordPress. Algo construido desde cero que se sintiera tan cuidado como sus piezas.
<video src=“/videos/lauracobos.mp4” controls muted playsinline class=“w-full rounded-xl my-6 shadow-lg” style=“max-height: 480px; object-fit: cover;”
Tu navegador no soporta vídeo HTML5.
Stack elegido
| Tecnología | Rol |
|---|---|
| Next.js 16 (App Router) | Framework — Static Export para deploy sin servidor |
| TypeScript strict | Tipado total en los 8 componentes |
| Tailwind CSS | Estilos utility-first, responsive sin media queries |
| Framer Motion | Animaciones de entrada con HOC FadeIn reutilizable |
| Lucide React | Iconografía ligera sin dependencias pesadas |
| Netlify | Deploy automático desde Git, CDN global, SSL gratis |
El build genera una carpeta /out con HTML/CSS/JS estático puro — sin servidor Node, sin runtime, sin coste de infraestructura.
Las partes técnicas más interesantes
1. Carrusel infinito vertical sin librerías
La sección de portfolio tenía que mostrar piezas en un carrusel vertical que girara sin fin. Sin Swiper, sin react-slick, sin dependencias externas.
La solución fue la técnica del array triplicado:
// Triplicamos el array para poder hacer scroll infinito
const tripleCards = [...cards, ...cards, ...cards];
const [idx, setIdx] = useState(cards.length); // Empezamos en el tercio central
useEffect(() => {
const interval = setInterval(() => {
setIdx(prev => prev + 1);
}, 3000);
return () => clearInterval(interval);
}, []);
// Cuando llegamos al límite, reseteamos al tercio central sin animación
useEffect(() => {
if (idx >= cards.length * 2) {
setTimeout(() => {
// Desactivamos la transición CSS 1 frame para evitar parpadeo
setTransition(false);
setIdx(cards.length);
requestAnimationFrame(() => setTransition(true));
}, 400);
}
}, [idx]);El truco es desactivar la transición CSS durante 1 frame para que el reset al centro sea invisible. El usuario ve un carrusel infinito; por debajo hay un array de 3×N elementos.
El tamaño de cada tarjeta también se calcula dinámicamente:
const cardW = Math.round(window.innerHeight * 0.52 * 0.75);
// Para que la sección siempre encaje en pantalla sin overflow2. Hover swap sin parpadeo
En el Hero hay una imagen principal que al hacer hover muestra otra imagen diferente. La implementación naive — cambiar el src del <img> — produce un parpadeo mientras la nueva imagen descarga.
La solución: dos <img> superpuestas con position: absolute, y una transición de opacidad de 700ms entre ellas:
<div className="relative">
<img
src={imagenBase}
alt={alt}
className="transition-opacity duration-700 group-hover:opacity-0"
/>
<img
src={imagenHover}
alt={alt}
className="absolute inset-0 opacity-0 transition-opacity duration-700 group-hover:opacity-100"
/>
</div>Ambas imágenes se cargan al inicio. No hay parpadeo, no hay cambio de src, no hay flash. La transición es suave porque solo estamos cambiando opacidad entre dos elementos ya cargados.
3. Galería masonry con overlay
La galería de piezas usa un grid masonry donde cada tarjeta tiene proporciones distintas. Al hacer hover aparece un overlay oscuro con el nombre de la pieza.
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
{piezas.map((pieza) => (
<div key={pieza.id} className="group relative overflow-hidden rounded-xl">
<img src={pieza.imagen} alt={pieza.nombre} className="w-full h-full object-cover" />
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100
transition-opacity duration-300 flex items-end p-4">
<p className="text-white font-medium text-sm">{pieza.nombre}</p>
</div>
</div>
))}
</div>4. Navbar con scroll spy
La barra de navegación resalta la sección activa mientras el usuario hace scroll, sin ninguna librería externa:
useEffect(() => {
const sections = document.querySelectorAll('section[id]');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setActiveSection(entry.target.id);
}
});
},
{ threshold: 0.5 }
);
sections.forEach(s => observer.observe(s));
return () => observer.disconnect();
}, []);Resultados Lighthouse
| Métrica | Puntuación |
|---|---|
| Performance | 95/100 |
| Accessibility | 97/100 |
| SEO | 100/100 |
| Best Practices | 100/100 |
Carga completa en menos de 1.5 segundos en 4G. El Static Export de Next.js sirve HTML/CSS/JS puro desde el CDN de Netlify — no hay servidor que arrancar, no hay tiempo de cold start.
Qué tipo de portfolios hago
No solo para joyeras. He hecho y puedo hacer portfolios para:
- Profesionales creativos — joyeros, fotógrafos, ilustradores, diseñadores gráficos, arquitectos
- Freelancers técnicos — desarrolladores, diseñadores UX/UI, consultores
- Músicos y artistas — con secciones de discografía, fechas, vídeos
- Profesores y formadores — con cursos, recursos descargables y contacto
- Cualquier profesional que quiera tener presencia digital propia
Cada portfolio es diferente. El stack se adapta a lo que necesita el proyecto: si hay mucha animación, Next.js + Framer Motion. Si es más sencillo, Vite + Vanilla JS es suficiente y más rápido.
¿Te interesa un portfolio?
Si eres profesional y quieres un portfolio que represente tu trabajo de verdad — no una plantilla, no un Wix — puedes contactarme desde la sección de contacto de mi portfolio o escribirme directamente.
Te cuento qué necesito saber, qué stack tendría sentido para tu caso y una estimación de tiempo y coste.
¿Quieres ver el making of de mi propio portfolio? Lo cuento en este artículo.
