HTML CSS JS و ساخت پورتفولیو

مقدمه

HTML، CSS و JavaScript سه پایه اصلی وب‌سازی هستند:

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

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

ساختار استاندارد یک صفحه HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>عنوان سایت</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- محتوای سایت اینجا -->
    <script src="script.js"></script>
</body>
</html>

ساختار معمول یک صفحه پورتفولیو

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

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

طراحی واکنش‌گرا (Responsive)

سایت باید در موبایل، تبلت و دسکتاپ درست نمایش داده شود.

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Flexbox (چیدمان ساده)

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Grid (چیدمان جدولی/پیچیده‌تر)

.projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

سوییچ زبان (فارسی/انگلیسی)

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

منوی موبایل (Hamburger Menu)

const menuBtn = document.querySelector(".menu-btn");
const navMenu = document.querySelector(".nav-menu");

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

اسکرول نرم به بخش‌ها (Smooth Scroll)

document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener("click", function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute("href"))
            .scrollIntoView({ behavior: "smooth" });
    });
});

نکات کلی برای یک پورتفولیوی خوب

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

منابع بیشتر

• مستندات MDN (مرجع کامل HTML/CSS/JS)
• Git
• صفحهٔ اصلی