نمایش مبدأ برای HTML CSS JS و ساخت پورتفولیو

== مقدمه ==
'''HTML'''، '''CSS''' و '''JavaScript''' سه پایه اصلی وب‌سازی هستند:
* '''HTML''' ساختار صفحه را می‌سازد (متن، عکس، دکمه، فرم).
* '''CSS''' ظاهر و استایل صفحه را تعیین می‌کند (رنگ، فونت، چیدمان).
* '''JavaScript''' رفتار و تعامل صفحه را اضافه می‌کند (کلیک، انیمیشن، اعتبارسنجی فرم).

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

== ساختار استاندارد یک صفحه HTML ==
<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="fa" dir="rtl"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;عنوان سایت&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- محتوای سایت اینجا --&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

== ساختار معمول یک صفحه پورتفولیو ==
* '''Hero / معرفی''': عکس، نام، شغل/تخصص، یک جمله معرفی کوتاه
* '''درباره من (About)''': توضیح کامل‌تر درباره خودتان، مهارت‌ها و تجربه
* '''پروژه‌ها (Projects)''': نمایش نمونه‌کارها با عکس، توضیح و لینک
* '''مهارت‌ها (Skills)''': لیست یا نمودار مهارت‌های فنی
* '''تماس با من (Contact)''': فرم تماس یا لینک شبکه‌های اجتماعی و ایمیل

== نکات مهم CSS برای پورتفولیو ==

=== طراحی واکنش‌گرا (Responsive) ===
سایت باید در موبایل، تبلت و دسکتاپ درست نمایش داده شود.
<pre>
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}
</pre>

=== Flexbox (چیدمان ساده) ===
<pre>
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</pre>

=== Grid (چیدمان جدولی/پیچیده‌تر) ===
<pre>
.projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
</pre>

== نکات مهم جاوااسکریپت برای پورتفولیو ==

=== سوییچ زبان (فارسی/انگلیسی) ===
<pre>
function switchLanguage(lang) {
    document.documentElement.lang = lang;
    document.documentElement.dir = (lang === "fa") ? "rtl" : "ltr";
    // به‌روزرسانی متن‌ها بر اساس lang
}
</pre>

=== منوی موبایل (Hamburger Menu) ===
<pre>
const menuBtn = document.querySelector(".menu-btn");
const navMenu = document.querySelector(".nav-menu");

menuBtn.addEventListener("click", () => {
    navMenu.classList.toggle("active");
});
</pre>

=== اسکرول نرم به بخش‌ها (Smooth Scroll) ===
<pre>
document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener("click", function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute("href"))
            .scrollIntoView({ behavior: "smooth" });
    });
});
</pre>

== نکات کلی برای یک پورتفولیوی خوب ==
* سرعت بارگذاری صفحه را بالا نگه دارید (عکس‌ها را فشرده کنید).
* از فونت خوانا و رنگ‌بندی هماهنگ استفاده کنید.
* حتماً نسخه موبایل را تست کنید.
* پروژه‌ها را با لینک زنده (Live Demo) و لینک کد (GitHub) نشان دهید.
* صفحه تماس یا لینک‌های شبکه اجتماعی را واضح و در دسترس بگذارید.

== منابع بیشتر ==
* [https://developer.mozilla.org/fa/ مستندات MDN (مرجع کامل HTML/CSS/JS)]
* [[Git]]
* [[صفحهٔ اصلی]]