ساخت صفحه اصلی پرتفولیو در Next.js: Hero، مهارت‌ها و CTA

در پست قبل، ساختار اصلی پروژه را با Tailwind CSS و یک تم آبی تیره برای سایت آماده کردیم. حالا وقت آن است که صفحه اصلی پرتفولیو را کامل‌تر کنیم؛ صفحه‌ای که هویت، تخصص و مسیرهای مهم سایت را به کاربر نشان میدهد.

در این پست این بخش‌ها را می‌سازیم:

• Hero section
• معرفی کوتاه
• نمایش مهارت‌ها
• CTA برای هدایت کاربر به پروژه‌ها و بلاگ
• تفکیک هر بخش به کامپوننت مستقل

---

صفحه اصلی چه هدفی دارد؟

صفحه اصلی مهم‌ترین نقطه شروع برای بازدیدکننده است. اگر این صفحه درست طراحی شود، کاربر خیلی سریع متوجه می‌شود:

1. شما چه کسی هستید
2. در چه حوزه‌ای کار می‌کنید
3. چه تکنولوژی‌هایی بلد هستید
4. باید به کدام بخش سایت برود

در یک پرتفولیوی شخصی، Home Page قرار نیست همه چیز را کامل توضیح دهد؛ بلکه باید یک نمای کلی شفاف و حرفه‌ای ارائه کند و کاربر را به بخش‌های اصلی مثل پروژه‌ها، بلاگ و درباره من هدایت کند.

---

طراحی Hero

بخش Hero اولین چیزی است که کاربر می‌بیند، پس باید واضح، خوانا و مستقیم باشد. در این بخش معمولاً این موارد قرار می‌گیرند:

• نام یا برند شخصی
• عنوان شغلی یا تخصص
• یک توضیح کوتاه
• دکمه‌های اصلی برای هدایت کاربر

ابتدا یک کامپوننت جدا برای Hero می‌سازیم:

// components/sections/hero-section.tsx
import Link from 'next/link'

export function HeroSection() {
  return (
    <section className="py-16 sm:py-20 lg:py-24">
      <div className="mx-auto max-w-3xl text-center">
        <p className="text-xs uppercase tracking-[0.3em] text-cyan-400">
          Full-Stack Developer
        </p>

        <h1 className="mt-4 text-4xl font-bold tracking-tight text-slate-50 sm:text-5xl lg:text-6xl">
          Matin Shokri
        </h1>

        <p className="mt-6 text-base leading-7 text-slate-300 sm:text-lg">
          I build modern, scalable web applications with Next.js, React,
          Prisma, and Tailwind CSS.
        </p>

        <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
          <Link
            href="/projects"
            className="inline-flex items-center justify-center rounded-md bg-cyan-500 px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-cyan-400"
          >
            View Projects
          </Link>

          <Link
            href="/blog"
            className="inline-flex items-center justify-center rounded-md border border-slate-700 bg-slate-900 px-6 py-3 text-sm font-semibold text-slate-200 transition hover:border-slate-600 hover:bg-slate-800"
          >
            Read Blog
          </Link>
        </div>
      </div>
    </section>
  )
}

چرا این ساختار مناسب است؟

• عنوان اصلی با h1 کاملاً واضح است.
• زیرعنوان خیلی کوتاه و مستقیم، تخصص را توضیح می‌دهد.
• دو CTA اصلی داریم:
  • یکی برای پروژه‌ها
  • یکی برای بلاگ
• رنگ cyan به‌عنوان accent با تم آبی تیره سایت هماهنگ است.

---

معرفی کوتاه

بعد از Hero، بهتر است یک بخش کوتاه برای معرفی اضافه کنیم. این قسمت قرار نیست بیوگرافی کامل باشد؛ فقط باید در چند خط بگوید چه نوع توسعه‌دهنده‌ای هستید و روی چه چیزهایی تمرکز دارید.

// components/sections/about-snippet.tsx
export function AboutSnippet() {
  return (
    <section className="py-12">
      <div className="mx-auto max-w-3xl rounded-2xl border border-slate-800 bg-slate-900/70 p-6 sm:p-8">
        <h2 className="text-2xl font-semibold tracking-tight text-slate-50">
          About Me
        </h2>

        <p className="mt-4 text-sm leading-7 text-slate-300 sm:text-base">
          I am a full-stack developer focused on building clean, performant,
          and maintainable web applications. I enjoy working across both the
          frontend and backend, designing user-friendly interfaces and building
          reliable application architecture with modern tools.
        </p>
      </div>
    </section>
  )
}

نکات این بخش

• از یک کارت با rounded-2xl و border استفاده کردیم تا از بقیه صفحه جدا شود.
• متن کوتاه است و روی ارزش کاری تمرکز دارد.
• این بخش می‌تواند بعداً به صفحه کامل about لینک داده شود.

---

نمایش مهارت‌ها

یکی از مهم‌ترین بخش‌های پرتفولیو، نمایش مهارت‌هاست. این قسمت کمک می‌کند کاربر خیلی سریع بفهمد با چه ابزارهایی کار می‌کنی.

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

// components/sections/skills-section.tsx
const skills = [
  'Next.js',
  'React',
  'TypeScript',
  'JavaScript',
  'Prisma',
  'PostgreSQL',
  'Tailwind CSS',
  'Zod',
  'Cloudinary',
  'Git',
]

export function SkillsSection() {
  return (
    <section className="py-12">
      <div className="mb-8 text-center">
        <h2 className="text-2xl font-semibold tracking-tight text-slate-50">
          Core Skills
        </h2>
        <p className="mt-2 text-sm text-slate-400">
          Technologies I use to build modern web applications.
        </p>
      </div>

      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
        {skills.map((skill) => (
          <div
            key={skill}
            className="rounded-xl border border-slate-800 bg-slate-900/70 px-4 py-5 text-center text-sm font-medium text-slate-200 transition hover:-translate-y-1 hover:border-cyan-500/40 hover:bg-slate-900"
          >
            {skill}
          </div>
        ))}
      </div>
    </section>
  )
}

چرا این مدل خوب است؟

• لیست مهارت‌ها تمیز و سریع‌الفهم است.
• از آیکون‌های اضافی صرف‌نظر کردیم تا تمرکز روی نام تکنولوژی‌ها باشد.
• ساختار grid باعث می‌شود در موبایل و دسکتاپ به‌خوبی نمایش داده شود.
• افکت hover خیلی ملایم است و حس مدرن‌تری به UI می‌دهد.

اگر بعداً بخواهی، می‌توانیم این بخش را با lucide-react یا لوگوهای SVG حرفه‌ای‌تر هم ارتقا بدهیم.

---

CTA برای پروژه‌ها و بلاگ

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

// components/sections/cta-section.tsx
import Link from 'next/link'

export function CtaSection() {
  return (
    <section className="py-16">
      <div className="mx-auto max-w-4xl rounded-2xl border border-slate-800 bg-slate-900/80 p-8 text-center sm:p-10">
        <h2 className="text-3xl font-semibold tracking-tight text-slate-50">
          Explore My Work and Writing
        </h2>

        <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">
          You can browse my recent projects to see how I approach design and
          development, or read my blog posts where I share technical notes and
          implementation details.
        </p>

        <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
          <Link
            href="/projects"
            className="inline-flex items-center justify-center rounded-md bg-cyan-500 px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-cyan-400"
          >
            Explore Projects
          </Link>

          <Link
            href="/blog"
            className="inline-flex items-center justify-center rounded-md border border-slate-700 bg-transparent px-6 py-3 text-sm font-semibold text-slate-200 transition hover:bg-slate-800"
          >
            Visit Blog
          </Link>
        </div>
      </div>
    </section>
  )
}

نقش این بخش

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

---

تفکیک sectionها به کامپوننت

یکی از کارهای مهم در پروژه‌های Next.js این است که صفحه را به بخش‌های کوچک‌تر و reusable تقسیم کنیم. به‌جای اینکه همه JSX را داخل app/page.tsx قرار بدهیم، هر section را به یک کامپوننت مستقل تبدیل می‌کنیم.

ساختار پوشه‌ها می‌تواند این‌طور باشد:

components/
├── layout/
│   ├── container.tsx
│   ├── footer.tsx
│   └── header.tsx
└── sections/
    ├── about-snippet.tsx
    ├── cta-section.tsx
    ├── hero-section.tsx
    └── skills-section.tsx

حالا در صفحه اصلی این sectionها را کنار هم قرار می‌دهیم:

// app/page.tsx
import { AboutSnippet } from '@/components/sections/about-snippet'
import { CtaSection } from '@/components/sections/cta-section'
import { HeroSection } from '@/components/sections/hero-section'
import { SkillsSection } from '@/components/sections/skills-section'

export default function HomePage() {
  return (
    <article>
      <HeroSection />
      <AboutSnippet />
      <SkillsSection />
      <CtaSection />
    </article>
  )
}

مزیت این تفکیک

• app/page.tsx بسیار تمیزتر می‌شود.
• هر section را می‌توان جداگانه تغییر داد یا توسعه داد.
• تست و نگهداری کد راحت‌تر می‌شود.
• اگر بعداً خواستی بعضی sectionها را در صفحات دیگر هم استفاده کنی، آماده هستند.

---

جمع‌بندی

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

• یک Hero section برای معرفی سریع
• یک معرفی کوتاه درباره خودت
• یک بخش مهارت‌ها برای نمایش stack فنی
• یک CTA نهایی برای هدایت کاربر به پروژه‌ها و بلاگ
• و در نهایت، همه چیز را به کامپوننت‌های مستقل تقسیم کردیم