تطوير بورتفوليو شخصي بتصميم Terminal UI مخصص باستخدام HTML, CSS & JavaScript باحترافية عالية

في هذا المشروع، قمت بتطوير واجهة بورتفوليو شخصية مستوحاة بالكامل من بيئة الطرفية (Terminal) أو CMD، من خلال تصميم يحاكي واجهات أنظمة التشغيل القديمة (Legacy Operating Systems) وأدوات CLI (Command Line Interface)، باستخدام HTML وCSS فقط دون أي أطر جاهزة أو مكتبات خارجية.

الهدف الأساسي كان تقديم تجربة تفاعلية واقعية لمحبي النمط الطرفي، عبر واجهة خام (Raw UI) تحاكي سلوك التيرمنال بدقة بصرية وهيكلية.

تصميم واجهة مخصصة (Custom Terminal UI):

محاكاة شكل التيرمنال الكلاسيكي عبر monospace typography مدروسة، مما يعكس الطابع النصي لنظام الأوامر.

تصميم تأثير Blinking Cursor باستخدام @keyframes وanimation-delay لخلق تجربة واقعية للمستخدم وكأنه يتعامل مع Shell حقيقية.

استخدام ألوان محددة بدقة (Custom Hex values) مثل #00ff00 لمحاكاة اللون الأخضر الفوسفوري الخاص بواجهات الهكرز الكلاسيكية، على خلفية #000000 تمتص التباين وتُعزز من وضوح النص.

هيكلة المحتوى باستخدام Flexbox لضمان محاذاة المحتوى عموديًا وأفقيًا مع الحفاظ على البساطة المطلقة التي تميز التيرمنال.

? تنفيذ هيكلي من الصفر (Zero Dependency Build):

تم بناء الموقع بالكامل من الصفر، بدون استخدام أي فريمورك أو Reset CSS، مما تطلّب تصميم كل سطر، Margin، Padding، وSpacing يدويًا.

استخدمت تقنية Semantic HTML لتقسيم الأقسام (section, header, main, footer) بشكل يعكس هيكلًا منطقيًا وسهل القراءة والصيانة.

تم تحويل كل عنصر بصري إلى معادل نصي (Textual Element) ليتماشى مع فلسفة الـ Terminal UI (حتى العناوين تمت محاكاتها بأسلوب echo).

تصميم أقسام المهارات والمشاريع بأسلوب يعكس إخراج نتائج أوامر حقيقية مثل ls, cat, whoami، ما يضيف حسًا تفاعليًا دون JavaScript.

تصميم متجاوب (Responsive Architecture):

اعتماد منهجية Mobile-First Design وكتابة Media Queries بشكل تفصيلي لضبط الأحجام والمسافات حسب حجم الشاشة، مع الحفاظ على consistency بين تجربة المستخدم في التليفون والـ Desktop.

التحكم في حجم الخط باستخدام vw وrem لتوفير تجربة مرئية سلسة تتكيف تلقائيًا مع دقة الشاشة وكثافة البكسل.

تم تصميم كل Section ليأخذ 100% من Viewport Height لتقليد تجربة الـ Full-Screen Terminal Window.

️ أدوات وتقنيات CSS متقدمة (Advanced CSS Techniques):

استخدام CSS Variables لتحديد Theme مركزي يمكن تغييره بسهولة (مثل لون النص، لون المؤشر، سرعة الوميض... إلخ).

الاعتماد على Pseudo-elements ::before و ::after لمحاكاة سلوك النظام الطرفي، مثل إظهار مسارات ملفات افتراضية (/home/user/portfolio >) أو نتائج أوامر.

بناء Blinking Typing Effect باستخدام animation-timing-function: steps() لمحاكاة طباعة نصوص متقطعة بدون أي JavaScript.

استخدام Overflow Handling وتنسيق الأسطر الطويلة كأنها ملف نصّي يتم قراءته من خلال الـ shell، مما يضبط تجربة القراءة.

? المنهجية والمنطق الخلفي للتنفيذ (Implementation Philosophy):

التركيز على code minimalism بهدف تقليل الحمل على المتصفح وتعزيز الأداء (Performance Optimization).

ضمان Accessibility عن طريق استخدام عناصر HTML ملائمة للقراءة بواسطة قارئات الشاشة، رغم أن التصميم طرفي بطبيعته.

كتابة كود نظيف وقابل للتوسعة (Scalable)، مع فصل واضح بين الطبقة الهيكلية (HTML) وطبقة التنسيق (CSS)، مما يسهل التعديل أو التحويل لاحقًا لأي إطار مثل React أو Vue.

هدف المشروع:

الهدف من هذا المشروع هو إثبات القدرة على تنفيذ واجهات غير تقليدية باستخدام أدوات الويب الأساسية فقط، مع الالتزام بمبادئ الـ Low-level UI Design، والتركيز على التفاصيل الدقيقة التي تُظهر فهمًا عميقًا لأساسيات تصميم الواجهات، من دون أي اعتماد على أدوات جاهزة.

الموقع موجه خصيصًا للمطورين، مهندسي البرمجيات، ومجتمع الأمن السيبراني، الذين يقدّرون بساطة وسرعة وتجربة واجهات الـ Terminal.