# Architecture

## Overview

OmniResume is a static, client-rendered web application. There is no server, no database, and no build step. Every page is a plain HTML file that loads shared CSS and ES modules.

The system is organized around four principles:

1. Data-driven rendering. Templates, examples, articles, and stories are JSON. HTML is generated at runtime by shared renderers.
2. Separation of concerns. Rendering, state, persistence, and presentation are distinct modules.
3. Progressive enhancement. Core content is readable without JavaScript. Interactivity layers on top.
4. Minimal payload. No frameworks. No bundlers. No polyfills for modern evergreen browsers.

## Page Types

Static shell pages. These exist as committed HTML files and are directly navigable:

- index.html
- resume-builder.html
- templates.html
- resume-examples.html
- blog.html
- stories.html
- videos.html
- about.html, contact.html, legal pages
- 404.html, offline.html

Dynamic view pages. These are single HTML shells that read a query parameter and render the appropriate content from JSON:

- template.html?id=pro-001
- example.html?id=software-engineer
- article.html?slug=001-resume-format-guide
- story.html?slug=story-001

Prerendered mirrors. Blog, stories, examples, and category landing pages also exist as static HTML for SEO and no-JS access. These mirror the JSON source.

## Module Layers

### core

Foundational utilities with no side effects at import time.

- app.js boots modules based on the current page
- router.js resolves query parameters and dispatches views
- dom.js provides element creation and query helpers
- storage.js wraps localStorage with try/catch and namespacing
- sanitize.js escapes and validates user content before insertion
- validator.js validates imported JSON against expected shapes
- format.js handles dates, names, and text normalization
- errors.js centralizes user-facing error surfaces

### builder

Owns the resume editor and its data model.

- state.js holds the in-memory resume document and undo history
- sections.js implements add, remove, reorder, hide, duplicate
- fields.js renders input controls for each section type
- preview.js renders the live resume document
- customizer.js applies font, color, spacing, and scale choices
- autosave.js debounces writes to storage
- import-export.js handles JSON backup and restore
- print.js drives the PDF export workflow
- templates-engine.js binds template configuration to the preview

### templates

Reads template JSON and produces HTML.

- loader.js fetches template and catalog JSON
- registry.js caches loaded templates
- renderer.js is the single function that turns a template config plus resume data into HTML
- preview-thumb.js generates the miniature card preview for galleries
- filters.js drives category, layout, and ATS filtering

### blog, stories

Render long-form and story-format content from JSON.

### ui

Reusable interactive components with no business logic.

### seo

Structured data and meta management for dynamic pages.

### pwa

Service worker registration and install prompt.

## Data Model

Resume document shape: