A modern, responsive React-based theme for JSON Resume, built with React, TypeScript, and Vite.
- 🚀 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
- Node.js 20+
- npm 9+
-
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.jsonfile in the project root - For multiple languages, create files like
resume-fr.json,resume-de.json, etc.
- Place your
-
Build and render your resume:
npm run render:resumed
This will:
- Build the theme
- Render your resume
- Output to
public/index.html
The theme supports multiple languages through separate JSON files. Each language version should have its own resume file with the language code in the filename (e.g., resume-fr.json for French).
-
Create language-specific resume files:
# English (default) resume.json # French resume-fr.json # German resume-de.json
-
Each resume file should include the language code in its metadata:
{ "meta": { "language": "fr" // For French version } // ... rest of your resume data } -
Start the development server with a specific language:
# For English npm run dev -- --lang=en # For French npm run dev -- --lang=fr # For German npm run dev -- --lang=de
To build and render resumes in different languages, simply specify the resume file:
# Build and render English version
npm run render:resumed resume.json
# Build and render French version
npm run render:resumed resume-fr.json
# Build and render German version
npm run render:resumed resume-de.jsonThe script will automatically detect the language from the resume file's content and use it for rendering. Each build will create a separate HTML file in the public directory:
public/index.html(English)public/index-fr.html(French)public/index-de.html(German)
npm run dev: Start development servernpm run build: Build the theme for productionnpm run render:resumed: Build and render your resumenpm run generate-types: Generate TypeScript types from JSON schemanpm run test: Run test suitenpm run lint: Run ESLintnpm run format: Format code with Prettier
├── 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
MIT