Volver al portfolio
La portada: el antetítulo «Multidisciplinary creative», el nombre «Bill Kirtsos» en grandes mayúsculas condensadas y la frase «I make things people use, watch, hear, and play.», a la derecha un carrusel que muestra «Code» y «Websites, web apps, and games.» sobre seis puntos, y debajo una fotografía ancha y oscurecida de Bill Kirtsos con gafas y gorra plana, la barbilla apoyada en la mano y una batería y guitarras detrás, con un botón terracota «See my work», un botón con contorno «Get in touch» y la nota «Open to work and relocation».
Abrir bill.savage.design en una pestaña nueva

Portfolio Personal — Mapa de Proyectos Explorable

Resumen

Reconstruí mi portfolio desde cero. El sitio anterior era una página neobrutalista oscura que ejecutaba un script de Tailwind desde CDN sobre una cuadrícula JSON; este es una compilación estática en Astro 5, con islas de React solo donde la interacción las exige. La pieza central es la página de trabajos: un tablero tipo mapa donde 36 proyectos ocupan cinco territorios, uno por disciplina. La rueda amplía sobre el cursor, arrastrar desplaza con inercia, dos dedos hacen pinza y los filtros vuelan la vista hacia una categoría atenuando el resto. Al acercarse, los pines se convierten en tarjetas. Cada nodo es un enlace real, así que cada proyecto se compila también como su propia página estática, que abre con su diálogo ya en pantalla. La portada es una secuencia de secciones guiadas por el scroll: un hero fijado con un carrusel de seis diapositivas, una sección «sobre mí» cuyos párrafos se rellenan letra a letra mientras se acumula una pila de imágenes, una tira de datos rápidos en ojo de pez, un acordeón de habilidades y un carrusel de proyectos cuya pista se desplaza lateralmente al bajar, en móvil igual que en escritorio. Todo el contenido vive en un único archivo JSON. No hay CMS, ni base de datos, ni runtime de servidor.

Retos

Un mapa explorable se vuelve desorientador con facilidad, e inaccesible con la misma facilidad. Además debía seguir siendo una compilación estática —sin servidor— dando a 36 proyectos URLs reales y compartibles, y la animación tenía que aguantar en un móvil.

Soluciones

Cada nodo del mapa es un ancla a una página generada en tiempo de compilación, así que el tablero sigue siendo navegable, compartible y rastreable incluso sin JavaScript. El nivel de detalle cambia pines por tarjetas al ampliar, y los filtros vuelan la vista en lugar de recargarla. Las secciones se fijan con GSAP ScrollTrigger y se controlan por la posición del scroll en vez de por un ticker, lo que las mantiene fieles en dispositivos táctiles. Todo el sitio se entrega como HTML estático desde Astro, con React montado solo en el único componente que realmente lo necesita.

Galería

  • La portada: el antetítulo «Multidisciplinary creative», el nombre «Bill Kirtsos» en grandes mayúsculas condensadas y la frase «I make things people use, watch, hear, and play.», a la derecha un carrusel que muestra «Code» y «Websites, web apps, and games.» sobre seis puntos, y debajo una fotografía ancha y oscurecida de Bill Kirtsos con gafas y gorra plana, la barbilla apoyada en la mano y una batería y guitarras detrás, con un botón terracota «See my work», un botón con contorno «Get in touch» y la nota «Open to work and relocation».

    Hero — Un nombre, una promesa y seis oficios en rotación

  • La sección «About Me» a mitad de desplazamiento: el antetítulo «The short story», el título «About Me» junto a un anillo de progreso que marca 3/4 y un párrafo que empieza por «Because I learned every craft by hand», con las primeras líneas en tinta oscura y el resto aún pálido, junto a una pila de tres fotografías de esquinas redondeadas; la de delante muestra a Bill Kirtsos con camisa color óxido y gorra plana trabajando con un portátil en un estudio de luz cálida.

    Sobre mí — Scrollytelling con relleno letra a letra

  • Una fotografía oscura a todo lo ancho de Bill Kirtsos, con gafas y gorra plana, tocando un bajo, atenuada tras un texto blanco: la pequeña etiqueta terracota «Quick fact 2» sobre «Running savage.design since 2019» en letra grande, y arriba a la derecha un anillo de progreso que marca 2/4.

    Quick Facts — Un dato cada vez, ampliado al pasar

  • El acordeón de habilidades: «Design» cerrado con un signo más, «Web & Development» abierto con un signo menos, con un párrafo que empieza por «I build websites, web apps, and games by directing AI tools, mainly Claude Code and DeepSeek» y una fila de etiquetas terracota de Next.js & React a SEO; después «Audio & Video», relleno de color arena bajo el puntero, con un tooltip azul pizarra que enumera sus herramientas, de la composición musical y Premiere Pro a Suno, ElevenLabs y Kling.ai, y «Marketing» cerrado debajo.

    Skills — Abra una disciplina y pase el cursor por otra para ver sus herramientas

  • El carrusel de proyectos favoritos a mitad de desplazamiento: el antetítulo «Selected work» y el título «Favourite Projects» sobre una fila de tarjetas que se sale por ambos bordes: el final de una tarjeta a la izquierda, greeksimmers.com con un sitio de simulador de vuelo que dice «Ready to Take the Controls?», SANCO Open Bin 5LT con una papelera cilíndrica de bronce y las palabras «Luxury Bathroom Bin», y el comienzo de Magic Admin, cada una con subtítulo y una breve descripción, y abajo a la derecha un botón terracota «See my work».

    Proyectos favoritos — Una pista que se desplaza en horizontal

  • La sección de contacto sobre fondo carbón: el antetítulo «Start a conversation» y el titular «Let's make something useful.» en enormes mayúsculas blancas condensadas en cuatro líneas, junto a filas para correo electrónico, teléfono, LinkedIn y YouTube, cada una con un icono redondo, su dirección o nombre y una flecha; la fila del correo se ilumina con un relleno crema bajo el puntero.

    Contacto — El registro final

  • El mapa de proyectos ampliado sobre el territorio Products & Platforms: tres tarjetas de proyecto sobre una cuadrícula clara de puntos alrededor del título atenuado del territorio — What Do You Do, un juego de rol narrado por IA, con una pantalla de juego oscura; Paper86, una plataforma de gestión de restaurantes, con un editor de menús, con borde terracota y la imagen ampliada bajo el puntero; y Magic Admin, gestión de sitios web mediante conversación, con un chat junto a una vista previa del sitio. Los botones de zoom están a la izquierda y la barra de filtros abajo, con «Products & Platforms» seleccionado.

    Mapa de proyectos — Acérquese y los pines se convierten en tarjetas

  • Un diálogo de proyecto abierto sobre el mapa atenuado: una gran captura de la portada de prestigecmn.gr, un monograma «P» dorado sobre negro junto al titular «We elevate your business Prestige», y debajo una etiqueta «Web development», el título «prestigecmn.gr», el subtítulo «Bilingual marketing agency website» y el rol «Designer & Developer» junto a la duración «Launched September 2026, ongoing», con un botón redondo de cierre arriba a la derecha.

    Diálogo de proyecto — Se abre en el sitio, con su propia URL

  • La portada en una tableta: el antetítulo «Multidisciplinary creative», el nombre «Bill Kirtsos» y la frase «I make things people use, watch, hear, and play.» apilados a la izquierda, sobre una fotografía oscurecida de esquinas redondeadas de Bill Kirtsos con gafas y gorra plana, la barbilla apoyada en la mano, con los botones «See my work» y «Get in touch» y la nota «Open to work and relocation» en su borde inferior.

    Hero — La misma apertura, apilada para la tableta

  • La sección «About Me» en una tableta, en una sola columna: los dos últimos párrafos de la historia en letra grande y fina, la cita «I learned each craft by hand, so I can guide AI tools with judgment and taste.» en negrita con una línea terracota a su izquierda, y debajo un borde de pincelada negra que se abre a una fotografía oscura de Bill Kirtsos con gafas y gorra plana, donde empieza la sección siguiente.

    Sobre mí — En la tableta la historia fluye y la cita la remata

  • El carrusel de proyectos favoritos en una tableta: el antetítulo «Selected work» y el título «Favourite Projects» sobre tres tarjetas altas — greeksimmers.com cortada por el borde izquierdo, SANCO Open Bin 5LT entera con su papelera de bronce y Magic Admin cortada por el borde derecho —, cada una con subtítulo y una breve descripción, y un botón «See my work» abajo a la derecha.

    Proyectos favoritos — El carrusel lateral sigue en marcha en la tableta

  • El mapa de proyectos en una tableta, desplazado al territorio Graphic Design: una elipse discontinua alrededor del título atenuado del territorio, con tres pines etiquetados — Four Elements Productions, Prestige Communications y Bora's New Start — y abajo a la derecha el panel de filtros abierto, con todas las categorías y «Graphic Design» seleccionado en terracota sobre un botón redondo de cierre; los botones de zoom a la izquierda y la indicación «Scroll to zoom · Drag to move» abajo.

    Vista filtrada — Un filtro lleva el tablero a una categoría

  • Un diálogo de proyecto en una tableta: una captura del sitio de FitRoom Experience, una sala de entrenamiento iluminada en azul tras el titular «Training becomes experience», y debajo una etiqueta «Web development», el título «FitRoom Experience», el subtítulo «Gym site & membership platform», el rol «Designer & Developer», la duración «5 weeks to launch, ongoing» y los primeros párrafos del caso, con un botón redondo de cierre arriba a la derecha.

    Diálogo de proyecto — Todo el caso sin salir del mapa

  • El menú abierto en un teléfono: una hoja color carbón a pantalla completa con seis enlaces numerados en grandes mayúsculas condensadas — Home, About, Quick Facts, Skills, Portfolio y Contact —, un botón con contorno «Download CV» y cuatro botones redondos para correo electrónico, teléfono, LinkedIn y YouTube, con el botón de cierre en terracota arriba a la derecha y un resplandor cálido en la esquina inferior.

    Menú — Una hoja a pantalla completa que mantiene el CV a mano

  • Los Quick Facts en un teléfono: un borde de pincelada negra en la parte superior que se abre a una fotografía oscura de Bill Kirtsos con gafas y gorra plana, con la pequeña etiqueta terracota «Quick fact 1» y «Based in Kassel, Germany» en blanco, centrados encima.

    Quick Facts — Una pincelada abre paso a la fotografía

  • El carrusel de proyectos favoritos en un teléfono: el título «Favourite Projects» en dos líneas, la tarjeta de greeksimmers.com con un sitio de simulador de vuelo que dice «Ready to Take the Controls?», el subtítulo «Full-stack web application» y una breve descripción, el borde de la tarjeta anterior a la izquierda y un botón «See my work» debajo.

    Proyectos favoritos — Guiado por el desplazamiento también en el móvil

  • El mapa de proyectos en un teléfono, ampliado hasta que un pin se ha convertido en tarjeta: prestigecmn.gr, con una captura de un monograma «P» dorado sobre negro y el titular «We elevate your business Prestige», una etiqueta «Web development», el título «prestigecmn.gr – Bilingual marketing agency website» y una breve descripción, sola sobre una cuadrícula clara de puntos, con los botones de zoom abajo a la izquierda y un botón redondo de filtros terracota abajo a la derecha.

    Mapa de proyectos — Pellizque para ampliar y cada pin se convierte en tarjeta

  • Un diálogo de proyecto en un teléfono: una captura de la tienda kaloni.gr con mosaicos de colecciones y una fila de zapatos recién llegados, y debajo una etiqueta «Web development», el título «kaloni.gr», el subtítulo «Bilingual Laravel footwear e-commerce», el rol «Full-Stack Developer & Designer», la duración «8 weeks» y el comienzo del caso, con un botón redondo de cierre arriba a la derecha.

    Diálogo de proyecto — Un caso completo que cabe en un teléfono

  • La sección de contacto en un teléfono: el antetítulo «Start a conversation», el titular «Let's make something useful.» en enormes mayúsculas blancas condensadas en tres líneas y filas para correo electrónico, teléfono y LinkedIn, cada una con un icono redondo, una etiqueta, su dirección o nombre y una flecha, con la fila de YouTube asomando en el borde inferior.

    Contacto — Cada canal a un solo toque