هدر صفحه شخصی (پورتفولیو) - مدرن و ریسپانسیو

🎨 طراحی ویژه برای صفحات شخصی
• گرادیانت بنفش-آبی زیبا برای پس‌زمینه
• هدر دوطبقه با اطلاعات شخصی و منوی اصلی
• طراحی مینیمال و حرفه‌ای
• فونت وزیر فارسی با خوانایی عالی
• سایه‌ها و افکت‌های مدرن

👤 بخش‌های اصلی هدر
1. بخش اطلاعات شخصی (بالا)
- عکس پروفایل دایره‌ای
- نام و عنوان شغلی
- لینک‌های شبکه‌های اجتماعی

2. منوی ناوبری اصلی (پایین)
- لوگو و برند شخصی
- منوی کامل ناوبری
- دکمه تماس مستقیم
- منوی همبرگری برای موبایل

✨ ویژگی‌های منحصر به فرد
• هدر دوطبقه (Two-layer header)
• عکس پروفایل دایره‌ای با border
• گرادیانت رنگی زیبا
• افکت blur روی نوبار
• موقعیت fixed برای اسکرول
• انیمیشن‌های روان

📱 طراحی ریسپانسیو کامل
• نمایش عالی در موبایل و تبلت
• منوی همبرگری با انیمیشن
• چیدمان عمودی برای دستگاه‌های کوچک
• تنظیم خودکار فاصله‌ها
• سایز مناسب فونت‌ها

🎯 مناسب برای
• توسعه‌دهندگان وب
• طراحان UI/UX
• فریلنسرها
• کارشناسان IT
• دانشجویان
• همه افراد حرفه‌ای

⚡ تکنولوژی‌های استفاده شده
• HTML5 خالص
• CSS3 با Flexbox و Grid
• JavaScript Vanilla
• Font Awesome 6.4.0
• فونت فارسی Vazir از CDN
• CSS Gradients
• Backdrop-filter
• CSS Animations

🌈 پالت رنگی
• بنفش اصلی: #667eea
• بنفش تیره: #764ba2
• خاکستری تیره: #2d3748
• خاکستری متوسط: #4a5568
• خاکستری روشن: #718096
• سفید شفاف: rgba(255, 255, 255, 0.95)

📊 ساختار هدر
┌─────────────────────────────────┐
│ علی رضایی [Social Icons] │ ← بخش بالایی
│ توسعه‌دهنده وب │
├─────────────────────────────────┤
│ لوگو منوی ناوبری دکمه تماس│ ← بخش اصلی
└─────────────────────────────────┘

🛠️ بخش‌های قابل تنظیم
• تصویر پروفایل
• نام و عنوان شغلی
• لینک‌های شبکه‌های اجتماعی
• آیتم‌های منوی ناوبری
• رنگ گرادیانت
• متن دکمه‌ها
• آیکون لوگو

🚀 روش نصب و استفاده
1. دانلود و استخراج فایل زیپ
2. ویرایش فایل index.html
3. تغییر اطلاعات شخصی
4. تنظیم لینک‌های اجتماعی
5. آپلود تصویر پروفایل
6. تنظیم رنگ‌ها (در صورت نیاز)
7. ادغام با سایت اصلی

📁 ساختار فایل‌ها
header.zip/
├── index.html # فایل اصلی
نمونه
└── README.md # راهنمای استفاده

🔧 شخصی‌سازی آسان
// تغییر اطلاعات شخصی
<div class="name-title">
<h1>[نام شما]</h1>
<p>[عنوان شغلی شما]</p>
</div>

// تغییر لینک‌های اجتماعی
<a href="[لینک]" class="social-link [کلاس شبکه]">
<i class="fab fa-[آیکون]"></i>
</a>

// تغییر آیتم‌های منو
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-[آیکون]"></i>
[نام آیتم]
</a>
</li>

// تغییر رنگ گرادیانت
background: linear-gradient(135deg, #[رنگ1], #[رنگ2]);

📱 ریسپانسیو در سایزهای مختلف
• دسکتاپ (1200px+): نمایش کامل دوطبقه
• تبلت (992px-1200px): فشرده‌سازی فضاها
• موبایل (768px-992px): تبدیل به منوی همبرگری
• موبایل کوچک (تا 576px): عمودی شدن همه بخش‌ها

🎭 افکت‌های ویژه
• Hover effects روی لینک‌ها و دکمه‌ها
• انیمیشن fade-in برای بخش‌ها
• اسکرول بار اختصاصی با گرادیانت
• تغییر سایه نوبار هنگام اسکرول
• transform: translateY برای hover

🔒 نکات فنی مهم
• استفاده از backdrop-filter برای شفافیت
• position: fixed برای چسبندگی
• z-index مناسب برای overlay
• CSS Variables برای رنگ‌ها
• transition برای انیمیشن‌های روان
• @media queries برای ریسپانسیو

💼 کاربردهای عملی
• صفحه اصلی پورتفولیو
• سایت رزومه آنلاین
• صفحه درباره من (About)
• سایت فریلنسری
• صفحه معرفی خدمات
• وبلاگ شخصی

📈 مزایای استفاده
• طراحی منحصر به فرد و حرفه‌ای
• سرعت لود بالا
• سئوی عالی
• قابلیت توسعه آسان
• سازگاری با تمام مرورگرها
• پشتیبانی از RTL کامل

🤝 پشتیبانی و توسعه
• این پروژه توسط درخت کد توسعه داده شده
• کاملاً فارسی و راست‌چین
• امکان اضافه کردن امکانات بیشتر
• مستندات کامل برای توسعه

🎁 کاملاً رایگان
می‌توانید از این هدر در پروژه‌های شخصی، تجاری و سازمانی استفاده کنید.

🔗 شبکه‌های اجتماعی نمونه
• Instagram: برای نمایش پروژه‌های بصری
• LinkedIn: برای ارتباطات حرفه‌ای
• GitHub: برای نمایش کدها
• Twitter: برای به‌روزرسانی‌ها

📞 اطلاعات تماس نمونه
• ایمیل: ali.rezaei@example.com
• تلفن: ۰۹۱۲۱۲۳۴۵۶۷
• آدرس: تهران، ایران

📋 منوی ناوبری پیشنهادی
1. خانه (Home) - معرفی کلی
2. درباره من (About) - جزئیات بیشتر
3. نمونه کارها (Portfolio) - پروژه‌ها
4. مهارت‌ها (Skills) - تخصص‌ها
5. تحصیلات (Education) - مدارک
6. تماس با من (Contact) - راه‌های ارتباط

🌟 نکات طراحی موفق
• استفاده از فضای خالی (White space)
• ترازبندی دقیق المان‌ها
• کنتراست رنگی مناسب
• سایز فونت خوانا
• آیکون‌های معنادار
• تعامل‌پذیری (Interactivity)

🚀 آماده استفاده
کافیست فایل را دانلود کرده و اطلاعات خود را جایگزین کنید.