nextjs resume
1.0.0
سيرة ذاتية تم إنشاؤها خاصة مع وضع محترفي البرمجيات في الاعتبار. إقناع صاحب العمل المحتمل بموقع إلكتروني جميل وسريع بشكل لا يصدق ، أو قم بإنشاء ملف PDF للبريد الإلكتروني والطباعة.
انظر مثال
يمكن أن يؤدي سيرتك الذاتية أيضًا إلى إنشاء عنوان URL آمن يعرض المعلومات التي لا يمكن الوصول إليها على عنوان URL العام. يمكن أن يتضمن الإصدار الآمن معلومات خاصة مثل البريد الإلكتروني ورقم الهاتف والعنوان البريدي. يمكنك إرسال الرابط الخاص إلى صاحب عمل محتمل أو استخدامه لإنشاء PDF أكثر اكتمالا لنفسك.
لا يتطلب المشروع سوى بضع خطوات لإعداد التكوين المخصص الخاص بك ، وإضافة محتوى إلى CMS الداخلية ، والنشر إلى Vercel أو NetLify!
أبسط طريقة للبدء هي الاستنساخ والنشر في خطوة واحدة. بعد ذلك ، يمكنك تحرير CMS والقالب لتتناسب مع احتياجاتك.
تم تصميم المشروع ليتم نشره على NetLify أو Vercel. يمكنك النقر فوق أحد الأزرار التالية لاستنساخ إعادة الريبو ، وتعيين متغيرات البيئة ، والنشر.
لتخصيص سيرتك الذاتية ، قم باستنساخ المشروع الذي أنشأته للتو إلى جهازك المحلي وأقراص cd .
cd my-resume
npm i لقد اختبرت المشروع باستخدام bun و npm و pnpm yarn ولم أواجه أي مشكلات ملحوظة. لتطوير الافتراضات عداء الاختبار إلى bun .
افتح المشروع في المحرر المفضل ، وافتح مجلد edit-me/config/ المجلد في الجذر حيث يمكنك تحرير ملف resumeConfig.ts لتلبية احتياجاتك. يحتوي ملف التكوين على الثوابت التالية التي سيتم استخدامها في جميع أنحاء المشروع (يتم كتابتها لتوفير الإكمال التلقائي والتحقق من الأخطاء المناسبة):
accentColor : AccentColor . اسم لوحة لهجة من ألوان واجهة المستخدم Radix. إذا كنت تستخدم لونًا قياسيًا ، فسيكون لون النص المتناقض أبيض ، وإذا كان باستخدام لون ساطع ، فسيكون لون النص المتناقض أسود.neutralColor : NeutralColor . اسم لوحة محايدة من راديكس واجهة المستخدم.appTheme : 'system' | 'light' | 'dark' . إذا تم تعيين appTheme على system ، فسيقوم موقع السيرة الذاتية بالتخلف عن تفضيل نظام المستخدم. إذا تم ضبطه على light أو dark ، فسيتم تجاوز تفضيل المستخدم.imageTheme : 'light' | 'dark' . سيتم إنشاء صورة مشاركة OG الخاصة بك وتنشيط أيقونات التطبيق إما في ضوء أو متغير مظلم.pdfTheme : 'light' | 'dark' . سيتم إنشاء PDF الخاص بك إما في ضوء أو متغير مظلم. ستجد أيضًا links.ts التي تنشئ روابط خارجية في أسفل المستند. يمكنك استخدام أي رمز من أيقونات بسيطة إلى جانب هذه الروابط.
يوفر Generator Réshomé 19 لوحة ألوان لهجة و 6 لوحات ألوان محايدة خارج الصندوق. فيما يلي لقطات شاشة من بعض الاختلافات في كل من الضوء والظلام.
| وضع الضوء | الوضع المظلم |
|---|---|
الأزرق/الوفاة  | الأزرق/الوفاة  |
روبي/رمادي  | روبي/رمادي  |
النعناع/قائمة  | النعناع/قائمة  |
تنطبق تفضيلات مخططك لللكم والحياد والألوان على صورة OG التي تم إنشاؤها.
| وضع الضوء | الوضع المظلم |
|---|---|
الأزرق/لائحة  | الأزرق/لائحة  |
بعد ذلك ، قم بتعديل بيانات CMS الوهمية التي يتم تضمينها في edit-me/content/ . يستخدم كل ملف Markdown حقول المادة الأمامية المستخدمة لإضافة سمات إلى العنصر. هذه السمات آمنة ، لذلك لن يتم تشغيل المشروع إذا كانت الحقول المطلوبة مفقودة أو غير صالحة. سيتم تقديم بقية ملف Markdown كـ HTML لتقديم وصف للعنصر.
على الرغم من أن الملفات الوهمية يجب أن تكون ذاتية الاستخدام ، يمكنك عرض تكوين ContentLayer للحصول على وصف مفصل للحقول المطلوبة والاختيارية.
بغض النظر عن مكان نشر التطبيق ، فقد يحتاج إلى الوصول إلى متغيرات البيئة التالية:
PRIVATE_KEY (اختياري): هذا رمز ، يحدده المؤلف ، والذي سيوفر وصول URL إلى إصدار من السيرة الذاتية التي تتضمن معلومات خاصة. نوصي بإنشاء هذا الرمز (مثل Uuid أو باستخدام مولد كلمة المرور). يمكن تكوين مشروعك لتوفير عنوان URL السري الذي سيعرض معلومات أكثر من عنوان URL العام. هذا مفيد إذا كنت ترغب في إرسال سيرة ذاتية كاملة إلى صاحب عمل محتمل ، أو إذا كنت ترغب في إنشاء ملف PDF لاستخدامك الخاص. في هذا الإصدار ، يمكنك تضمين معلومات شخصية مثل البريد الإلكتروني ورقم الهاتف والعنوان الذي لا تريد مرئيًا لعامة الناس.
سيعمل عنوان URL الخاص فقط إذا قمت بإضافة متغير بيئة PRIVATE_KEY . إذا عملت محليًا ، يمكنك إضافة هذا في ملف .env.local :
PRIVATE_KEY=your-private-key
يمكنك بعد ذلك زيارة https://your-url.com/private/your-private-key لمشاهدة الإصدار الخاص من السيرة الذاتية.
من أجل التكامل المدمج في التخفيف ، يرجى ملاحظة أنه يجب عليك التأكد من عدم ارتكاب المعلومات الخاصة إلى ريبو GIT العام . استخدم هذه الميزة فقط في ريبو خاص ، وحتى ذلك الحين ، يرجى أن تكون على دراية بالقلق الأمني حول الارتباط بالمعلومات الخاصة لأي ريبو بالجيت.
لإضافة بيانات خاصة إلى CMS ، ما عليك سوى إضافتها إلى مجلد privateFields .
cms/privateFields/ . أضف أكبر عدد من حقول معلومات الاتصال الخاصة التي تريد عرضها. سيظهرون بالترتيب الذي يتم ترتيبه في المجلد ، حتى تتمكن من استخدام بادئة الأرقام لطلبها.label : سلسلة مطلوبة . تسمية الحقل ، مثل "البريد الإلكتروني" أو "العنوان". عنوان URL الخاص هذا آمن فقط مثل الأشخاص الذين ترسله إليه . لإبطال عنوان URL الخاص القديم ، تحتاج ببساطة إلى تغيير متغير بيئة PRIVATE_KEY .
تم تصميم القالب ليكون مستجيبًا وجميلًا ويمكن الوصول إليه مباشرة خارج الصندوق. وهو يدعم موضوع وضع Dark/Light Ongle التلقائي في إصدار الويب ، وتخطيط طباعة رائع في إصدار PDF. يدعم المشروع الحد الأدنى من التكوينات مثل ألوان لهجة ، ولكن إذا كنت مطورًا أو مصممًا في النهاية الأمامية ، فيمكنك فتح رمز المصدر بسهولة وتخصيصه كما ترى.
إذا كنت ترغب حقًا في التعمق في التخصيص ، فلديك تحكم كامل في تكوين Tailwind في ملف tailwind.config.ts في مجلد الجذر.
نستخدم توليد صور Next.js لإنشاء رسم بياني مفتوح ديناميكي (Facebook/Twitter) مشاركة الصور وأيقونات التطبيق. يمكنك تحرير التصميم والأنماط ونص صورة OG باستخدام فئات Tailwind في src/app/api/og/route.tsx والأيقونة في src/app/icon.tsx .
ستستخدم صورة المشاركة الديناميكية هذه إعداد accentColor المخصص ، وكذلك البيانات من CMS.
لمزامنة سيرتك الذاتية مع أحدث إصدار من هذا المشروع ، يمكنك القيام بما يلي:
// add the original repo as a git remote
git remote add upstream [email protected]:colinhemphill/nextjs-resume.git
// pull changes from upstream
git pull upstream mainثم حل أي تعارضات دمج وإجراء التغييرات المطلوبة. ستحتاج إلى إلقاء نظرة على changelog لمعرفة ما حدث منذ آخر مرة سحبت فيها ، ويرجى ملاحظة أن التغييرات في المنبع قد تكسر التخصيصات الخاصة بك!
