@rmdes/indiekit-endpoint-cv 1.0.0

package/index.js

@@ -0,0 +1,198 @@
+import express from "express";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+
+import { dashboardController } from "./lib/controllers/dashboard.js";
+import { apiController } from "./lib/controllers/api.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const protectedRouter = express.Router();
+const publicRouter = express.Router();
+
+const defaults = {
+  mountPath: "/cv",
+};
+
+export default class CvEndpoint {
+  name = "CV editor endpoint";
+
+  constructor(options = {}) {
+    this.options = { ...defaults, ...options };
+    this.mountPath = this.options.mountPath;
+  }
+
+  get localesDirectory() {
+    return path.join(__dirname, "locales");
+  }
+
+  get viewsDirectory() {
+    return path.join(__dirname, "views");
+  }
+
+  get navigationItems() {
+    return {
+      href: this.options.mountPath,
+      text: "cv.title",
+      requiresDatabase: true,
+    };
+  }
+
+  get shortcutItems() {
+    return {
+      url: this.options.mountPath,
+      name: "cv.title",
+      iconName: "briefcase",
+      requiresDatabase: true,
+    };
+  }
+
+  /**
+   * Register CV section types for homepage plugin discovery
+   */
+  get homepageSections() {
+    return [
+      {
+        id: "cv-experience",
+        label: "Work Experience",
+        description: "Professional experience timeline",
+        icon: "briefcase",
+        dataEndpoint: "/cv/data.json",
+        defaultConfig: {
+          maxItems: 10,
+          showHighlights: true,
+        },
+        configSchema: {
+          maxItems: {
+            type: "number",
+            label: "Max items",
+            min: 1,
+            max: 50,
+          },
+          showHighlights: {
+            type: "boolean",
+            label: "Show highlights",
+          },
+        },
+      },
+      {
+        id: "cv-skills",
+        label: "Skills",
+        description: "Skills grouped by category",
+        icon: "zap",
+        dataEndpoint: "/cv/data.json",
+        defaultConfig: {},
+        configSchema: {},
+      },
+      {
+        id: "cv-education",
+        label: "Education & Languages",
+        description: "Academic background and languages",
+        icon: "book",
+        dataEndpoint: "/cv/data.json",
+        defaultConfig: {},
+        configSchema: {},
+      },
+      {
+        id: "cv-projects",
+        label: "Projects",
+        description: "Personal and professional projects",
+        icon: "folder",
+        dataEndpoint: "/cv/data.json",
+        defaultConfig: {
+          maxItems: 10,
+          showTechnologies: true,
+        },
+        configSchema: {
+          maxItems: {
+            type: "number",
+            label: "Max items",
+            min: 1,
+            max: 50,
+          },
+          showTechnologies: {
+            type: "boolean",
+            label: "Show technologies",
+          },
+        },
+      },
+      {
+        id: "cv-interests",
+        label: "Interests",
+        description: "Topics and hobbies",
+        icon: "heart",
+        dataEndpoint: "/cv/data.json",
+        defaultConfig: {},
+        configSchema: {},
+      },
+    ];
+  }
+
+  /**
+   * Protected routes (require authentication)
+   */
+  get routes() {
+    // Dashboard - main admin UI
+    protectedRouter.get("/", dashboardController.get);
+
+    // Save CV data
+    protectedRouter.post("/save", dashboardController.save);
+
+    // CRUD for individual sections
+    protectedRouter.post("/experience/add", dashboardController.addExperience);
+    protectedRouter.post(
+      "/experience/:index/delete",
+      dashboardController.deleteExperience,
+    );
+
+    protectedRouter.post("/projects/add", dashboardController.addProject);
+    protectedRouter.post(
+      "/projects/:index/delete",
+      dashboardController.deleteProject,
+    );
+
+    protectedRouter.post("/education/add", dashboardController.addEducation);
+    protectedRouter.post(
+      "/education/:index/delete",
+      dashboardController.deleteEducation,
+    );
+
+    protectedRouter.post("/languages/add", dashboardController.addLanguage);
+    protectedRouter.post(
+      "/languages/:index/delete",
+      dashboardController.deleteLanguage,
+    );
+
+    protectedRouter.post("/skills/add", dashboardController.addSkillCategory);
+    protectedRouter.post(
+      "/skills/:category/delete",
+      dashboardController.deleteSkillCategory,
+    );
+
+    return protectedRouter;
+  }
+
+  /**
+   * Public routes (no authentication required)
+   */
+  get routesPublic() {
+    // Public JSON API for Eleventy and homepage plugin
+    publicRouter.get("/data.json", apiController.getData);
+
+    return publicRouter;
+  }
+
+  init(Indiekit) {
+    Indiekit.addEndpoint(this);
+
+    // Add MongoDB collection for CV data
+    Indiekit.addCollection("cvData");
+
+    // Store config in application for controller access
+    Indiekit.config.application.cvConfig = this.options;
+    Indiekit.config.application.cvEndpoint = this.mountPath;
+
+    // Store database getter for controller access
+    Indiekit.config.application.getCvDb = () => Indiekit.database;
+  }
+}

package/lib/controllers/api.js

@@ -0,0 +1,27 @@
+/**
+ * Public API controller
+ * Serves CV data as JSON for Eleventy and homepage plugin
+ */
+
+import { getCvData, getDefaultCvData } from "../storage/cv.js";
+
+export const apiController = {
+  /**
+   * GET /cv/data.json - Public CV data endpoint
+   */
+  async getData(request, response) {
+    const { application } = request.app.locals;
+
+    try {
+      const data = (await getCvData(application)) || getDefaultCvData();
+
+      // Strip MongoDB internal fields
+      const { _id, ...cvData } = data;
+
+      response.json(cvData);
+    } catch (error) {
+      console.error("[CV] API error:", error);
+      response.json(getDefaultCvData());
+    }
+  },
+};

package/lib/controllers/dashboard.js

@@ -0,0 +1,288 @@
+/**
+ * Dashboard controller
+ * Admin UI for CV data management
+ */
+
+import {
+  getCvData,
+  saveCvData,
+  getDefaultCvData,
+  addToSection,
+  removeFromSection,
+  addSkillCategory,
+  removeSkillCategory,
+} from "../storage/cv.js";
+
+export const dashboardController = {
+  /**
+   * GET / - Main dashboard
+   */
+  async get(request, response) {
+    const { application } = request.app.locals;
+
+    try {
+      const data = (await getCvData(application)) || getDefaultCvData();
+
+      response.render("cv-dashboard", {
+        title: "CV Editor",
+        cv: data,
+        cvEndpoint: application.cvEndpoint,
+      });
+    } catch (error) {
+      console.error("[CV] Dashboard error:", error);
+      response.status(500).render("error", {
+        title: "Error",
+        message: "Failed to load CV data",
+        error: error.message,
+      });
+    }
+  },
+
+  /**
+   * POST /save - Save full CV data (bulk save from form)
+   */
+  async save(request, response) {
+    const { application } = request.app.locals;
+
+    try {
+      const body = request.body;
+
+      // Parse interests from comma-separated string
+      const interests =
+        typeof body.interests === "string"
+          ? body.interests
+              .split(",")
+              .map((s) => s.trim())
+              .filter(Boolean)
+          : body.interests || [];
+
+      const data = {
+        experience: parseArrayField(body, "experience"),
+        projects: parseArrayField(body, "projects"),
+        skills: parseSkillsField(body),
+        education: parseArrayField(body, "education"),
+        languages: parseArrayField(body, "languages"),
+        interests,
+      };
+
+      await saveCvData(application, data);
+
+      response.redirect(application.cvEndpoint + "?saved=1");
+    } catch (error) {
+      console.error("[CV] Save error:", error);
+      response.status(500).render("error", {
+        title: "Error",
+        message: "Failed to save CV data",
+        error: error.message,
+      });
+    }
+  },
+
+  // --- Experience CRUD ---
+
+  async addExperience(request, response) {
+    const { application } = request.app.locals;
+    try {
+      const { title, company, location, startDate, endDate, type, description, highlights } =
+        request.body;
+      await addToSection(application, "experience", {
+        title: title || "",
+        company: company || "",
+        location: location || "",
+        startDate: startDate || "",
+        endDate: endDate || null,
+        type: type || "full-time",
+        description: description || "",
+        highlights: parseLines(highlights),
+      });
+      response.redirect(application.cvEndpoint + "?saved=1#experience");
+    } catch (error) {
+      console.error("[CV] Add experience error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#experience");
+    }
+  },
+
+  async deleteExperience(request, response) {
+    const { application } = request.app.locals;
+    try {
+      await removeFromSection(application, "experience", Number.parseInt(request.params.index, 10));
+      response.redirect(application.cvEndpoint + "?saved=1#experience");
+    } catch (error) {
+      console.error("[CV] Delete experience error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#experience");
+    }
+  },
+
+  // --- Projects CRUD ---
+
+  async addProject(request, response) {
+    const { application } = request.app.locals;
+    try {
+      const { name, url, description, technologies, status } = request.body;
+      await addToSection(application, "projects", {
+        name: name || "",
+        url: url || "",
+        description: description || "",
+        technologies: parseCommaList(technologies),
+        status: status || "active",
+      });
+      response.redirect(application.cvEndpoint + "?saved=1#projects");
+    } catch (error) {
+      console.error("[CV] Add project error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#projects");
+    }
+  },
+
+  async deleteProject(request, response) {
+    const { application } = request.app.locals;
+    try {
+      await removeFromSection(application, "projects", Number.parseInt(request.params.index, 10));
+      response.redirect(application.cvEndpoint + "?saved=1#projects");
+    } catch (error) {
+      console.error("[CV] Delete project error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#projects");
+    }
+  },
+
+  // --- Education CRUD ---
+
+  async addEducation(request, response) {
+    const { application } = request.app.locals;
+    try {
+      const { degree, institution, location, year, description } = request.body;
+      await addToSection(application, "education", {
+        degree: degree || "",
+        institution: institution || "",
+        location: location || "",
+        year: year || "",
+        description: description || "",
+      });
+      response.redirect(application.cvEndpoint + "?saved=1#education");
+    } catch (error) {
+      console.error("[CV] Add education error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#education");
+    }
+  },
+
+  async deleteEducation(request, response) {
+    const { application } = request.app.locals;
+    try {
+      await removeFromSection(application, "education", Number.parseInt(request.params.index, 10));
+      response.redirect(application.cvEndpoint + "?saved=1#education");
+    } catch (error) {
+      console.error("[CV] Delete education error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#education");
+    }
+  },
+
+  // --- Languages CRUD ---
+
+  async addLanguage(request, response) {
+    const { application } = request.app.locals;
+    try {
+      const { name, level } = request.body;
+      await addToSection(application, "languages", {
+        name: name || "",
+        level: level || "intermediate",
+      });
+      response.redirect(application.cvEndpoint + "?saved=1#languages");
+    } catch (error) {
+      console.error("[CV] Add language error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#languages");
+    }
+  },
+
+  async deleteLanguage(request, response) {
+    const { application } = request.app.locals;
+    try {
+      await removeFromSection(application, "languages", Number.parseInt(request.params.index, 10));
+      response.redirect(application.cvEndpoint + "?saved=1#languages");
+    } catch (error) {
+      console.error("[CV] Delete language error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#languages");
+    }
+  },
+
+  // --- Skills CRUD ---
+
+  async addSkillCategory(request, response) {
+    const { application } = request.app.locals;
+    try {
+      const { category, items } = request.body;
+      await addSkillCategory(application, category || "Uncategorized", parseCommaList(items));
+      response.redirect(application.cvEndpoint + "?saved=1#skills");
+    } catch (error) {
+      console.error("[CV] Add skill category error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#skills");
+    }
+  },
+
+  async deleteSkillCategory(request, response) {
+    const { application } = request.app.locals;
+    try {
+      await removeSkillCategory(application, decodeURIComponent(request.params.category));
+      response.redirect(application.cvEndpoint + "?saved=1#skills");
+    } catch (error) {
+      console.error("[CV] Delete skill category error:", error);
+      response.redirect(application.cvEndpoint + "?error=1#skills");
+    }
+  },
+};
+
+// --- Helper functions ---
+
+/**
+ * Parse comma-separated string into array
+ */
+function parseCommaList(value) {
+  if (!value) return [];
+  return value
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Parse newline-separated string into array
+ */
+function parseLines(value) {
+  if (!value) return [];
+  return value
+    .split("\n")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Parse array fields from form body
+ * Handles indexed form fields like experience[0][title], experience[1][title]
+ */
+function parseArrayField(body, fieldName) {
+  const field = body[fieldName];
+  if (!field) return [];
+  if (Array.isArray(field)) return field;
+  if (typeof field === "object") {
+    // Indexed object form: { "0": {...}, "1": {...} }
+    return Object.values(field);
+  }
+  return [];
+}
+
+/**
+ * Parse skills from form body
+ * Skills come as skills[categoryName] = "skill1, skill2, skill3"
+ */
+function parseSkillsField(body) {
+  const skills = body.skills;
+  if (!skills || typeof skills !== "object") return {};
+
+  const result = {};
+  for (const [category, items] of Object.entries(skills)) {
+    if (typeof items === "string") {
+      result[category] = parseCommaList(items);
+    } else if (Array.isArray(items)) {
+      result[category] = items;
+    }
+  }
+  return result;
+}

package/lib/storage/cv.js

@@ -0,0 +1,126 @@
+/**
+ * CV data storage
+ * Single MongoDB document with five collections:
+ * experience, projects, skills, education, languages, interests
+ * @module storage/cv
+ */
+
+/**
+ * Get collection reference
+ * @param {object} application - Application instance
+ * @returns {Collection} MongoDB collection
+ */
+function getCollection(application) {
+  const db = application.getCvDb();
+  return db.collection("cvData");
+}
+
+/**
+ * Get the full CV data
+ * @param {object} application - Application instance
+ * @returns {Promise<object|null>} CV data or null
+ */
+export async function getCvData(application) {
+  const collection = getCollection(application);
+  return collection.findOne({ _id: "cv" });
+}
+
+/**
+ * Save full CV data
+ * @param {object} application - Application instance
+ * @param {object} data - CV data object
+ * @returns {Promise<object>} Saved document
+ */
+export async function saveCvData(application, data) {
+  const collection = getCollection(application);
+  const now = new Date();
+
+  const document = {
+    _id: "cv",
+    experience: data.experience || [],
+    projects: data.projects || [],
+    skills: data.skills || {},
+    education: data.education || [],
+    languages: data.languages || [],
+    interests: data.interests || [],
+    lastUpdated: now,
+  };
+
+  await collection.replaceOne({ _id: "cv" }, document, { upsert: true });
+  return document;
+}
+
+/**
+ * Get default empty CV data
+ * @returns {object} Empty CV structure
+ */
+export function getDefaultCvData() {
+  return {
+    experience: [],
+    projects: [],
+    skills: {},
+    education: [],
+    languages: [],
+    interests: [],
+    lastUpdated: null,
+  };
+}
+
+// --- Section-level helpers ---
+
+/**
+ * Add an item to a CV array section
+ * @param {object} application - Application instance
+ * @param {string} section - Section name (experience, projects, education, languages)
+ * @param {object} item - Item to add
+ */
+export async function addToSection(application, section, item) {
+  const data = (await getCvData(application)) || getDefaultCvData();
+  if (!Array.isArray(data[section])) {
+    data[section] = [];
+  }
+  data[section].push(item);
+  return saveCvData(application, data);
+}
+
+/**
+ * Remove an item from a CV array section by index
+ * @param {object} application - Application instance
+ * @param {string} section - Section name
+ * @param {number} index - Index to remove
+ */
+export async function removeFromSection(application, section, index) {
+  const data = (await getCvData(application)) || getDefaultCvData();
+  if (Array.isArray(data[section]) && index >= 0 && index < data[section].length) {
+    data[section].splice(index, 1);
+  }
+  return saveCvData(application, data);
+}
+
+/**
+ * Add a skill category
+ * @param {object} application - Application instance
+ * @param {string} category - Category name
+ * @param {string[]} items - Skills in this category
+ */
+export async function addSkillCategory(application, category, items) {
+  const data = (await getCvData(application)) || getDefaultCvData();
+  if (typeof data.skills !== "object" || Array.isArray(data.skills)) {
+    data.skills = {};
+  }
+  data.skills[category] = items;
+  return saveCvData(application, data);
+}
+
+/**
+ * Remove a skill category
+ * @param {object} application - Application instance
+ * @param {string} category - Category name to remove
+ */
+export async function removeSkillCategory(application, category) {
+  const data = (await getCvData(application)) || getDefaultCvData();
+  if (data.skills && data.skills[category]) {
+    delete data.skills[category];
+  }
+  return saveCvData(application, data);
+}

package/locales/en.json

@@ -0,0 +1,85 @@
+{
+  "cv": {
+    "title": "CV Editor",
+    "description": "Manage your CV/resume data. This data can be displayed on your homepage via the Homepage Builder plugin.",
+    "saved": "CV data saved successfully.",
+    "save": "Save Changes",
+    "lastUpdated": "Last updated",
+    "noData": "No data yet. Start adding entries below.",
+    "experience": {
+      "title": "Experience",
+      "description": "Work history and professional roles.",
+      "add": "Add Experience",
+      "jobTitle": "Job Title",
+      "company": "Company",
+      "location": "Location",
+      "startDate": "Start Date",
+      "endDate": "End Date",
+      "current": "Current position",
+      "type": "Type",
+      "typeOptions": {
+        "full-time": "Full-time",
+        "part-time": "Part-time",
+        "contract": "Contract",
+        "freelance": "Freelance",
+        "volunteer": "Volunteer",
+        "internship": "Internship"
+      },
+      "descriptionField": "Description",
+      "highlights": "Highlights (one per line)"
+    },
+    "projects": {
+      "title": "Projects",
+      "description": "Personal and professional projects.",
+      "add": "Add Project",
+      "name": "Name",
+      "url": "URL",
+      "descriptionField": "Description",
+      "technologies": "Technologies (comma-separated)",
+      "status": "Status",
+      "statusOptions": {
+        "active": "Active",
+        "maintained": "Maintained",
+        "archived": "Archived",
+        "completed": "Completed"
+      }
+    },
+    "skills": {
+      "title": "Skills",
+      "description": "Technical and professional skills grouped by category.",
+      "add": "Add Category",
+      "category": "Category Name",
+      "items": "Skills (comma-separated)"
+    },
+    "education": {
+      "title": "Education",
+      "description": "Academic background and certifications.",
+      "add": "Add Education",
+      "degree": "Degree / Certificate",
+      "institution": "Institution",
+      "location": "Location",
+      "year": "Year(s)",
+      "descriptionField": "Description"
+    },
+    "languages": {
+      "title": "Languages",
+      "description": "Languages you speak.",
+      "add": "Add Language",
+      "name": "Language",
+      "level": "Level",
+      "levelOptions": {
+        "native": "Native",
+        "fluent": "Fluent",
+        "advanced": "Advanced",
+        "intermediate": "Intermediate",
+        "basic": "Basic"
+      }
+    },
+    "interests": {
+      "title": "Interests",
+      "description": "Topics and hobbies you're passionate about.",
+      "add": "Add Interest",
+      "placeholder": "Comma-separated interests"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@rmdes/indiekit-endpoint-cv",
+  "version": "1.0.0",
+  "description": "CV/Resume editor endpoint for Indiekit. Manage work experience, projects, skills, education, and interests from the admin UI.",
+  "keywords": [
+    "indiekit",
+    "indiekit-plugin",
+    "indieweb",
+    "cv",
+    "resume",
+    "portfolio"
+  ],
+  "homepage": "https://github.com/rmdes/indiekit-endpoint-cv",
+  "bugs": {
+    "url": "https://github.com/rmdes/indiekit-endpoint-cv/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rmdes/indiekit-endpoint-cv.git"
+  },
+  "author": {
+    "name": "Ricardo Mendes",
+    "url": "https://rmendes.net"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "lib",
+    "locales",
+    "views",
+    "index.js"
+  ],
+  "dependencies": {
+    "@indiekit/error": "^1.0.0-beta.25",
+    "@indiekit/frontend": "^1.0.0-beta.25",
+    "express": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@indiekit/indiekit": ">=1.0.0-beta.25"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/views/cv-dashboard.njk

@@ -0,0 +1,566 @@
+{% extends "document.njk" %}
+
+{% block content %}
+<style>
+  .cv-dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-l, 1.5rem);
+  }
+
+  .cv-accordion {
+    background: var(--color-offset, #f5f5f5);
+    border-radius: var(--border-radius-small, 0.5rem);
+    overflow: hidden;
+  }
+
+  .cv-accordion__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-m, 1rem) var(--space-m, 1.5rem);
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: left;
+    font: var(--font-heading, bold 1.125rem/1.4 sans-serif);
+    color: var(--color-on-surface, inherit);
+  }
+
+  .cv-accordion__header:hover {
+    background: var(--color-primary-container, #e6f0ff);
+  }
+
+  .cv-accordion__chevron {
+    transition: transform 0.2s;
+    width: 20px;
+    height: 20px;
+  }
+
+  .cv-accordion[open] .cv-accordion__chevron {
+    transform: rotate(180deg);
+  }
+
+  .cv-accordion__body {
+    padding: 0 var(--space-m, 1.5rem) var(--space-m, 1.5rem);
+  }
+
+  .cv-accordion__desc {
+    color: var(--color-on-offset, #666);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    margin-block-end: var(--space-s, 0.75rem);
+  }
+
+  .cv-item {
+    background: var(--color-background, #fff);
+    border: 1px solid var(--color-outline-variant, #ddd);
+    border-radius: var(--border-radius-small, 0.25rem);
+    padding: var(--space-s, 0.75rem);
+    margin-block-end: var(--space-xs, 0.5rem);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--space-s, 0.75rem);
+  }
+
+  .cv-item__info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cv-item__title {
+    font-weight: 600;
+    margin-block-end: 0.125rem;
+  }
+
+  .cv-item__sub {
+    color: var(--color-on-offset, #666);
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+  }
+
+  .cv-item__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-block-start: 0.25rem;
+  }
+
+  .cv-tag {
+    display: inline-block;
+    background: var(--color-primary-container, #e6f0ff);
+    color: var(--color-on-primary-container, #003380);
+    font: var(--font-caption, 0.75rem/1.2 sans-serif);
+    padding: 0.125rem 0.5rem;
+    border-radius: 999px;
+  }
+
+  .cv-form {
+    background: var(--color-background, #fff);
+    border: 1px dashed var(--color-outline-variant, #ddd);
+    border-radius: var(--border-radius-small, 0.25rem);
+    padding: var(--space-s, 0.75rem);
+    margin-block-start: var(--space-s, 0.75rem);
+  }
+
+  .cv-form h4 {
+    font: var(--font-subhead, bold 0.875rem/1.4 sans-serif);
+    margin-block-end: var(--space-xs, 0.5rem);
+  }
+
+  .cv-form .field {
+    margin-block-end: var(--space-xs, 0.5rem);
+  }
+
+  .cv-form .field__label {
+    display: block;
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    font-weight: 600;
+    margin-block-end: 0.25rem;
+  }
+
+  .cv-form .field__input {
+    width: 100%;
+    padding: var(--space-2xs, 0.375rem) var(--space-xs, 0.5rem);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    background: var(--color-background, #fff);
+    color: var(--color-on-surface, inherit);
+  }
+
+  .cv-form .field__input:focus {
+    border-color: var(--color-primary, #0066cc);
+    outline: 2px solid var(--color-primary, #0066cc);
+    outline-offset: -2px;
+  }
+
+  .cv-form select.field__input {
+    appearance: auto;
+  }
+
+  .cv-form textarea.field__input {
+    resize: vertical;
+    min-height: 4rem;
+  }
+
+  .cv-form .field-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xs, 0.5rem);
+  }
+
+  .cv-empty {
+    color: var(--color-on-offset, #999);
+    font: var(--font-caption, 0.875rem/1.4 sans-serif);
+    text-align: center;
+    padding: var(--space-s, 0.75rem);
+  }
+
+  .cv-success {
+    background: var(--color-success-container, #d4edda);
+    border: 1px solid var(--color-success, #28a745);
+    border-radius: var(--border-radius-small, 0.25rem);
+    padding: var(--space-s, 0.75rem);
+    margin-block-end: var(--space-m, 1rem);
+  }
+
+  .cv-error {
+    background: var(--color-error-container, #f8d7da);
+    border: 1px solid var(--color-error, #dc3545);
+    border-radius: var(--border-radius-small, 0.25rem);
+    padding: var(--space-s, 0.75rem);
+    margin-block-end: var(--space-m, 1rem);
+  }
+</style>
+
+<header class="page-header">
+  <h1 class="page-header__title">{{ __("cv.title") }}</h1>
+  <p class="page-header__description">{{ __("cv.description") }}</p>
+</header>
+
+{% if request.query.saved %}
+<div class="cv-success">
+  <p>{{ __("cv.saved") }}</p>
+</div>
+{% endif %}
+
+{% if request.query.error %}
+<div class="cv-error">
+  <p>An error occurred. Please try again.</p>
+</div>
+{% endif %}
+
+{% if cv.lastUpdated %}
+<p class="cv-accordion__desc">{{ __("cv.lastUpdated") }}: {{ cv.lastUpdated }}</p>
+{% endif %}
+
+<div class="cv-dashboard">
+
+  {# ===== EXPERIENCE ===== #}
+  <details class="cv-accordion" id="experience" {% if not cv.experience.length %}open{% endif %}>
+    <summary class="cv-accordion__header">
+      {{ __("cv.experience.title") }} ({{ cv.experience.length or 0 }})
+      <svg class="cv-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+    </summary>
+    <div class="cv-accordion__body">
+      <p class="cv-accordion__desc">{{ __("cv.experience.description") }}</p>
+
+      {% if cv.experience.length %}
+        {% for item in cv.experience %}
+        <div class="cv-item">
+          <div class="cv-item__info">
+            <div class="cv-item__title">{{ item.title }}</div>
+            <div class="cv-item__sub">
+              {{ item.company }}{% if item.location %} &middot; {{ item.location }}{% endif %}
+              {% if item.startDate %} &middot; {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}{% endif %}
+              {% if item.type %} &middot; {{ item.type }}{% endif %}
+            </div>
+            {% if item.description %}
+            <div class="cv-item__sub" style="margin-top:0.25rem">{{ item.description }}</div>
+            {% endif %}
+            {% if item.highlights and item.highlights.length %}
+            <div class="cv-item__tags">
+              {% for h in item.highlights %}<span class="cv-tag">{{ h }}</span>{% endfor %}
+            </div>
+            {% endif %}
+          </div>
+          <form method="post" action="{{ cvEndpoint }}/experience/{{ loop.index0 }}/delete" style="margin:0">
+            <button type="submit" class="button button--small button--secondary" onclick="return confirm('Delete this entry?')">Delete</button>
+          </form>
+        </div>
+        {% endfor %}
+      {% else %}
+        <p class="cv-empty">{{ __("cv.noData") }}</p>
+      {% endif %}
+
+      <div class="cv-form">
+        <h4>{{ __("cv.experience.add") }}</h4>
+        <form method="post" action="{{ cvEndpoint }}/experience/add">
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="exp-title">{{ __("cv.experience.jobTitle") }}</label>
+              <input class="field__input" type="text" id="exp-title" name="title" required>
+            </div>
+            <div class="field">
+              <label class="field__label" for="exp-company">{{ __("cv.experience.company") }}</label>
+              <input class="field__input" type="text" id="exp-company" name="company" required>
+            </div>
+          </div>
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="exp-location">{{ __("cv.experience.location") }}</label>
+              <input class="field__input" type="text" id="exp-location" name="location">
+            </div>
+            <div class="field">
+              <label class="field__label" for="exp-type">{{ __("cv.experience.type") }}</label>
+              <select class="field__input" id="exp-type" name="type">
+                <option value="full-time">Full-time</option>
+                <option value="part-time">Part-time</option>
+                <option value="contract">Contract</option>
+                <option value="freelance">Freelance</option>
+                <option value="volunteer">Volunteer</option>
+                <option value="internship">Internship</option>
+              </select>
+            </div>
+          </div>
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="exp-start">{{ __("cv.experience.startDate") }}</label>
+              <input class="field__input" type="text" id="exp-start" name="startDate" placeholder="YYYY-MM">
+            </div>
+            <div class="field">
+              <label class="field__label" for="exp-end">{{ __("cv.experience.endDate") }}</label>
+              <input class="field__input" type="text" id="exp-end" name="endDate" placeholder="YYYY-MM or leave blank">
+            </div>
+          </div>
+          <div class="field">
+            <label class="field__label" for="exp-desc">{{ __("cv.experience.descriptionField") }}</label>
+            <textarea class="field__input" id="exp-desc" name="description" rows="2"></textarea>
+          </div>
+          <div class="field">
+            <label class="field__label" for="exp-highlights">{{ __("cv.experience.highlights") }}</label>
+            <textarea class="field__input" id="exp-highlights" name="highlights" rows="3" placeholder="One highlight per line"></textarea>
+          </div>
+          <button type="submit" class="button button--primary button--small">{{ __("cv.experience.add") }}</button>
+        </form>
+      </div>
+    </div>
+  </details>
+
+  {# ===== PROJECTS ===== #}
+  <details class="cv-accordion" id="projects">
+    <summary class="cv-accordion__header">
+      {{ __("cv.projects.title") }} ({{ cv.projects.length or 0 }})
+      <svg class="cv-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+    </summary>
+    <div class="cv-accordion__body">
+      <p class="cv-accordion__desc">{{ __("cv.projects.description") }}</p>
+
+      {% if cv.projects.length %}
+        {% for item in cv.projects %}
+        <div class="cv-item">
+          <div class="cv-item__info">
+            <div class="cv-item__title">
+              {% if item.url %}<a href="{{ item.url }}">{{ item.name }}</a>{% else %}{{ item.name }}{% endif %}
+            </div>
+            <div class="cv-item__sub">
+              {% if item.status %}<span class="cv-tag">{{ item.status }}</span>{% endif %}
+              {% if item.description %} {{ item.description }}{% endif %}
+            </div>
+            {% if item.technologies and item.technologies.length %}
+            <div class="cv-item__tags">
+              {% for t in item.technologies %}<span class="cv-tag">{{ t }}</span>{% endfor %}
+            </div>
+            {% endif %}
+          </div>
+          <form method="post" action="{{ cvEndpoint }}/projects/{{ loop.index0 }}/delete" style="margin:0">
+            <button type="submit" class="button button--small button--secondary" onclick="return confirm('Delete this entry?')">Delete</button>
+          </form>
+        </div>
+        {% endfor %}
+      {% else %}
+        <p class="cv-empty">{{ __("cv.noData") }}</p>
+      {% endif %}
+
+      <div class="cv-form">
+        <h4>{{ __("cv.projects.add") }}</h4>
+        <form method="post" action="{{ cvEndpoint }}/projects/add">
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="proj-name">{{ __("cv.projects.name") }}</label>
+              <input class="field__input" type="text" id="proj-name" name="name" required>
+            </div>
+            <div class="field">
+              <label class="field__label" for="proj-url">{{ __("cv.projects.url") }}</label>
+              <input class="field__input" type="url" id="proj-url" name="url" placeholder="https://...">
+            </div>
+          </div>
+          <div class="field">
+            <label class="field__label" for="proj-desc">{{ __("cv.projects.descriptionField") }}</label>
+            <textarea class="field__input" id="proj-desc" name="description" rows="2"></textarea>
+          </div>
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="proj-tech">{{ __("cv.projects.technologies") }}</label>
+              <input class="field__input" type="text" id="proj-tech" name="technologies" placeholder="Docker, Node.js, Python">
+            </div>
+            <div class="field">
+              <label class="field__label" for="proj-status">{{ __("cv.projects.status") }}</label>
+              <select class="field__input" id="proj-status" name="status">
+                <option value="active">Active</option>
+                <option value="maintained">Maintained</option>
+                <option value="archived">Archived</option>
+                <option value="completed">Completed</option>
+              </select>
+            </div>
+          </div>
+          <button type="submit" class="button button--primary button--small">{{ __("cv.projects.add") }}</button>
+        </form>
+      </div>
+    </div>
+  </details>
+
+  {# ===== SKILLS ===== #}
+  <details class="cv-accordion" id="skills">
+    <summary class="cv-accordion__header">
+      {{ __("cv.skills.title") }} ({{ cv.skills | dictsort | length if cv.skills else 0 }})
+      <svg class="cv-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+    </summary>
+    <div class="cv-accordion__body">
+      <p class="cv-accordion__desc">{{ __("cv.skills.description") }}</p>
+
+      {% if cv.skills and (cv.skills | dictsort | length) %}
+        {% for category, items in cv.skills | dictsort %}
+        <div class="cv-item">
+          <div class="cv-item__info">
+            <div class="cv-item__title">{{ category }}</div>
+            <div class="cv-item__tags">
+              {% for skill in items %}<span class="cv-tag">{{ skill }}</span>{% endfor %}
+            </div>
+          </div>
+          <form method="post" action="{{ cvEndpoint }}/skills/{{ category | urlencode }}/delete" style="margin:0">
+            <button type="submit" class="button button--small button--secondary" onclick="return confirm('Delete this category?')">Delete</button>
+          </form>
+        </div>
+        {% endfor %}
+      {% else %}
+        <p class="cv-empty">{{ __("cv.noData") }}</p>
+      {% endif %}
+
+      <div class="cv-form">
+        <h4>{{ __("cv.skills.add") }}</h4>
+        <form method="post" action="{{ cvEndpoint }}/skills/add">
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="skill-cat">{{ __("cv.skills.category") }}</label>
+              <input class="field__input" type="text" id="skill-cat" name="category" required placeholder="e.g. Programming Languages">
+            </div>
+            <div class="field">
+              <label class="field__label" for="skill-items">{{ __("cv.skills.items") }}</label>
+              <input class="field__input" type="text" id="skill-items" name="items" required placeholder="Python, JavaScript, Go">
+            </div>
+          </div>
+          <button type="submit" class="button button--primary button--small">{{ __("cv.skills.add") }}</button>
+        </form>
+      </div>
+    </div>
+  </details>
+
+  {# ===== EDUCATION ===== #}
+  <details class="cv-accordion" id="education">
+    <summary class="cv-accordion__header">
+      {{ __("cv.education.title") }} ({{ cv.education.length or 0 }})
+      <svg class="cv-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+    </summary>
+    <div class="cv-accordion__body">
+      <p class="cv-accordion__desc">{{ __("cv.education.description") }}</p>
+
+      {% if cv.education.length %}
+        {% for item in cv.education %}
+        <div class="cv-item">
+          <div class="cv-item__info">
+            <div class="cv-item__title">{{ item.degree }}</div>
+            <div class="cv-item__sub">
+              {{ item.institution }}{% if item.location %} &middot; {{ item.location }}{% endif %}{% if item.year %} &middot; {{ item.year }}{% endif %}
+            </div>
+            {% if item.description %}
+            <div class="cv-item__sub" style="margin-top:0.25rem">{{ item.description }}</div>
+            {% endif %}
+          </div>
+          <form method="post" action="{{ cvEndpoint }}/education/{{ loop.index0 }}/delete" style="margin:0">
+            <button type="submit" class="button button--small button--secondary" onclick="return confirm('Delete this entry?')">Delete</button>
+          </form>
+        </div>
+        {% endfor %}
+      {% else %}
+        <p class="cv-empty">{{ __("cv.noData") }}</p>
+      {% endif %}
+
+      <div class="cv-form">
+        <h4>{{ __("cv.education.add") }}</h4>
+        <form method="post" action="{{ cvEndpoint }}/education/add">
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="edu-degree">{{ __("cv.education.degree") }}</label>
+              <input class="field__input" type="text" id="edu-degree" name="degree" required>
+            </div>
+            <div class="field">
+              <label class="field__label" for="edu-inst">{{ __("cv.education.institution") }}</label>
+              <input class="field__input" type="text" id="edu-inst" name="institution" required>
+            </div>
+          </div>
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="edu-location">{{ __("cv.education.location") }}</label>
+              <input class="field__input" type="text" id="edu-location" name="location">
+            </div>
+            <div class="field">
+              <label class="field__label" for="edu-year">{{ __("cv.education.year") }}</label>
+              <input class="field__input" type="text" id="edu-year" name="year" placeholder="2020-2024">
+            </div>
+          </div>
+          <div class="field">
+            <label class="field__label" for="edu-desc">{{ __("cv.education.descriptionField") }}</label>
+            <textarea class="field__input" id="edu-desc" name="description" rows="2"></textarea>
+          </div>
+          <button type="submit" class="button button--primary button--small">{{ __("cv.education.add") }}</button>
+        </form>
+      </div>
+    </div>
+  </details>
+
+  {# ===== LANGUAGES ===== #}
+  <details class="cv-accordion" id="languages">
+    <summary class="cv-accordion__header">
+      {{ __("cv.languages.title") }} ({{ cv.languages.length or 0 }})
+      <svg class="cv-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+    </summary>
+    <div class="cv-accordion__body">
+      <p class="cv-accordion__desc">{{ __("cv.languages.description") }}</p>
+
+      {% if cv.languages.length %}
+        {% for item in cv.languages %}
+        <div class="cv-item">
+          <div class="cv-item__info">
+            <div class="cv-item__title">{{ item.name }}</div>
+            <div class="cv-item__sub">{{ item.level }}</div>
+          </div>
+          <form method="post" action="{{ cvEndpoint }}/languages/{{ loop.index0 }}/delete" style="margin:0">
+            <button type="submit" class="button button--small button--secondary" onclick="return confirm('Delete this entry?')">Delete</button>
+          </form>
+        </div>
+        {% endfor %}
+      {% else %}
+        <p class="cv-empty">{{ __("cv.noData") }}</p>
+      {% endif %}
+
+      <div class="cv-form">
+        <h4>{{ __("cv.languages.add") }}</h4>
+        <form method="post" action="{{ cvEndpoint }}/languages/add">
+          <div class="field-row">
+            <div class="field">
+              <label class="field__label" for="lang-name">{{ __("cv.languages.name") }}</label>
+              <input class="field__input" type="text" id="lang-name" name="name" required>
+            </div>
+            <div class="field">
+              <label class="field__label" for="lang-level">{{ __("cv.languages.level") }}</label>
+              <select class="field__input" id="lang-level" name="level">
+                <option value="native">Native</option>
+                <option value="fluent">Fluent</option>
+                <option value="advanced">Advanced</option>
+                <option value="intermediate" selected>Intermediate</option>
+                <option value="basic">Basic</option>
+              </select>
+            </div>
+          </div>
+          <button type="submit" class="button button--primary button--small">{{ __("cv.languages.add") }}</button>
+        </form>
+      </div>
+    </div>
+  </details>
+
+  {# ===== INTERESTS ===== #}
+  <details class="cv-accordion" id="interests">
+    <summary class="cv-accordion__header">
+      {{ __("cv.interests.title") }} ({{ cv.interests.length or 0 }})
+      <svg class="cv-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+    </summary>
+    <div class="cv-accordion__body">
+      <p class="cv-accordion__desc">{{ __("cv.interests.description") }}</p>
+
+      {% if cv.interests.length %}
+      <div class="cv-item">
+        <div class="cv-item__info">
+          <div class="cv-item__tags">
+            {% for interest in cv.interests %}<span class="cv-tag">{{ interest }}</span>{% endfor %}
+          </div>
+        </div>
+      </div>
+      {% endif %}
+
+      <div class="cv-form">
+        <h4>{{ __("cv.interests.add") }}</h4>
+        <form method="post" action="{{ cvEndpoint }}/save">
+          {# Pass through all existing data to preserve it #}
+          <input type="hidden" name="experience" value='{{ cv.experience | dump | safe }}'>
+          <input type="hidden" name="projects" value='{{ cv.projects | dump | safe }}'>
+          <input type="hidden" name="education" value='{{ cv.education | dump | safe }}'>
+          <input type="hidden" name="languages" value='{{ cv.languages | dump | safe }}'>
+          {# Skills need special handling - pass as JSON #}
+          {% for category, items in cv.skills | dictsort %}
+          <input type="hidden" name="skills[{{ category }}]" value="{{ items | join(', ') }}">
+          {% endfor %}
+          <div class="field">
+            <label class="field__label" for="interests-input">{{ __("cv.interests.placeholder") }}</label>
+            <input class="field__input" type="text" id="interests-input" name="interests" value="{{ cv.interests | join(', ') }}" placeholder="Open Source, IndieWeb, Music">
+          </div>
+          <button type="submit" class="button button--primary button--small">{{ __("cv.save") }}</button>
+        </form>
+      </div>
+    </div>
+  </details>
+
+</div>
+{% endblock %}