Ernst Notes

Appearance

CV Maker is een browser‑gebaseerde CV‑builder met een live preview en een editor‑paneel naast elkaar. De gebruiker past velden aan in de editor (links) en ziet direct het resultaat in de CV‑preview (rechts). Er is ondersteuning voor opslag in localStorage, JSON import/export en een PDF‑export via print‑modus.

Opbouw / structuur ​

  • index.html: UI‑structuur met editorpanelen (details/summary), knoppen voor opslaan/import/export/print en de CV‑preview.

  • styles.css: Thema‑variabelen, layout, component‑styling en print‑stylesheet.

  • app.js: Front‑end logica: default data/state, render‑flow, opslag in localStorage, JSON‑import/export, foto‑crop/zoom en lijstbeheer (ervaring/opleiding/skills/etc.).

  • data.json: Voorbeelddata die via import te laden is.

  • README.md: Functionele uitleg en bestandsoverzicht.

Gebruikte CSS‑styles (overzicht) ​

Basis & thema

  • CSS‑variabelen in :root: --accent, --neutral, --ink, --muted, --paper, --shadow.

  • Fonts via Google Fonts: Space Grotesk (UI/headers) en Literata (CV‑body).

  • Body achtergrond met radial-gradient en globale box-sizing: border-box.

Layout

  • .app als flex container (editor + preview).

  • .editor fixed kolom (42% breedte, min 360px), scrollbaar.

  • .preview centraal uitlijnen met padding; .cv is A4‑achtige kaart met grid‑kolommen 34/66.

Componenten

  • Form fields: .field met label/inputs; inputs hebben zachte borders en afgeronde hoeken.

  • Knoppen: .btn basis met pill‑vorm, hover elevatie; varianten .btn--primary (accent) en .btn--ghost (gestippelde border).

  • Panelen: .panel met lichte achtergrond, border, subtiele schaduw.

  • Toast: .toast sticky bovenaan, fade/slide‑in animatie.

  • Foto‑cropper: cirkelvormige .cropper en .cv__photo.

CV‑stijl

  • Sidebar (.cv__sidebar) accentkleur met witte tekst, grid‑lay‑out.

  • Sectietitels met uppercase, letter‑spacing en accentlijn (::after gradient).

  • Chips (.cv__chip) voor skills/talen met pill‑vorm.

  • Typografie: Space Grotesk voor headers, Literata voor body in de hoofdsectie.

Responsive

  • @media (max-width: 1100px) schakelt naar kolomlayout, CV wordt één kolom.

Print

  • @media print verbergt editor, maakt A4‑vriendelijke layout, fixeert accentkolom via body::before, en schakelt schaduw/animaties uit voor nette PDF.