🚀 WhoAmI - Personal Portfolio

یک پورتفولیو شخصی مدرن و واکنش‌گرا برای نمایش مهارت‌ها، پروژه‌ها و تجربیات حرفه‌ای

---

📋 فهرست مطالب

• 📝 توضیحات پروژه
• ✨ ویژگی‌ها
• 🛠️ تکنولوژی‌ها
• 📦 پیش‌نیازها
• 🚀 نصب و راه‌اندازی
• 📁 ساختار پروژه
• 💻 نحوه استفاده
• 🌐 نسخه آنلاین
• 🤝 مشارکت
• 📄 لایسنس
• 👨‍💻 سازنده
• 🙏 قدردانی

---

📝 توضیحات پروژه

WhoAmI یک پورتفولیو شخصی مدرن و حرفه‌ای است که با استفاده از جدیدترین تکنولوژی‌های وب توسعه یافته است. این پروژه به شما این امکان را می‌دهد تا:

• ✅ مهارت‌ها و تخصص‌های خود را به صورت بصری جذاب نمایش دهید
• ✅ پروژه‌های انجام شده را با جزئیات کامل معرفی کنید
• ✅ اطلاعات تماس و رزومه خود را به اشتراک بگذارید
• ✅ از طراحی واکنش‌گرا برای تمام دستگاه‌ها بهره‌مند شوید

WhoAmI is a modern and professional personal portfolio built with cutting-edge web technologies. This project allows you to:

• ✅ Showcase your skills and expertise in a visually appealing way
• ✅ Present your completed projects with detailed information
• ✅ Share your contact information and resume
• ✅ Enjoy responsive design for all devices

---

✨ ویژگی‌ها

🎨 طراحی و رابط کاربری

• طراحی واکنش‌گرا - سازگار با تمام دستگاه‌های موبایل، تبلت و دسکتاپ
• تم تاریک/روشن - قابلیت تغییر تم با توجه به ترجیح کاربر
• انیمیشن‌های مدرن - استفاده از Framer Motion برای تجربه کاربری بهتر
• طراحی Material Design - رابط کاربری مدرن و کاربرپسند

🌍 قابلیت‌های پیشرفته

• چندزبانه - پشتیبانی از زبان‌های فارسی و انگلیسی
• PWA (Progressive Web App) - قابلیت نصب به عنوان اپلیکیشن
• بهینه‌سازی عملکرد - بارگذاری سریع و بهینه
• SEO Friendly - بهینه‌سازی برای موتورهای جستجو

📊 بخش‌های اصلی

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

🎨 Design & User Interface

• Responsive Design - Compatible with all mobile, tablet, and desktop devices
• Dark/Light Theme - Theme switching based on user preference
• Modern Animations - Using Framer Motion for better user experience
• Material Design - Modern and user-friendly interface

🌍 Advanced Features

• Multi-language - Support for Persian and English languages
• PWA (Progressive Web App) - Can be installed as an application
• Performance Optimized - Fast and optimized loading
• SEO Friendly - Optimized for search engines

📊 Main Sections

• Home Page - Introduction and skills summary
• About Me - Personal and professional information
• Skills - Display technical skills with proficiency percentages
• Projects - Gallery of completed projects
• Certifications - Display certificates and credentials
• Contact Me - Contact form and communication details

---

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

تکنولوژی	نسخه	توضیحات
React	19.0.0	کتابخانه اصلی برای ساخت رابط کاربری
Vite	6.2.0	ابزار ساخت و bundler سریع
Tailwind CSS	4.0.15	فریم‌ورک CSS برای استایل‌دهی
Framer Motion	12.15.0	کتابخانه انیمیشن
React i18next	12.2.0	internationalization برای چندزبانه
Vite PWA	1.0.0	تبدیل به اپلیکیشن وب پیشرونده
Heroicons	2.2.0	مجموعه آیکون‌ها
Lucide React	0.544.0	آیکون‌های واکنش‌گرا

Technology	Version	Description
React	19.0.0	Main library for building user interface
Vite	6.2.0	Fast build tool and bundler
Tailwind CSS	4.0.15	CSS framework for styling
Framer Motion	12.15.0	Animation library
React i18next	12.2.0	Internationalization for multilingual support
Vite PWA	1.0.0	Convert to Progressive Web App
Heroicons	2.2.0	Icon collection
Lucide React	0.544.0	Responsive icons

---

📦 پیش‌نیازها

قبل از شروع به کار، مطمئن شوید که موارد زیر روی سیستم شما نصب شده است:

• Node.js (نسخه 18 یا بالاتر)
• npm یا yarn (مدیریت پکیج‌ها)
• Git (برای کلون کردن مخزن)

برای بررسی نسخه‌های نصب شده:

node --version
npm --version
git --version

Before getting started, make sure you have the following installed on your system:

• Node.js (version 18 or higher)
• npm or yarn (package manager)
• Git (for cloning the repository)

To check installed versions:

node --version
npm --version
git --version

---

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

۱. کلون کردن مخزن

git clone https://github.com/Darkcode-it/whoami.git
cd whoami

۲. نصب وابستگی‌ها

npm install

۳. اجرای پروژه در حالت توسعه

npm run dev

پروژه روی پورت 5173 اجرا خواهد شد. برای مشاهده در مرورگر به آدرس http://localhost:5173 بروید.

۴. ساخت برای تولید

npm run build

۵. پیش‌نمایش ساخت تولید

npm run preview

۶. استقرار روی GitHub Pages

npm run deploy

1. Clone the Repository

git clone https://github.com/Darkcode-it/whoami.git
cd whoami

2. Install Dependencies

npm install

3. Run Development Server

npm run dev

The project will run on port 5173. Open http://localhost:5173 in your browser to view it.

4. Build for Production

npm run build

5. Preview Production Build

npm run preview

6. Deploy to GitHub Pages

npm run deploy

---

📁 ساختار پروژه

whoami/
├── 📁 public/                 # فایل‌های عمومی
│   ├── icons/                 # آیکون‌های اپلیکیشن
│   ├── images/                # تصاویر پروژه
│   ├── locales/               # فایل‌های ترجمه
│   └── resume/                # رزومه PDF
├── 📁 src/                    # کد منبع
│   ├── 📁 Components/         # کامپوننت‌های React
│   │   ├── About/            # بخش درباره من
│   │   ├── banner/           # بنر اصلی
│   │   ├── Cantact Me/       # فرم تماس
│   │   ├── certifica/        # گواهینامه‌ها
│   │   ├── Education/        # تحصیلات
│   │   ├── Experience/       # تجربیات کاری
│   │   ├── footer/           # فوتر
│   │   ├── Menu/             # منو ناوبری
│   │   ├── portfolio/        # پروژه‌ها
│   │   ├── PWAInstallPrompt/ # اعلان نصب PWA
│   │   ├── Services/         # خدمات
│   │   ├── Skill/            # مهارت‌ها
│   │   └── ui/               # کامپوننت‌های پایه
│   ├── 📁 assets/            # دارایی‌های ثابت
│   ├── 📁 core/              # فایل‌های هسته
│   └── 📁 lib/               # کتابخانه‌ها
├── 📄 package.json           # تنظیمات پروژه
├── 📄 vite.config.js         # پیکربندی Vite
├── 📄 tailwind.config.js     # پیکربندی Tailwind
└── 📄 README.md              # این فایل

whoami/
├── 📁 public/                 # Public files
│   ├── icons/                 # Application icons
│   ├── images/                # Project images
│   ├── locales/               # Translation files
│   └── resume/                # PDF resume
├── 📁 src/                    # Source code
│   ├── 📁 Components/         # React components
│   │   ├── About/            # About section
│   │   ├── banner/           # Main banner
│   │   ├── Cantact Me/       # Contact form
│   │   ├── certifica/        # Certifications
│   │   ├── Education/        # Education
│   │   ├── Experience/       # Work experience
│   │   ├── footer/           # Footer
│   │   ├── Menu/             # Navigation menu
│   │   ├── portfolio/        # Projects
│   │   ├── PWAInstallPrompt/ # PWA install prompt
│   │   ├── Services/         # Services
│   │   ├── Skill/            # Skills
│   │   └── ui/               # Base components
│   ├── 📁 assets/            # Static assets
│   ├── 📁 core/              # Core files
│   └── 📁 lib/               # Libraries
├── 📄 package.json           # Project configuration
├── 📄 vite.config.js         # Vite configuration
├── 📄 tailwind.config.js     # Tailwind configuration
└── 📄 README.md              # This file

---

💻 نحوه استفاده

سفارشی‌سازی محتوا

برای سفارشی‌سازی اطلاعات شخصی:

1. اطلاعات شخصی: فایل src/Components/About/About.jsx را ویرایش کنید
2. مهارت‌ها: فایل src/Components/Skill/Skill.json را به‌روزرسانی کنید
3. پروژه‌ها: فایل src/Components/portfolio/Portfolio.json را ویرایش کنید
4. تجربیات: فایل src/Components/Experience/experienceData.json را به‌روزرسانی کنید
5. ترجمه‌ها: فایل‌های public/locales/ را ویرایش کنید

تغییر تم و استایل

• برای تغییر رنگ‌ها: فایل tailwind.config.js را ویرایش کنید
• برای تغییر فونت: فایل src/index.css را به‌روزرسانی کنید
• برای تغییر انیمیشن‌ها: کامپوننت‌های مربوط به Framer Motion را ویرایش کنید

اضافه کردن زبان جدید

1. پوشه جدید در public/locales/ ایجاد کنید
2. فایل translation.json جدید اضافه کنید
3. زبان را در src/core/i18n.js تعریف کنید

Content Customization

To customize personal information:

1. Personal Info: Edit src/Components/About/About.jsx
2. Skills: Update src/Components/Skill/Skill.json
3. Projects: Edit src/Components/portfolio/Portfolio.json
4. Experience: Update src/Components/Experience/experienceData.json
5. Translations: Edit files in public/locales/

Theme and Styling Changes

• To change colors: Edit tailwind.config.js
• To change fonts: Update src/index.css
• To modify animations: Edit Framer Motion components

Adding a New Language

1. Create a new folder in public/locales/
2. Add a new translation.json file
3. Define the language in src/core/i18n.js

---

🌐 نسخه آنلاین

🚀 مشاهده نسخه زنده

نسخه آنلاین پروژه روی GitHub Pages میزبانی شده و شامل تمام ویژگی‌های اصلی است.

🚀 View Live Demo

The live version is hosted on GitHub Pages and includes all main features.

---

🤝 مشارکت

از مشارکت شما در این پروژه استقبال می‌کنیم! لطفاً برای مشارکت مراحل زیر را دنبال کنید:

مراحل مشارکت:

1. Fork پروژه
2. ایجاد یک branch جدید (git checkout -b feature/amazing-feature)
3. Commit تغییرات (git commit -m 'Add amazing feature')
4. Push به branch (git push origin feature/amazing-feature)
5. باز کردن یک Pull Request

دستورالعمل‌های کد:

• از Prettier برای فرمت کد استفاده کنید
• کامنت‌های مفید اضافه کنید
• تست‌های جدید برای ویژگی‌های جدید بنویسید
• مطمئن شوید تمام تست‌ها پاس می‌شوند

Contributions are welcome! Please follow these steps to contribute:

Contribution Steps:

1. Fork the project
2. Create a new branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Guidelines:

• Use Prettier for code formatting
• Add helpful comments
• Write tests for new features
• Make sure all tests pass

---

📄 لایسنس

این پروژه تحت لایسنس MIT منتشر شده است.

MIT License

Copyright (c) 2024 Ahmad Rasouli

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

This project is licensed under the MIT License.

MIT License

Copyright (c) 2024 Ahmad Rasouli

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

---

👨‍💻 سازنده

احمد رسولی - توسعه‌دهنده فرانت‌اند و متخصص امنیت سایبری

• 🌐 وبسایت: darkcode-it.github.io
• 🐙 GitHub: github.com/Darkcode-it

• 📧 ایمیل: Ahmadrasouli.dev@gmail.com

Ahmad Rasouli - Front-End Developer & Cybersecurity Specialist

• 🌐 Website: darkcode-it.github.io
• 🐙 GitHub: github.com/Darkcode-it

• 📧 Email: Ahmadrasouli.dev@gmail.com

---

🙏 قدردانی

با سلام خدمت مهندس و همکار گرامی،

لطفاً وقتی از پروژه‌های اپن سورس من استفاده می‌کنید یک ستار و یک فورک بهم بدین یا از من در پروژه خود یاد کنید، آدرس گیت‌هاب من را در هر قسمتی که تمایل داشتید قرار دهید.

با تشکر، موفق باشید! 🌟

---

GitHub: https://github.com/Darkcode-it

Hello dear engineer and colleague,

When you use my open source projects or mention me in your project, please include my GitHub address wherever you prefer.

Thank you and good luck! 🌟

---

GitHub: https://github.com/Darkcode-it

---

⭐ اگر این پروژه برای شما مفید بود، لطفاً آن را ستاره‌دار کنید!

🔗 مشاهده پروژه روی GitHub | 🚀 نسخه آنلاین