مجموعة مواقع الويب الثابتة بتنسيق HTML ·
مقدمة
هذه مجموعة من الصفحات المقصودة وقوالب المدونات التي صممتها بنفسي. تعتمد هذه السمات على HTML وCSS وjavascript وjquery وBootstrap. أقوم بإنشاء هذا المستودع كمحفظة لعرض أعمالي كمطور ويب أمامي للحصول على فرصة عمل، سواء كانت عملاً حرًا أو بدوام جزئي أو بدوام كامل أو أعمال تعاقدية، وهذه التصميمات هي مجرد جزء بسيط من أعمالي العمل لأنني لا أستطيع أن أعرض أعمال عملائي هنا للعامة. إذا كنت تعتقد أن خدماتي قد تكون مفيدة لك وكنت مهتمًا بتوظيفي، فلا تتردد في مراسلتي عبر البريد الإلكتروني.
ستجد في هذا المستودع التصاميم التالية
انقر على اسم السمة لمشاهدة المعاينة المباشرة، وهذه التصميمات ليست للاستخدام الشخصي أو التجاري، فهي لأغراض العرض فقط (لإظهار مهاراتي في الواجهة الأمامية).
- Canox: مدونة بسيطة ونظيفة وشخصية وحديثة ومهنية مثالية لإنشاء موقع تدوين احترافي.
- Covid-19: Covid-19: صفحة مقصودة بسيطة لعرض إحصائيات فيروس كورونا ومعرفة كيفية حماية نفسك منه من خلال إحصائيات في الوقت الفعلي تأتي من API وخريطة تفاعلية لعرض أحدث الإحصائيات حسب البلد. هذا التصميم من تصميم المصمم شهريار حسين ولقد قمت فقط بتحويل التصميم إلى أكواد الواجهة الأمامية عن طريق إجراء بعض التغييرات على التصميم لجعله يبدو أفضل.
- كونيش: صفحة مقصودة جميلة وبسيطة لشركة تقنية. وهذا العمل هو أحد أعمالي الأولى كمطور ويب للواجهة الأمامية.
- الإسقاط والتصادم: عرض معلومات الويب لمشروع الإسقاط والتصادم للسنة الثالثة من دراستي في كلية هندسة تكنولوجيا المعلومات بجامعة دمشق.
- Sass: صفحة مقصودة أخرى لشركة تقنية. ويمكنك مشاهدة العرض التقديمي على behance هنا.
- Sellvas: قالب للمجلة والمدونة بتصميم أنيق ونظيف للمجلة والمدونة. إنه مزود بكل ما تحتاجه لإنشاء مدونة جميلة ومعرض صور، وهو عبارة عن تصميم حديث بسيط وسهل الصيانة وصقل لا تشوبه شائبة في كل التفاصيل. ويحتوي هذا المظهر على أكثر من 10 أشكال مختلفة للتخطيط والعديد من أنماط المنشورات وصفحات الأخطاء لتتناسب مع كل نمط من أنماط التصميم.
- القصة: صفحة مقصودة بسيطة ونظيفة لعرض التحف والأعمال اليدوية، وهذا الموقع من تصميم مجد شمة، ولكنني قمت بتحويل ذلك التصميم إلى موقع ثابت.
- Tieqode: فريق من المحترفين يتمتعون بالمهارات التجارية والتقنية المطلوبة والقيادة السليمة والخبرة والمعرفة لتقديم أفضل الحلول والخدمات للعملاء. وعندما انضممت إلى فريق TIEQODE عملت على موقعهم الإلكتروني، ويمكنك رؤية الموقع هنا.
- الزفاف: صفحة مقصودة حديثة وجميلة لحدث الزفاف.
حول هذه المواضيع
الملامح الرئيسية لهذه التصاميم
- HTML5، CSS3، جافا سكريبت، مسج، وBootstrap.
- تأثيرات المنظر لطيفة.
- نصوص صالحة ورموز منظمة لطيفة.
- تصميمات بسيطة وحديثة ونظيفة.
- استخدم خطوط جوجل المجانية مثل Roboto و Raleway.
- يتم التعليق على جميع الملفات بشكل جيد لسهولة التحرير.
- دعم شريط التمرير الدائري.
- تضمين تأثيرات jquery وCSS3.
- تم تحسين القوائم المنسدلة والقوائم العادية للأجهزة المحمولة أيضًا.
- دعم مسار التنقل لتحسين التنقل.
- متوافق مع المتصفحات.
- تكامل الخط الرائع وأيقونة الأيون.
- دعم تنسيقات النشر.
- المشاركات ذات الصلة تحت المشاركات.
- يتضمن صندوق المؤلف.
- خطأ مخصص 404 صفحة.
مكتبات جافا سكريبت المستخدمة
في هذه المواضيع، يتم استيراد بعض ملفات جافا سكريبت، ويتم تضمين جميع الملفات والإضافات المطلوبة مع ملفات المشروع وهذه الملفات والإضافات هي:
- jQuery: jQuery هي مكتبة جافا سكريبت سريعة وصغيرة وغنية بالميزات. فهو يجعل أشياء مثل اجتياز مستندات HTML ومعالجتها، ومعالجة الأحداث، والرسوم المتحركة، وAjax أكثر بساطة من خلال واجهة برمجة تطبيقات سهلة الاستخدام تعمل عبر العديد من المتصفحات. من خلال الجمع بين التنوع وقابلية التوسعة، غيرت jQuery الطريقة التي يكتب بها ملايين الأشخاص JavaScript.
- Bootstrap: إطار عمل CSS مجاني ومفتوح المصدر موجه نحو تطوير الويب الأمامي سريع الاستجابة والمحمول أولاً. يحتوي على قوالب تصميم مستندة إلى CSS وJavaScript للطباعة والنماذج والأزرار والتنقل ومكونات الواجهة الأخرى.
- Owl Carousel: هي مكتبة ساعدتني في إنشاء شرائح تمرير في مواقع الويب ذات تأثيرات وأنماط انتقالية جميلة.
- المنظر: هي ميزة حديثة، أستخدم هذه الميزة لإضافة تأثيرات المنظر بشكل جيد إلى التخطيط عند التمرير بالماوس.
- Font Awesome & Ion Icons: أيقونات متجهة وشعارات اجتماعية لاستخدامها على مواقع الويب. Font Awesome هي مجموعة الأيقونات ومجموعة الأدوات الأكثر شيوعًا على الويب، ويتم استخدامها بواسطة 38% من المواقع التي تستخدم نصوص برمجية لخطوط تابعة لجهات خارجية، كما أن Ion Icons عبارة عن أيقونات مصممة متميزة للاستخدام في تطبيقات الويب وiOS وAndroid وتطبيقات سطح المكتب. وهو يدعم SVG وخط الويب.
- Mixitup: مكتبة عالية الأداء وخالية من التبعية لمعالجة DOM المتحركة، مما يمنحك القدرة على تصفية عناصر DOM وفرزها وإضافتها وإزالتها باستخدام رسوم متحركة جميلة. يعمل MixItUp بشكل جيد مع HTML وCSS الحاليين لديك، مما يجعله خيارًا رائعًا للتخطيطات سريعة الاستجابة ومتوافقًا مع التدفق المضمن والنسب المئوية واستعلامات الوسائط وflexbox والمزيد.
- TypedJs: مكتبة تقوم بالأنواع. أدخل أي سلسلة، وشاهدها وهي تكتب بالسرعة التي حددتها، ثم اترك مسافة للخلف لما كتبته، وابدأ جملة جديدة مهما كان عدد السلاسل التي قمت بتعيينها.
- وأخيرًا، في ملف
main.js ، قمت بجمع كل ما سبق: قمت بتنفيذ بعض المكونات الإضافية لإنشاء التأثيرات في السمات. هذه المكونات الإضافية معبأة، لذا لن أحتاج إلى تعديل أي شيء في الملف يدويًا. الشيء الوحيد الذي يجب معرفته هو كيفية استدعاء الطريقة.
الصور والرسوم التوضيحية المستخدمة
جميع الصور المستخدمة في التصميمات مجانية 100%، ولكنها لأغراض تجريبية فقط، وقد استخدمت الصور والأيقونات والرسوم التوضيحية من المواقع التالية:
- بيكسلز
- بيكساباي
- فلاتيكون
- فريبيك
