في السابق كانت الطريقة الوحيدة التي يمكنك من خلالها تخصيص ملف تعريف Github الخاص بك هي تحديث الصورة أو تغيير اسمك. وهذا يعني أن كل الملفات الشخصية على Github تبدو متشابهة، وكانت خيارات تخصيصها أو التميز ضئيلة للغاية.

منذ ذلك الحين، أصبح لديك خيار إنشاء قسم مخصص باستخدام Markdown. يمكنك تضمين سيرتك الذاتية واهتماماتك وهواياتك لجعل ملفك الشخصي يعكس شخصيتك. إنه أحد الأقسام الرئيسية التي يراها أي شخص عند وصوله إلى ملفك الشخصي.

سأوضح لك في هذه المقالة كيف قمت بإنشاء الملف التمهيدي الخاص بي على Github مع لمسة جديدة. سأستخدم Markdown وأحل مشكلته الرئيسية. تكمن المشكلة في أنها قد تكون مقيدة للغاية، حيث لا يمكنك تغيير الألوان وضبط المواضع والمسافات، وقد يكون ذلك صعبًا. لحل هذه المشكلة، هناك طريقة يمكنك من خلالها إضافة CSS إلى الملف التمهيدي لـ Github وحتى إضافة انتقالات لتقديم تجربة مستخدم أفضل.

ولكن لنبدأ بإنشاء الملف التمهيدي أولاً. لهذا، ستحتاج إلى إنشاء مستودع عام جديد يشبه تمامًا اسم مستخدم Github الخاص بك. ستشاهد نصًا صغيرًا يوضح أن هذا سيكون مستودعًا فريدًا.

الآن، أيًا كان ما تقوم بتحديثه في ملف [README.md]()، فسيتم عرضه في ملفك الشخصي. يمكنك استخدام بناء جملة Markdown أو HTML لعرض المحتوى الخاص بك. إذا أضفت أي تصميم مضمن أو ملفات CSS أو JavaScript، فسيتم تجريدها بواسطة Github، لذا فإن هذا الحل محظور.

الحل

في ملف README.md الخاص بك، يمكنك تضمين الصور. يتضمن ذلك ملفات SVG. الثغرة التي تمكننا من إضافة CSS هي دمج HTML وCSS مخصصين باستخدام عنصر كائن أجنبي في ملف SVG. يسمح لك عنصر كائن أجنبي بتضمين عناصر من لغات ترميزية أخرى داخل رسم SVG.

فلنقم بإنشاء ملف جديد في مستودعنا، يسمى header.svg. في حالتي، أود أن يتم عرض نص في ملفي الشخصي يقول CodeFlow.، مع تدرج لطيف وتأثير الآلة الكاتبة. لتحقيق ذلك، كتبت بعض CSS وبعض HTML متداخلة في كائن أجنبي في ملف SVG الخاص بي:

الآن دعونا نقوم بتحديث ملف README.md لاستخدام SVG هذا كصورة وعرضه في ملفنا الشخصي:

وهذا كل شيء. إنها في الواقع مجرد بعض CSS وHTML ملفوفة داخل SVG. تحقق من النتيجة النهائية أدناه أو إذا كنت ترغب في رؤيتها عمليًا، ملفي الشخصي على Github موجود هنا.