Editable CV - Project Plan#

A fork of editable-website adapted as a CV/résumé template.

Overview#

This project combines the inline-editing capabilities of editable-website with the clean, professional format of the r/EngineeringResumes template.

Data structure follows JSON Resume for interoperability. See schema/resume.schema.json for the full schema.

Technology Stack#

• Framework: SvelteKit (upgrading to Svelte 5 with runes)
• Database: SQLite (same as editable-website)
• Styling: Tailwind CSS
• Editing: ProseMirror (PlainText/RichText components)
• Data Schema: JSON Resume compatible

JSON Resume Schema (Simplified for CV)#

We'll implement the relevant portions of the JSON Resume spec:

{
  "basics": {
    "name": "John Doe",
    "label": "Software Engineer",
    "email": "john@example.com",
    "phone": "(555) 123-4567",
    "url": "https://johndoe.com",
    "location": { "city": "San Francisco", "region": "CA" },
    "profiles": [
      { "network": "GitHub", "url": "https://github.com/johndoe" },
      { "network": "LinkedIn", "url": "https://linkedin.com/in/johndoe" }
    ]
  },
  "skills": [
    { "name": "Languages", "keywords": ["Python", "JavaScript", "Rust"] },
    { "name": "Frameworks", "keywords": ["SvelteKit", "React", "FastAPI"] }
  ],
  "work": [
    {
      "name": "Company",
      "position": "Senior Engineer",
      "location": "San Francisco, CA",
      "startDate": "2022-06",
      "endDate": null,
      "highlights": ["Built X that improved Y by Z%"]
    }
  ],
  "projects": [
    {
      "name": "Project Name",
      "url": "https://project.com",
      "highlights": ["Description of what it does"]
    }
  ],
  "education": [
    {
      "institution": "University",
      "area": "Computer Science",
      "studyType": "BS",
      "endDate": "2020-05"
    }
  ]
}

Phases#

Phase 1: Foundation & Cleanup ✅#

• Set up fork with proper git remotes
• Save JSON Resume schema to schema/resume.schema.json
• Update package.json name to editable-cv
• Remove unused routes (/blog, /imprint)
• Remove unused components (Testimonial, IntroStep, ArticleTeaser, etc.)
• Clean up the main page to be a blank slate

Phase 2: Upgrade to Svelte 5#

• Update dependencies to Svelte 5 and SvelteKit 2
• Convert stores to runes ($state, $derived)
• Update components to use $props() and $bindable()
• Test PlainText/RichText editors work with Svelte 5

Phase 3: Data Model#

• Define CV schema following JSON Resume spec
• Update database schema (sql/schema.sql)
• Create seed data with example CV
• Update API endpoints for CV data
• Add JSON_RESUME_URL env var support for importing resume from URL

JSON_RESUME_URL Import Feature#

Add an optional JSON_RESUME_URL environment variable that allows bootstrapping a resume from an external JSON Resume file.

Behavior:

• If JSON_RESUME_URL is set and database has no CV data → fetch and use the JSON from URL
• If JSON_RESUME_URL is set and database has CV data → database takes precedence (user edits win)
• If JSON_RESUME_URL is not set → use default placeholder CV or database data

Implementation:

# .env
JSON_RESUME_URL=https://example.com/resume.json

• Fetch happens server-side in +page.server.js
• Validate fetched JSON against schema before using
• Consider caching the fetched JSON to avoid repeated requests
• Add a "Reset from URL" button in admin UI to re-import (with confirmation)

Phase 4: Resume Layout#

Build the main page matching Engineering Resume template:

1. Header - Name centered, contact info inline below
2. Skills - Category: item, item, item format
3. Experience - Job entries with bullet points
4. Projects - Title + URL with bullet descriptions
5. Education - Institution, degree, date

Phase 5: Components#

Phase 6: Styling#

Reference: engresume-template.html (exported from Google Docs r/EngineeringResumes template)

Key styles to replicate (ignore the messy spans, just match the visual output):

• Page: max-width 540pt, padding 28.8pt 36pt
• Font: Calibri for body, 11pt base size
• Name: 24pt, centered
• Contact line: centered, links separated by |
• Section headers: 12.5pt, with bottom border (0.8pt solid black)
• Job/Project titles: bold for position, normal for company/location
• Dates: right-aligned on same line as title
• Bullet points: 18pt left margin, standard disc markers
• Line height: 1.07
• Skills format: **Category:** item, item, item

Tasks:

• Create CV-specific Tailwind classes or CSS matching template
• Print-friendly CSS (@media print)
• A4/Letter page sizing
• PDF export button
• Test print output matches template proportions

What We Keep from editable-website#

• ✅ PlainText/RichText inline editing
• ✅ Login system & admin password
• ✅ SQLite persistence
• ✅ EditorToolbar (save/cancel)
• ✅ Modal component
• ✅ Core infrastructure (hooks, API routes)

What We Remove#

• ❌ Blog section (/blog)
• ❌ Testimonials
• ❌ FAQs
• ❌ IntroSteps (marketing flow)
• ❌ Imprint page
• ❌ Marketing imagery/icons
• ❌ Footer with counters

Future Enhancements#

• Multiple resume versions/variants
• Export to JSON Resume format
• Import from JSON Resume (file upload)
• Export to PDF (server-side)
• Theme variants
• Cloudflare Pages deployment option
• Sync/refresh from JSON_RESUME_URL on demand
• Diff view when URL source differs from database version

Resources#

• Original editable-website
• JSON Resume Schema
• r/EngineeringResumes Wiki
• Engineering Resume Template
• engresume-template.html - Local copy of template exported as HTML (for style reference only)