Para mi portfolio elegí una terminal en vez de tarjetas: alguien técnico sabe lo que es, y si funciona bien, ya le has contado algo antes de que lea nada. Está en producción en console.leosoftware.dev.
La lógica, separada de la pantalla
Todo lo que pasa al escribir un comando, abrir una sección o recorrer el historial está en un solo archivo, useTerminal.js. TerminalWindow.vue solo pinta lo que le pasan. Si mañana quiero otra interfaz, en React o en móvil, cambio la pantalla y el núcleo no se toca.
Los comandos no tocan el HTML
Lo rápido habría sido modificar el HTML desde cada comando, pero eso pega la lógica a la pantalla y la hace difícil de cambiar y de probar. La zona de salida es un componente con dos operaciones, añadir y limpiar: los comandos las llaman y el componente decide cómo se ve.
Autocompletado simple: una lista y un prefijo
Mientras escribes, aparece en gris el resto del comando más probable, y Tab o la flecha derecha lo completan. Por debajo es una lista y una búsqueda por prefijo: son menos de veinte comandos y no hacía falta más.
Dos idiomas sin recargar y secciones bajo demanda
Los textos en inglés y español están en un módulo aparte que la terminal consulta por clave. lang en o lang es cambia al momento, y el idioma se recuerda en el navegador. Las secciones grandes se cargan solo al abrirlas, como componentes asíncronos, para que la terminal arranque ligera.
Un fondo animado que no gasta batería
El fondo es el de esta web: un patrón de barras diminutas y la barra de leo/ hecha de partículas, que se apartan del cursor. En móvil queda tenue y quieta, y la animación se para cuando la pestaña no se ve.
Lo que aprendí: saber dónde parar
Una terminal puede crecer sin fin. Tuve un sistema de archivos virtual con ls, cd, cat y pwd, y lo quité: ahora cada comando abre su sección. Quería enseñar cómo decido, no cuántas cosas meto.