Curriculate

Curriculate is a React-based resume editor and preview tool. It provides a polished A4-style resume canvas, editable resume sections, profile image controls, skill and language management, timeline entries, print/export helpers, and a generic Max Mustermann sample resume for safe previews.

The public repository intentionally contains only placeholder resume content. Personal resume variants, profile photos, company logos, and generated local artifacts are ignored and should stay outside version control.

Features

• Live resume preview with an editor sidebar.
• Generic placeholder resume data for Max Mustermann.
• Editable profile, contact, skills, languages, experience, education, and engagement sections.
• Skill icons from Devicon and Lucide.
• Timeline entry logos when a local resume variant provides them.
• Drag-and-drop skill ordering in the preview.
• Profile image upload through the editor, stored locally in the browser.
• A4 and fit-to-content export modes.
• Page overflow measurement and optional page-break guide.
• Print-friendly layout and production build output.

Tech Stack

• React 18
• TypeScript
• Create React App / react-scripts
• Tailwind CSS
• Lucide React icons
• Devicon skill icons
• Testing Library

Getting Started

Install dependencies:

npm install

Start the development server:

npm start

The app runs at http://localhost:3000.

Run tests:

npm test -- --watchAll=false

Create a production build:

npm run build

The compiled app is written to build/.

Project Structure

public/
  index.html
  manifest.json
  robots.txt
src/
  App.tsx
  App.test.tsx
  components/
    ResumeMaxMustermann.tsx
  resume/
    BrandContext.tsx
    ResumeEditor.tsx
    ResumePreview.tsx
    ResumeShell.tsx
    constants.ts
    hooks.ts
    icons.ts
    index.ts
    primitives.tsx
    types.ts

Important files:

• src/App.tsx selects the resume component rendered by the application.
• src/components/ResumeMaxMustermann.tsx contains the safe placeholder resume used by default.
• src/resume/ResumeShell.tsx owns editor/preview layout, local storage, print controls, and page metrics.
• src/resume/ResumeEditor.tsx contains the editable form controls.
• src/resume/ResumePreview.tsx renders the generic resume preview.
• src/resume/types.ts defines the resume data model.
• src/resume/icons.ts defines available skill icon options.

Resume Data Model

Resume content is represented by ResumeState:

type ResumeState = {
  name: string;
  profileImage: string;
  profileSummary: string;
  contact: {
    email: string;
    phone: string;
    address: string;
  };
  skills: Skill[];
  languages: Language[];
  experience: TimelineEntry[];
  education: TimelineEntry[];
  engagement?: TimelineEntry[];
  repositories?: GitHubRepository[];
};

Timeline sections use this shape:

type TimelineEntry = {
  id: string;
  date: string;
  title: string;
  org: string;
  location?: string;
  body: string;
  logo?: string;
};

Creating a Local Resume Variant

The repository ignores personal resume components by default:

src/components/Resume*.tsx
!src/components/ResumeMaxMustermann.tsx

That means you can create a private local file such as:

src/components/ResumeYourName.tsx

Then temporarily point src/App.tsx at that component for local editing. Because personal variants are ignored, they will not be committed unless the ignore rules are changed deliberately.

Recommended workflow:

1. Copy src/components/ResumeMaxMustermann.tsx.
2. Rename the copy to a personal local component.
3. Replace placeholder data with private resume data.
4. Keep personal photos and logos under ignored paths such as public/logo/.
5. Do not commit private resume files or media assets.

Privacy Rules

The public repository should not contain:

• Personal resume components.
• Profile photos.
• Company or institution logo assets used only for private resumes.
• Generated builds.
• IDE state or local machine metadata.
• Environment files.

The current .gitignore covers these categories:

• .idea/
• build/
• node_modules/
• .DS_Store
• .env* local variants
• public/logo/
• public/bild*.png
• public/*Bewerbungsfoto*
• private src/components/Resume*.tsx variants, except ResumeMaxMustermann.tsx

Before publishing changes, check what will be committed:

git status --short --ignored
git diff --cached --name-status

Browser Storage

Curriculate saves edits in localStorage under a key based on the initial resume name:

resume-v1-<resume name>

This keeps edits available across reloads in the same browser. It also means old local data can override changed defaults. Clear the browser storage for the site if you want to see the component's fresh initial state again.

Exporting And Printing

Use the controls in the app to switch between A4 and fit-to-content export modes. The preview includes page measurement and an optional page-break guide to make print output easier to tune.

For PDF export, use the browser print dialog and choose "Save as PDF". The print stylesheet removes editor controls and preserves the resume sheet layout.

Testing

The default test renders the app and checks that the public placeholder resume is present:

npm test -- --watchAll=false

Run this before committing changes to the public resume component or shared resume infrastructure.

Build

Create an optimized production build:

npm run build

The generated build/ directory is intentionally ignored. Deploy from the build output with your preferred static hosting provider.

Maintenance Notes

• Keep ResumeMaxMustermann.tsx generic and safe for public use.
• Add reusable behavior to src/resume/ instead of duplicating it inside individual resume components.
• Keep private data in ignored local files.
• Review staged files before pushing history changes.
• If history ever contains private data, rewrite the public branch and remove stale remote branches that still reference old commits.