Este post documenta el proceso completo de crear barontech.io usando Claude Code como copiloto de desarrollo: las decisiones técnicas, el flujo de trabajo iterativo, los problemas que surgieron y cómo los resolvimos. De cero a un portfolio cyberpunk funcional en una sola sesión de trabajo.
El punto de partida
Llevaba tiempo con un portfolio genérico de LinkedIn como única presencia online. Quería algo que reflejara realmente mi perfil técnico, con una estética que se saliera de los templates de Squarespace o Webflow que todo el mundo usa.
Tenía dos inputs claros:
- Referencia visual: un informe interno con estética cyberpunk — colores neón sobre fondo oscuro, tipografía monoespaciada, efectos de scanlines. Me gustaba esa sensación de terminal futurista.
- Fuente de contenido: mi perfil de LinkedIn actualizado, con experiencia, logros y skills.
El brief inicial que le di a Claude Code fue algo tan sencillo como: "Quiero un portfolio personal con estética cyberpunk similar a este informe. Usa mi perfil de LinkedIn como contenido. HTML estático, sin frameworks."
Por qué HTML estático
La decisión de no usar ningún framework fue deliberada y merece una explicación, porque va contracorriente de lo que se suele hacer en 2026.
Un portfolio personal no necesita React, Next.js ni ningún bundler. Un archivo HTML se despliega en cualquier sitio (GitHub Pages, Netlify, S3), carga en milisegundos, no tiene dependencias que se rompan y no necesita mantenimiento. La complejidad tiene un coste real; hay que justificarla.
El stack final:
- HTML semántico puro
- CSS con variables custom (sin Tailwind, sin preprocessors)
- JS vanilla para nav, footer y partículas (sin jQuery, sin nada)
python3 -m http.serverpara desarrollo local
La estética cyberpunk: sistema de color y tipografía
Una de las primeras cosas que establecimos fue el sistema de diseño. Claude Code definió las variables CSS que dan coherencia a toda la web:
:root {
--cyan: #00f5ff; /* acción, links, highlights */
--magenta: #ff00aa; /* alertas, fechas, énfasis */
--yellow: #ffee00; /* brand, compañías, headers */
--green: #00ff88; /* estado activo, éxito */
--dark: #050810; /* fondo principal */
--panel: #0b1120; /* paneles y cards */
--border: #1a2a4a; /* bordes sutiles */
--text: #a8c0d6; /* texto principal */
--text2: #6a8aaa; /* texto secundario */
}Para tipografía: Rajdhani (geométrica, bold, impacto) para headings y body, y Share Tech Mono para todo lo técnico — etiquetas, fechas, badges, código. Esta combinación crea ese contraste entre humanidad y máquina que buscaba.
Los efectos de ambiente — scanlines, grid de puntos, partículas flotantes — se implementan con CSS puro usando ::before y ::after en el body, sin una sola imagen.
Extrayendo contenido: el problema de los premios
El contenido básico del portfolio era directo — experiencia, skills, idiomas — pero la sección de premios presentó un reto interesante.
La app CaixaBank Note había ganado más de 50 premios internacionales entre 2019 y 2023. Tenía los nombres pero no las fechas ni las organizaciones. Claude Code investigó cada uno, los verificó y construyó un timeline completo y verificado.
Para una sección con tantos items, el diseño importa tanto como el contenido. Mostrar 50+ premios en una lista plana sería ilegible. La solución fue un accordion colapsable: los más recientes visibles por defecto, el resto detrás de un botón "ver más". Claude Code propuso e implementó el patrón completo.
El flujo de trabajo iterativo
El proceso real no fue lineal. Fue una conversación continua de describe → revisa → ajusta, con Claude Code como pair programmer que mantiene el contexto completo del proyecto.
Un ciclo típico de iteración:
- Describir lo que quería: "La sección de skills necesita más jerarquía visual, quiero separar por categorías"
- Claude Code propone la implementación y la ejecuta directamente en el archivo
- Ver el resultado en el preview server (recarga automática)
- Ajustar: "Más espacio entre categorías, y los tags en hover que brillen más"
- Commit del bloque de cambios cuando el resultado es satisfactorio
Lo que hace especialmente efectivo este flujo es que Claude Code puede razonar sobre trade-offs de diseño, no solo implementar instrucciones literales. "¿Por qué no usar un grid de iconos?" obtiene una respuesta que considera la legibilidad, la escalabilidad y la coherencia con el sistema de diseño existente.
Problemas que surgieron
No todo fue fluido. Algunos problemas reales que resolvimos durante el proceso:
- El clip-path en iOS Safari: Los paneles con esquinas cortadas usan
clip-path: polygon(). Safari en móvil los renderizaba mal con ciertos valores. Solución: simplificar el polígono y evitarcalc()dentro del clip-path en Safari. - Las partículas en scroll: Las partículas flotantes (CSS animations sobre elementos
fixed) consumían demasiada GPU en móviles de gama baja. Se redujeron a 8 partículas y se añadiówill-change: transform. - El glitch effect en h1: El hover con
text-shadowanimado causaba layout shifts en Firefox. Se aisló el efecto contransform: skewX()en vez de desplazamientos de posición.
La arquitectura CSS: de monolito a módulos
El portfolio empezó con todo el CSS en un único bloque <style> inline en el HTML (~1100 líneas). Funcional, pero un problema de mantenimiento cuando añadí el sistema de blog.
El blog (LABS) necesitaba los mismos estilos base — variables, nav, footer, tipografía — pero también sus propios componentes específicos. Copiar el CSS era una deuda técnica obvia.
La refactorización final separó el CSS en tres archivos:
shared/
base.css // ~520 líneas — común a todas las páginas
// variables, reset, nav, footer, tipografía,
// panels, badges, buttons, tablas, animaciones
index.css // ~310 líneas — exclusivo del portfolio
// hero, timeline, skills, awards, contact
labs.css // ~180 líneas — exclusivo del blog
// cards, post-header, code-block, post-navResultado: cero duplicación, cada página carga solo lo que necesita, y añadir una nueva sección al portfolio no afecta al blog y viceversa.
El sistema LABS
El blog no estaba en el plan original. Surgió de querer documentar el propio proceso de construcción — algo recursivo que me pareció apropiado.
El diseño del sistema tuvo que resolver algunas preguntas:
- ¿Cómo comparto nav y footer entre el portfolio y el blog sin duplicar HTML?
- ¿Cómo estructuro los posts para que sean fáciles de añadir?
- ¿Cómo mantengo URLs limpias sin un servidor?
La solución para nav/footer fue components.js: un archivo JS que inyecta ambos elementos via innerHTML. No es la solución más elegante del mundo, pero funciona sin ningún servidor-side rendering y sin build tools.
Para los posts, cada uno vive en su propia carpeta con un index.html, lo que da URLs limpias: /labs/posts/2026-03-06-building-this-site/. Un template base (POST_TEMPLATE.html) documenta la estructura para posts futuros.
Estructura final
BaronTechIO/
index.html // Portfolio principal
shared/
base.css // Estilos compartidos
index.css // Estilos del portfolio
labs.css // Estilos del blog
components.js // Nav + Footer compartidos
labs/
index.html // Listado de posts
posts/
POST_TEMPLATE.html // Template para nuevos posts
2026-03-06-building-this-site/
index.html // Este post
2026-03-07-gsd-agent-teams/
index.html // Post sobre GSD + Agent TeamsReflexión final
Lo más valioso del proceso no fue la velocidad (aunque fue rápido). Fue poder mantener una conversación de diseño técnico de alto nivel mientras la implementación ocurría en tiempo real.
El loop tradicional de diseñar → implementar → revisar → ajustar colapsó en algo mucho más fluido. La distancia entre la idea y el resultado visible se redujo a segundos, lo que cambia cuánto estás dispuesto a experimentar.
Claude Code no reemplaza el criterio de diseño ni las decisiones técnicas — esas siguen siendo tuyas. Lo que elimina es la fricción entre decidir y ver. Y esa fricción es exactamente lo que hace que muchos proyectos personales nunca lleguen a existir.
// Fuentes
Tipografías — Rajdhani · Share Tech Mono (Google Fonts, autoalojadas)
Código — github.com/barontechio