Diseño responsive

Mejoro el diseño responsive además de agregarle más animaciones y vrsión ATS para posibles robots o IAs.

Author: SebiGitHub

assets/css/styles.css

@@ -20,6 +20,8 @@
 *{ box-sizing:border-box; }
 html,body{ margin:0; }
 html{ scroll-behavior:smooth; }
+img{ max-width:100%; height:auto; }
+
 
 body{
   background:#070814;
@@ -190,6 +192,56 @@ p{
   color:#fff;
 }
 
+.nav-wrap{ display:flex; align-items:center; gap:12px; }
+.nav-toggle{
+  display:none;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: 1px solid rgba(255,255,255,.14);
+  background: rgba(0,0,0,.18);
+  cursor:pointer;
+}
+.nav-toggle span{
+  display:block;
+  height:2px;
+  margin: 7px 10px;
+  background: rgba(255,255,255,.85);
+  border-radius:999px;
+}
+
+.nav-overlay{
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,.55);
+  z-index: 9;
+}
+
+@media (max-width: 900px){
+  /* Si NO hay JS, no escondas el menú (porque no hay toggle) */
+  .js .nav-toggle{ display:inline-block; }
+
+  .js .nav-links{
+    display:none;
+    position: fixed;
+    top: 70px;
+    right: 12px;
+    left: 12px;
+    z-index: 10;
+
+    padding: 12px;
+    border-radius: 18px;
+    background: rgba(6,10,22,.92);
+    border: 1px solid rgba(255,255,255,.14);
+    backdrop-filter: blur(10px);
+
+    flex-direction: column;
+    gap: 10px;
+  }
+  .js .nav-links.open{ display:flex; }
+}
+
+
 /* Toggle idioma tipo “pill” */
 .lang-toggle{
   display:inline-flex;
@@ -252,6 +304,25 @@ p{
   transform: translateY(1px);
 }
 
+/* Botón hover más “premium” */
+.btn--hero{
+  position: relative;
+  overflow:hidden;
+}
+.btn--hero i{
+  transition: transform .18s ease;
+}
+.btn--hero::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background: rgba(255,255,255,.10);
+  transform: translateX(-110%);
+  transition: transform .25s ease;
+}
+.btn--hero:hover::before{ transform: translateX(0); }
+.btn--hero:hover i{ transform: translateX(4px); }
+
 /* =========================================================
    HERO
    ========================================================= */
@@ -260,6 +331,21 @@ p{
   display:grid;
   place-items:center;
   text-align:center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Spotlight solo en hero (usa --hx/--hy) */
+.hero::after{
+  content:"";
+  position:absolute;
+  inset:-1px;
+  pointer-events:none;
+  background: radial-gradient(
+    220px circle at var(--hx, 50%) var(--hy, 40%),
+    rgba(34,211,238,0.18),
+    transparent 60%
+  );
 }
 
 .hero-logo{
@@ -291,6 +377,26 @@ p{
   text-shadow: 0 0 28px rgba(180,120,255,.22);
 }
 
+/* Reveal suave */
+.js .hero-logo,
+.js .hero-title,
+.js .hero-sub,
+.js .btn--hero{
+  opacity:0;
+  transform: translateY(14px);
+  animation: heroIn .9s ease forwards;
+}
+.js .hero-title{ animation-delay: .08s; }
+.js .hero-sub{ animation-delay: .18s; }
+.js .btn--hero{ animation-delay: .28s; }
+
+@keyframes heroIn{
+  to{ opacity:1; transform: translateY(0); }
+}
+
+/* ATS/SEO ven el texto en el HTML igualmente */
+.js .fallback{ display:none; }
+
 
 /* =========================================================
    CARDS (skills/xp/projects)
@@ -738,12 +844,12 @@ p{
 /* =========================================================
    ANIMACIÓN DE SECCIONES (fade-in)
    ========================================================= */
-.section{
+.js .section{
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .6s ease, transform .6s ease;
 }
-.section.visible{
+.js .section.visible{
   opacity: 1;
   transform: translateY(0);
 }
@@ -862,6 +968,16 @@ p{
   background: rgba(0,0,0,.25);
 }
 
+.project-psr{
+  margin-top: 12px;
+  display:grid;
+  gap: 8px;
+  color: rgba(255,255,255,.82);
+  font-size: 0.95rem;
+}
+.project-psr strong{ color: #fff; }
+
+
 /* ===== Paletas thumbs nuevas ===== */
 .project-thumb.thumb-realtime{ --a: rgba(34,211,238,.20);  --b: rgba(196,181,253,.16); }
 .project-thumb.thumb-testing{  --a: rgba(250,204,21,.14);  --b: rgba(148,163,184,.18); }

assets/i18n/en.json

@@ -18,6 +18,7 @@
   "about": {
     "title": "About me",
     "lead": "I build end-to-end solutions: connect data, automate workflows, and care about user experience.",
+    "lead2": "I automate processes (Power Apps / scripts / testing). I like building end-to-end and documenting it.",
     "cards": [
       {
         "icon": "fa-solid fa-bolt",
@@ -108,31 +109,56 @@
   },
   "projects": {
     "title": "Projects",
-    "p1_title": "WEB-DE-PROTOCOCOLOS-HSJD",
+
+    "labels": {
+      "problem": "Problem",
+      "solution": "Solution",
+      "result": "Result"
+    },
+
+    "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.",
 
     "p2_title": "AvaloniaCatalogoWinForms",
     "p2_desc": "Fictional product 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).",
 
     "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.",
-
-    "case_labels": { "problem": "Problem", "solution": "Solution", "signal": "Signal" },
+    "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.",
 
     "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).",
 
     "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" },
 
     "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_cases": [
       {

assets/i18n/es.json

@@ -18,6 +18,7 @@
   "about": {
     "title": "Sobre mí",
     "lead": "Construyo soluciones end-to-end: conecto datos, automatizo procesos y cuido la experiencia de usuario.",
+    "lead2": "Automatizo procesos (Power Apps / scripts / testing). Me gusta construir end-to-end y documentarlo.",
     "cards": [
       {
         "icon": "fa-solid fa-bolt",
@@ -108,31 +109,56 @@
   },
   "projects": {
     "title": "Proyectos",
+
+    "labels": {
+      "problem": "Problema",
+      "solution": "Solución",
+      "result": "Resultado"
+    },
+
     "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.",
 
     "p2_title": "AvaloniaCatalogoWinForms",
     "p2_desc": "Catálogo ficticio 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).",
 
     "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.",
-
-    "case_labels": { "problem": "Problema", "solution": "Solución", "signal": "Señal" },
+    "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.",
 
     "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).",
 
     "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" },
 
     "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_cases": [
       {