Zulema Gutiérrez · portfolio
Mi portfolio tiene dos caras: una página clásica, para leer rápido quién soy, y ZulemaOS, un escritorio retro que funciona en el navegador, con ventanas, terminal, mis apps, apuntes, juegos… y Thor y Hela paseando por la pantalla. Sin frameworks, y programado junto a Claude Code, la IA de Anthropic.
En pocas palabras
- 0 frameworks
- solo HTML, CSS y JavaScript, sin librerías
- 227 preguntas
- de examen en 10 temas, 72 de ellas con código
- 26 logros
- para descubrir, algunos secretos
- 2 idiomas
- español e inglés en todo, hasta la terminal
Cómo se usa
-
Paso 1
Elige cómo verlo
La portada es una página clásica, pensada para leer rápido la experiencia y los proyectos. El botón Portfolio interactivo abre ZulemaOS.
-
Paso 2
Un escritorio de verdad
Lo del portfolio, a la vista; lo demás, en carpetas (Mis apps, Apuntes, Útiles, Personal y Juegos). Las ventanas se arrastran, se maximizan y se minimizan a la barra de tareas, y los iconos se pueden recolocar. ¿Con prisa? Modo rápido enseña el CV de un vistazo.
-
Paso 3
Una terminal con su propia shell
helpenseña más de 30 comandos:whoami,neofetch,man python,fortune | catsay… con historial (↑ ↓) y autocompletado (Tab). Y hay algunos comandos ocultos. -
Paso 4
Mis apps, dentro
Monitor, Phishing y Sprint se abren en su propia ventana, dentro del escritorio. Cada una funciona también sola, en su propia dirección.
-
Paso 5
Para estudiar
El Temario tiene apuntes de 9 temas (HTML/CSS, JavaScript, PHP, SQL, Python, Java, Git, Docker y Linux). Chuletas los resume en mapas mentales y tablas que se copian con un clic.
-
Paso 6
Examínate
Examen.exe saca preguntas al azar de los temas que elijas, muchas con código (¿qué imprime?). Explica cada respuesta, da la nota por temas y te deja repasar solo tus fallos.
-
Paso 7
Juega y desbloquea logros
Sudoku, sopa de letras, Tetris, Buscaminas, Paint, notas y calendario. Lo que vas haciendo desbloquea logros, que se guardan solo en tu navegador.
-
Paso 8
También en el móvil
Los iconos se colocan en rejilla y las ventanas se abren a pantalla completa.
Qué incluye
Gestor de ventanas
Arrastrar, maximizar, minimizar y enfocar.
Terminal
Historial, autocompletado y sorpresas.
Apuntes y exámenes
9 temas, chuletas y 179 preguntas.
Thor y Hela
Pasean, se echan la siesta y piden comida.
Logros
26 para descubrir, algunos secretos.
Español e inglés
Todo, hasta la terminal.
Cómo está hecho
- data.jstodo el contenido, en español e inglés
- Página clásicapro/app.js la pinta desde los datos
- ZulemaOSos.js: ventanas, iconos y menú
- Cloudflare Pagesse publica sola con cada push
Decisiones técnicas
Un solo archivo de datos
La experiencia, los proyectos y los textos viven en data.js, en los dos idiomas. La página clásica y el escritorio leen lo mismo, así que nunca se contradicen.
Dos caras para dos visitas
Quien tiene 30 segundos lee la página clásica; quien quiere curiosear entra en el escritorio. La portada es la clásica porque es lo primero que necesita quien selecciona personal.
Sin frameworks, a propósito
El gestor de ventanas, la terminal, los juegos y los mapas mentales están hechos sin librerías ni frameworks: así entiendo lo que pasa por debajo, y la web no descarga nada que no use.
Con IA como compañera de programación
La he construido con Claude Code, la IA de Anthropic: yo decido qué se hace, reviso y pruebo cada cambio, y la IA propone y programa conmigo. Así aprendo a trabajar con IA como se hará en los equipos.
Seguro por defecto
Todo el texto se escapa antes de pintarlo, el almacenamiento tolera fallos (modo privado, cookies bloqueadas) y una función de Cloudflare pone cabeceras de seguridad y no sirve archivos que no son de la web.
Accesible
Se puede usar entero con teclado, respeta la opción de reducir el movimiento y cada ventana es un diálogo con su título.
Calidad y tests
- Cada pregunta de código se ha comprobado ejecutándola en su lenguaje real, para que la respuesta correcta lo sea de verdad.
- Revisado en ordenador y en móvil, en español y en inglés.
- Sin rastreo ni cookies: lo que guardas (notas, dibujos, logros) se queda en tu navegador.
- Publicación automática en Cloudflare Pages, con un único dominio y cabeceras de seguridad.
Pruébalo en la terminal
help # todos los comandos
neofetch # información del sistema
fortune | catsay # una frase, dicha por un gato
man python # los apuntes de Python
examen # abre Examen.exe
feed # comida para Thor y Hela¿Hablamos?
Si quieres saber más de este proyecto o de cómo trabajo, escríbeme.