Cambios en la seccion de proyectos

Author: SebiGitHub

assets/css/styles.css

@@ -864,6 +864,16 @@ p{
   }
 }
 
+/* FIX: cards-grid en móvil (evita las “columnas palillo”) */
+@media (max-width: 819px){
+  .cards-grid{
+    grid-template-columns: 1fr; /* una columna */
+  }
+  .cards-grid > .card{
+    grid-column: 1 / -1; /* ocupa todo el ancho */
+  }
+}
+
 @media (max-width: 768px){
   .nav{ padding: 10px 12px; }
   .nav nav{ gap: 10px; font-size: 14px; }

assets/i18n/en.json

@@ -110,55 +110,50 @@
   "projects": {
     "title": "Projects",
 
-    "labels": {
-      "problem": "Problem",
-      "solution": "Solution",
-      "result": "Result"
-    },
+    "psr_labels": { "problem": "Problem", "solution": "Solution", "result": "Result" },
+    "case_labels": { "problem": "Problem", "solution": "Solution", "signal": "Signal" },
 
     "p1_title": "WEB-DE-PROTOCOLOS-HSJD",
     "p1_desc": "PowerApps + SharePoint app that allows each employee to access only the protocols assigned to their role and department.",
     "p1_why": "I learned to integrate different tools into a coherent flow that automates tasks and reduces manual errors—my first step towards a “complete solution”.",
-    "p1_problem": "Employees couldn’t quickly find the right protocols for their role and department.",
-    "p1_solution": "PowerApps + SharePoint with role-based filtering and version-aware flow.",
-    "p1_result": "Evidence: repo and screenshots; built in a real internship context.",
+    "p1_problem": "Employees needed to quickly reach the right protocol (and the current version) without manual searching through documents.",
+    "p1_solution": "PowerApps connected to SharePoint with role/department filtering, search, version control and read tracking.",
+    "p1_result": "Evidence: real project (final project) with role-based filtering and read/version traceability.",
 
     "p2_title": "AvaloniaCatalogoWinForms",
-    "p2_desc": "Fictional product catalog with full CRUD: add, update, delete, filter and sort products across multiple screens.",
+    "p2_desc": "Desktop catalog with full CRUD: add, update, delete, filter and sort products across multiple screens.",
     "p2_why": "It helped me structure data in a desktop app and keep consistency across screens—solid foundations for bigger projects.",
-    "p2_problem": "Need to manage a catalog with full operations and clear navigation.",
-    "p2_solution": "Desktop app with CRUD + filtering/sorting across consistent screens.",
-    "p2_result": "Evidence: repo with complete features (CRUD + filters + sorting).",
+    "p2_problem": "I wanted to practice a complete desktop catalog app with navigation, persistence and typical CRUD + filtering flows.",
+    "p2_solution": "C#/.NET app with Avalonia UI (MVVM) and JSON persistence, including search/filter and basic CRUD.",
+    "p2_result": "Evidence: CRUD + filtering + screenshots and run steps in the README.",
 
     "p3_title": "Agenda App",
     "p3_desc": "Agenda app to manage contacts and/or events with a clean, productivity-focused UI.",
     "p3_why": "It helped me practice app structure, data persistence and a clean UI designed for real usage.",
-    "p3_problem": "Manage contacts/events in a simple way without relying on external tools.",
-    "p3_solution": "App with modular structure and persistence for day-to-day usage.",
-    "p3_result": "Evidence: repo with functional screens and complete management flow.",
+    "p3_problem": "Managing contacts/tasks per user and keeping data safe and accessible across devices.",
+    "p3_solution": "Android app in Kotlin with Firebase Auth + Realtime Database, CRUD and UI validations/feedback.",
+    "p3_result": "Evidence: login/register + per-user cloud CRUD + screenshots in the repo.",
 
     "p4_title": "Realtime Collaborative Bingo Web App",
     "p4_desc": "Real-time collaborative bingo: multiple users join a room and the board state syncs instantly.",
     "p4_why": "Previously called “BingoEnvidiosos”. Great practice for real-time sync, shared state and multi-user UX.",
-    "p4_problem": "In group bingo, boards get out of sync if each user tracks state independently.",
-    "p4_solution": "Shared rooms with real-time board state synchronization.",
-    "p4_result": "Evidence: repo with multi-user logic and synced state (no public demo).",
+    "p4_problem": "Coordinating a shared board across multiple users in real time without desync or page reloads.",
+    "p4_solution": "Room-based web app with real-time shared state, handling events and consistency across clients.",
+    "p4_result": "Evidence: real-time multi-user project (repo includes features and structure).",
 
     "p5_title": "Selenium end-to-end",
     "p5_desc": "Automated E2E tests to validate real user flows on web, making sure key features don’t break.",
     "p5_why": "It builds discipline: reproducible tests, early bug detection and a quality-first mindset.",
-    "p5_problem": "Website changes can silently break key flows until it’s too late.",
-    "p5_solution": "Selenium E2E suite that validates real user scenarios.",
-    "p5_result": "Evidence: repo with repeatable automated tests (CI-ready).",
-
-    "case_labels": { "problem": "Problem", "solution": "Solution", "signal": "Signal" },
+    "p5_problem": "Catching breaking changes in critical user flows before they hit production.",
+    "p5_solution": "Selenium + JUnit5 suite using Page Objects, wait helpers and automated execution in CI.",
+    "p5_result": "Evidence: CI + reporting (Allure) + execution video in the repo.",
 
     "p6_title": "Kotlin Labs",
     "p6_desc": "A set of Kotlin mini-projects to master key areas: multimedia, concurrency and persistence.",
     "p6_why": "Mini-case format: a real problem, a concrete solution and a clear competency signal.",
-    "p6_problem": "I wanted to master Kotlin through real, focused problems instead of only theory.",
-    "p6_solution": "A collection of mini-projects (coroutines, multimedia, persistence), one goal per case.",
-    "p6_result": "Evidence: 3 separate repos + mini-cases documented with problem/solution.",
+    "p6_problem": "Learning key Kotlin/Android concepts fast without getting stuck in huge slow-to-iterate projects.",
+    "p6_solution": "Focused mini-projects: coroutines (dispatchers/cancellation), multimedia (resources/lifecycle), persistence (CRUD).",
+    "p6_result": "Evidence: 3 repos with features + screenshots/docs per mini-case.",
 
     "p6_cases": [
       {

assets/i18n/es.json

@@ -110,55 +110,50 @@
   "projects": {
     "title": "Proyectos",
 
-    "labels": {
-      "problem": "Problema",
-      "solution": "Solución",
-      "result": "Resultado"
-    },
+    "psr_labels": { "problem": "Problema", "solution": "Solución", "result": "Resultado" },
+    "case_labels": { "problem": "Problema", "solution": "Solución", "signal": "Señal" },
 
     "p1_title": "WEB-DE-PROTOCOLOS-HSJD",
     "p1_desc": "Aplicación desarrollada con PowerApps y SharePoint para que cada empleado acceda solo a los protocolos que le corresponden según su categoría y servicio.",
     "p1_why": "Aprendí a integrar herramientas heterogéneas en un flujo coherente que automatiza tareas y reduce errores manuales. Fue un paso real hacia una “solución completa”.",
-    "p1_problem": "Los empleados no podían encontrar rápido los protocolos correctos según su rol/servicio.",
-    "p1_solution": "PowerApps + SharePoint con filtrado por categoría/servicio y flujo de versiones.",
-    "p1_result": "Evidencia: repositorio y capturas del flujo; app usada en contexto real de prácticas.",
+    "p1_problem": "Los empleados necesitaban encontrar el protocolo correcto (y su versión vigente) sin perderse entre documentos y búsquedas manuales.",
+    "p1_solution": "App PowerApps conectada a SharePoint con filtrado por rol/servicio, búsqueda, control de versiones y registro de lectura.",
+    "p1_result": "Evidencia: proyecto real (TFG) con filtrado por rol y trazabilidad de lectura/versiones.",
 
     "p2_title": "AvaloniaCatalogoWinForms",
-    "p2_desc": "Catálogo ficticio con CRUD completo: agregar, actualizar, eliminar, filtrar y ordenar productos en varias pantallas.",
+    "p2_desc": "Catálogo de escritorio con CRUD completo: agregar, actualizar, eliminar, filtrar y ordenar productos en varias pantallas.",
     "p2_why": "Me ayudó a estructurar datos en una app de escritorio y a mantener consistencia entre pantallas, base para proyectos más grandes.",
-    "p2_problem": "Necesidad de gestionar un catálogo con operaciones completas y navegación clara.",
-    "p2_solution": "App de escritorio con CRUD + filtros/ordenación y pantallas consistentes.",
-    "p2_result": "Evidencia: repo con funcionalidades completas (CRUD + filtros + ordenación).",
+    "p2_problem": "Necesitaba practicar una app desktop completa de catálogo con navegación, persistencia y operaciones típicas (CRUD + filtro).",
+    "p2_solution": "App en C#/.NET con Avalonia UI (MVVM) y persistencia en JSON, incluyendo búsqueda/filtrado y CRUD básico.",
+    "p2_result": "Evidencia: CRUD + filtrado + capturas y pasos de ejecución en el README.",
 
     "p3_title": "Agenda App",
     "p3_desc": "App de agenda para gestionar contactos y/o eventos, con interfaz clara y enfoque en productividad.",
     "p3_why": "Me permitió practicar estructura de app, persistencia de datos y una UI limpia orientada a uso real.",
-    "p3_problem": "Organizar contactos/eventos sin depender de herramientas externas y con una UI simple.",
-    "p3_solution": "App con estructura modular y persistencia para gestionar datos de forma cómoda.",
-    "p3_result": "Evidencia: repo con pantallas funcionales y flujo completo de gestión.",
+    "p3_problem": "Gestionar contactos/tareas con datos por usuario y evitar perder información entre dispositivos.",
+    "p3_solution": "App Android en Kotlin con Firebase Auth + Realtime Database, CRUD y validaciones con feedback en UI.",
+    "p3_result": "Evidencia: login/registro + CRUD en la nube por usuario + capturas en el repo.",
 
     "p4_title": "Realtime Collaborative Bingo Web App",
     "p4_desc": "Bingo colaborativo en tiempo real: varios usuarios comparten sala y el estado del tablero se sincroniza al instante.",
     "p4_why": "Antes era “BingoEnvidiosos”. Aquí practiqué sincronización en tiempo real, estados compartidos y UX multiusuario.",
-    "p4_problem": "En un bingo en grupo, el tablero se desincroniza si cada usuario va por su cuenta.",
-    "p4_solution": "Salas compartidas con sincronización del estado del tablero en tiempo real.",
-    "p4_result": "Evidencia: repo con lógica multiusuario y estado sincronizado (sin demo pública).",
+    "p4_problem": "Coordinar un tablero compartido entre varios usuarios en tiempo real (sin recargas y sin desincronización).",
+    "p4_solution": "Web app con salas y sincronización en tiempo real (estado compartido), controlando eventos y consistencia del tablero.",
+    "p4_result": "Evidencia: proyecto multiusuario en tiempo real (repo con features y estructura).",
 
     "p5_title": "Selenium end-to-end",
     "p5_desc": "Tests E2E automatizados para validar flujos reales de usuario en web, asegurando que lo importante no se rompe.",
     "p5_why": "Me aporta disciplina: pruebas reproducibles, detección temprana de fallos y enfoque en calidad.",
-    "p5_problem": "Cambios en una web pueden romper flujos críticos sin que se note hasta tarde.",
-    "p5_solution": "Suite de tests E2E con Selenium para validar escenarios reales de usuario.",
-    "p5_result": "Evidencia: repo con tests automatizados y ejecución repetible (base para CI).",
-
-    "case_labels": { "problem": "Problema", "solution": "Solución", "signal": "Señal" },
+    "p5_problem": "Detectar roturas en flujos críticos de una web antes de que lleguen a producción.",
+    "p5_solution": "Suite E2E con Selenium + JUnit5 usando Page Objects, helpers de waits y ejecución automática en CI.",
+    "p5_result": "Evidencia: CI + reporting (Allure) + vídeo de ejecución en el repo.",
 
     "p6_title": "Kotlin Labs",
     "p6_desc": "Colección de mini-proyectos en Kotlin para dominar piezas clave: multimedia, concurrencia y persistencia.",
     "p6_why": "Formato mini-casos: un problema real, una solución concreta y una señal clara de competencia técnica.",
-    "p6_problem": "Quería aprender Kotlin en profundidad con problemas reales y casos pequeños pero completos.",
-    "p6_solution": "Agrupación de mini-proyectos (coroutines, multimedia, persistencia) con foco en un objetivo por caso.",
-    "p6_result": "Evidencia: 3 repos separados + mini-casos documentados con problema/solución.",
+    "p6_problem": "Aprender conceptos clave de Kotlin/Android sin hacer “mega proyectos” lentos de iterar.",
+    "p6_solution": "Mini-proyectos enfocados: corrutinas (dispatchers/cancelación), multimedia (recursos/ciclo de vida) y persistencia (CRUD).",
+    "p6_result": "Evidencia: 3 repos con features + capturas/documentación por mini-caso.",
 
     "p6_cases": [
       {

assets/js/app.js

@@ -87,11 +87,29 @@ function chipTone(label = "") {
   return "";
 }
 
-
 document.getElementById("lang-toggle")?.addEventListener("click", () => {
   loadDict(STATE.lang === "es" ? "en" : "es");
 });
 
+
+function typewriter(el, text, speed = 18){
+  if(!el) return;
+  el.textContent = "";
+  let i = 0;
+  const t = setInterval(() => {
+    el.textContent = text.slice(0, ++i);
+    if(i >= text.length) clearInterval(t);
+  }, speed);
+}
+
+// Ejemplo de uso tras traducir:
+const heroTitleEl = document.querySelector('[data-i18n="hero.title"]');
+if(heroTitleEl){
+  const full = heroTitleEl.textContent.trim();
+  typewriter(heroTitleEl, full, 14);
+}
+
+
 /* =========================================================
    ABOUT
    ========================================================= */

index.html

@@ -93,8 +93,9 @@
       <img src="assets/img/logo-s-trasparente.png" alt="" class="hero-logo" />
       <h1 class="hero-title"><span class="glow" data-i18n="hero.title"></span></h1>
       <p class="hero-sub" data-i18n="hero.subtitle"></p>
-      <a href="#projects" class="btn btn--hero" data-i18n="hero.cta">
-        Ver proyectos <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+      <a class="btn btn--hero" href="#projects">
+        <span data-i18n="hero.cta">Ver proyectos</span>
+        <i class="fa-solid fa-arrow-right"></i>
       </a>
     </section>