script.js

const boutonTheme = document.getElementById("boutonTheme");
const texteMachine = document.getElementById("texteMachine");
const elementsApparition = document.querySelectorAll(".apparition");
const boutonsCompetence = document.querySelectorAll(".bouton-competence");
const boutonsFiltreCompetence = document.querySelectorAll(".filtre-competence");
const widgetsInteret = document.querySelectorAll(".widget-interet");
const modaleCompetence = document.getElementById("modaleCompetence");
const boutonFermerModale = document.getElementById("boutonFermerModale");
const titreModaleCompetence = document.getElementById("titreModaleCompetence");
const resumeModaleCompetence = document.getElementById("resumeModaleCompetence");
const codeModaleCompetence = document.getElementById("codeModaleCompetence");
const pointsModaleCompetence = document.getElementById("pointsModaleCompetence");
const liensNavigation = document.querySelectorAll(".lien-nav");
const barreProgressionLecture = document.getElementById("barreProgressionLecture");

// On restaure le thème choisi pour garder une expérience cohérente.
const themeSauvegarde = localStorage.getItem("theme");
if (themeSauvegarde === "dark") {
  document.body.classList.add("sombre");
}

if (boutonTheme) {
  boutonTheme.addEventListener("click", () => {
    document.body.classList.toggle("sombre");
    const themeActuel = document.body.classList.contains("sombre") ? "dark" : "light";
    localStorage.setItem("theme", themeActuel);
  });
}

const phrasesMachine = [
  "Développeur Web Junior",
  "Développeur d'applications internes",
  "Python / Django / FastAPI - API REST",
];
let indexPhrase = 0;
let indexCaractere = 0;
let estEnSuppression = false;

function lancerEffetMachineAEcrire() {
  if (!texteMachine) {
    return;
  }

  const phraseActuelle = phrasesMachine[indexPhrase];
  const texteVisible = phraseActuelle.slice(0, indexCaractere);
  texteMachine.textContent = texteVisible;

  // Gère la frappe et l'effacement pour un rendu naturel.
  if (!estEnSuppression) {
    indexCaractere += 1;
    if (indexCaractere > phraseActuelle.length) {
      estEnSuppression = true;
      setTimeout(lancerEffetMachineAEcrire, 1100);
      return;
    }
  } else {
    indexCaractere -= 1;
    if (indexCaractere < 0) {
      estEnSuppression = false;
      indexPhrase = (indexPhrase + 1) % phrasesMachine.length;
      indexCaractere = 0;
    }
  }

  const vitesse = estEnSuppression ? 45 : 80;
  setTimeout(lancerEffetMachineAEcrire, vitesse);
}

lancerEffetMachineAEcrire();

// Active les animations d'apparition uniquement quand la section entre dans le viewport.
const observateurApparition = new IntersectionObserver(
  (entrees) => {
    entrees.forEach((entree) => {
      if (entree.isIntersecting) {
        entree.target.classList.add("est-visible");
        observateurApparition.unobserve(entree.target);
      }
    });
  },
  { threshold: 0.2 }
);

elementsApparition.forEach((element) => {
  observateurApparition.observe(element);
});

const detailsCompetences = {
  "python-django": {
    title: "Python / Django",
    summary: "Exemple de vue Django avec réponse JSON standardisée.",
    code: `from django.http import JsonResponse

def health_check(request):
    return JsonResponse({
        "status": "ok",
        "service": "cv-portfolio"
    })`,
    bullets: [
      "But : fournir un endpoint simple de supervision.",
      "Logique : réponse JSON claire et stable.",
      "Résultat : intégration facile avec monitoring/API clients.",
    ],
  },
  fastapi: {
    title: "FastAPI",
    summary: "Exemple FastAPI avec validation de schéma et endpoint REST.",
    code: `from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class ProjectIn(BaseModel):
    name: str

@app.post("/projects")
def create_project(payload: ProjectIn):
    return {"message": "created", "project": payload.name}`,
    bullets: [
      "But : exposer une API performante et bien documentée.",
      "Logique : validation automatique via Pydantic.",
      "Résultat : endpoints robustes et rapides à maintenir.",
    ],
  },
  "api-rest": {
    title: "API REST",
    summary: "Exemple de route API de lecture avec sérialisation.",
    code: `@api_view(["GET"])
def project_list(request):
    queryset = Project.objects.all().order_by("-created_at")
    serializer = ProjectSerializer(queryset, many=True)
    return Response(serializer.data, status=200)`,
    bullets: [
      "But : exposer des données de manière standard.",
      "Logique : requête + serializer + code HTTP explicite.",
      "Résultat : endpoint prêt pour front-end/mobile.",
    ],
  },
  postgresql: {
    title: "PostgreSQL",
    summary: "Exemple de requête SQL pour un reporting simple.",
    code: `SELECT status, COUNT(*) AS total
FROM tickets
WHERE created_at >= CURRENT_DATE - INTERVAL '30 days'
GROUP BY status
ORDER BY total DESC;`,
    bullets: [
      "But : suivre l'activité récente.",
      "Logique : agrégation par statut sur 30 jours.",
      "Résultat : base pour un tableau de bord décisionnel.",
    ],
  },
  javascript: {
    title: "JavaScript",
    summary: "Exemple de filtrage dynamique côté navigateur.",
    code: `const filtered = items.filter((item) =>
  item.title.toLowerCase().includes(searchTerm.toLowerCase())
);`,
    bullets: [
      "But : améliorer l'expérience utilisateur.",
      "Logique : filtrage local en temps réel.",
      "Résultat : navigation plus rapide dans la liste.",
    ],
  },
  "html-css": {
    title: "HTML5 / CSS3",
    summary: "Exemple de composant accessible et responsive.",
    code: `<button class="btn-primary" type="button">
  Voir le projet
</button>

.btn-primary { border-radius: 12px; }`,
    bullets: [
      "But : créer une UI claire et utilisable.",
      "Logique : structure sémantique + style réutilisable.",
      "Résultat : rendu propre desktop/mobile.",
    ],
  },
  maintenance: {
    title: "Maintenance applicative",
    summary: "Exemple de gestion d'erreur avec traçabilité.",
    code: `try:
    update_application_config(payload)
except ValidationError as error:
    logger.warning("invalid-config: %s", error)
    raise`,
    bullets: [
      "But : fiabiliser le support en production.",
      "Logique : capturer et qualifier les erreurs.",
      "Résultat : diagnostic plus rapide des incidents.",
    ],
  },
  analyse: {
    title: "Analyse des besoins & cadrage",
    summary: "Exemple de mapping besoin métier vers tâche technique.",
    code: `const specification = {
  need: "Suivre les demandes usagers",
  feature: "Tableau de suivi",
  acceptance: ["filtre", "export", "historique"]
};`,
    bullets: [
      "But : éviter l'écart entre besoin et solution.",
      "Logique : formaliser les critères d'acceptation.",
      "Résultat : développement plus cadré et testable.",
    ],
  },
  tests: {
    title: "Tests fonctionnels & techniques",
    summary: "Exemple de test unitaire sur endpoint API.",
    code: `def test_health_check(client):
    response = client.get("/api/health/")
    assert response.status_code == 200
    assert response.json()["status"] == "ok"`,
    bullets: [
      "But : sécuriser les régressions.",
      "Logique : vérifier statut HTTP + contenu attendu.",
      "Résultat : stabilité renforcée à chaque évolution.",
    ],
  },
  documentation: {
    title: "Documentation technique & guides",
    summary: "Exemple de contrat minimal documenté.",
    code: `# Endpoint: GET /api/projects
# Query params: page, page_size
# Returns: { "results": [...], "count": 42 }`,
    bullets: [
      "But : faciliter la maintenance et l'onboarding.",
      "Logique : documenter entrées, sorties et règles.",
      "Résultat : communication fluide entre équipes.",
    ],
  },
  mco: {
    title: "MCO & maintenance évolutive",
    summary: "Exemple de tâche planifiée de maintenance.",
    code: `def cleanup_temp_files():
    for file_path in list_old_files(days=7):
        os.remove(file_path)`,
    bullets: [
      "But : garder l'application performante dans le temps.",
      "Logique : suppression préventive des fichiers obsolètes.",
      "Résultat : réduction des incidents d'exploitation.",
    ],
  },
  securite: {
    title: "Sécurité applicative & confidentialité",
    summary: "Exemple de contrôle d'accès avant une action sensible.",
    code: `if not request.user.has_perm("projects.change_project"):
    return Response({"detail": "forbidden"}, status=403)`,
    bullets: [
      "But : protéger les données et fonctionnalités sensibles.",
      "Logique : vérification explicite des permissions.",
      "Résultat : application alignée avec les bonnes pratiques.",
    ],
  },
  etl: {
    title: "Flux de données / ETL",
    summary: "Exemple de pipeline simple extraction -> transformation -> chargement.",
    code: `rows = extract_from_source()
clean_rows = transform(rows)
load_into_target(clean_rows)`,
    bullets: [
      "But : fiabiliser la circulation inter-applicative.",
      "Logique : étapes ETL séparées et lisibles.",
      "Résultat : données cohérentes pour les usages métiers.",
    ],
  },
  "low-code-ia": {
    title: "Low code / IA",
    summary: "Exemple d'assistance IA pour pré-remplir un champ métier.",
    code: `const draft = await ai.suggest({
  context: userInput,
  goal: "résumer la demande usager"
});`,
    bullets: [
      "But : accélérer la production de valeur.",
      "Logique : IA en assistance, validation humaine finale.",
      "Résultat : gain de temps sans perdre la maîtrise.",
    ],
  },
  git: {
    title: "Git",
    summary: "Exemple de workflow simple en branche dédiée.",
    code: `git checkout -b feature/modal-skills
git add .
git commit -m "Ajoute modal de démonstration des compétences"`,
    bullets: [
      "But : garder un historique clair des changements.",
      "Logique : isolation des modifications par feature.",
      "Résultat : revue de code plus facile et propre.",
    ],
  },
  agile: {
    title: "Méthodes Agiles (Scrum, Kanban)",
    summary: "Exemple de découpage de tâche en livrables courts.",
    code: `Sprint goal:
1) Créer la modal
2) Relier aux compétences
3) Tester mobile + accessibilité`,
    bullets: [
      "But : livrer rapidement avec feedback.",
      "Logique : découpage en incréments mesurables.",
      "Résultat : progression continue et visible.",
    ],
  },
};

// Ouvre la modale avec le contenu de la compétence sélectionnée.
function ouvrirModaleCompetence(cleCompetence) {
  if (!modaleCompetence || !detailsCompetences[cleCompetence]) {
    return;
  }

  const detail = detailsCompetences[cleCompetence];
  titreModaleCompetence.textContent = detail.title;
  resumeModaleCompetence.textContent = detail.summary;
  codeModaleCompetence.textContent = detail.code;
  pointsModaleCompetence.innerHTML = "";

  detail.bullets.forEach((item) => {
    const point = document.createElement("li");
    point.textContent = item;
    pointsModaleCompetence.appendChild(point);
  });

  modaleCompetence.classList.add("est-ouverte");
  modaleCompetence.setAttribute("aria-hidden", "false");
  document.body.style.overflow = "hidden";
  boutonFermerModale.focus();
}

function fermerModaleCompetence() {
  if (!modaleCompetence) {
    return;
  }
  modaleCompetence.classList.remove("est-ouverte");
  modaleCompetence.setAttribute("aria-hidden", "true");
  document.body.style.overflow = "";
}

boutonsCompetence.forEach((bouton) => {
  bouton.addEventListener("click", () => {
    ouvrirModaleCompetence(bouton.dataset.competence);
  });
});

// Filtre l'affichage des widgets de compétences par catégorie.
boutonsFiltreCompetence.forEach((boutonFiltre) => {
  boutonFiltre.addEventListener("click", () => {
    const filtre = boutonFiltre.dataset.filtre;

    boutonsFiltreCompetence.forEach((filtreItem) => {
      filtreItem.classList.remove("est-actif");
    });
    boutonFiltre.classList.add("est-actif");

    boutonsCompetence.forEach((boutonCompetence) => {
      const categorie = boutonCompetence.dataset.categorie;
      const afficher = filtre === "toutes" || categorie === filtre;
      boutonCompetence.classList.toggle("est-cache", !afficher);
    });
  });
});

// Petit comportement interactif: met en évidence le centre d'intérêt sélectionné.
widgetsInteret.forEach((widget) => {
  widget.addEventListener("click", () => {
    const estActif = widget.classList.toggle("actif");
    widget.setAttribute("aria-pressed", estActif ? "true" : "false");
  });
});

if (boutonFermerModale) {
  boutonFermerModale.addEventListener("click", fermerModaleCompetence);
}

if (modaleCompetence) {
  modaleCompetence.addEventListener("click", (evenement) => {
    if (evenement.target === modaleCompetence) {
      fermerModaleCompetence();
    }
  });
}

document.addEventListener("keydown", (evenement) => {
  if (evenement.key === "Escape" && modaleCompetence?.classList.contains("est-ouverte")) {
    fermerModaleCompetence();
  }
});

// Met en évidence la section visible dans la barre de navigation.
const sectionsNavigables = Array.from(liensNavigation)
  .map((lien) => document.querySelector(lien.getAttribute("href")))
  .filter(Boolean);

const observateurNavigation = new IntersectionObserver(
  (entrees) => {
    entrees.forEach((entree) => {
      if (!entree.isIntersecting) {
        return;
      }
      liensNavigation.forEach((lien) => {
        const estActif = lien.getAttribute("href") === `#${entree.target.id}`;
        lien.classList.toggle("actif", estActif);
      });
    });
  },
  { threshold: 0.45 }
);

sectionsNavigables.forEach((section) => {
  observateurNavigation.observe(section);
});

// Met à jour la barre de progression selon l'avancement du scroll.
function mettreAJourBarreProgressionLecture() {
  if (!barreProgressionLecture) {
    return;
  }
  const hauteurScrollable = document.documentElement.scrollHeight - window.innerHeight;
  const progression = hauteurScrollable > 0 ? (window.scrollY / hauteurScrollable) * 100 : 0;
  barreProgressionLecture.style.width = `${Math.min(100, Math.max(0, progression))}%`;
}

window.addEventListener("scroll", mettreAJourBarreProgressionLecture, { passive: true });
window.addEventListener("resize", mettreAJourBarreProgressionLecture);
mettreAJourBarreProgressionLecture();