jsoncv

JSONCV

مجموعة أدوات لبناء سيرتك الذاتية مع JSON وإنشاء ملفات HTML/PDF أنيقة.

JSONCV يتكون من المكونات التالية:

1. مخطط
2. محرر
3. السيرة الذاتية HTML
4. المحولات

للحصول على إرشادات التفسيرات المتعمقة وإرشادات الاستخدام ، يرجى الرجوع إلى الوثائق أدناه.

مقدمة

مخطط

تستخدم JSONCV مخطط JSON لإنشاء معيار قائم على JSON لل CVS.

المخطط المستخدم في JSONCV هو شوكة لمخطط استئناف JSON ، مع الاختلافات التالية:

• نسخة مخطط JSON

  تستخدم JSON استئناف إصدار المسودة -04 التي عفا عليها الزمن ، بينما يستخدم JSONCV المسودة الحالية 07. لضمان التوافق مع المسودة 07 ، تمت إزالة جميع حالات additionalItems .

• قسم sideProjects الإضافي

  يتضمن JSONCV قسمًا إضافيًا ، يسمى sideProjects ، يسمح بالتمييز بين المشاريع الجانبية والمشاريع الوظيفية

• خاصية name إضافية في قسم meta

  يتضمن JSONCV خاصية name في قسم meta ، والذي يسمح للمستخدم بتحديد الاسم المطلوب لملفات HTML/PDF المصدرة.

لا تؤثر هذه الاختلافات على التوافق بين استئناف JSONCV و JSON. هذا يعني أنه يمكنك بسهولة استيراد بيانات استئناف JSON في JSONCV والعكس بالعكس ، حيث ستقوم بيانات JSONCV بالتحقق من صحة مخطط استئناف JSON.

يمكن مشاهدة الفرق الكامل بين مخطط استئناف JSON ويمكن مشاهدة مخطط JSONCV هنا

محرر

يأتي JSONCV مع محرر عبر الإنترنت يوفر واجهة مستخدم رسومية لإنشاء وتحرير بيانات JSONCV الخاصة بك. قم بزيارتها على https://jsoncv.reorx.com/editor/.

يتكون المحرر من ثلاث أجزاء ، من اليسار إلى اليمين:

1. الشريط الجانبي

   يتيح التنقل إلى أقسام مختلفة في نموذج المخطط ويوفر عمليات مثل "تنزيل HTML" و "تحميل البيانات"

2. شكل مخطط

   يتيح لك تحرير خصائص بيانات السيرة الذاتية. يمكنك أيضًا تحديد خصائص عرض أو إخفاء.

3. معاينة

   يعرض السيرة الذاتية المقدمة HTML حيث يتم إجراء تغييرات في شكل المخطط.

السيرة الذاتية HTML

المنتج الأساسي لـ JSONCV هو CV HTML ، وهو تمثيل HTML لبيانات JSONCV الخاصة بك. إنه وثيقة HTML مدمجة ذات ملف واحد يمكن تحويلها إلى PDF أو استضافتها عبر الإنترنت لإنشاء موقع ويب ثابت CV.

تم تصميم CV HTML مع تصميم محدد لعرض السيرة الذاتية على ورقة A4. تم تصميم CSS لتحسين الطباعة ، وضمان أفضل طباعة سواء تم طباعتها على الورق أو تم حفظها كـ PDF. لذلك ، تعد CV HTML هي الأنسب لإنشاء CVS/Resumes المهنية أو الأكاديمية ، بدلاً من مواقع الويب الإبداعية أو التفاعلية.

يدعم CV HTML الموضوعات ، والتي يمكن العثور عليها في دليل src/themes .

للحصول على CV HTML ، يرجى الرجوع إلى تصدير بيانات CV و HTML وإنشاء HTML محليًا

المحولات

المحولات هي البرامج النصية لمساعدة المستخدم على تحويل بيانات JSONCV من/إلى مصادر أخرى.

حاليًا ، لا يوجد سوى محول واحد متاح: rxresume-to-jsoncv.js ، والذي يحول البيانات المصدرة من rxresume إلى تنسيق JSONCV.

إذا كان لديك أي متطلبات إضافية ، فلا تتردد في تقديم مشكلة. كما يتم تقدير طلبات السحب.

الاستخدام

اكتب سيرتك الذاتية

يوصى بكتابة سيرتك الذاتية باستخدام المحرر عبر الإنترنت. ومع ذلك ، إذا كنت مرتاحًا مع JSON ، فيمكنك الحفاظ على ملف البيانات باستخدام محرر نصوص على جهازك المحلي.

عند فتح المحرر لأول مرة ، يتم تحميل بيانات عينة. يمكنك إما تحريره أو النقر فوق الزر "البيانات الجديدة" للبدء بنموذج فارغ. يتم حفظ بيانات السيرة الذاتية الخاصة بك في متصفحك في كل مرة تقوم فيها بإجراء تغيير ، لذلك لا داعي للقلق بشأن فقدان عملك.

إذا كان لديك بالفعل نسخة محلية من بيانات السيرة الذاتية الخاصة بك ، فيمكنك النقر فوق الزر "تحميل بيانات" لتحميله في المحرر.

تصدير بيانات السيرة الذاتية و HTML

بمجرد الانتهاء من التحرير ، يمكنك النقر فوق زر تنزيل JSON لتصدير بيانات السيرة الذاتية بتنسيق JSON.

إذا كنت ترغب في تصدير HTML المقدمة في جزء المعاينة ، فما عليك سوى النقر فوق زر تنزيل HTML .

يرجى ملاحظة أنه يمكنك تسمية الملفات المصدرة عن طريق إضافة خاصية meta.name . إذا لم يتم تحديد ذلك ، فسيتم إنشاء اسم الملف باستخدام مجموعة من basics.name و meta.version .

تحويل HTML إلى PDF

للحفاظ على الأمور بسيطة ، لا يتضمن JSONCV أو يستخدم أي أدوات خارجية لإنشاء ملفات PDF. بدلاً من ذلك ، يجب عليك استخدام ملف HTML الذي تم إنشاؤه لتحويله إلى مستند PDF. الشرط الوحيد هو متصفح حديث. تستخدم الخطوات أدناه Google Chrome كمثال:

1. افتح ملف HTML الذي تم إنشاؤه في Chrome.

2. اضغط على ⌘ P (أو ⌃ P في Windows) ، وسيتم فتح مربع الحوار Print.

3. في مربع الحوار ، حدد "الوجهة" كـ "حفظ كـ PDF" وتأكد من عدم فحص جميع العناصر في "الخيارات".

   

4. انقر فوق "حفظ" لحفظ ملف PDF في نظام الملفات الخاص بك.

يرجى ملاحظة أن PDF المصدرة من Chrome قد يكون لديه بعض المشكلات في نسخ النص. لمزيد من المعلومات ، راجع قسم الأسئلة الشائعة.

بناء HTML محليا

يستخدم JSONCV VITE كأداة بناء في الموقع الثابت. ملف index.html في جذر المشروع هو نقطة الدخول لإنشاء CV-LOFF CV HTML.

فيما يلي الخطوات اللازمة لإنشاء CV HTML باستخدام بياناتك الخاصة:

1. تأكد من أنك تستخدم NodeJS الإصدار 18 أو أعلى.

2. قم بتثبيت التبعيات عن طريق التشغيل: npm run install

3. قم بإنشاء سيرتك الذاتية من خلال تحديد متغيرات البيئة DATA_FILENAME و OUT_DIR :

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

   سيؤدي ذلك إلى إنشاء CV HTML باستخدام ملف البيانات الموجود في $HOME/Downloads/mycv/cv.json ، وسيكون HTML الذي تم إنشاؤه في دليل $HOME/Downloads/mycv .

يتم دعم متغيرات البيئة التالية في عملية الإنشاء:

• DATA_FILENAME : يمكن أن تكون بيانات السيرة الذاتية للاستخدام ، مسارًا نسبيًا أو مطلقًا.
• OUT_DIR : دليل الإخراج لملف HTML الذي تم إنشاؤه.
• THEME : موضوع الاستخدام ، يجب أن يكون أحد اسم الدليل في src/themes/ .

لتخصيص اللون الأساسي للموضوع ، قم بتعديل متغير CSS بالألوان في index.scss. لاحظ أن إجراء هذا التغيير سيؤدي إلى تغييرات غير مرغوبة في GIT. إذا كنت ترغب في إنشاء HTML بنفسك ، فمن المستحسن أن تقوم بإنشاء مشروع جديد بدلاً من تحرير الكود المصدري في JSONCV. للحصول على تعليمات حول كيفية القيام بذلك ، يرجى الرجوع إلى قسم موقع CV ثابت.

بناء موقع CV ثابت

يمكن استخدام ملف index.html الذي تم إنشاؤه في أي مكان وعلى أي منصة استضافة. ما عليك سوى تحميله على خادم ويب ، وسيكون لديك موقع سيرة ذاتية عبر الإنترنت. يتضمن السمة المدمجة "Reorx" أيضًا دعمًا سريع الاستجابة للأجهزة المحمولة.

ومع ذلك ، إذا كنت تريد تخصيصًا إضافيًا ، مثل موقع السيرة الذاتية على https://cv.reorx.com/ الذي يحتوي على تذييل مع روابط إلى ملف PDF والصفحة الرئيسية للمؤلف ، يمكنك اتباع هذه الخطوات:

1. إنشاء مستودع فارغ

2. أضف JSONCV كوحدة فرعية

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

3. ضع ملف بيانات السيرة الذاتية الخاصة بك ، على سبيل المثال cv.json ، في المشروع.

4. تهيئة package.json عن طريق تشغيل npm init .

5. تثبيت JSONCV كاعتماد من خلال تشغيل npm i ./jsoncv .

6. انسخ scripts و devDependencies من ./jsoncv/package.json إلى package.json ، ثم قم بتشغيل npm i لتثبيتها.

7. نسخ ./jsoncv/vite.json.js إلى vite.json.js وقم بإجراء التغييرات التالية:

   • تغيير جميع حالات ./src إلى ./jsoncv/src .
   • قم بتغيير قيمة dataFilename إلى ملف بيانات السيرة الذاتية ، على سبيل المثال cv.json .
   • تغيير renderData.theme إلى الموضوع الذي تريد استخدامه.

8. index.html ./jsoncv/index.html ./src ./jsoncv/src ثم نسخ ./jsoncv/index.scss إلى index.scss .

9. تشغيل npm run build لاختبار ما إذا كان كل شيء يعمل.

بعد الانتهاء من هذه الخطوات ، يمكنك الآن إضافة عناصرك وأنماطك إلى index.html و index.scss لزيادة تخصيص موقع الويب الخاص بك. يمكنك استخدام HTML و CSS و JavaScript لإضافة العلامة التجارية الخاصة بك وتخطيطك ووظائفك إلى الموقع.

قم بإنشاء موضوعك الخاص

يتضمن JSONCV العديد من السمات المدمجة التي يمكنك استخدامها إما مباشرة في المحرر أو عند إنشاء موقع CV الثابت. إذا كنت ترغب في إنشاء السمة المخصصة الخاصة بك ، فإليك كيف:

التسلسل الهرمي لنظام الملفات للموضوعات هو كما يلي:

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

يمكنك إضافة موضوعك الخاص عن طريق إنشاء مجلد جديد ضمن src/themes مع ملفات index.ejs و index.scss .

index.ejs هو قالب EJS يستخدم لبناء محتوى السيرة الذاتية. يتم تنظيم البيانات التي يتم تمريرها إلى القالب على النحو التالي:

• cv : بيانات JSONCV بأكملها تتوافق مع مخطط JSONCV
• fn : مجموعة من وظائف الأداة المساعدة
  • getCVTitle : الحصول على عنوان السيرة الذاتية من بيانات cv
  • reformatDate : يحول سلسلة تاريخ إلى تنسيق محدد
  • getIconSVG : الحصول على iconify SVG String أو DOM عنصر من اسم الرمز
  • noSchemaURL : قم بإزالة المخطط ( https:// ) بادئة عنوان URL

لمزيد من المعلومات ، راجع التعريف الكامل في SRC/Tarmes/Data.js.

بمجرد إنشاء سمة جديدة (دعنا نستخدم yourtheme كمثال) ، يمكنك البدء في تطويره ومعاينته عن طريق تشغيل الكود التالي:

 THEME=yourtheme npm run dev-site

يتم الترحيب دائمًا بطلبات السحب لإضافة موضوعات جديدة.

يمكنك فقط تسمية السمة بعد اسمك ، هذا ما فعلته لموضوع "Reorx". لأنني أعتقد أن هذا الموضوع مرتبط بإحكام بذوق المطور الجمالي والشخصي ، وقد لا تمثل الكلمات المشتركة الدقة.

مكدس التكنولوجيا

• فيت
• EJS
• SCSS
• أيقونة
• AJV

التعليمات

يتم عكس نص تم نسخه من PDF

نعم ، هذه مشكلة معروفة مع ميزة "Save As PDF" الخاصة بـ Chrome. يمكن أن تحتوي ملفات PDF الناتجة على نص يتم للخلف عند نسخه في المعاينة. app على macOS.

تم الإبلاغ عن هذه المشكلة من قبل العديد من المستخدمين وليست خاصة بـ JSONCV. كما هو موضح في: "حفظ AS PDF" ينتج مستندات مع نص للخلف. - مجتمع جوجل كروم

الحل: استخدم Firefox أو Safari للحصول على PDF

يتغير ترتيب الخصائص في JSON المصدرة أحيانًا

انظر هل يضمن JavaScript Object Property Order؟ - مكدس فائض

تودو

• يدعم التخفيض في summary والخصائص description
• يسمح بتخصيص اللون الأساسي للموضوع الحالي
• تصدير PDF مباشرة (باستخدام ميزة طباعة المتصفح)
• يدعم أسلوب الاستجابة للموضوعات ، بحيث يكون موقع السيرة الذاتية ودية للعرض على الأجهزة المحمولة.
• أضف المزيد من الموضوعات.
• يسمح بتبديل الموضوعات في المحرر
• أضف المزيد من بيانات العينة. بالنقر فوق الزر "تحميل عينة" ، سيتم فتح مربع حوار ، مما يسمح للمستخدم بالاختيار من بين لغات مختلفة

الاعتمادات

لا يمكن جعل JSONCV ممكنًا بدون هذه المشاريع الرائعة أدناه:

• استئناف JSON
• json-editor
• أيقونة

هبة

إذا كنت تعتقد أن هذا المشروع ممتع للاستخدام ، أو ينقذ بعض الوقت ، فكر في إعطائي فنجانًا من القهوة :)

• رعاة Github - Reorx
• Ko -Fi - Reorx