refactor: rename css/ to assets/, add JSDoc signatures to section stubs

.gitignore

@@ -0,0 +1 @@
+snapshots/

assets/sections/competences.css

@@ -0,0 +1,3 @@
+/* css/sections/competences.css
+ * TODO: styles de la section "competences" à implémenter.
+ */

assets/sections/experience.css

@@ -0,0 +1,3 @@
+/* css/sections/experience.css
+ * TODO: styles de la section "experience" à implémenter.
+ */

assets/sections/formation.css

@@ -0,0 +1,3 @@
+/* css/sections/formation.css
+ * TODO: styles de la section "formation" à implémenter.
+ */

assets/sections/hobbies.css

@@ -0,0 +1,3 @@
+/* css/sections/hobbies.css
+ * TODO: styles de la section "hobbies" à implémenter.
+ */

assets/sections/langues.css

@@ -0,0 +1,3 @@
+/* css/sections/langues.css
+ * TODO: styles de la section "langues" à implémenter.
+ */

assets/style.css

@@ -0,0 +1,138 @@
+/* ===========================
+   Reset & base
+=========================== */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #0f0f0f;
+  color: #e0e0e0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
+  padding: 20px;
+}
+
+/* ===========================
+   Layout
+=========================== */
+.container {
+  max-width: 520px;
+  width: 100%;
+}
+
+/* ===========================
+   Header
+=========================== */
+header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+h1 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #e94560;
+  margin-bottom: 10px;
+}
+
+header p {
+  color: #a0a0b0;
+  font-size: 0.95rem;
+}
+
+/* ===========================
+   Card
+=========================== */
+.card {
+  background: #16213e;
+  border: 1px solid #2a2a4a;
+  border-radius: 12px;
+  padding: 32px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* ===========================
+   Form
+=========================== */
+.form-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  font-size: 0.85rem;
+  color: #a0a0b0;
+  margin-bottom: 6px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+}
+
+input {
+  width: 100%;
+  padding: 11px 14px;
+  background: #1a1a2e;
+  border: 1px solid #2a2a4a;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+input::placeholder {
+  color: #4a4a6a;
+}
+
+input:focus {
+  border-color: #e94560;
+  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
+}
+
+/* ===========================
+   Button
+=========================== */
+.btn-generate {
+  width: 100%;
+  background: #e94560;
+  color: #fff;
+  border: none;
+  padding: 13px;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 8px;
+  transition: background 0.2s ease;
+}
+
+.btn-generate:hover {
+  background: #f05a73;
+}
+
+/* ===========================
+   Messages
+=========================== */
+.success-message {
+  display: none;
+  color: #4caf50;
+  text-align: center;
+  padding-top: 16px;
+  font-size: 0.95rem;
+}
+
+/* ===========================
+   Footer
+=========================== */
+footer {
+  text-align: center;
+  margin-top: 28px;
+  font-size: 0.8rem;
+  color: #4a4a6a;
+}

index.html

@@ -4,122 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CV Generator</title>
-  <style>
+  <link rel="stylesheet" href="assets/style.css">
-    *, *::before, *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background: #0f0f0f;
-      color: #e0e0e0;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
-      padding: 20px;
-    }
-
-    .container {
-      max-width: 520px;
-      width: 100%;
-    }
-
-    header {
-      text-align: center;
-      margin-bottom: 32px;
-    }
-
-    h1 {
-      font-size: 2.2rem;
-      font-weight: 700;
-      color: #e94560;
-      margin-bottom: 10px;
-    }
-
-    header p {
-      color: #a0a0b0;
-      font-size: 0.95rem;
-    }
-
-    .card {
-      background: #16213e;
-      border: 1px solid #2a2a4a;
-      border-radius: 12px;
-      padding: 32px;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-    }
-
-    .form-group {
-      margin-bottom: 20px;
-    }
-
-    label {
-      display: block;
-      font-size: 0.85rem;
-      color: #a0a0b0;
-      margin-bottom: 6px;
-      font-weight: 500;
-      letter-spacing: 0.03em;
-    }
-
-    input {
-      width: 100%;
-      padding: 11px 14px;
-      background: #1a1a2e;
-      border: 1px solid #2a2a4a;
-      border-radius: 6px;
-      color: #e0e0e0;
-      font-size: 0.95rem;
-      outline: none;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    input::placeholder {
-      color: #4a4a6a;
-    }
-
-    input:focus {
-      border-color: #e94560;
-      box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
-    }
-
-    .btn-generate {
-      width: 100%;
-      background: #e94560;
-      color: #fff;
-      border: none;
-      padding: 13px;
-      border-radius: 6px;
-      font-size: 1rem;
-      font-weight: 600;
-      cursor: pointer;
-      margin-top: 8px;
-      transition: background 0.2s ease;
-    }
-
-    .btn-generate:hover {
-      background: #f05a73;
-    }
-
-    .success-message {
-      display: none;
-      color: #4caf50;
-      text-align: center;
-      padding-top: 16px;
-      font-size: 0.95rem;
-    }
-
-    footer {
-      text-align: center;
-      margin-top: 28px;
-      font-size: 0.8rem;
-      color: #4a4a6a;
-    }
-  </style>
 </head>
 <body>
   <div class="container">
@@ -130,6 +15,8 @@
 
     <div class="card">
       <form id="cv-form" novalidate>
+
+        <!-- Section : Informations personnelles -->
         <div class="form-group">
           <label for="nom">Nom</label>
           <input
@@ -185,6 +72,12 @@
           >
         </div>
 
+        <!-- TODO: Section Formation   → sections/formation/ -->
+        <!-- TODO: Section Expérience → sections/experience/ -->
+        <!-- TODO: Section Compétences→ sections/competences/ -->
+        <!-- TODO: Section Langues    → sections/langues/ -->
+        <!-- TODO: Section Hobbies    → sections/hobbies/ -->
+
         <button type="submit" class="btn-generate">Générer mon CV</button>
 
         <p class="success-message" id="success"></p>
@@ -196,26 +89,6 @@
     </footer>
   </div>
 
-  <script>
+  <script src="js/app.js"></script>
-    document.getElementById('cv-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-
-      const nom = document.getElementById('nom').value.trim();
-      const prenom = document.getElementById('prenom').value.trim();
-      const email = document.getElementById('email').value.trim();
-      const titre = document.getElementById('titre').value.trim();
-
-      if (!nom || !prenom || !email || !titre) return;
-
-      const formData = { nom, prenom, email, titre };
-      localStorage.setItem('cvData', JSON.stringify(formData));
-
-      const success = document.getElementById('success');
-      success.textContent = `CV prêt à être généré pour ${prenom} ${nom} !`;
-      success.style.display = 'block';
-
-      console.log('Données du CV :', formData);
-    });
-  </script>
 </body>
 </html>

js/app.js

@@ -0,0 +1,24 @@
+/**
+ * app.js — Point d'entrée principal du CV Generator
+ * Gère la soumission du formulaire et la sauvegarde des données.
+ */
+
+document.getElementById('cv-form').addEventListener('submit', function (e) {
+  e.preventDefault();
+
+  const nom    = document.getElementById('nom').value.trim();
+  const prenom = document.getElementById('prenom').value.trim();
+  const email  = document.getElementById('email').value.trim();
+  const titre  = document.getElementById('titre').value.trim();
+
+  if (!nom || !prenom || !email || !titre) return;
+
+  const formData = { nom, prenom, email, titre };
+  localStorage.setItem('cvData', JSON.stringify(formData));
+
+  const success = document.getElementById('success');
+  success.textContent = `CV prêt à être généré pour ${prenom} ${nom} !`;
+  success.style.display = 'block';
+
+  console.log('Données du CV :', formData);
+});

js/sections/competences.js

@@ -0,0 +1,22 @@
+/**
+ * js/sections/competences.js
+ * Gestion de la section "Compétences" du CV.
+ */
+
+/**
+ * Collecte les données du formulaire de compétences.
+ * @returns {{ libelle: string, niveau: string }[]}
+ *   Tableau de compétences saisies par l'utilisateur.
+ */
+export function collect() {
+  return [];
+}
+
+/**
+ * Affiche les compétences dans l'aperçu du CV.
+ * @param {{ libelle: string, niveau: string }[]} data
+ * @returns {void}
+ */
+export function render(data) {
+  // TODO
+}

js/sections/experience.js

@@ -0,0 +1,22 @@
+/**
+ * js/sections/experience.js
+ * Gestion de la section "Expérience professionnelle" du CV.
+ */
+
+/**
+ * Collecte les données du formulaire d'expérience professionnelle.
+ * @returns {{ poste: string, entreprise: string, periode: string, description: string }[]}
+ *   Tableau d'entrées d'expérience saisies par l'utilisateur.
+ */
+export function collect() {
+  return [];
+}
+
+/**
+ * Affiche les données d'expérience dans l'aperçu du CV.
+ * @param {{ poste: string, entreprise: string, periode: string, description: string }[]} data
+ * @returns {void}
+ */
+export function render(data) {
+  // TODO
+}

js/sections/formation.js

@@ -0,0 +1,24 @@
+/**
+ * js/sections/formation.js
+ * Gestion de la section "Formation" du CV.
+ */
+
+/**
+ * Collecte les données du formulaire de formation.
+ * @returns {{ diplome: string, etablissement: string, annee: string, description: string }[]}
+ *   Tableau d'entrées de formation saisies par l'utilisateur.
+ */
+export function collect() {
+  // TODO: lire les champs du formulaire et retourner un tableau d'objets formation
+  return [];
+}
+
+/**
+ * Affiche les données de formation dans l'aperçu du CV.
+ * @param {{ diplome: string, etablissement: string, annee: string, description: string }[]} data
+ *   Tableau d'entrées de formation à afficher.
+ * @returns {void}
+ */
+export function render(data) {
+  // TODO: générer le HTML de la section formation et l'injecter dans le DOM
+}

js/sections/hobbies.js

@@ -0,0 +1,22 @@
+/**
+ * js/sections/hobbies.js
+ * Gestion de la section "Loisirs / Hobbies" du CV.
+ */
+
+/**
+ * Collecte les données du formulaire de loisirs.
+ * @returns {{ libelle: string }[]}
+ *   Tableau de loisirs saisis par l'utilisateur.
+ */
+export function collect() {
+  return [];
+}
+
+/**
+ * Affiche les loisirs dans l'aperçu du CV.
+ * @param {{ libelle: string }[]} data
+ * @returns {void}
+ */
+export function render(data) {
+  // TODO
+}

js/sections/langues.js

@@ -0,0 +1,22 @@
+/**
+ * js/sections/langues.js
+ * Gestion de la section "Langues" du CV.
+ */
+
+/**
+ * Collecte les données du formulaire de langues.
+ * @returns {{ langue: string, niveau: string }[]}
+ *   Tableau de langues saisies par l'utilisateur.
+ */
+export function collect() {
+  return [];
+}
+
+/**
+ * Affiche les langues dans l'aperçu du CV.
+ * @param {{ langue: string, niveau: string }[]} data
+ * @returns {void}
+ */
+export function render(data) {
+  // TODO
+}

package.json

@@ -0,0 +1,8 @@
+{
+  "name": "cv-generator",
+  "version": "1.0.0",
+  "description": "Application web pour générer des CV professionnels",
+  "scripts": {
+    "start": "npx serve ."
+  }
+}

sections/competences/README.md

@@ -0,0 +1,7 @@
+# Section : Compétences
+
+Ce dossier contiendra les fichiers liés à la section **Compétences** du CV.
+
+- HTML partiel ou composant du formulaire compétences
+- Logique JS associée (voir `js/sections/competences.js`)
+- Styles spécifiques (voir `css/sections/competences.css`)

sections/experience/README.md

@@ -0,0 +1,7 @@
+# Section : Expérience professionnelle
+
+Ce dossier contiendra les fichiers liés à la section **Expérience professionnelle** du CV.
+
+- HTML partiel ou composant du formulaire expérience
+- Logique JS associée (voir `js/sections/experience.js`)
+- Styles spécifiques (voir `css/sections/experience.css`)

sections/formation/README.md

@@ -0,0 +1,7 @@
+# Section : Formation
+
+Ce dossier contiendra les fichiers liés à la section **Formation** du CV.
+
+- HTML partiel ou composant du formulaire formation
+- Logique JS associée (voir `js/sections/formation.js`)
+- Styles spécifiques (voir `css/sections/formation.css`)

sections/hobbies/README.md

@@ -0,0 +1,7 @@
+# Section : Centres d'intérêt / Hobbies
+
+Ce dossier contiendra les fichiers liés à la section **Hobbies** du CV.
+
+- HTML partiel ou composant du formulaire hobbies
+- Logique JS associée (voir `js/sections/hobbies.js`)
+- Styles spécifiques (voir `css/sections/hobbies.css`)

sections/langues/README.md

@@ -0,0 +1,7 @@
+# Section : Langues
+
+Ce dossier contiendra les fichiers liés à la section **Langues** du CV.
+
+- HTML partiel ou composant du formulaire langues
+- Logique JS associée (voir `js/sections/langues.js`)
+- Styles spécifiques (voir `css/sections/langues.css`)