jsoncv

jsoncv

Toolkit untuk membangun CV Anda dengan JSON dan membuat file HTML/PDF yang penuh gaya.

JSONCV terdiri dari komponen berikut:

1. Skema
2. Editor
3. CV HTML
4. Konverter

Untuk penjelasan mendalam dan pedoman penggunaan, silakan merujuk ke dokumentasi di bawah ini.

Perkenalan

Skema

JSONCV Gunakan skema JSON untuk membuat standar berbasis JSON untuk CVS.

Skema yang digunakan dalam JSONCV adalah garpu dari skema resume JSON, dengan perbedaan berikut:

• Versi Skema JSON

  Resume JSON menggunakan versi draft-04 yang sudah ketinggalan zaman, sedangkan JSONCV menggunakan draft-07 saat ini. Untuk memastikan kompatibilitas dengan draft-07, semua contoh additionalItems telah dihapus.

• Bagian sideProjects Tambahan

  JSONCV mencakup bagian tambahan, yang disebut sideProjects , yang memungkinkan perbedaan antara proyek sampingan dan proyek karir

• Properti name Tambahan Di Bagian meta

  JSONCV mencakup properti name di bagian meta , yang memungkinkan pengguna untuk menentukan nama yang diinginkan untuk file HTML/PDF yang diekspor.

Perbedaan -perbedaan ini tidak memengaruhi kompatibilitas antara resume JSONCV dan JSON. Ini berarti bahwa Anda dapat dengan mudah mengimpor data resume JSON ke JSONCV dan sebaliknya, karena data JSONCV akan melewati validasi skema resume JSON.

Diff lengkap antara skema resume JSON dan skema JSONCV dapat dilihat di sini

Editor

JSONCV dilengkapi dengan editor online yang menyediakan antarmuka pengguna grafis untuk membuat dan mengedit data JSONCV Anda. Kunjungi di https://jsoncv.reorx.com/editor/.

Editor terdiri dari tiga panel, dari kiri ke kanan:

1. Bilah sisi

   Memungkinkan navigasi ke bagian yang berbeda dalam formulir skema dan menyediakan operasi seperti "unduh html" dan "unggah data"

2. Bentuk skema

   Memungkinkan Anda mengedit properti data CV Anda. Anda juga dapat memilih properti mana yang akan ditampilkan atau disembunyikan.

3. Pratinjau

   Menampilkan CV HTML yang diberikan sebagai perubahan dilakukan dalam bentuk skema.

CV HTML

Produk inti dari JSONCV adalah CV HTML, yang merupakan representasi HTML dari data JSONCV Anda. Ini adalah dokumen HTML file tunggal yang ringkas yang dapat dikonversi ke PDF atau di-host online untuk membuat situs web CV statis.

CV HTML dirancang dengan tata letak khusus untuk menampilkan CV pada lembar kertas A4. CSS telah dirancang untuk mengoptimalkan pencetakan, memastikan tipografi terbaik apakah dicetak di atas kertas atau disimpan sebagai PDF. Oleh karena itu, CV HTML paling cocok untuk menciptakan CVS/resume profesional atau akademik, daripada situs web portofolio yang kreatif atau interaktif.

CV HTML mendukung tema, yang dapat ditemukan di direktori src/themes .

Untuk mendapatkan CV HTML, silakan merujuk ke Ekspor Data CV dan HTML dan membangun HTML secara lokal

Konverter

Konverter adalah skrip untuk membantu pengguna mengonversi data JSONCV dari/ke sumber lain.

Saat ini, hanya ada satu konverter yang tersedia: rxresume-to-jsoncv.js , yang mengubah data yang diekspor dari rxResume ke dalam format JSONCV.

Jika Anda memiliki persyaratan tambahan, jangan ragu untuk mengirimkan masalah. Permintaan tarik juga sangat dihargai.

Penggunaan

Tulis CV Anda

Disarankan untuk menulis CV Anda menggunakan editor online. Namun, jika Anda merasa nyaman dengan JSON, Anda dapat mempertahankan file data menggunakan editor teks di mesin lokal Anda.

Saat Anda membuka editor untuk pertama kalinya, data sampel dimuat. Anda dapat mengeditnya atau mengklik tombol "Data Baru" untuk memulai dengan formulir kosong. Data CV Anda disimpan di browser Anda setiap kali Anda melakukan perubahan, jadi Anda tidak perlu khawatir kehilangan pekerjaan.

Jika Anda sudah memiliki salinan data CV lokal Anda, Anda dapat mengklik tombol "Unggah Data" untuk memuatnya ke editor.

Ekspor Data CV dan HTML

Setelah selesai mengedit, Anda dapat mengklik tombol unduh JSON untuk mengekspor data CV Anda dalam format JSON.

Jika Anda ingin mengekspor HTML yang diberikan di panel Pratinjau, cukup klik tombol Unduh HTML .

Harap dicatat bahwa Anda dapat memberi nama file yang diekspor dengan menambahkan properti meta.name . Jika tidak ditentukan, nama file akan dibangun menggunakan kombinasi basics.name meta.version .

Konversi HTML ke PDF

Agar hal -hal sederhana, JSOLCV tidak termasuk atau menggunakan alat eksternal apa pun untuk menghasilkan PDF. Sebaliknya, Anda harus menggunakan file HTML yang dihasilkan untuk mengonversinya ke dokumen PDF. Satu -satunya persyaratan adalah browser modern; Langkah -langkah di bawah ini menggunakan Google Chrome sebagai contoh:

1. Buka file HTML yang dihasilkan di Chrome.

2. Tekan ⌘ P (atau ⌃ P di Windows), dan dialog cetak akan terbuka.

3. Dalam dialog, pilih "Tujuan" sebagai "Simpan sebagai PDF" dan pastikan semua item di "Opsi" tidak dicentang.

   

4. Klik "Simpan" untuk menyimpan file PDF di sistem file Anda.

Harap dicatat bahwa PDF yang diekspor dari Chrome mungkin memiliki beberapa masalah dengan penyalinan teks. Untuk informasi lebih lanjut, lihat bagian FAQ.

Bangun HTML secara lokal

JSONCV menggunakan Vite sebagai alat bangunan statisnya. File index.html dalam root proyek adalah titik masuk untuk membangun satu file cv html.

Berikut adalah langkah -langkah untuk membangun CV HTML menggunakan data Anda sendiri:

1. Pastikan Anda menggunakan NodeJS versi 18 atau lebih tinggi.

2. Instal Ketergantungan dengan Menjalankan: npm run install

3. Bangun CV HTML Anda dengan menentukan DATA_FILENAME dan variabel lingkungan OUT_DIR :

    DATA_FILENAME="$HOME/Downloads/mycv/cv.json" OUT_DIR="$HOME/Downloads/mycv" npm run build
   

   Ini akan membangun CV HTML Anda menggunakan file data yang terletak di $HOME/Downloads/mycv/cv.json , dan HTML yang dihasilkan akan berlokasi di direktori $HOME/Downloads/mycv .

Variabel lingkungan berikut didukung dalam proses pembangunan:

• DATA_FILENAME : Data CV yang akan digunakan, dapat berupa jalur relatif atau absolut.
• OUT_DIR : Direktori output untuk file HTML yang dihasilkan.
• THEME : Tema untuk digunakan, harus menjadi salah satu nama direktori di src/themes/ .

Untuk menyesuaikan warna utama tema, ubah variabel css-primer-warna di index.scss. Perhatikan bahwa membuat perubahan ini akan mengakibatkan perubahan yang tidak disusun dalam git. Jika Anda ingin membangun HTML sendiri, disarankan agar Anda membuat proyek baru alih -alih mengedit kode sumber di JSONCV. Untuk instruksi tentang cara melakukan ini, silakan merujuk ke bagian Build A CV Static CV.

Bangun situs CV statis

File index.html yang dihasilkan dapat digunakan di mana saja dan pada platform hosting apa pun. Cukup unggah ke server web, dan Anda akan memiliki situs CV online Anda sendiri. Tema bawaan "Reorx" juga mencakup dukungan responsif untuk perangkat seluler.

Namun, jika Anda ingin kustomisasi tambahan, seperti situs CV di https://cv.reorx.com/ yang memiliki footer dengan tautan ke file PDF dan halaman beranda penulis, Anda dapat mengikuti langkah -langkah ini:

1. Buat repositori kosong

2. Tambahkan JSONCV sebagai submodule

    git submodule add https://github.com/reorx/jsoncv.git
   

3. Masukkan file data CV Anda, misalnya cv.json , di proyek.

4. Inisialisasi package.json dengan menjalankan npm init .

5. Instal JSONCV sebagai ketergantungan dengan menjalankan npm i ./jsoncv .

6. Salin scripts dan devDependencies dari ./jsoncv/package.json ke package.json , dan kemudian jalankan npm i untuk menginstalnya.

7. Salin ./jsoncv/vite.json.js ke vite.json.js dan buat perubahan berikut:

   • Ubah semua contoh ./src ke ./jsoncv/src .
   • Ubah nilai dataFilename ke file data CV Anda, misalnya cv.json .
   • Ubah renderData.theme ke tema yang ingin Anda gunakan.

8. Salin ./jsoncv/index.html ke index.html dan ubah semua contoh ./src ke ./jsoncv/src . Lalu salin ./jsoncv/index.scss ke index.scss .

9. Jalankan npm run build untuk menguji jika semuanya berfungsi.

Setelah menyelesaikan langkah -langkah ini, Anda sekarang dapat menambahkan elemen dan gaya Anda sendiri ke index.html dan index.scss untuk lebih menyesuaikan situs web CV Anda. Anda dapat menggunakan HTML, CSS, dan JavaScript untuk menambahkan branding, tata letak, dan fungsionalitas Anda sendiri ke situs.

Buat tema Anda sendiri

JSONCV mencakup beberapa tema bawaan yang dapat Anda gunakan baik secara langsung di editor atau saat membangun situs CV statis. Jika Anda ingin membuat tema kustom Anda sendiri, inilah caranya:

Hirarki sistem file untuk tema adalah sebagai berikut:

 src/themes
└── reorx
    ├── index.ejs
    └── index.scss

Anda dapat menambahkan tema Anda sendiri dengan membuat folder baru di bawah src/themes dengan file index.ejs dan index.scss .

index.ejs adalah templat EJS yang digunakan untuk membangun konten CV. Data yang diteruskan ke templat disusun sebagai berikut:

• cv : Seluruh data JSONCV yang sesuai dengan skema JSONCV
• fn : Satu set fungsi utilitas
  • getCVTitle : Mendapat judul CV dari data cv
  • reformatDate : mengubah string tanggal menjadi format yang ditentukan
  • getIconSVG : Mendapat ikonify string SVG atau elemen DOM dari nama ikon
  • noSchemaURL : Hapus skema ( https:// ) awalan URL

Untuk informasi lebih lanjut, lihat definisi lengkap di SRC/Tema/Data.js.

Setelah Anda membuat tema baru (mari gunakan yourtheme sebagai contoh), Anda dapat mulai mengembangkan dan mempratinjau dengan menjalankan kode berikut:

 THEME=yourtheme npm run dev-site

Tarik permintaan untuk menambahkan tema baru selalu disambut.

Anda hanya dapat menyebutkan nama tema setelah nama Anda sendiri, inilah yang saya lakukan untuk tema "Reorx". Karena saya pikir tema itu terikat erat pada selera estetika dan pribadi pengembang, dan kata -kata umum mungkin tidak secara akurat mewakili tema.

Tumpukan teknologi

• vite
• EJS
• SCSS
• ikonifikasi
• AJV

FAQ

Teks yang disalin dari pdf terbalik

Ya, ini adalah masalah yang diketahui dengan fitur "save as PDF" Chrome. PDF yang dihasilkan dapat memiliki teks yang mundur ketika disalin dalam preview.app pada macOS.

Masalah ini telah dilaporkan oleh beberapa pengguna dan tidak spesifik untuk JSONCV. Seperti yang terlihat di: "Save as PDF" menghasilkan dokumen dengan teks ke belakang. - Komunitas Google Chrome

Solusi: Gunakan Firefox atau Safari untuk mendapatkan PDF

Urutan properti dalam perubahan JSON yang diekspor terkadang

Lihat apakah JavaScript menjamin pesanan properti objek? - Stack overflow

Todo

• Mendukung Markdown Dalam Properti summary dan description
• Memungkinkan menyesuaikan warna primer untuk tema saat ini
• Ekspor PDF secara langsung (menggunakan fitur cetak browser)
• Mendukung gaya responsif untuk tema, sehingga situs CV ramah untuk dilihat pada perangkat seluler.
• Tambahkan lebih banyak tema.
• Memungkinkan pengalihan tema di editor
• Tambahkan lebih banyak data sampel. Dengan mengklik tombol "Muat Sampel", dialog akan terbuka, memungkinkan pengguna untuk memilih dari berbagai bahasa

Kredit

JSONCV tidak dapat dimungkinkan tanpa proyek -proyek luar biasa di bawah ini:

• Resume json
• JSON-editor
• ikonifikasi

Sumbangan

Jika menurut Anda proyek ini menyenangkan untuk digunakan, atau menghemat waktu, pertimbangkan untuk memberi saya secangkir kopi :)

• Sponsor GitHub - Reorx
• Ko -Fi - Reorx