chore init

2026-09-16 21:34:09 +02:00
1 parent 1b7406b1d3
commit a0d312a884
@@ -0,0 +1,115 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Documentation — CV-Maker",
+  description: "Guide de prise en main de CV-Maker et syntaxe Markdown supportée.",
+};
+
+export default function DocumentationPage() {
+  return (
+    <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-10">
+      <Link
+        href="/"
+        className="text-sm font-medium text-muted underline-offset-2 hover:text-accent hover:underline"
+      >
+        ← Retour à l&apos;éditeur
+      </Link>
+
+      <h1 className="mt-4 text-2xl font-bold text-ink">Documentation</h1>
+
+      <section className="mt-6">
+        <h2 className="text-xl font-semibold text-ink">Prise en main</h2>
+        <ol className="mt-3 list-decimal space-y-2 pl-5 text-sm leading-relaxed text-ink">
+          <li>
+            <strong>Onglets 1 à 5</strong> — sélectionnez une zone de saisie (accroche,
+            état civil + contacts, formations, soft skills, centres d&apos;intérêt).
+            Un seul onglet est actif à la fois ; chaque zone conserve son texte.
+          </li>
+          <li>
+            <strong>Saisie Markdown</strong> — le texte est écrit en Markdown dans le
+            panneau gauche et rendu en HTML en temps réel dans la feuille A4 à droite.
+          </li>
+          <li>
+            <strong>Expériences professionnelles</strong> — bouton « Ajouter » pour créer
+            une expérience (titre + contenu). La liste est numérotée ; chaque entrée peut
+            être modifiée ou supprimée. L&apos;ordre de saisie détermine l&apos;affichage : la
+            première expérience ajoutée apparaît en haut de la section « Expériences
+            professionnelles » de la feuille, les suivantes en dessous.
+          </li>
+          <li>
+            <strong>Sauvegarde automatique</strong> — chaque frappe est enregistrée dans le
+            navigateur (localStorage, clé <code>cv-maker:v1</code>). Rechargez la page :
+            vos données sont restaurées. Aucune donnée n&apos;est envoyée sur Internet.
+          </li>
+          <li>
+            <strong>Impression / PDF</strong> — le bouton « Imprimer / PDF » ouvre
+            l&apos;aperçu d&apos;impression du navigateur. Enregistrez en PDF : seule la
+            feuille A4 est exportée, sans les panneaux d&apos;édition.
+          </li>
+          <li>
+            <strong>Export / import JSON</strong> — le bouton « Exporter JSON »
+            télécharge votre CV au format JSON (fichier <code>cv-maker.json</code>).
+            Sur un autre appareil, « Importer JSON » charge ce fichier et remplace
+            le contenu actuel (après confirmation). C&apos;est le moyen de partager ou
+            de sauvegarder un CV entre plusieurs navigateurs.
+          </li>
+          <li>
+            <strong>Réinitialiser</strong> — le bouton « Réinitialiser » (après
+            confirmation) vide toutes les zones et la liste des expériences.
+          </li>
+        </ol>
+      </section>
+
+      <section className="mt-8">
+        <h2 className="text-xl font-semibold text-ink">Syntaxe Markdown supportée</h2>
+        <p className="mt-2 text-sm leading-relaxed text-muted">
+          Les 5 zones et le contenu des expériences sont rendus en Markdown (GFM).
+        </p>
+        <div className="mt-4 overflow-x-auto rounded-md border border-border bg-white">
+          <table className="w-full text-sm text-ink">
+            <thead>
+              <tr className="border-b border-border bg-paper text-left">
+                <th className="px-3 py-2 font-semibold">Élément</th>
+                <th className="px-3 py-2 font-semibold">Syntaxe</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {[
+                ["Titre niveau 3", "### Développeur Full-Stack"],
+                ["Gras", "**Jean Dupont**"],
+                ["Italique", "*Contact*"],
+                ["Liste à puces", "- Compétence 1\n- Compétence 2"],
+                ["Liste numérotée", "1. Diplôme 1\n2. Diplôme 2"],
+                ["Lien", "[GitHub](https://github.com/user)"],
+                ["Lien brut", "<https://example.com>"],
+                ["Code en ligne", "`npm run dev`"],
+                ["Bloc de code", "```\nconst x = 42;\n```"],
+                ["Citation", "> Citation d'accroche"],
+                ["Séparateur", "---"],
+              ].map(([label, syntax]) => (
+                <tr key={label}>
+                  <td className="px-3 py-2 font-medium">{label}</td>
+                  <td className="px-3 py-2 font-mono text-xs whitespace-pre">
+                    {syntax}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className="mt-8 rounded-md border border-border bg-white p-4">
+        <h2 className="text-sm font-semibold text-ink">Conseil : structurer son CV</h2>
+        <p className="mt-2 text-sm leading-relaxed text-ink">
+          Utilisez l&apos;onglet 1 pour le nom et le poste visé, l&apos;onglet 2 pour vos
+          coordonnées (e-mail, téléphone, site web, GitHub), l&apos;onglet 3 pour vos
+          formations, l&apos;onglet 4 pour vos soft skills et l&apos;onglet 5 pour vos
+          centres d&apos;intérêt. Complétez avec vos expériences professionnelles, de la plus
+          récente à la plus ancienne.
+        </p>
+      </section>
+    </main>
+  );
+}