Joshua Terrones convirtió un portafolio lleno de contenido de muestra en una aplicación conectada a cuatro servicios: GitHub para mostrar proyectos, Hackatime para reflejar actividad de programación, Sanity para publicar contenido y Resend para recibir mensajes del formulario de contacto. Su relato muestra tanto el valor de esos datos como los ajustes de caché, CORS y publicación que hicieron falta; los resultados y errores son los de su implementación, no una prueba independiente.
El objetivo: que el portafolio demostrara trabajo real
Un portafolio puede estar bien diseñado y aun así parecer incompleto si sus proyectos, publicaciones o estadísticas son solo ejemplos. En el artículo de Joshua Terrones, el cambio central fue sustituir ese contenido de muestra por información que se actualiza desde servicios que ya forman parte de su trabajo como desarrollador.
As an Amazon Associate I earn from qualifying purchases.
Las cuatro integraciones cubren tareas distintas. GitHub aporta repositorios; Hackatime, actividad de programación; Sanity, contenido editorial; y Resend, entrega de mensajes del formulario. No son cuatro alternativas para resolver el mismo problema: cada una alimenta una parte diferente del sitio.
GitHub: proyectos destacados y listado completo
Dos vistas con fuentes distintas
Terrones cuenta que usó GraphQL para obtener los repositorios fijados que aparecen en la página de inicio y la API REST para el listado completo de proyectos en /proyectos. Así, la portada puede priorizar una selección y la página de proyectos mostrar un inventario más amplio.
Por qué añadió caché
El autor aplicó una caché con revalidación cada 86.400 segundos (24 horas) a ambas consultas. Según su estimación para esa arquitectura, el número de llamadas habría bajado de miles a unas tres al día. Es un resultado reportado por él, no una garantía: las visitas, los despliegues, las revalidaciones y el diseño de las páginas pueden cambiar el total.
La guía vigente de revalidación de Next.js distingue la revalidación temporal de la invalidación bajo demanda. La implementación disponible depende de la versión y del modelo de caché que use el proyecto; por eso, el intervalo de un día del relato debe entenderse como una decisión concreta, no como el valor correcto para todo portafolio.
Hackatime: actividad de programación visible
La segunda integración muestra horas de programación, lenguajes utilizados y una racha de actividad. Terrones describe el proceso como el uso de una clave API y un endpoint. Esa descripción corresponde a su experiencia: aquí no hay documentación oficial de Hackatime que permita confirmar de forma independiente los detalles de configuración o su disponibilidad actual.
La utilidad de esta sección depende de lo que el portafolio quiera comunicar. Una cifra de actividad aporta contexto sobre el uso reciente, pero no reemplaza la evidencia más concreta de proyectos terminados y código accesible.
Rank #3
- Includes 24 permanently bound, top-loading sleeves that display up to 48 letter-size pages.
- Designed for standard 8.5" × 11" documents: Lightweight presentation book fits US letter-size papers.
- Clear front cover and spine inserts let you add labels or title pages for easy identification.
- Durable plastic covers with non-glare polypropylene sleeves help protect documents from dirt and moisture for everyday presentation and storage.
- Holds standard 8.5" × 11" documents.
Sanity: cambiar el array de prueba por un CMS
Contenido administrable y consultas
Para dejar de mantener publicaciones dentro de un array de prueba, Terrones incorporó Sanity, su Studio y consultas GROQ. De ese modo, las entradas del portafolio podían gestionarse como contenido en un CMS headless, separado de la presentación del sitio.
El tropiezo con CORS
El autor relata que tuvo un problema de origen al embeber Sanity Studio y que lo resolvió agregando el origen de su aplicación y configurando credenciales. CORS no es un permiso general para cualquier sitio: el origen autorizado debe coincidir con el que sirve la aplicación. Según la documentación de CORS de Sanity, la configuración predeterminada incluye localhost:3333; una aplicación en otro puerto puede necesitar que se agregue su origen. Sanity también advierte que las credenciales requieren cuidado y que no conviene permitir comodines amplios para dominios de plataformas compartidas.
Resend: conectar el formulario de contacto
La cuarta integración conectó el formulario del sitio con Resend para entregar los mensajes, según el relato de Terrones. También cuenta que verificó un dominio mediante registros DNS. El artículo no ofrece detalles suficientes para establecer límites, configuración actual o un procedimiento universal de Resend; esos aspectos pueden variar y no deben inferirse de esta implementación.
Free tools Windows power users keep installed
One-click scans. No signup required.
Publicar contenido y resolver el error 422
El flujo descrito no terminó en mostrar publicaciones dentro del portafolio: Terrones también automatizó la sincronización de Sanity con Dev.to mediante un webhook. Durante esa publicación se encontró con un error 422 relacionado con la URL canónica. Es un problema que el autor reporta en su caso; el relato no establece que todas las integraciones con Dev.to o todas las URL canónicas produzcan ese error.
Best Value
El autor dejó la revalidación bajo demanda como trabajo futuro, no como algo que ya hubiera implementado. La documentación de Sanity explica cómo usar webhooks para revalidar rutas o etiquetas de Next.js y recomienda validar la firma del webhook antes de procesar el evento. Esa verificación ayuda a evitar que un endpoint público acepte eventos falsificados: Validating Sanity webhooks in Next.js.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Elegir entre caché temporal e invalidación bajo demanda
| Estrategia | Cuándo encaja | Coste o consideración |
|---|---|---|
| Revalidación temporal | Cuando los datos pueden quedar desactualizados durante un intervalo definido. | Es sencilla de razonar, pero un cambio puede no aparecer hasta la siguiente revalidación. La guía de Next.js describe este patrón: Revalidating. |
| Invalidación bajo demanda | Cuando se quiere actualizar contenido en respuesta a un evento, como una publicación editada en Sanity. | Requiere configurar el webhook y validar su firma; Sanity documenta el patrón para Next.js: Validating Sanity webhooks in Next.js. |
La decisión práctica depende de la frescura que necesite cada dato. Las estadísticas de actividad o la lista de repositorios pueden tolerar una demora; una publicación recién editada quizá necesite reflejarse pronto. Una estrategia puede combinar ambos enfoques, siempre que el comportamiento de caché de la versión de Next.js utilizada esté claro.
Qué aporta y qué no demuestra esta semana de trabajo
- Los datos reales pueden hacer que un portafolio explique mejor qué construye una persona, en lugar de limitarse a mostrar una plantilla.
- Las integraciones resuelven necesidades diferentes: datos de proyectos, actividad, gestión editorial y contacto.
- La caché reduce la dependencia de consultas externas por visita, pero el ahorro concreto depende de la arquitectura; la estimación de tres solicitudes diarias pertenece al caso de Terrones.
- Los puntos de fricción que cuenta —CORS en Studio y el error 422 al publicar— son hallazgos de su configuración, no fallos inevitables de los servicios.
La experiencia está narrada por Terrones en su artículo sobre la construcción del portafolio. Sirve como ejemplo de cómo reemplazar contenido ficticio por señales conectadas a herramientas reales, sin que sus cifras o decisiones deban trasladarse sin más a otro proyecto.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
