portfolio-template-html-css-java

یک پوسته کامل جهت معرفی و رزومه شخصی

قالب نمونه کار طراح وب | مدرن و تعاملی

این یک قالب وب‌سایت تک-صفحه‌ای (Single-Page) مدرن، تعاملی و کاملاً واکنش‌گرا است که برای طراحان و توسعه‌دهندگان وب طراحی شده است. این پروژه با تمرکز بر تجربه‌ی کاربری به‌یادماندنی و نمایش خلاقانه نمونه‌کارها ساخته شده و از جدیدترین ترندهای طراحی وب بهره می‌برد.

---

✨ ویژگی‌های کلیدی

• طراحی سه‌بعدی تعاملی: هدر خیره‌کننده با استفاده از آبجکت سه‌بعدی Spline که به حرکت موس واکنش نشان می‌دهد.
• حالت تاریک و روشن: سوییچ انیمیشنی مدرن برای تغییر تم سایت با قابلیت ذخیره‌سازی انتخاب کاربر.
• نشانگر موس سفارشی: کروزر خلاقانه با افکت معکوس (Invert) که تجربه‌ای منحصر به فرد ایجاد می‌کند.
• اسلایدر نمونه‌کار حرفه‌ای: اسلایدر کاملاً کاربردی با دکمه‌های کنترلی برای نمایش پروژه‌ها.
• منوی هاور انیمیشنی: افکت گرادینت زیبا و نرم هنگام هاور روی آیتم‌های منو.
• کاملاً واکنش‌گرا: طراحی بی‌نقص برای نمایش در دسکتاپ، تبلت و موبایل.
• پس‌زمینه آئورا متحرک: گرادینت نرم و متحرک در پس‌زمینه که به سایت عمق می‌بخشد.
• فونت زیبای فارسی: استفاده از فونت مدرن و خوانای "وزیرمتن".
• انیمیشن‌های نرم: افکت‌های Fade-in هنگام اسکرول برای بارگذاری جذاب محتوا.
• چیدمان بنتو گرید: بخش "درباره من" با ساختاری مدرن و چشم‌نواز.

---

💻 تکنولوژی‌های استفاده شده

• HTML5
• CSS3 (شامل Flexbox, Grid و متغیرهای سفارشی)
• JavaScript (ES6)
• کتابخانه‌ها:
  • Spline برای مدل سه‌بعدی
  • Font Awesome برای آیکون‌ها
  • Google Fonts برای فونت وزیرمتن

---

🚀 راه اندازی

برای استفاده از این قالب، مراحل زیر را دنبال کنید:

1. این ریپازیتوری را Clone کنید:

   https://github.com/hosseinit1988/portfolio-template-html-css-java.git

2. یا فایل ZIP پروژه را دانلود کرده و آن را از حالت فشرده خارج کنید.

3. فایل index.html را در مرورگر خود باز کنید تا نتیجه را ببینید.

---

### 🔧 شخصی سازی

شخصی‌سازی این قالب بسیار آسان است:

• تغییر متون: تمام محتوای متنی (درباره من، اطلاعات تماس، عنوان پروژه‌ها و...) را مستقیماً در فایل index.html ویرایش کنید.

• تغییر تصاویر نمونه‌کار: تصاویر پروژه‌های خود را در پوشه images (در صورت نیاز بسازید) قرار داده و آدرس src تگ‌های <img> در بخش portfolio را به‌روز کنید.

• تغییر آبجکت سه‌بعدی: 1 - به سایت Spline بروید و صحنه سه‌بعدی خود را بسازید یا از نمونه‌های آماده استفاده کنید. 2 - از صحنه خود Export بگیرید و Public URL را انتخاب کنید. 3 - لینک export شده را در تگ <spline-viewer> داخل فایل index.html جایگزین کنید.

تغییر رنگ‌ها: پالت رنگی اصلی سایت (برای هر دو حالت تاریک و روشن) در بالای فایل style.css و در بخش :root تعریف شده است. با تغییر این متغیرها، رنگ کل سایت به‌روز می‌شود.

:root { /* Dark Theme Defaults */
    --primary-color: #8A2BE2;
    --secondary-color: #4A00E0;
    --background-color: #0f0f1a;
    /* ... and other colors */
}

[data-theme="light"] {
    /* Light theme colors */
}

---

📬 تماس با من

می‌توانید از طریق راه‌های زیر با من در ارتباط باشید:

• وب‌سایت: 1itman.ir
• لینکدین: linkedin.com/in/hossein-shourgashti-49649051
• گیت‌هاب: @hosseinit1988

---

---

Modern & Interactive Web Designer Portfolio Template (English)

This is a modern, interactive, and fully responsive single-page portfolio template designed for web developers and designers. This project focuses on creating a memorable user experience and a creative way to showcase projects, utilizing the latest web design trends.

✨ Key Features

• Interactive 3D Design: A stunning hero section featuring a Spline 3D object that reacts to mouse movement.
• Dark & Light Mode: A modern animated switch to toggle the theme, with user preference saved.
• Custom Inverted Cursor: A creative cursor with an "invert" effect for a unique and professional feel.
• Fully Functional Portfolio Slider: A working slider with control buttons to navigate through projects.
• Animated Hover Menu: A beautiful and smooth gradient effect on menu item hover.
• Fully Responsive: Flawlessly designed for desktops, tablets, and mobile devices.
• Animated Aurora Background: A soft, moving gradient in the background that adds depth.
• Elegant Persian Font: Uses the modern and readable "Vazirmatn" font.
• Smooth Scroll Animations: Fade-in effects on scroll for an engaging content loading experience.
• Bento Grid Layout: A modern and visually appealing structure for the "About Me" section.

---

💻 Tech Stack

• HTML5
• CSS3 (Flexbox, Grid, Custom Variables)
• JavaScript (ES6)
• Libraries:
  • Spline for the 3D model
  • Font Awesome for icons
  • Google Fonts for the Vazirmatn font

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

1. Clone the repo:

   git clone https://github.com/your-username/your-repo-name.git

2. Or download the ZIP file and extract it.
3. Open index.html in your browser to see the result.

---

🔧 Customization Guide

Customizing this template is very straightforward:

• Content: All text content (About Me, contact info, project titles, etc.) can be edited directly in index.html.

• Portfolio Images: Place your project images in an images folder and update the src attribute of the <img> tags within the portfolio section.

• 3D Object:

  1. Go to Spline and create your 3D scene.
  2. Export the scene and choose "Public URL".
  3. Replace the link in the <spline-viewer> tag inside index.html with your new exported URL.

• Colors: The main color palette (for both dark and light themes) is defined at the top of style.css within the :root selector. Changing these variables will update the colors across the entire site.

---

📬 Contact

You can reach me through the following channels:

• Website: 1itman.ir
• LinkedIn: linkedin.com/in/hossein-shourgashti-49649051
• GitHub: @hosseinit1988