omar-aghili-portfolio — HTML 作品集模板

SHA-256: 2d6eba3cdefc6a3dcf2c2618bd310b3764fbdd5ef24da561df03971f7230e5c1

2026-10-13T08:58:48.641Z

# 🌟 Omar Aghili - Personal Portfolio

<div align="center">

![Portfolio Preview](https://img.shields.io/badge/Portfolio-Live-success?style=for-the-badge)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![License](https://img.shields.io/badge/License-MIT-blue?style=for-the-badge)

**یک وب‌سایت پورتفولیو شخصی مدرن و حرفه‌ای با پشتیبانی دو زبانه**

**A modern, professional personal portfolio website with bilingual support**

[نمایش زنده](https://oaexam8-lgtm.github.io) • [گزارش باگ](https://github.com/oaexam8-lgtm/oaexam8-lgtm.github.io/issues) • [درخواست ویژگی](https://github.com/oaexam8-lgtm/oaexam8-lgtm.github.io/issues)

</div>

---

## 📋 فهرست | Table of Contents

- [درباره پروژه](#-درباره-پروژه--about)
- [ویژگی‌ها](#-ویژگی‌ها--features)
- [تکنولوژی‌ها](#️-تکنولوژی‌ها--technologies)
- [نصب و راه‌اندازی](#-نصب-و-راه‌اندازی--installation)
- [ساختار پروژه](#-ساختار-پروژه--project-structure)
- [استفاده](#-استفاده--usage)
- [مشارکت](#-مشارکت--contributing)
- [لایسنس](#-لایسنس--license)
- [تماس](#-تماس--contact)

---

## 📖 درباره پروژه | About

این پروژه یک وب‌سایت پورتفولیو شخصی است که با تکنولوژی‌های خالص وب (HTML، CSS، JavaScript) ساخته شده است. هدف از این پروژه ارائه یک نمونه تمیز، مدرن و حرفه‌ای برای معرفی مهارت‌ها و پروژه‌های شخصی است.

This is a personal portfolio website built with pure web technologies (HTML, CSS, JavaScript). The goal is to provide a clean, modern, and professional showcase for skills and personal projects.

### 🎯 اهداف پروژه | Project Goals

- ✅ طراحی مدرن و جذاب
- ✅ تجربه کاربری روان و سریع
- ✅ کد تمیز و قابل نگهداری
- ✅ پشتیبانی از چند زبان
- ✅ دسترسی‌پذیری بالا
- ✅ بهینه‌سازی برای موتورهای جستجو

---

## ✨ ویژگی‌ها | Features

### 🎨 طراحی و ظاهر
- 🌓 **تم تاریک و روشن** - تغییر آسان با یک کلیک + ذخیره ترجیحات
- 🎭 **انیمیشن‌های زیبا** - Typing effect، Scroll reveal، Hover effects
- 🎨 **طراحی مدرن** - استفاده از Gradients، Shadows، و CSS Variables
- 📐 **Grid Layout** - استفاده از CSS Grid و Flexbox

### 🌐 چند زبانگی
- 🇮🇷 **پشتیبانی فارسی** - با تغییر جهت RTL
- 🇬🇧 **پشتیبانی انگلیسی** - با جهت LTR
- 🔄 **تغییر آسان زبان** - با یک کلیک + ذخیره خودکار

### 📱 واکنش‌گرا
- 📱 **موبایل** - بهینه شده برای صفحه‌های کوچک
- 📱 **تبلت** - Layout مناسب برای صفحه‌های میانه
- 💻 **دسکتاپ** - تجربه کامل برای صفحه‌های بزرگ
- 🍔 **منوی موبایل** - با انیمیشن و Overlay

### ⚡ عملکرد و بهینه‌سازی
- 🚀 **سرعت بالا** - بدون Framework سنگین
- 💾 **ذخیره‌سازی محلی** - LocalStorage برای تنظیمات
- 🖼️ **Lazy Loading** - بارگذاری تصاویر در زمان نیاز
- 🔍 **SEO Optimized** - با Meta tags، Sitemap، و Robots.txt

### ♿ دسترسی‌پذیری
- 🏷️ **ARIA Labels** - برای Screen readers
- ⌨️ **Keyboard Navigation** - قابل استفاده با کیبورد
- 🎯 **Focus States** - نمایش واضح Focus
- 📢 **Live Regions** - اعلان تغییرات به کاربران

### 🛠️ قابلیت‌های دیگر
- 📝 **فرم تماس** - با Validation کامل
- 🔝 **Scroll to Top** - دکمه بازگشت به بالا
- 🎯 **Active Link Tracking** - مشخص کردن بخش فعال
- 🍞 **Toast Notifications** - پیام‌های زیبا
- 📊 **Skill Progress Bars** - نمایش سطح مهارت‌ها

---

## 🛠️ تکنولوژی‌ها | Technologies

### Frontend
- **HTML5** - ساختار معنایی
- **CSS3** - استایل‌دهی پیشرفته با Variables
- **JavaScript (ES6+)** - عملکردهای تعاملی

### Libraries & Tools
- **Font Awesome 6.6.0** - آیکون‌ها (از CDN)
- **Inter & Vazirmatn Fonts** - فونت‌های اختصاصی
- **Intersection Observer API** - انیمیشن‌های Scroll

### Development
- **Git** - کنترل نسخه
- **GitHub Pages** - میزبانی رایگان

---

## 🚀 نصب و راه‌اندازی | Installation

### پیش‌نیازها | Prerequisites
- مرورگر مدرن (Chrome، Firefox، Safari، Edge)
- Git (اختیاری)
- ویرایشگر کد (VS Code توصیه می‌شود)

### نصب | Install

#### روش 1: دانلود مستقیم
```bash
# دانلود ZIP از GitHub
# باز کردن فایل index.html در مرورگر
```

#### روش 2: Clone با Git
```bash
# کلون کردن repository
git clone https://github.com/oaexam8-lgtm/oaexam8-lgtm.github.io.git

# رفتن به پوشه پروژه
cd oaexam8-lgtm.github.io

# باز کردن در VS Code
code .
```

### اجرا | Run

#### روش 1: باز کردن مستقیم
```bash
# دابل کلیک روی index.html
```

#### روش 2: سرور محلی با Python
```bash
# Python 3
python -m http.server 8000

# مرورگر را باز کنید:
# http://localhost:8000
```

#### روش 3: Live Server در VS Code
```bash
# نصب افزونه Live Server
# کلیک راست روی index.html
# انتخاب "Open with Live Server"
```

---

## 📂 ساختار پروژه | Project Structure

```
portfolio/
│
├── 📄 index.html              # صفحه اصلی
├── 📄 README.md               # مستندات پروژه
├── 📄 LICENSE                 # لایسنس MIT
├── 📄 CONTRIBUTING.md         # راهنمای مشارکت
├── 📄 CHANGELOG.md            # تاریخچه تغییرات
├── 📄 .gitignore              # فایل‌های نادیده گرفته شده
├── 📄 robots.txt              # تنظیمات موتورهای جستجو
├── 📄 sitemap.xml             # نقشه سایت
│
├── 📁 css/
│   └── 📄 style.css           # استایل‌های اصلی
│
├── 📁 js/
│   └── 📄 script.js           # اسکریپت‌های JavaScript
│
└── 📁 images/
    ├── 📁 image-logo/         # لوگو و فاویکون
    │   └── 📄 image-logo.png
    ├── 📁 image-avatar/       # عکس پروفایل
    │   └── 📄 image-avatar.png
    ├── 📁 images-background/  # تصاویر پس‌زمینه
    │   └── 📄 image-hero-section.jpg
    └── 📁 images-projects/    # اسکرین‌شات پروژه‌ها
        ├── 📄 image-DevPortfolio.jpg
        ├── 📄 image-TaskFlow.jpg
        └── 📄 image-WeatherNow.jpg
```

---

## 💻 استفاده | Usage

### تغییر تم
```javascript
// کلیک روی آیکون ماه/خورشید در نوار بالا
// تم به صورت خودکار ذخیره می‌شود
```

### تغییر زبان
```javascript
// کلیک روی دکمه EN | FA
// زبان و جهت صفحه تغییر می‌کند
```

### سفارشی‌سازی
```css
/* تغییر رنگ‌های اصلی در style.css */
:root {
  --accent: #6c63ff;        /* رنگ اصلی */
  --bg-primary: #0a0a0f;    /* پس‌زمینه اصلی */
  /* ... */
}
```

---

## 🤝 مشارکت | Contributing

مشارکت شما در بهبود این پروژه استقبال می‌شود! 🎉

Your contributions are welcome! 🎉

لطفاً [راهنمای مشارکت](CONTRIBUTING.md) را بخوانید.

Please read [Contributing Guidelines](CONTRIBUTING.md).

### مراحل مشارکت:
1. 🍴 Fork کنید
2. 🔀 Branch بسازید (`git checkout -b feature/AmazingFeature`)
3. ✍️ تغییرات را Commit کنید (`git commit -m 'feat: Add AmazingFeature'`)
4. 📤 Push کنید (`git push origin feature/AmazingFeature`)
5. 🔃 Pull Request ایجاد کنید

---

## 📜 لایسنس | License

این پروژه تحت لایسنس MIT منتشر شده است - جزئیات در فایل [LICENSE](LICENSE)

This project is licensed under the MIT License - see [LICENSE](LICENSE) file for details

---

## 📧 تماس | Contact

**Omar Aghili** | **عمر عقیلی**

- 📧 Email: [[email protected]](mailto:[email protected])
- 🐙 GitHub: [@oaexam8-lgtm](https://github.com/oaexam8-lgtm)
- 🌐 Website: [oaexam8-lgtm.github.io](https://oaexam8-lgtm.github.io)

---

## 🙏 تشکر | Acknowledgments

- [Font Awesome](https://fontawesome.com) - برای آیکون‌های زیبا
- [Google Fonts](https://fonts.google.com) - برای فونت‌های Inter و Vazirmatn
- جامعه Open Source - برای الهام و پشتیبانی

---

<div align="center">

**ساخته شده با ❤️ توسط عمر عقیلی**

**Built with ❤️ by Omar Aghili**

⭐ اگر این پروژه برایتان مفید بود، یک ستاره بدهید!

⭐ If you found this project useful, give it a star!

</div>