JSON Resume Theme React

A modern, responsive React-based theme for JSON Resume, built with React, TypeScript, and Vite.

Features

🚀 Modern Stack: Built with React 18, TypeScript, and Vite
🌐 Multilingual Support: Built-in internationalization with i18next
🎨 Modern UI: Clean, professional design with Tailwind CSS
📱 Responsive Design: Optimized for all devices
📝 Markdown Support: Rich text formatting in descriptions
🖨️ Print-Friendly: Optimized for PDF generation
🔍 Type Safety: Full TypeScript support with generated types

Development

Prerequisites

Node.js 20+
npm 9+

Getting Started

Clone the repository:

git clone https://github.com/phoinixi/jsonresume-theme-react.git
cd jsonresume-theme-react

Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
Create your resume:
- Place your resume.json file in the project root
- For multiple languages, create files like resume-fr.json, resume-de.json, etc.
Build and render your resume:
```
npm run render:resumed
```
This will:
- Build the theme
- Render your resume
- Output to public/index.html

Multilingual Support

The theme supports multiple languages using the language property within your resume.json file. The theme uses i18next for internationalization, and translations are located in the src/i18n directory.

How it Works

Set the Language in resume.json: Inside your resume.json file, specify the desired language code (e.g., en, fr, de) at the root level:

{
  "language": "fr", // Set this to the desired language
  "basics": {
    // ... your basic info
  }
  // ... rest of your resume data
}

Rendering: When you run the render script (npm run render:local or using resumed), the theme will read the root language property and load the corresponding translations.

The rendered output file (public/index.html by default) will be in the language specified in the JSON.
Development Server: The development server (npm run dev) will also respect the root language set in the resume.json file used for preview.

Note: While you can maintain separate files like resume-en.json, resume-fr.json for organizational purposes, the theme itself only cares about the root language property within the specific JSON file being rendered or previewed.

Available Scripts

npm run dev: Start development server
npm run build: Build the theme for production
npm run render:resumed: Build and render your resume
npm run generate-types: Generate TypeScript types from JSON schema
npm run test: Run test suite
npm run lint: Run ESLint
npm run format: Format code with Prettier

Project Structure

├── src/
│   ├── components/     # React components
│   ├── i18n/          # Internationalization
│   ├── styles/        # CSS and Tailwind config
│   ├── types/         # TypeScript types
│   └── utils/         # Utility functions
├── scripts/           # Build and render scripts
├── public/            # Static assets
└── resume.json        # Sample resume

License

MIT