Cómo construí un portafolio con datos reales: 4 APIs en una semana
Durante meses tuve un portafolio bonito pero vacío. Los proyectos decían "Proyecto 01, Proyecto 02, Proyecto 03", las horas de código decían "000h" y el formulario de contacto no enviaba nada. Un esqueleto precioso que no le decía nada a nadie. Este mes decidí cambiarlo. La meta: cero placeholders, todo con datos reales, todo automatizado. Lo que sigue es la bitácora de cómo conecté cuatro…
The author transformed a portfolio that was merely empty and generic into a dynamic, data-driven showcase. The goal was to eliminate placeholders and replace them with real, automated data. Four different APIs were connected within a week to achieve this.
The GitHub API was utilized to display the author's real projects. Since GitHub does not expose pinned repositories in its REST API, they had to use GraphQL. A hybrid architecture was implemented with GraphQL for featured projects and REST for the full list, both with a 24-hour cache to avoid hitting rate limits. The cache proved to be essential as it prevented exceeding the API rate limit.
For tracking coding hours, the author integrated Hackatime, a fork of WakaTime, into their portfolio. This tool tracks work hours, preferred languages, and active days. By displaying real coding hours and a language breakdown, the portfolio provides a more honest representation of the author's activity compared to generic text.
The blog, previously a hard-coded file, was replaced with Sanity, a headless CMS. This allowed the author to write blog posts directly in Next.js using GROQ queries, eliminating the need to manually edit files, commit changes, and wait for deployment. Two challenges arose during this process: CORS configuration and resolving Dev.to's canonical URL requirement. Both issues required additional configuration settings and handling, respectively.
Finally, the portfolio's contact form was connected using Resend. This enabled real email delivery instead of the previous simulated response. The author now receives genuine messages at their own email address (hola@josht.xyz) and can directly contact them.
Three key takeaways from this week-long project are: first, caching is not an optional detail; it is crucial for scalability. Second, CORS errors can be silent and confusing, as the author experienced with Sanity's login process. Lastly, automation is invaluable, as the time spent connecting these APIs and integrating tools saved them significant effort in the long run.
With the system now functional, the author plans to focus on content creation. They intend to publish a weekly blog post about their ongoing learning experiences related to APIs, architecture, and technical decisions. The blog will no longer be a barrier but an accessible space for sharing knowledge. Additionally, they aim to add bilingual support (Spanish/English) and on-demand revalidation to ensure new posts appear immediately.
However, these refinements will be addressed in future iterations. For now, the portfolio effectively demonstrates real work, shares the story of its creation, and facilitates contact with interested parties.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.