موقع Fokir – Landing Page بورتفوليو شخصي (One Page Portfolio)

موقع Fokir هو Landing Page احترافي مصمم لعرض السيرة الذاتية والأعمال لشخص يعمل في مجال تصميم وتطوير الويب.

الموقع عبارة عن صفحة واحدة (Single Page Application - بدون JavaScript) يهدف إلى تقديم تجربة مستخدم سلسة وسريعة، حيث يمكن للزائر الوصول لكل المحتوى من خلال التمرير أو التنقل السريع عبر شريط التنقل.

تم تصميم الـ Landing Page ليكون جذاب بصريًا، سريع التحميل، ومناسب لعرض المهارات والخدمات والأعمال بطريقة منظمة تشجع الزائر على التفاعل والتواصل.

بنية الـ Landing Page:

الموقع يتكون من 8 أقسام رئيسية مترابطة داخل نفس الصفحة، ويتم التنقل بينها بسهولة من خلال Navbar:

الرئيسية (Home)

من أنا (About)

الخدمات (Services)

الأعمال (Portfolio)

الأرقام (Statistics)

آراء العملاء (Testimonials)

المدونة (Blog)

التواصل (Contact)

أهم مميزات الـ Landing Page:

? Responsive Navbar

شريط تنقل متجاوب بالكامل

يعمل بدون JavaScript باستخدام CSS Checkbox Hack

يحتوي على قائمة منسدلة للشاشات الصغيرة

تمييز الرابط النشط (Active Link)

? Hero Section (واجهة الـ Landing Page)

صورة خلفية جذابة (Hero Image)

نص ترحيبي واضح يوضح هوية الشخص

تأثير Typewriter Animation لعرض أدوار مختلفة مثل:

(Designer / Developer)

? About Section

صورة شخصية مع تأثير Hover يعرض أيقونات السوشيال ميديا

عرض بيانات شخصية بشكل منظم

أزرار Call To Action:

Download CV

Hire Me

? Services Section

عرض الخدمات في شكل Cards

استخدام أيقونات Icofont

أمثلة:

UI/UX Design

App Development

Product Design

? Portfolio Section

عرض الأعمال في Grid Layout

تأثير Hover احترافي على الصور

فلاتر للتصنيف:

All / Graphic / Web Design / Branding

? Statistics Section

عرض أرقام وإنجازات بشكل جذاب

باستخدام أيقونات Font Awesome

مثل:

عدد المشاريع

عدد العملاء

عدد الملفات

أسطر الكود

? Testimonials Section

عرض آراء العملاء في شكل Card

يحتوي على:

صورة العميل

الاسم والموقع

التقييم بالنجوم ⭐

مع Dots للتنقل بين الآراء

? Blog Section

عرض 3 مقالات متنوعة

(صورة + فيديو YouTube + صورة)

يحتوي على:

تاريخ النشر

العنوان

وصف مختصر

زر "Read More"

? Contact Section

نموذج تواصل متكامل:

Name

Email

Subject

Message

تصميم بسيط وواضح لتحفيز المستخدم على الإرسال

? Footer

أيقونات السوشيال ميديا:

Facebook

Twitter

Google

GitHub

نص حقوق الملكية

التقنيات المستخدمة:

HTML5

CSS3

Font Awesome 6

Icofont

Google Fonts (Source Sans 3 & Roboto)

YouTube Embed

CSS Typewriter Animation