Cambios sección proyectos

Author: SebiGitHub

assets/css/styles.css

@@ -530,3 +530,78 @@ p{ color: var(--muted); line-height: 1.7; }
     grid-template-columns: 1fr;
   }
 }
+
+/* =========================
+   PROYECTOS — Carrusel (Opción A)
+   ========================= */
+.carousel{
+  display: grid;
+  grid-template-columns: 48px 1fr 48px;
+  gap: 14px;
+  align-items: center;
+}
+
+.carousel-stage{
+  min-height: 320px; /* evita saltos al cambiar */
+}
+
+.carousel-btn{
+  height: 52px;
+  border-radius: 14px;
+  border: 1px solid rgba(255,255,255,.18);
+  background: rgba(0,0,0,.18);
+  color: var(--text);
+  font-size: 28px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: transform .15s ease, border-color .15s ease, background .15s ease;
+}
+
+.carousel-btn:hover{
+  transform: translateY(-2px);
+  border-color: rgba(255,255,255,.32);
+  background: rgba(0,0,0,.26);
+}
+
+.carousel-btn:active{
+  transform: translateY(0);
+}
+
+.carousel-dots{
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.carousel-dot{
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,.20);
+  background: rgba(255,255,255,.10);
+  cursor: pointer;
+  opacity: .85;
+  transition: transform .15s ease, opacity .15s ease;
+}
+
+.carousel-dot:hover{
+  transform: scale(1.15);
+  opacity: 1;
+}
+
+.carousel-dot.active{
+  background: rgba(255,255,255,.55);
+  opacity: 1;
+}
+
+/* En móvil: botones un poco más pequeños */
+@media (max-width: 768px){
+  .carousel{
+    grid-template-columns: 44px 1fr 44px;
+    gap: 10px;
+  }
+  .carousel-stage{
+    min-height: 360px;
+  }
+}

assets/js/app.js

@@ -164,13 +164,13 @@ function setupContactForm(){
 /* =========================================================
    RENDER: PROJECTS
 ========================================================= */
-function renderProjects(){
-  const grid = document.getElementById("projects-grid");
-  if (!grid || !STATE.dict?.projects) return;
+let PROJECT_INDEX = 0;
 
-  const proj = STATE.dict.projects;
+function getProjectItems(){
+  const proj = STATE.dict?.projects;
+  if (!proj) return [];
 
-  const items = [
+  return [
     {
       title: proj.p1_title,
       desc: proj.p1_desc,
@@ -196,22 +196,107 @@ function renderProjects(){
       emoji: "🔍"
     }
   ];
+}
 
-  grid.innerHTML = items.map(p => `
+function clampIndex(i, len){
+  if (len <= 0) return 0;
+  return (i + len) % len; // wrap circular
+}
+
+function renderProjects(){
+  const stage = document.getElementById("project-stage");
+  const dots = document.getElementById("project-dots");
+  if (!stage || !dots) return;
+
+  const items = getProjectItems();
+  if (items.length === 0) {
+    stage.innerHTML = "";
+    dots.innerHTML = "";
+    return;
+  }
+
+  PROJECT_INDEX = clampIndex(PROJECT_INDEX, items.length);
+  const p = items[PROJECT_INDEX];
+
+  stage.innerHTML = `
     <div class="card project-card">
-      <div class="project-thumb"><span>${p.emoji}</span></div>
+      <div class="project-thumb">
+        <span>${p.emoji}</span>
+      </div>
+
       <h3>${p.title}</h3>
       <p>${p.desc}</p>
-      <div class="tech">${p.tech.map(t => `<span>${t}</span>`).join("")}</div>
+
+      <div class="tech">
+        ${p.tech.map(t => `<span>${t}</span>`).join("")}
+      </div>
+
       <details>
-        <summary>${STATE.lang === "es" ? "+ info" : "+ info"}</summary>
+        <summary>+ info</summary>
         <p>${p.why}</p>
       </details>
-      <a href="${p.link}" class="btn btn--primary" target="_blank" rel="noopener noreferrer">GitHub</a>
+
+      <a href="${p.link}" class="btn" target="_blank" rel="noopener noreferrer">GitHub</a>
     </div>
+  `;
+
+  dots.innerHTML = items.map((_, idx) => `
+    <button
+      class="carousel-dot ${idx === PROJECT_INDEX ? "active" : ""}"
+      aria-label="Ir al proyecto ${idx + 1}"
+      data-idx="${idx}">
+    </button>
   `).join("");
+
+  // dots click
+  dots.querySelectorAll(".carousel-dot").forEach(b=>{
+    b.addEventListener("click", ()=>{
+      PROJECT_INDEX = Number(b.getAttribute("data-idx"));
+      renderProjects();
+    });
+  });
 }
 
+// Botones prev/next + swipe
+function setupProjectsCarousel(){
+  const prev = document.getElementById("proj-prev");
+  const next = document.getElementById("proj-next");
+  const stage = document.getElementById("project-stage");
+  if (!prev || !next || !stage) return;
+
+  prev.addEventListener("click", ()=>{
+    const items = getProjectItems();
+    PROJECT_INDEX = clampIndex(PROJECT_INDEX - 1, items.length);
+    renderProjects();
+  });
+
+  next.addEventListener("click", ()=>{
+    const items = getProjectItems();
+    PROJECT_INDEX = clampIndex(PROJECT_INDEX + 1, items.length);
+    renderProjects();
+  });
+
+  // Swipe simple (móvil)
+  let x0 = null;
+  stage.addEventListener("touchstart", (e)=>{
+    x0 = e.touches?.[0]?.clientX ?? null;
+  }, { passive:true });
+
+  stage.addEventListener("touchend", (e)=>{
+    const x1 = e.changedTouches?.[0]?.clientX ?? null;
+    if (x0 == null || x1 == null) return;
+
+    const dx = x1 - x0;
+    if (Math.abs(dx) < 60) return;
+
+    const items = getProjectItems();
+    PROJECT_INDEX = clampIndex(PROJECT_INDEX + (dx < 0 ? 1 : -1), items.length);
+    renderProjects();
+    x0 = null;
+  }, { passive:true });
+}
+
+
 /* =========================================================
    RENDER: SKILLS
 ========================================================= */
@@ -285,6 +370,7 @@ document.addEventListener("DOMContentLoaded", () => {
   setupSearch();
   setupContactForm();
   setupSectionObserver();
+  setupProjectsCarousel();
 
   loadDict(STATE.lang);
 });

index.html

@@ -97,10 +97,19 @@ <h2 data-i18n="skills.title">Skills</h2>
 
     <section id="projects" class="section">
       <h2 data-i18n="projects.title">Proyectos</h2>
-      <div id="projects-grid"></div>
-      <!-- Nota: esta sección la reestructuramos después de elegir un estilo (carrusel / modal / scroll-snap). -->
+
+      <div class="carousel" aria-label="Carrusel de proyectos">
+        <button class="carousel-btn" id="proj-prev" aria-label="Proyecto anterior">‹</button>
+
+        <div id="project-stage" class="carousel-stage"></div>
+
+        <button class="carousel-btn" id="proj-next" aria-label="Proyecto siguiente">›</button>
+      </div>
+
+      <div id="project-dots" class="carousel-dots" aria-label="Selector de proyecto"></div>
     </section>
 
+
     <section id="xp" class="section">
       <h2 data-i18n="xp.title">Experiencia & Certificaciones</h2>
       <div id="xp-list"></div>